讀后感:基礎(chǔ)性知識撵术,很多適合新手的干貨嚼黔,讀起來很輕松盖呼。書內(nèi)提供的案例有一定年代感蠢挡,擬物化確實比扁平化的認(rèn)知難度要高弧岳。
第一章 導(dǎo)航
主要導(dǎo)航模式:跳板式(Springboard)、列表菜單式(List Menu)业踏、選項卡菜單式(Tab Menu)禽炬、陳列館式(Gallery)、儀表式(Dashboard)勤家、隱喻式(Metaphor)腹尖、超級菜單式(Mega Menu)。
次級導(dǎo)航模式:頁面輪盤式(Page Carousel)却紧、圖片輪盤式(Image Carousel)桐臊、擴展列表式(Expanding List)
1.1主要導(dǎo)航模式
完美的導(dǎo)航設(shè)計能讓用戶根據(jù)直覺使用應(yīng)用程序,也能讓用戶非常容易地完成所有任務(wù)晓殊。
1.1.1跳板式
跳板式導(dǎo)航的特征是——登錄界面中的菜單選項就是進入各個應(yīng)用的起點断凶。
常見的布局形式是3×3、2×3巫俺、2×2和1×2的網(wǎng)格(見圖1-6)认烁。但跳板式導(dǎo)航不一定非要拘泥于網(wǎng)格布局,你可以成比例地放大某些選項介汹,以彰顯其重要性却嗡。個性化的跳板式導(dǎo)航可在顯示菜單選項的同時顯示用戶個人資料。通常會提供自定義功能嘹承,允許用戶改變跳板式導(dǎo)航的布局窗价。
為同等重要的內(nèi)容項使用網(wǎng)格布局,為相比之下更為重要的內(nèi)容項使用不規(guī)則布局形式叹卷。視情況使用個性化設(shè)置和自定義選項撼港。
1.1.2列表菜單式
列表菜單式導(dǎo)航與跳板式導(dǎo)航的共同點在于,每個菜單項都是進入應(yīng)用各項功能的入口點骤竹。這種導(dǎo)航有很多種變化形式帝牡,包括個性化列表菜單(Personalized List Menu)、分組列表(Grouped List)和增強列表(Enhanced List)等蒙揣。
列表菜單很適合用來顯示較長或擁有次級文字內(nèi)容的標(biāo)題靶溜。使用列表菜單的應(yīng)用要在所有次級屏幕內(nèi)提供一個選項,用來返回菜單列表。通常的做法是在標(biāo)題欄上顯示一個帶有列表圖標(biāo)或“菜單”字樣的按鈕罩息。
1.1.3選項卡式
選項卡式導(dǎo)航在不同的操作系統(tǒng)上有不同表現(xiàn)嗤详,對于選項卡的定位和設(shè)計,不同操作系統(tǒng)有不同的規(guī)則扣汪。
為已選擇的菜單項設(shè)置不同的視覺效果断楷,用戶就能清晰地知道自己選擇了哪一項。使用易于識別或帶有標(biāo)簽的圖標(biāo)崭别。
1.1.4陳列館式
陳列館式的設(shè)計通過在平面上顯示各個內(nèi)容項來實現(xiàn)導(dǎo)航,主要用來顯示一些文章恐锣、菜譜茅主、照片、產(chǎn)品等土榴,可以布局成輪盤诀姚、網(wǎng)格或用幻燈片演示。
陳列館式導(dǎo)航能很好地應(yīng)用于用戶需要經(jīng)常瀏覽玷禽,頻繁更新的內(nèi)容赫段。
1.1.5儀表式
儀表式導(dǎo)航提供了一種度量關(guān)鍵績效指標(biāo)(Key Performance Indicators,KPI)是否達(dá)到要求的方法矢赁。經(jīng)過設(shè)計以后糯笙,每一項量度都可以顯示出額外的信息。這種主要的導(dǎo)航模式對于商業(yè)應(yīng)用撩银、分析工具以及銷售和市場應(yīng)用非常有用给涕。
不要使用過多的儀表式導(dǎo)航。你需要開展研究才能決定應(yīng)該對哪些關(guān)鍵量度采用儀表式導(dǎo)航额获。
1.1.6隱喻式
這種導(dǎo)航的特點是用頁面模仿應(yīng)用的隱喻對象够庙。
一定要謹(jǐn)慎地使用隱喻式導(dǎo)航,蹩腳的模仿很可能造成10.1節(jié)出現(xiàn)的反模式 (anti-Pattern)抄邀。
1.1.7超級菜單式
移動設(shè)備上的超級菜單式導(dǎo)航與網(wǎng)站所用的超級菜單導(dǎo)航類似耘眨,它在一個較大的覆蓋面板上分組顯示已定義好格式的菜單選項。
在選擇導(dǎo)航模式之前境肾,首先要確定信息架構(gòu)剔难。如果要導(dǎo)航的對象僅僅是應(yīng)用中少數(shù)主要內(nèi)容,就可以使用選項卡之類的導(dǎo)航模式准夷。
1.2次級導(dǎo)航模式
所謂的次級導(dǎo)航(Secondary Navigation)是指那些位于某個頁面或是模塊內(nèi)的導(dǎo)航钥飞。所有的主要導(dǎo)航模式都可以用作次級導(dǎo)航。還有一些其他的導(dǎo)航模式也可作為次級導(dǎo)航衫嵌,但不太適合用作主要導(dǎo)航:頁面輪盤式读宙、圖片輪盤式、行內(nèi)擴展式楔绞。
1.2.1頁面輪盤式
操作者可利用“滑動”操作快速瀏覽一系列離散的頁面结闸。頁面指示器(Page Indicator唇兑,iOS中的術(shù)語,指用來表示頁面數(shù)量的小點)可以顯示出導(dǎo)航中的頁面數(shù)量桦锄;執(zhí)行“滑動”操作可以顯示下一頁扎附。(例:banner)但數(shù)量不可過多。
頁面輪盤式導(dǎo)航可以很好地實現(xiàn)少量頁面的導(dǎo)航结耀。利用直觀的指示器來表明總屏數(shù)和當(dāng)前所處的位置留夜。頁面輪盤式導(dǎo)航通常用“滑動”動作實現(xiàn)操作。
1.2.2圖片輪盤式
圖片輪盤式導(dǎo)航能很好地顯示清新悅目內(nèi)容图甜,如藝術(shù)品碍粥、產(chǎn)品或照片等。無論是使用箭頭黑毅、部分圖片內(nèi)容或是頁面指示器(點)嚼摩,它都能提供良好的視覺化功能可見性,以此告知用戶有更多的內(nèi)容可以訪問矿瘦。
1.2.3擴展列表式
擴展列表式導(dǎo)航通過下拉屏幕顯示更多的信息枕面。這種導(dǎo)航模式多見于網(wǎng)站的移動版本,移動應(yīng)用中使用較少缚去,但在這兩種情況下都能很好地工作潮秘。
擴展列表式導(dǎo)航能很好地逐步顯示某個內(nèi)容項的更多細(xì)節(jié)或選項。
第二章 表單
常見表單模式:登錄表單(Sign In)病游、注冊表單(Registration)唇跨、核對表單(Checkout)、計算表單(Calculate)衬衬、搜索表單(Search Criteria)买猖、多步驟表單(Multi-step)、長表單(Long Form)滋尉。
2.1登錄表單
登錄表單應(yīng)該只包括少量的信息輸入:用戶名玉控、密碼、操作按鈕狮惜、密碼幫助高诺、注冊選項等。a.有些應(yīng)用將這些信息輸入框設(shè)計在一屏內(nèi)顯示碾篡。b.另外一些應(yīng)用虱而,則首先顯示“登錄”或“注冊”選項,然后根據(jù)用戶的選擇將其導(dǎo)向相應(yīng)的表單开泽。c.有一種登錄表單直接拋棄了用戶名輸入框牡拇,只要求用戶輸入密碼。在安裝應(yīng)用時,用戶就已經(jīng)具備了使用權(quán)限惠呼,只要再輸入密碼就可以訪問敏感數(shù)據(jù)了导俘。這種形式多見于金融領(lǐng)域的應(yīng)用,
不要自己“獨創(chuàng)”登錄表單剔蹋,采用常見的設(shè)計方案旅薄,這樣更易于用戶登錄。提供取回已忘記密碼的方式泣崩。
2.2注冊表單
a.注冊表單與登錄表單一樣少梁,應(yīng)該只包括少量的信息輸入。(如果注冊步驟太繁瑣律想,會降低表單填寫的成功率)b.注冊表單有可能是你為應(yīng)用設(shè)計的第一個表單猎莲,所以設(shè)計的標(biāo)簽應(yīng)當(dāng)易于閱讀。不要把標(biāo)簽和輸入框水平排列技即,而應(yīng)該采用垂直排列的方式。(此點有待商榷)c.適當(dāng)?shù)臅r候樟遣,以內(nèi)聯(lián)(Inline)的形式顯示反饋信息而叼。
注冊界面應(yīng)該簡潔明了,最好在一屏內(nèi)顯示完所有要填的信息豹悬,注冊按鈕應(yīng)該顯示在同一屏幕內(nèi)葵陵。確保已注冊用戶能很容易地登錄。
2.3核對表單
a.與使用應(yīng)用程序核對信息相比瞻佛,更常見的方式是通過專門為移動設(shè)備優(yōu)化后的網(wǎng)站核對信息脱篙,但兩者的設(shè)計原則是相通的。b.在核對表單中使用設(shè)備的標(biāo)準(zhǔn)控制方法伤柄。c.把多屏信息合并到一個核對表單中绊困。d.提供快速核對機制,比如核對已存儲的名片信息适刀,或通過登錄核對信息秤朗。e.在標(biāo)題處顯示安全鎖來向用戶表明當(dāng)前連接是安全的。f.使用信息核對向?qū)А?/p>
把提升速度笔喉、效率和讓用戶放心作為設(shè)計目標(biāo)取视。去掉不必要的輸入域,減少頁面和操作步驟常挚。
2.4計算表單
計算器類的應(yīng)用作谭,例如體重跟蹤、稅款預(yù)估以及貸款計算器奄毡,需要輸入信息折欠。雖然這些表單可以采用常見的操作和布局方式,但也不能忽視可讀性方面的基本設(shè)計原則≡乖停——對齊方式傀缩、標(biāo)簽、字體农猬、按鈕位置赡艰、數(shù)據(jù)比較方式、色彩搭配等所有方面都影響著移動表單的可用性斤葱。
使用標(biāo)準(zhǔn)的表單設(shè)計和布局原則慷垮。如果可以,在同一頁面內(nèi)顯示計算結(jié)果揍堕,位置盡量明顯料身。
2.5搜索表單
某些搜索功能要求用戶輸入多個約束條件或標(biāo)準(zhǔn),才能找出搜索結(jié)果衩茸。與其他表單模式一樣芹血,搜索表單也應(yīng)該只包括必要的輸入項,并提供合理的默認(rèn)值楞慈。
不要讓太多的搜索選項嚇到用戶幔烛,把搜索條件控制在一頁之內(nèi)。采用能夠通過手指囊蓝,方便且快速操作的控制方式饿悬。
2.6多步驟表單
移動設(shè)備的屏幕較小,沒有足夠的物理空間聚霜,無法像網(wǎng)絡(luò)應(yīng)用那樣顯示臃腫的多步驟表單操作向?qū)Ы铺瘢孕枰@示當(dāng)前操作步驟和總步驟數(shù),遵循導(dǎo)航設(shè)計的基本可用性原則:讓用戶知道自己在哪里蝎宇,將要往哪里去(也就是位于第x步弟劲,總步數(shù)為y步)。如果操作流程很長夫啊,就多加幾個步驟表單函卒。清晰的導(dǎo)航對移動表單尤為重要,因為用戶使用移動設(shè)備時被打斷或走神的概率更高撇眯。
告知用戶當(dāng)前所在的位置和將要去的地方报嵌。去掉不必要的輸入域,最小化頁面和操作步驟的數(shù)量熊榛。
2.7長表單
某些表單可能會需要滾動屏幕才能瀏覽完锚国。長表單的最精妙之處在于,它用命令取代了按鈕玄坦。設(shè)計時要注意沿用最好的表單設(shè)計經(jīng)驗血筑,遵循特定操作系統(tǒng)的按鈕排列順序和排列準(zhǔn)則绘沉。
不要人為地把表單劃分成一些步驟來避免屏幕的滾動。堅決要去掉那些不必要的輸入域豺总。遵循特定操作系統(tǒng)中按鈕布局的標(biāo)準(zhǔn)车伞。
第三章 表格和列表
常見表格模式:基本表格(Basic Table)、無表頭表格(Headerless Table)喻喳、行分組表格(Grouped Row)另玖、固定列表格(Fixed Column)、級聯(lián)式列表(CascadingList)表伦、可編輯表格(Editable Table)谦去、帶有視覺指示器的表格(Tables with VisualIndicator)、帶有內(nèi)容總覽和數(shù)據(jù)的表格(Overview plus Data)等蹦哼。
3.1基本表格
這是表格的標(biāo)準(zhǔn)模式鳄哭,其中的列數(shù)據(jù)有固定的表頭,表格呈網(wǎng)格式布局纲熏。為表內(nèi)的行設(shè)定不同的顏色(這種形式也稱為斑馬紋)妆丘,或者在各行之間用細(xì)線分割,都能提升表格的可讀性局劲。
不要使用暗色的網(wǎng)格線和垂直分割方式飘痛。文字左對齊,數(shù)字右對齊容握。一屏幕內(nèi)顯示的表格內(nèi)容不宜過多。如果要在單個屏幕內(nèi)顯示大量信息车柠,請采用其他方式剔氏。
3.2無表頭表格
無表頭表格的特征是——沒有列標(biāo)簽,用較寬的行顯示某一對象的多項信息竹祷。通常的做法是谈跛,用較大的字號顯示行標(biāo)記,用較小的字號顯示細(xì)節(jié)內(nèi)容塑陵。這種表格模式非常適合用來顯示項目集合(如存貨清單感憾、食譜、相冊等)和這些項的搜索結(jié)果令花。與列表類似阻桅,這種形式能方便用戶快速瀏覽和選擇。
每一寬行內(nèi)最多顯示三行信息兼都。不太重要的細(xì)節(jié)內(nèi)容使用較小嫂沉、淺色的字體。不要自己猜測什么信息最重要扮碧,而要詢問客戶的意見趟章,然后作出行之有效的設(shè)計杏糙。
3.3固定列表格的表格
對于較大的表格,固定某一列或某幾列是個可行的做法蚓土。例:最左邊的一列固定宏侍,其他列滾動顯示∈衿幔或同時固定屏幕左邊和右邊的列谅河,在中間區(qū)域滾動顯示內(nèi)容,要注意用戶可以執(zhí)行滑動操作的區(qū)域不要過小嗜愈。
為固定的列設(shè)計比較醒目的樣式旧蛾,以提示用戶,滑動操作能瀏覽更多的數(shù)據(jù)蠕嫁。
3.4帶有內(nèi)容總覽和數(shù)據(jù)的表格
帶有內(nèi)容總覽和數(shù)據(jù)的表格模式指在表格各數(shù)據(jù)行上方顯示表格內(nèi)容的總覽锨天。
表格內(nèi)容總覽應(yīng)該顯示在數(shù)據(jù)上方,且要一目了然剃毒。
3.5行分組表格
對表格的行進行分組能讓用戶更容易地了解表格內(nèi)的數(shù)據(jù)病袄。行分組的作用類似于各個部分的標(biāo)題。
在表格中為內(nèi)容總結(jié)行設(shè)定與其他行不同的視覺效果赘阀。
3.6級聯(lián)式列表
iOS將這種表格模式稱為表格視圖益缠,它是一個在多行單列內(nèi)顯示數(shù)據(jù)的UI元素。
使用較為寬泛的信息結(jié)構(gòu)可以避免在應(yīng)用內(nèi)產(chǎn)生較深的層次(多于3層)基公。如果用級聯(lián)式列表來導(dǎo)航用戶自定義的信息結(jié)構(gòu)幅慌,則可能無法避免產(chǎn)生很多界面層次。
3.7帶有視覺指示器的表格
火花譜線(Sparkline)和圖標(biāo)能提升表格的信息顯示效果轰豆,可以讓用戶更容易地找到自己所關(guān)注的內(nèi)容胰伍。
使用那些用戶能夠迅速識別的視覺化指示器,去掉那些不必要的圖標(biāo)酸休。
3.8可編輯表格
網(wǎng)絡(luò)應(yīng)用中可編輯表格的很多設(shè)計原則都可用于移動終端的界面設(shè)計:
?清晰地顯示出當(dāng)前所選擇的單元格和/或行;
?如果單元格有特定的格式骂租,提供對應(yīng)的編輯器(選擇器、微調(diào)控制項斑司、顏色選擇器渗饮、數(shù)據(jù)選擇器......);
?在用戶執(zhí)行保存操作時顯示反饋和錯誤信息,而不是在更改表格時顯示宿刮。
與網(wǎng)絡(luò)應(yīng)用不同的是互站,移動設(shè)備上的可編輯表格不適合用來輸入大量數(shù)據(jù),因為大部分移動設(shè)備的鍵盤都不支持鍵盤導(dǎo)航(尤其是基于Tab鍵的切換操作)糙置。
網(wǎng)絡(luò)程序和桌面應(yīng)用程序設(shè)計之間的權(quán)衡為可編輯表格提供了豐富的可參考經(jīng)驗云茸。不要為大量數(shù)據(jù)輸入使用可編輯表格,當(dāng)需要有大量可編輯元素時谤饭,也不要使用這種表格模式标捺。
第四章 搜索懊纳、分類和過濾
常見模式:顯性搜索(Explicit Search)、自動補全搜索(Auto-complete)亡容、范圍搜索(Scoped Search)嗤疯、保存搜索記錄并顯示最近搜索內(nèi)容(Saved & Recent)、搜索標(biāo)準(zhǔn)(表單)(Search Criteria (form))闺兢、搜索結(jié)果(Search Result)茂缚、屏內(nèi)分類(OnscreenSort)、分類排序選擇器(Sort Order Selector)屋谭、分類表單(Sort Form)脚囊、屏內(nèi)過濾(Onscreen filter)、過濾容器(Filter Drawer)桐磁、過濾對話框(Filter Dialog)悔耘、過濾表單(Filter Form)。
未完待續(xù)....