淺談移動(dòng)UI中的6種主要導航模式發(fā)布者：本站     時(shí)間：2021-12-20 11:12:34

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

正如精良的設計一樣，優(yōu)秀的導航也大象無(wú)形。不管是瀏覽好友信息，還是租賃汽車(chē)，完美的導航設計能讓用戶(hù)根據直覺(jué)使用應用程序，也能讓用戶(hù)非常容易地完成 所有任務(wù)。一款應用的導航可以被設計成各種樣式，但我想著(zhù)重介紹6種主要的導航模式，也就是主菜單的導航模式。

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Facebook 的跳板式導航和Ovi Maps 應用

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Trulia 和LinkedIn 的導航設計

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Palm 手機上的NewsRoom 和Nokia 手機上的Yahoo !

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

PayPal 用戶(hù)個(gè)性化的跳板式導航和Gowalla 應用的早期版本

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

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

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

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

列表菜單：Valspar Paint 和Kayak 應用

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

列表菜單：Palm 手機上的RadioTime 和Cozi 應用

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

增強列表：Amazon MP3 應用;分組列表：Stratus 應用

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

選項卡式

選項卡式導航在不同的操作系統上有不同表現，對于選項卡的定位和設計，不同操作系統有不同的規則(見(jiàn)圖1-12)。如果要為你的應用選擇這種導航模式，就要為不同的操作系統專(zhuān)門(mén)定義選項卡的位置。

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

不同操作系統內選項卡的位置

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

位于屏幕底部的選項卡：Jamie Oliver Recipes 和Molome 應

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

位于屏幕底部的選項卡：BlackBerry 系統的應用World 和WorldMate

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

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

Android、Symbian 和Windows 系統都把選項卡定位在屏幕的頂端，這種形式看上去很眼熟，因為它模仿了標準的網(wǎng)站導航模式。Nokia 和Windows 都在屏幕頂端設計了可滾動(dòng)的選項卡，用戶(hù)移動(dòng)選項卡后能看到更多的菜單項。

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

位于屏幕頂端的選項卡：Foursquare 和HitPost 應用

為已選擇的菜單項設置不同的視覺(jué)效果，用戶(hù)就能清晰地知道自己選擇了哪一項。使用易于識別或帶有標簽的圖標。

陳列館式

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

BBC 和PULSE 應用

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Flickr 應用和Palm 手機上的PictureIt 應用

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Dwell 應用

陳列館式導航能很好地應用于用戶(hù)需要經(jīng)常瀏覽，頻繁更新的內容。

儀表式

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Mint 和Ego 應用中的儀表式導航

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

隱喻式

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

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Awesome Note 應用

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Cellar 應用

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

DoItTomorrow 和TripJournal 應用

淺談移動(dòng)UI中的6種主要導航模式,PS教程,

Aldiko Book Reader 應用

一定要謹慎地使用隱喻式導航，蹩腳的模仿很可能造成10.1 節出現的反模式(anti-Pattern)。

超級菜單式

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