|
所謂的交互設(shè)計，其實設(shè)計的就是人如何向機器發(fā)送指令，機器如何向人傳達信息，一來一往是為交互。當(dāng)要傳達的信息量很少時，好辦，就像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)容拖進來看嘛。最簡單的方式，往往也最有效的。
完美無止境：
雖然這是最土鱉的導(dǎo)航方式，但是為了設(shè)計一個符合剛才所列5項基本原則的導(dǎo)航，還是有很多創(chuàng)意可玩的。
KnotGuide在同一頁上顯示了繩結(jié)的示意圖和解說。過長的解說文字需要先隱藏一部分，拖動瀏覽全部。為了讓用戶知道將來能夠去哪里(3)，它給文字的底部蒙了一層半透效果，以暗示還有一部分沒展示，可以繼續(xù)往下看。同時，在剛進入該頁面時，文字區(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è)計
責(zé)任編輯：bluehearts
上一頁 下一頁 手機界面常用導(dǎo)航設(shè)計分析 [2]
|
第 1 頁 手機界面常用導(dǎo)航設(shè)計分析 [1]
第 2 頁 
