手機(jī)界面常用導(dǎo)航設(shè)計(jì)分析

1、手機(jī)界面常用導(dǎo)航設(shè)計(jì)分析所謂的交互設(shè)計(jì)，其實(shí)設(shè)計(jì)的就是人如何向機(jī)器發(fā)送指令，機(jī)器如何向人傳達(dá)信息，一來(lái)一往是為交互。當(dāng)要傳達(dá)的信息量很少時(shí)，好辦，就像Google的搜索框那樣，往白底上一放就行了。但當(dāng)?shù)鹊叫畔⑹呛Ａ康?、在一屏上難以全部呈現(xiàn)時(shí)，就需要有效地組織信息，將部分信息先隱藏起來(lái)，待到用戶需要時(shí)再將用戶引導(dǎo)到那里。在界面設(shè)計(jì)中，廣義地來(lái)講，從一組信息向另一組信息轉(zhuǎn)移的的過(guò)程，就稱之為導(dǎo)航。明確了定義，我們就該知道，一個(gè)好的導(dǎo)航設(shè)計(jì)應(yīng)該讓用戶明白：1. 現(xiàn)在在哪兒 2. 以前去過(guò)哪兒 3. 將來(lái)應(yīng)該/能夠去哪兒 4. 怎么去 5. 怎么回 判斷一個(gè)導(dǎo)航方式設(shè)計(jì)的是否合理，也可以利用這幾條一條

2、條比對(duì)一下。下面，讓我們來(lái)看一下手機(jī)界面中常用的導(dǎo)航方式。一、拖動(dòng)定義：手指在屏幕上按下，向某方向平移。適用情景：若要呈現(xiàn)的信息超出一屏所能容納的范圍，則在符合用戶心理模型的前提下，可以將內(nèi)容在一維或者兩維德方向上排布，用拖動(dòng)屏幕內(nèi)容的方式來(lái)瀏覽所有信息。例如，很長(zhǎng)的文章、電子書(shū)、列表（縱向的一維），一年內(nèi)的詳細(xì)股價(jià)折線圖（橫向的一維），地圖、1:1顯示的網(wǎng)頁(yè)和圖片（二維）討論：沒(méi)錯(cuò)，你沒(méi)有看錯(cuò)，這是觸摸屏手機(jī)上最簡(jiǎn)單、最土鱉也最基礎(chǔ)的手勢(shì)。按照對(duì)導(dǎo)航的定義，這確實(shí)是一種導(dǎo)航方式，用戶可以向某個(gè)方向拖動(dòng)屏幕，去瀏覽當(dāng)前屏幕以外的信息。用戶很容易學(xué)會(huì)使用這種導(dǎo)航方式，就是把擋在邊框外的內(nèi)容拖進(jìn)來(lái)

3、看嘛。最簡(jiǎn)單的方式，往往也最有效的。完美無(wú)止境：雖然這是最土鱉的導(dǎo)航方式，但是為了設(shè)計(jì)一個(gè)符合剛才所列5項(xiàng)基本原則的導(dǎo)航，還是有很多創(chuàng)意可玩的。KnotGuide在同一頁(yè)上顯示了繩結(jié)的示意圖和解說(shuō)。過(guò)長(zhǎng)的解說(shuō)文字需要先隱藏一部分，拖動(dòng)瀏覽全部。為了讓用戶知道將來(lái)能夠去哪里(3)，它給文字的底部蒙了一層半透效果，以暗示還有一部分沒(méi)展示，可以繼續(xù)往下看。同時(shí)，在剛進(jìn)入該頁(yè)面時(shí)，文字區(qū)右側(cè)的scrollbar會(huì)短暫顯示23秒，再消失，這也能起到同樣的暗示效果（這可能是Android平臺(tái)內(nèi)置的默認(rèn)效果）。aCurrency將暫時(shí)無(wú)法展示的多種匯率橫向排布在屏幕外。為了展示將來(lái)能夠去哪里(3)，它將藏起

4、來(lái)的部分漏了一點(diǎn)出來(lái)，折在當(dāng)前頁(yè)的后面。沒(méi)記錯(cuò)的話，這種設(shè)計(jì)應(yīng)該是從Mac的文件和唱片瀏覽上得到的靈感。最經(jīng)典的拖動(dòng)導(dǎo)航還是應(yīng)屬iPhone的homescreen。在homescreen上，Apple設(shè)計(jì)了一個(gè)位置指示器。這可以幫助用戶很容易地理解當(dāng)前在哪里(1)，可以去哪里(3)。同時(shí)，在拖動(dòng)屏幕的時(shí)候，Apple也設(shè)計(jì)了平移的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，這很好的幫助用戶理解怎么去(4)，怎么回(5)。當(dāng)網(wǎng)頁(yè)內(nèi)容大于屏幕展示范圍時(shí)，Android內(nèi)置的瀏覽器會(huì)在用戶拖動(dòng)網(wǎng)頁(yè)的時(shí)候在屏幕的下側(cè)和右側(cè)展示兩個(gè)灰色的scrollbar，暗示用戶當(dāng)前所處的位置(1)，以及可以往哪里移動(dòng)(2)。二、一維條目定義：將每一

5、項(xiàng)信息列作一條，展示在縱向的條目里。適用情景：信息可以梳理為很多項(xiàng)目，項(xiàng)目與項(xiàng)目之間沒(méi)有概念上的交集，總體數(shù)量在15個(gè)以內(nèi)，再多就得考慮多分一級(jí)了。它非常適合展示層次分明的分級(jí)結(jié)構(gòu)，一層層地drilldown下去，條理很清晰。討論：一維條目是手機(jī)界面設(shè)計(jì)中較為樸素和常見(jiàn)的一種導(dǎo)航方式。每一項(xiàng)都可以在點(diǎn)擊之后進(jìn)入下一級(jí)。但是展示的項(xiàng)目不宜過(guò)多，在信息的海洋里晃來(lái)晃去找不到想要的東西是很讓人懊惱的。如果一級(jí)上面的項(xiàng)目太多，就可以考慮做一下歸類，再分一級(jí)下去。完美無(wú)止境：為了讓用戶知道應(yīng)該選擇哪一項(xiàng)(3)，條目都會(huì)用最大的尺寸去展示標(biāo)題。同時(shí)，還會(huì)有一些輔助內(nèi)容幫助用戶判斷，比如該項(xiàng)包含的內(nèi)容、該項(xiàng)

6、當(dāng)前的狀態(tài)、該項(xiàng)下未讀過(guò)的子項(xiàng)目、圖標(biāo)。如果項(xiàng)目過(guò)多，又不想再分一級(jí)，可以將項(xiàng)目分組，加上名字并在視覺(jué)上加以處理。由于iPhone上沒(méi)有“back”，它設(shè)計(jì)了統(tǒng)一的導(dǎo)航規(guī)則。表“返回”的按鍵始終在屏幕上角(5)，表“完成”的按鍵始終在右上角。同時(shí)，按鍵上還會(huì)寫(xiě)上“返回至哪里”。將進(jìn)過(guò)的項(xiàng)目和未進(jìn)的項(xiàng)目區(qū)別開(kāi)來(lái)，用戶可以知道去過(guò)哪兒(2)，還可以去哪兒(3)。這個(gè)鋼琴模擬器其實(shí)也可以視作縱向一維條目。右側(cè)的這個(gè)位置指示器可以視作一個(gè)做了個(gè)性優(yōu)化的Scrollbar，可以拖動(dòng)以改變當(dāng)前位置(4,5)，也可以展示當(dāng)前的位置 (1)。將列表項(xiàng)目按某個(gè)規(guī)則排序，并且將排序標(biāo)題展示出來(lái)可以增加用戶對(duì)長(zhǎng)列表

7、的容忍度，同時(shí)也能暗示用戶當(dāng)前的位置(1)，以及為找到相應(yīng)的項(xiàng)目接下來(lái)該怎么走(3)。小Tips：在條目上可以加上一些常用的動(dòng)作按鍵，方便用戶一次點(diǎn)擊即滿足目標(biāo)。為長(zhǎng)條目適時(shí)地提供一些加速滾動(dòng)的工具會(huì)很有幫助。在用戶拖動(dòng)時(shí)，可以碩大的尺寸告知當(dāng)前的位置(1)。當(dāng)點(diǎn)擊條目進(jìn)入下一級(jí)時(shí)，如果預(yù)測(cè)到用戶的需求只是暫時(shí)的，很快會(huì)返回去瀏覽其他項(xiàng)，那么可以考慮將子項(xiàng)目在當(dāng)前頁(yè)面上展開(kāi)，而非進(jìn)入下一項(xiàng)。具體如何展開(kāi)，花樣怎么玩，可以自己想點(diǎn)子。三、二維圖標(biāo)定義：將項(xiàng)目在二維平面上排布，點(diǎn)擊項(xiàng)目，進(jìn)入子級(jí)。適用情景：用于甄別項(xiàng)目身份的信息可以在一個(gè)正方形區(qū)域內(nèi)展示。比如圖標(biāo)，但絕不僅限于圖標(biāo)哦。我寫(xiě)的這么抽

8、象拗口，就是想讓大家把思路打開(kāi)。任何能滿足這一點(diǎn)的信息呈現(xiàn)方式都可以，目的只有一個(gè)，讓用戶知道該點(diǎn)什么。討論：這是跟PC使用習(xí)慣最相似的一種。將二維屏幕分割成一系列方塊，放置一系列項(xiàng)目的入口。其實(shí)，當(dāng)可以明確預(yù)測(cè)用戶需求的時(shí)候，不應(yīng)該用這種導(dǎo)航方式。應(yīng)該直接引導(dǎo)用戶去做任務(wù)。只有當(dāng)不知道用戶到了這個(gè)APP里想搞什么，才得一次展示這么多入口。完美無(wú)止境：項(xiàng)目與項(xiàng)目之間要有明確的區(qū)分，才方便用戶找到想去的項(xiàng)目(3)。當(dāng)不能給每一個(gè)項(xiàng)目做個(gè)圖標(biāo)時(shí)，不妨用用現(xiàn)成的。feedsquare會(huì)把載入博客feed后的圖片拿來(lái)當(dāng)做該博客的圖標(biāo)，很有創(chuàng)意吧。誰(shuí)說(shuō)圖標(biāo)就得是靜態(tài)的。為了告知用戶某個(gè)項(xiàng)目下有新內(nèi)容，值

9、得一看(3)，蘋(píng)果設(shè)計(jì)了紅色的小創(chuàng)可貼。這樣有了推送，看起來(lái)就非常醒目。這也容易訓(xùn)練出很多“點(diǎn)貼貼強(qiáng)迫癥”，不把它消掉很難受啊。如果越策到某些入口更重要，那么可以在視覺(jué)上做些強(qiáng)化。同時(shí)，還可以做一下分組，幫助用戶更快找到想要的入口(3) 。支付寶的界面上圖標(biāo)偏多，如果一定要用圖標(biāo)的話，可以考慮在這兩點(diǎn)上做點(diǎn)小優(yōu)化。并不是每一個(gè)圖標(biāo)都得是信息層級(jí)上的入口，也可以在適當(dāng)?shù)奈恢梅派蟿?dòng)作鍵，比如這里的“新建”。二維展示印象最為深刻的還是iPad上的相冊(cè)。用戶可以用手指分開(kāi)照片堆。照片四散開(kāi)來(lái)的動(dòng)畫(huà)可以很好地暗示用戶該怎么看下一級(jí)(4)，又該怎么回去(5)四、Tab分頁(yè)定義：用始終呈現(xiàn)在屏幕上的幾個(gè)ta

10、b作為進(jìn)入特定某個(gè)類目的入口適用情景：信息可以明確地分為幾類，彼此有很大的區(qū)別；類目之間要經(jīng)常切換討論：Tab在web界面設(shè)計(jì)中是很經(jīng)典的local navigation。它取自于筆記本分頁(yè)的暗喻。用戶可以清晰地知道tab是某個(gè)頁(yè)面露出的頭，按下它就可以展現(xiàn)與之相連的完整頁(yè)面。幾個(gè)Tab始終呈現(xiàn)，怎么切來(lái)切去都不會(huì)迷路。完美無(wú)止境：Tab里面還是可以再放二級(jí)Tab的。這樣就可以呈現(xiàn)兩級(jí)，n*n個(gè)項(xiàng)目了。五、手風(fēng)琴定義：像手風(fēng)琴一樣，只展示某個(gè)條目下的詳細(xì)內(nèi)容，其他條目下的內(nèi)容暫時(shí)折起來(lái)。適用情景：要呈現(xiàn)的項(xiàng)目很多，并且經(jīng)常在這些項(xiàng)目之間做切換。討論：手風(fēng)琴最為經(jīng)典的設(shè)計(jì)還屬Q(mào)Q了，90年代的Q

11、Q就在用Accordion表示分組。后來(lái)改成了現(xiàn)在的樹(shù)狀結(jié)構(gòu)，可能是因?yàn)樗囊曈X(jué)體量感偏重。完美無(wú)止境：當(dāng)瀏覽QQ分組的成員時(shí)，組名欄可能會(huì)移出屏幕。但在QQ手機(jī)版上，組名欄會(huì)在即將移出邊緣時(shí)與下一層脫離，始終頂牢邊緣。這樣可以始終告知用戶當(dāng)前所處的分組。六、下拉目錄定義：屏幕上始終存在一塊區(qū)域，當(dāng)點(diǎn)擊它時(shí)，出現(xiàn)導(dǎo)航總覽。適用情景：需要經(jīng)常在多個(gè)頁(yè)面間切換，分級(jí)結(jié)構(gòu)較為龐大。討論：這塊始終出現(xiàn)在屏幕上的區(qū)域就是用戶的藏寶地圖，通過(guò)它可是隨時(shí)查看全景，并跳到其他節(jié)點(diǎn)。這是我個(gè)人很喜歡的一種導(dǎo)航方式。其設(shè)計(jì)理念很像是去年Amazon改版后的分類導(dǎo)航。完美無(wú)止境：我在移動(dòng)設(shè)備上最早看到這種設(shè)計(jì)，是i

12、Pad的Mail垂直視圖模式。它把inbox里的郵件列表都縮進(jìn)“inbox”這個(gè)按鈕，以展示更多的區(qū)域查看郵件正文。這個(gè)界面給我的啟發(fā)是，彈出來(lái)的導(dǎo)航總攬里還可以有很多花樣好玩，并不只是一個(gè)列表。七、步驟定義：展示向前進(jìn)的按鈕，引導(dǎo)用戶一步步去操作適用情景：當(dāng)需要把任務(wù)分成一個(gè)個(gè)步驟的時(shí)討論：這在web中也是一個(gè)經(jīng)典設(shè)計(jì)，把一個(gè)很長(zhǎng)的任務(wù)流程拆分成很多小頁(yè)面，引導(dǎo)用戶逐漸去完成。Android把“下一步”放到了右側(cè)，這符合人們對(duì)時(shí)間軸的心理模型。并且它的位置恒定，不會(huì)隨著用戶拖動(dòng)瀏覽下面的內(nèi)容而移動(dòng)。完美無(wú)止境：當(dāng)用戶還沒(méi)有完成當(dāng)前頁(yè)面上的任務(wù)時(shí)，下一步就是灰色的，暗示用戶當(dāng)前的活兒還沒(méi)干完。展示當(dāng)前任務(wù)的標(biāo)題，讓用戶心里有譜，知道在做什么。對(duì)于細(xì)分的步驟，也有必要展示當(dāng)前步驟的標(biāo)題，最好再加上類似