精品久久久噜噜噜久久久,久久久久久久亚洲AV无码

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

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

旺旺旺旺旺仔

2012-05-17

1 評(píng)論 8062 瀏覽 2 收藏

18 分鐘

所謂的交互設(shè)計(jì)，其實(shí)設(shè)計(jì)的就是人如何向機(jī)器發(fā)送指令，機(jī)器如何向人傳達(dá)信息，一來一往是為交互。當(dāng)要傳達(dá)的信息量很少時(shí)，好辦，就想Google的搜索框那樣，往白底上一放就行了。但當(dāng)?shù)鹊叫畔⑹呛Ａ康?、在一屏上難以全部呈現(xiàn)時(shí)，就需要有效地組織信息，將部分信息先隱藏起來，待到用戶需要時(shí)再將用戶引導(dǎo)到那里。在界面設(shè)計(jì)中，廣義地來講，從一組信息向另一組信息轉(zhuǎn)移的的過程，就稱之為導(dǎo)航。

明確了定義，我們就該知道，一個(gè)好的導(dǎo)航設(shè)計(jì)應(yīng)該讓用戶明白：

現(xiàn)在在哪兒
以前去過哪兒
將來應(yīng)該/能夠去哪兒
怎么去
怎么回

判斷一個(gè)導(dǎo)航方式設(shè)計(jì)的是否合理，也可以利用這幾條一條條比對(duì)一下。下面，讓我們來看一下手機(jī)界面中常用的導(dǎo)航方式。

一、拖動(dòng)

定義：手指在屏幕上按下，向某方向平移。

適用情景：若要呈現(xiàn)的信息超出一屏所能容納的范圍，則在符合用戶心理模型的前提下，可以將內(nèi)容在一維或者兩維德方向上排布，用拖動(dòng)屏幕內(nèi)容的方式來瀏覽所有信息。

例如，很長(zhǎng)的文章、電子書、列表（縱向的一維），一年內(nèi)的詳細(xì)股價(jià)折線圖（橫向的一維），地圖、1:1顯示的網(wǎng)頁和圖片（二維）

討論：沒錯(cuò)，你沒有看錯(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)來看嘛。最簡(jiǎn)單的方式，往往也最有效的。

完美無止境：

雖然這是最土鱉的導(dǎo)航方式，但是為了設(shè)計(jì)一個(gè)符合剛才所列5項(xiàng)基本原則的導(dǎo)航，還是有很多創(chuàng)意可玩的。

KnotGuide在同一頁上顯示了繩結(jié)的示意圖和解說。過長(zhǎng)的解說文字需要先隱藏一部分，拖動(dòng)瀏覽全部。為了讓用戶知道將來能夠去哪里(3)，它給文字的底部蒙了一層半透效果，以暗示還有一部分沒展示，可以繼續(xù)往下看。同時(shí)，在剛進(jìn)入該頁面時(shí)，文字區(qū)右側(cè)的scrollbar會(huì)短暫顯示2~3秒，再消失，這也能起到同樣的暗示效果（這可能是Android平臺(tái)內(nèi)置的默認(rèn)效果）。

aCurrency將暫時(shí)無法展示的多種匯率橫向排布在屏幕外。為了展示將來能夠去哪里(3)，它將藏起來的部分漏了一點(diǎn)出來，折在當(dāng)前頁的后面。沒記錯(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)畫，這很好的幫助用戶理解怎么去(4)，怎么回(5)。

當(dāng)網(wǎng)頁內(nèi)容大于屏幕展示范圍時(shí)，Android內(nèi)置的瀏覽器會(huì)在用戶拖動(dòng)網(wǎng)頁的時(shí)候在屏幕的下側(cè)和右側(cè)展示兩個(gè)灰色的scrollbar，暗示用戶當(dāng)前所處的位置(1)，以及可以往哪里移動(dòng)(2)。

二、一維條目

定義：將每一項(xiàng)信息列作一條，展示在縱向的條目里。

適用情景：

信息可以梳理為很多項(xiàng)目，項(xiàng)目與項(xiàng)目之間沒有概念上的交集，總體數(shù)量在15個(gè)以內(nèi)，再多就得考慮多分一級(jí)了。

它非常適合展示層次分明的分級(jí)結(jié)構(gòu)，一層層地drilldown下去，條理很清晰。

討論：一維條目是手機(jī)界面設(shè)計(jì)中較為樸素和常見的一種導(dǎo)航方式。每一項(xiàng)都可以在點(diǎn)擊之后進(jìn)入下一級(jí)。但是展示的項(xiàng)目不宜過多，在信息的海洋里晃來晃去找不到想要的東西是很讓人懊惱的。如果一級(jí)上面的項(xiàng)目太多，就可以考慮做一下歸類，再分一級(jí)下去。

完美無止境：

為了讓用戶知道應(yīng)該選擇哪一項(xiàng)(3)，條目都會(huì)用最大的尺寸去展示標(biāo)題。同時(shí)，還會(huì)有一些輔助內(nèi)容幫助用戶判斷，比如該項(xiàng)包含的內(nèi)容、該項(xiàng)當(dāng)前的狀態(tài)、該項(xiàng)下未讀過的子項(xiàng)目、圖標(biāo)。

如果項(xiàng)目過多，又不想再分一級(jí)，可以將項(xiàng)目分組，加上名字并在視覺上加以處理。

由于iPhone上沒有“back”，它設(shè)計(jì)了統(tǒng)一的導(dǎo)航規(guī)則。表“返回”的按鍵始終在屏幕上角(5)，表“完成”的按鍵始終在右上角。同時(shí)，按鍵上還會(huì)寫上“返回至哪里”。

將進(jìn)過的項(xiàng)目和未進(jìn)的項(xiàng)目區(qū)別開來，用戶可以知道去過哪兒(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)題展示出來可以增加用戶對(duì)長(zhǎng)列表的容忍度，同時(shí)也能暗示用戶當(dāng)前的位置(1)，以及為找到相應(yīng)的項(xiàng)目接下來該怎么走(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)前頁面上展開，而非進(jìn)入下一項(xiàng)。具體如何展開，花樣怎么玩，可以自己想點(diǎn)子。

三、二維圖標(biāo)

定義：將項(xiàng)目在二維平面上排布，點(diǎn)擊項(xiàng)目，進(jìn)入子級(jí)。

適用情景：

用于甄別項(xiàng)目身份的信息可以在一個(gè)正方形區(qū)域內(nèi)展示。比如圖標(biāo)，但絕不僅限于圖標(biāo)哦。我寫的這么抽象拗口，就是想讓大家把思路打開。任何能滿足這一點(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里想搞什么，才得一次展示這么多入口。

完美無止境：

項(xiàng)目與項(xiàng)目之間要有明確的區(qū)分，才方便用戶找到想去的項(xiàng)目(3)。當(dāng)不能給每一個(gè)項(xiàng)目做個(gè)圖標(biāo)時(shí)，不妨用用現(xiàn)成的。feedsquare會(huì)把載入博客feed后的圖片拿來當(dāng)做該博客的圖標(biāo)，很有創(chuàng)意吧。

誰說圖標(biāo)就得是靜態(tài)的。為了告知用戶某個(gè)項(xiàng)目下有新內(nèi)容，值得一看(3)，蘋果設(shè)計(jì)了紅色的小創(chuàng)可貼。這樣有了推送，看起來就非常醒目。這也容易訓(xùn)練出很多“點(diǎn)貼貼強(qiáng)迫癥”，不把它消掉很難受啊。

如果越策到某些入口更重要，那么可以在視覺上做些強(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è)。用戶可以用手指分開照片堆。照片四散開來的動(dòng)畫可以很好地暗示用戶該怎么看下一級(jí)(4)，又該怎么回去(5)

四、Tab分頁

定義：用始終呈現(xiàn)在屏幕上的幾個(gè)tab作為進(jìn)入特定某個(gè)類目的入口

適用情景：信息可以明確地分為幾類，彼此有很大的區(qū)別；類目之間要經(jīng)常切換

討論：Tab在web界面設(shè)計(jì)中是很經(jīng)典的local navigation。它取自于筆記本分頁的暗喻。用戶可以清晰地知道tab是某個(gè)頁面露出的頭，按下它就可以展現(xiàn)與之相連的完整頁面。幾個(gè)Tab始終呈現(xiàn)，怎么切來切去都不會(huì)迷路。

完美無止境：

Tab里面還是可以再放二級(jí)Tab的。這樣就可以呈現(xiàn)兩級(jí)，n*n個(gè)項(xiàng)目了。

五、手風(fēng)琴

定義：像手風(fēng)琴一樣，只展示某個(gè)條目下的詳細(xì)內(nèi)容，其他條目下的內(nèi)容暫時(shí)折起來。

適用情景：要呈現(xiàn)的項(xiàng)目很多，并且經(jīng)常在這些項(xiàng)目之間做切換。

討論：手風(fēng)琴最為經(jīng)典的設(shè)計(jì)還屬Q(mào)Q了，90年代的QQ就在用Accordion表示分組。后來改成了現(xiàn)在的樹狀結(jié)構(gòu)，可能是因?yàn)樗囊曈X體量感偏重。

完美無止境：

當(dāng)瀏覽QQ分組的成員時(shí)，組名欄可能會(huì)移出屏幕。但在QQ手機(jī)版上，組名欄會(huì)在即將移出邊緣時(shí)與下一層脫離，始終頂牢邊緣。這樣可以始終告知用戶當(dāng)前所處的分組。

六、下拉目錄

定義：屏幕上始終存在一塊區(qū)域，當(dāng)點(diǎn)擊它時(shí)，出現(xiàn)導(dǎo)航總覽。

適用情景：需要經(jīng)常在多個(gè)頁面間切換，分級(jí)結(jié)構(gòu)較為龐大。

討論：這塊始終出現(xiàn)在屏幕上的區(qū)域就是用戶的藏寶地圖，通過它可是隨時(shí)查看全景，并跳到其他節(jié)點(diǎn)。這是我個(gè)人很喜歡的一種導(dǎo)航方式。其設(shè)計(jì)理念很像是去年Amazon改版后的分類導(dǎo)航。

完美無止境：

我在移動(dòng)設(shè)備上最早看到這種設(shè)計(jì)，是iPad的Mail垂直視圖模式。它把inbox里的郵件列表都縮進(jìn)“inbox”這個(gè)按鈕，以展示更多的區(qū)域查看郵件正文。

這個(gè)界面給我的啟發(fā)是，彈出來的導(dǎo)航總攬里還可以有很多花樣好玩，并不只是一個(gè)列表。

七、步驟

定義：展示向前進(jìn)的按鈕，引導(dǎo)用戶一步步去操作

適用情景：當(dāng)需要把任務(wù)分成一個(gè)個(gè)步驟的時(shí)

討論：這在web中也是一個(gè)經(jīng)典設(shè)計(jì)，把一個(gè)很長(zhǎng)的任務(wù)流程拆分成很多小頁面，引導(dǎo)用戶逐漸去完成。Android把“下一步”放到了右側(cè)，這符合人們對(duì)時(shí)間軸的心理模型。并且它的位置恒定，不會(huì)隨著用戶拖動(dòng)瀏覽下面的內(nèi)容而移動(dòng)。

完美無止境：