轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.bouu.cn  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請點(diǎn)這里

為一本簡易的UI模式參考書，《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》非常適合移動(dòng)應(yīng)用開發(fā)人員、UI設(shè)計(jì)師閱讀，還沒買的同學(xué)們可以看看這本書關(guān)于移動(dòng)UI設(shè)計(jì)中導(dǎo)航模式的經(jīng)驗(yàn)分享。

正如精良的設(shè)計(jì)一樣，優(yōu)秀的導(dǎo)航也大象無形。不管是瀏覽好友信息，還是租賃汽車，完美的導(dǎo)航界面設(shè)計(jì)能讓用戶根據(jù)直覺使用應(yīng)用程序，也能讓用戶非常容易地完成 所有任務(wù)。一款應(yīng)用的導(dǎo)航可以被設(shè)計(jì)成各種樣式，但藍(lán)藍(lán)設(shè)計(jì)想著重介紹６種主要的導(dǎo)航模式，也就是主菜單的導(dǎo)航模式。

跳板式 跳板式導(dǎo)航對操作系統(tǒng)并沒有特殊要求，在各種設(shè)備上都有良好表現(xiàn)。它有時(shí)也被稱為“快速啟動(dòng)板”（Launchpad）。跳板式導(dǎo)航的特征是，登錄界面中 的菜單選項(xiàng)就是進(jìn)入各個(gè)應(yīng)用的起點(diǎn)。Facebook 應(yīng)用沿用了iOS 主界面上的跳板式設(shè)計(jì)，其他應(yīng)用隨之跟風(fēng)。

Facebook 的跳板式導(dǎo)航和Ovi Maps 應(yīng)用

Trulia 和LinkedIn 的導(dǎo)航設(shè)計(jì)

Palm 手機(jī)上的NewsRoom 和Nokia 手機(jī)上的Yahoo ！

個(gè)性化的跳板式導(dǎo)航可在顯示菜單選項(xiàng)的同時(shí)顯示用戶個(gè)人資料。通常會(huì)提供自定義功能，允許用戶改變跳板式導(dǎo)航的布局（見圖1-5）

PayPal 用戶個(gè)性化的跳板式導(dǎo)航和Gowalla 應(yīng)用的早期版本

常見的布局形式是3×3、2×3、2×2 和1×2 的網(wǎng)格（見圖1-6）。但跳板式導(dǎo)航不一定非要拘泥于網(wǎng)格布局，你可以成比例地放大某些選項(xiàng)，以彰顯其重要性。在iPhone的應(yīng)用Masters 中，VIDEO 選項(xiàng)就是其他菜單選項(xiàng)的2 ～ 3 倍大。

跳板式導(dǎo)航的網(wǎng)格布局

Norton Mobile 的2×2 網(wǎng)格布局和Masters 的不規(guī)則布局。

為同等重要的內(nèi)容項(xiàng)使用網(wǎng)格布局，為相比之下更為重要的內(nèi)容項(xiàng)使用不規(guī)則布局形式。視情況使用個(gè)性化設(shè)置和自定義選項(xiàng)。

列表菜單式 列表菜單式導(dǎo)航與跳板式導(dǎo)航的共同點(diǎn)在于，每個(gè)菜單項(xiàng)都是進(jìn)入應(yīng)用各項(xiàng)功能的入口點(diǎn)。這種導(dǎo)航有很多種變化形式，包括個(gè)性化列表菜單 （Personalized List Menu）、分組列表（Grouped List）和增強(qiáng)列表（Enhanced List）等。增強(qiáng)列表是在簡單的列表菜單之上增加搜索、瀏覽或過濾之類的功能后形成的。

列表菜單：Valspar Paint 和Kayak 應(yīng)用

列表菜單：Palm 手機(jī)上的RadioTime 和Cozi 應(yīng)用

個(gè)性化列表：Blackboard 和Zoho CRM 應(yīng)用

增強(qiáng)列表：Amazon MP3 應(yīng)用；分組列表：Stratus 應(yīng)用

列表菜單很適合用來顯示較長或擁有次級文字內(nèi)容的標(biāo)題。使用列表菜單的應(yīng)用要在所有次級屏幕內(nèi)提供一個(gè)選項(xiàng)，用來返回菜單列表。通常的做法是在標(biāo)題欄上顯示一個(gè)帶有列表圖標(biāo)或“菜單”字樣的按鈕。

選項(xiàng)卡式

選項(xiàng)卡式導(dǎo)航在不同的操作系統(tǒng)上有不同表現(xiàn)，對于選項(xiàng)卡的定位和設(shè)計(jì)，不同操作系統(tǒng)有不同的規(guī)則（見圖1-12）。如果要為你的應(yīng)用選擇這種導(dǎo)航模式，就要為不同的操作系統(tǒng)專門定義選項(xiàng)卡的位置。

不同操作系統(tǒng)內(nèi)選項(xiàng)卡的位置

iOS、WebOS 和BlackBerry 系統(tǒng)都把選項(xiàng)卡放在了屏幕底端，這樣用戶就可以用拇指進(jìn)行操作。

位于屏幕底部的選項(xiàng)卡：Jamie Oliver Recipes 和Molome 應(yīng)

位于屏幕底部的選項(xiàng)卡：BlackBerry 系統(tǒng)的應(yīng)用World 和WorldMate

屏幕底部水平滾動(dòng)的選項(xiàng)卡是個(gè)非常不錯(cuò)的設(shè)計(jì)，如圖1-15 中的Starbucks 和Blue Mobile 應(yīng)用，它可以在同一屏內(nèi)提供更多的操作選項(xiàng)。

位于屏幕底部的滾動(dòng)選項(xiàng)卡：Starbucks 和Blue Mobile 應(yīng)用。

Android、Symbian 和Windows 系統(tǒng)都把選項(xiàng)卡定位在屏幕的頂端，這種形式看上去很眼熟，因?yàn)樗７铝藰?biāo)準(zhǔn)的網(wǎng)站導(dǎo)航模式。Nokia 和Windows 都在屏幕頂端設(shè)計(jì)了可滾動(dòng)的選項(xiàng)卡，用戶移動(dòng)選項(xiàng)卡后能看到更多的菜單項(xiàng)。

位于屏幕頂端的滾動(dòng)選項(xiàng)卡：Harvest TimeTractor 應(yīng)用和Nokia 上的Fring 應(yīng)用

位于屏幕頂端的選項(xiàng)卡：Foursquare 和HitPost 應(yīng)用

為已選擇的菜單項(xiàng)設(shè)置不同的視覺效果，用戶就能清晰地知道自己選擇了哪一項(xiàng)。使用易于識(shí)別或帶有標(biāo)簽的圖標(biāo)。

陳列館式

陳列館式的設(shè)計(jì)通過在平面上顯示各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn)導(dǎo)航，主要用來顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格或用幻燈片演示（見圖1-18 至圖1-20）。

BBC 和PULSE 應(yīng)用

Flickr 應(yīng)用和Palm 手機(jī)上的PictureIt 應(yīng)用

有時(shí)，對這些內(nèi)容進(jìn)行分組更易于用戶瀏覽。Dwell 利用側(cè)邊選項(xiàng)卡把陳列館式導(dǎo)航里的內(nèi)容組織成了可供用戶管理的內(nèi)容塊。

Dwell 應(yīng)用

陳列館式導(dǎo)航能很好地應(yīng)用于用戶需要經(jīng)常瀏覽，頻繁更新的內(nèi)容。

儀表式

儀表式導(dǎo)航提供了一種度量關(guān)鍵績效指標(biāo)（Key Performance Indicators，KPI）是否達(dá)到要求的方法。經(jīng)過設(shè)計(jì)以后，每一項(xiàng)量度都可以顯示出額外的信息。這種主要的導(dǎo)航模式對于商業(yè)應(yīng)用、分析工具以及銷售和市場應(yīng)用非常有用。

Mint 和Ego 應(yīng)用中的儀表式導(dǎo)航

不要使用過多的儀表式導(dǎo)航。你需要開展研究才能決定應(yīng)該對哪些關(guān)鍵量度采用儀表式導(dǎo)航。

隱喻式

這種導(dǎo)航的特點(diǎn)是用頁面模仿應(yīng)用的隱喻對象。這種導(dǎo)航主要用于游戲，但在幫助導(dǎo)航 人們組織事物（如日記、書籍、紅酒等），并對其進(jìn)行分類的應(yīng)用中也能看到。

Awesome Note 應(yīng)用

Cellar 應(yīng)用

DoItTomorrow 和TripJournal 應(yīng)用

Aldiko Book Reader 應(yīng)用

一定要謹(jǐn)慎地使用隱喻式導(dǎo)航，蹩腳的模仿很可能造成10.1 節(jié)出現(xiàn)的反模式（anti-Pattern）。

超級菜單式

移動(dòng)設(shè)備上的超級菜單式導(dǎo)航與網(wǎng)站所用的超級菜單導(dǎo)航類似，它在一個(gè)較大的覆蓋面板上分組顯示已定義好格式的菜單選項(xiàng)。RipCurl 網(wǎng)站就利用超級菜單顯示服飾的次級類別。

WebOS 系統(tǒng)版本的Facebook 利用超級菜單來精簡導(dǎo)航，避免了跳板式導(dǎo)航中過多的選項(xiàng)。Walmart 在它們的Android 應(yīng)用中也采用了超級菜單式。

在選擇導(dǎo)航模式之前，首先要確定信息架構(gòu)。如果要導(dǎo)航的對象僅僅是應(yīng)用中少數(shù)主要內(nèi)容，就可以使用選項(xiàng)卡之類的導(dǎo)航模式。

WebOS 系統(tǒng)下的Facebook 和Android 系統(tǒng)下的Walmart