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

手機界面常用導(dǎo)航設(shè)計分析\o"下午5:17"2011/04/07

by

\o"查看所有由totry發(fā)布的文章"totry本文來自朱晨的博客雪鸮http://xuexiao.me轉(zhuǎn)載請注明，引自雪鸮-朱晨的博客:xuexiao.me所謂的交互設(shè)計，其實設(shè)計的就是人如何向機器發(fā)送指令，機器如何向人傳達(dá)信息，一來一往是為交互。當(dāng)要傳達(dá)的信息量很少時，好辦，就想Google的搜索框那樣，往白底上一放就行了。但當(dāng)?shù)鹊叫畔⑹呛Ａ康?、在一屏上難以全部呈現(xiàn)時，就需要有效地組織信息，將部分信息先隱藏起來，待到用戶需要時再將用戶引導(dǎo)到那里。在界面設(shè)計中，廣義地來講，從一組信息向另一組信息轉(zhuǎn)移的的過程，就稱之為導(dǎo)航。明確了定義，我們就該知道，一個好的導(dǎo)航設(shè)計應(yīng)該讓用戶明白：現(xiàn)在在哪兒以前去過哪兒將來應(yīng)該/能夠去哪兒怎么去怎么回判斷一個導(dǎo)航方式設(shè)計的是否合理，也可以利用這幾條一條條比對一下。下面，讓我們來看一下手機界面中常用的導(dǎo)航方式。

一、拖動定義：手指在屏幕上按下，向某方向平移。適用情景：若要呈現(xiàn)的信息超出一屏所能容納的范圍，則在符合用戶心理模型的前提下，可以將內(nèi)容在一維或者兩維德方向上排布，用拖動屏幕內(nèi)容的方式來瀏覽所有信息。例如，很長的文章、電子書、列表（縱向的一維），一年內(nèi)的詳細(xì)股價折線圖（橫向的一維），地圖、1:1顯示的網(wǎng)頁和圖片（二維）討論：沒錯，你沒有看錯，這是觸摸屏手機上最簡單、最土鱉也最基礎(chǔ)手勢。按照對導(dǎo)航的定義，這確實是一種導(dǎo)航方式，用戶可以向某個方向拖動屏幕，去瀏覽當(dāng)前屏幕以外的信息。用戶很容易學(xué)會使用這種導(dǎo)航方式，就是把擋在邊框外的內(nèi)容拖進(jìn)來看嘛。最簡單的方式，往往也最有效的。完美無止境：雖然這是最土鱉的導(dǎo)航方式，但是為了設(shè)計一個符合剛才所列5項基本原則的導(dǎo)航，還是有很多創(chuàng)意可玩的。KnotGuide在同一頁上顯示了繩結(jié)的示意圖和解說。過長的解說文字需要先隱藏一部分，拖動瀏覽全部。為了讓用戶知道將來能夠去哪里(3)，它給文字的底部蒙了一層半透效果，以暗示還有一部分沒展示，可以繼續(xù)往下看。同時，在剛進(jìn)入該頁面時，文字區(qū)右側(cè)的scrollbar會短暫顯示2~3秒，再消失，這也能起到同樣的暗示效果（這可能是Android平臺內(nèi)置的默認(rèn)效果）。aCurrency將暫時無法展示的多種匯率橫向排布在屏幕外。為了展示將來能夠去哪里(3)，它將藏起來的部分漏了一點出來，折在當(dāng)前頁的后面。沒記錯的話，這種設(shè)計應(yīng)該是從Mac的文件和唱片瀏覽上得到的靈感。最經(jīng)典的拖動導(dǎo)航還是應(yīng)屬iPhone的homescreen。在homescreen上，Apple設(shè)計了一個位置指示器。這可以幫助用戶很容易地理解當(dāng)前在哪里(1)，可以去哪里(3)。同時，在拖動屏幕的時候，Apple也設(shè)計了平移的轉(zhuǎn)場動畫，這很好的幫助用戶理解怎么去(4)，怎么回(5)。當(dāng)網(wǎng)頁內(nèi)容大于屏幕展示范圍時，Android內(nèi)置的瀏覽器會在用戶拖動網(wǎng)頁的時候在屏幕的下側(cè)和右側(cè)展示兩個灰色的scrollbar，暗示用戶當(dāng)前所處的位置(1)，以及可以往哪里移動(2)。

二、一維條目定義：將每一項信息列作一條，展示在縱向的條目里。適用情景：信息可以梳理為很多項目，項目與項目之間沒有概念上的交集，總體數(shù)量在15個以內(nèi)，再多就得考慮多分一級了。它非常適合展示層次分明的分級結(jié)構(gòu)，一層層地drilldown下去，條理很清晰。討論：一維條目是手機界面設(shè)計中較為樸素和常見的一種導(dǎo)航方式。每一項都可以在點擊之后進(jìn)入下一級。但是展示的項目不宜過多，在信息的海洋里晃來晃去找不到想要的東西是很讓人懊惱的。如果一級上面的項目太多，就可以考慮做一下歸類，再分一級下去。完美無止境：為了讓用戶知道應(yīng)該選擇哪一項(3)，條目都會用最大的尺寸去展示標(biāo)題。同時，還會有一些輔助內(nèi)容幫助用戶判斷，比如該項包含的內(nèi)容、該項當(dāng)前的狀態(tài)、該項下未讀過的子項目、圖標(biāo)。如果項目過多，又不想再分一級，可以將項目分組，加上名字并在視覺上加以處理。由于iPhone上沒有“back”，它設(shè)計了統(tǒng)一的導(dǎo)航規(guī)則。表“返回”的按鍵始終在屏幕上角(5)，表“完成”的按鍵始終在右上角。同時，按鍵上還會寫上“返回至哪里”。將進(jìn)過的項目和未進(jìn)的項目區(qū)別開來，用戶可以知道去過哪兒(2)，還可以去哪兒(3)。這個鋼琴模擬器其實也可以視作縱向一維條目。右側(cè)的這個位置指示器可以視作一個做了個性優(yōu)化的Scrollbar，可以拖動以改變當(dāng)前位置(4,5)，也可以展示當(dāng)前的位置(1)。將列表項目按某個規(guī)則排序，并且將排序標(biāo)題展示出來可以增加用戶對長列表的容忍度，同時也能暗示用戶當(dāng)前的位置(1)，以及為找到相應(yīng)的項目接下來該怎么走(3)。小Tips：在條目上可以加上一些常用的動作按鍵，方便用戶一次點擊即滿足目標(biāo)。為長條目適時地提供一些加速滾動的工具會很有幫助。在用戶拖動時，可以碩大的尺寸告知當(dāng)前的位置(1)。當(dāng)點擊條目進(jìn)入下一級時，如果預(yù)測到用戶的需求只是暫時的，很快會返回去瀏覽其他項，那么可以考慮將子項目在當(dāng)前頁面上展開，而非進(jìn)入下一項。具體如何展開，花樣怎么玩，可以自己想點子。

三、二維圖標(biāo)定義：將項目在二維平面上排布，點擊項目，進(jìn)入子級。適用情景：用于甄別項目身份的信息可以在一個正方形區(qū)域內(nèi)展示。比如圖標(biāo)，但絕不僅限于圖標(biāo)哦。我寫的這么抽象拗口，就是想讓大家把思路打開。任何能滿足這一點的信息呈現(xiàn)方式都可以，目的只有一個，讓用戶知道該點什么。討論：這是跟PC使用習(xí)慣最相似的一種。將二維屏幕分割成一系列方塊，放置一系列項目的入口。其實，當(dāng)可以明確預(yù)測用戶需求的時候，不應(yīng)該用這種導(dǎo)航方式。應(yīng)該直接引導(dǎo)用戶去做任務(wù)。只有當(dāng)不知道用戶到了這個APP里想搞什么，才得一次展示這么多入口。完美無止境：項目與項目之間要有明確的區(qū)分，才方便用戶找到想去的項目(3)。當(dāng)不能給每一個項目做個圖標(biāo)時，不妨用用現(xiàn)成的。feedsquare會把載入博客feed后的圖片拿來當(dāng)做該博客的圖標(biāo)，很有創(chuàng)意吧。誰說圖標(biāo)就得是靜態(tài)的。為了告知用戶某個項目下有新內(nèi)容，值得一看(3)，蘋果設(shè)計了紅色的小創(chuàng)可貼。這樣有了推送，看起來就非常醒目。這也容易訓(xùn)練出很多“點貼貼強迫癥”，不把它消掉很難受啊。如果越策到某些入口更重要，那么可以在視覺上做些強化。同時，還可以做一下分組，幫助用戶更快找到想要的入口(3)。支付寶的界面上圖標(biāo)偏多，如果一定要用圖標(biāo)的話，可以考慮在這兩點上做點小優(yōu)化。并不是每一個圖標(biāo)都得是信息層級上的入口，也可以在適當(dāng)?shù)奈恢梅派蟿幼麈I，比如這里的“新建”。二維展示印象最為深刻的還是iPad上的相冊。用戶可以用手指分開照片堆。照片四散開來的動畫可以很好地暗示用戶該怎么看下一級(4)，又該怎么回去(5)

四、Tab分頁定義：用始終呈現(xiàn)在屏幕上的幾個tab作為進(jìn)入特定某個類目的入口適用情景：信息可以明確地分為幾類，彼此有很大的區(qū)別；類目之間要經(jīng)常切換討論：Tab在web界面設(shè)計中是很經(jīng)典的localnavigation。它取自于筆記本分頁的暗喻。用戶可以清晰地知道tab是某個頁面露出的頭，按下它就可以展現(xiàn)與之相連的完整頁面。幾個Tab始終呈現(xiàn)，怎么切來切去都不會迷路。完美無止境：Tab里面還是可以再放二級Tab的。這樣就可以呈現(xiàn)兩級，n*n個項目了。

五、手風(fēng)琴定義：像手風(fēng)琴一樣，只展示某個條目下的詳細(xì)內(nèi)容，其他條目下的內(nèi)容暫時折起來。適用情景：要呈現(xiàn)的項目很多，并且經(jīng)常在這些項目之間做切換。討論：手風(fēng)琴最為經(jīng)典的設(shè)計還屬Q(mào)Q了，90年代的QQ就在用Accordion表示分組。后來改成了現(xiàn)在的樹狀結(jié)構(gòu)，可能是因為它的視覺體量感偏重。完美無止境：當(dāng)瀏覽QQ分組的成員時，組名欄可能會移出屏幕。但在QQ手機版上，組名欄會在即將移出邊緣時與下一層脫離，始終頂牢邊緣。這樣可以始終告知用戶當(dāng)前所處的分組。

六、下拉目錄定義：屏幕上始終存在一塊區(qū)域，當(dāng)點擊它時，出現(xiàn)導(dǎo)航總覽。適用情景：需要經(jīng)常在多個頁面間切換，分級結(jié)構(gòu)較為龐大。討論：這塊始終出現(xiàn)在屏幕上的區(qū)域就是用戶的藏寶地圖，通過它可是隨時查看全景，并跳到其他節(jié)點。這是我個人很喜歡的一種導(dǎo)航方式。其設(shè)計理念很像是去年Amazon改版后的分類導(dǎo)航。完美無止境：我在移動設(shè)備上最早看到這種設(shè)計，是iPad的Mail垂直視圖模式。它把inbox里的郵件列表都縮進(jìn)“inbox”這個按鈕，以展示更多的區(qū)域查看郵件正文。這個界面給我的啟發(fā)是，彈出來的導(dǎo)航總攬里還可以有很多花樣好玩，并不只是一個列表。

七、步驟定義：展示向前進(jìn)的按鈕，引導(dǎo)用戶一步步去操作適用情景：當(dāng)需要把任務(wù)分成一個個步驟的時討論：這在web中也是一個經(jīng)典設(shè)計，把一個很長的任務(wù)流程拆分成很多小頁面，引導(dǎo)用戶逐漸去完成。Android把“下一步”放到了右側(cè)，這符合人們對時間軸的心理模型。并且它的位置恒定，不會隨著用戶拖動瀏覽下面的內(nèi)容而移動。完美無止境：當(dāng)用戶還沒有完成當(dāng)前頁面上的任務(wù)時，下一步就是灰色的，暗示用戶當(dāng)前的活兒還沒干完。展示當(dāng)前任務(wù)的標(biāo)題，讓用戶心里有譜，知道在做什么。對于細(xì)分的步驟，也