前言：14年8月分享在500UXC的文章，時(shí)間長(zhǎng)即失去了它的時(shí)效性，今轉(zhuǎn)載至此。
年正如精良的設(shè)計(jì)一樣，優(yōu)秀的導(dǎo)航也大象無(wú)形。不管是瀏覽好友信息，還是租賃汽車(chē)，完美的導(dǎo)航設(shè)計(jì)能讓用戶根據(jù)直覺(jué)使用應(yīng)用程序，也能讓用戶非常容易地完成所有任務(wù)。
導(dǎo)航的設(shè)計(jì)是 App 設(shè)計(jì)發(fā)展過(guò)程中很值得玩味的地方，由于移動(dòng)設(shè)備特別是智能手機(jī)的屏幕尺寸有限，設(shè)計(jì)者們通常會(huì)將屏幕空間盡量留給主體內(nèi)容，為了在手機(jī)屏幕給定的范圍內(nèi)展示出更多內(nèi)容，優(yōu)秀的導(dǎo)航欄設(shè)計(jì)將起到關(guān)鍵性作用，對(duì)于不同的操作也當(dāng)因地制宜地選則不同的設(shè)計(jì)方案。
如網(wǎng)站設(shè)計(jì)中，我們會(huì)把導(dǎo)航分為一級(jí)導(dǎo)航、二級(jí)導(dǎo)航等等，其實(shí)移動(dòng)應(yīng)用和網(wǎng)站設(shè)計(jì)一樣，也具有自己的信息架構(gòu)。這里我們主要依據(jù)市場(chǎng)上面已有的產(chǎn)品對(duì)移動(dòng)應(yīng)用導(dǎo)航大體分為以下兩類(lèi)：主要導(dǎo)航模式與次級(jí)導(dǎo)航模式。
圖1-2? 次級(jí)導(dǎo)航模式
首先看看以下7種主要導(dǎo)航模式：
主要導(dǎo)航模式—— 第一種：跳板式
跳板式導(dǎo)航對(duì)操作系統(tǒng)并沒(méi)有特殊要求，在各種設(shè)備上都有良好表現(xiàn)。它有時(shí)也被稱為“快速啟動(dòng)板”（Launchpad）。跳板式導(dǎo)航的特征是，登錄界面中的菜單選項(xiàng)就是進(jìn)入各個(gè)應(yīng)用的起點(diǎn)。在國(guó)內(nèi)市場(chǎng)上跳板式設(shè)計(jì)應(yīng)用很用，如下圖的第一個(gè)“百度手機(jī)衛(wèi)士”（圖1-3）它主要通過(guò)功能來(lái)展示菜單選項(xiàng)，這種網(wǎng)格布局清晰的把各個(gè)功能區(qū)域進(jìn)行劃分，能讓用戶快速找到入口并點(diǎn)擊操作。(圖1-4)的云圖TV，它是一個(gè)免流量的手機(jī)電視，他的模塊相對(duì)百度手機(jī)衛(wèi)士來(lái)說(shuō)較簡(jiǎn)單，主要通過(guò)電視臺(tái)來(lái)區(qū)分模塊名稱。比如：中央電視臺(tái)CCTV、衛(wèi)士、體育甚至海外頻道等等。而美圖秀秀（圖1-5），更是我們比較熟知的一種，它的主界面用2X3的網(wǎng)格布局把常用的功能入口都直觀的表現(xiàn)在上面。
什么是2X3的網(wǎng)格布局了？
2X3網(wǎng)格布局是一種布局形式，常見(jiàn)的布局形式有：3X3、2X3、2X2、1X2（圖1-6）。但不一定非拘泥于網(wǎng)格布局，根據(jù)需求的功能來(lái)定義，可以成比例放大某些選項(xiàng)，以彰顯其重要性。
XiiaLive，一款功能無(wú)比強(qiáng)大的網(wǎng)絡(luò)電臺(tái)，兼具簡(jiǎn)潔而清新的 UI 設(shè)計(jì)。這款應(yīng)用具有不容忽視的導(dǎo)航，設(shè)計(jì)師用3X3的網(wǎng)格布局把菜單的6個(gè)菜單項(xiàng)目布局在屏幕中間，使每個(gè)格子都扮演著功能性的作用（圖1-7）。
Tripper是一款日本的本地導(dǎo)游應(yīng)用，他用扁平的設(shè)計(jì)圖標(biāo)把應(yīng)用的功能用2X3的網(wǎng)格布局羅列在整個(gè)界面中，使得用戶能夠相當(dāng)輕松順手地瀏覽這款A(yù)PP（圖1-8）.
跳板式菜單也可以說(shuō)是網(wǎng)格式菜單，它類(lèi)似于metro UI的堆砌色塊，優(yōu)點(diǎn)簡(jiǎn)約而不簡(jiǎn)陋，導(dǎo)航清晰、明顯，并能提高操作效率。但設(shè)計(jì)時(shí)切記不分青紅皂白的去使用色彩哦，這可能會(huì)讓用戶不知所措和產(chǎn)生疲倦感。
ASM采用的是不規(guī)則網(wǎng)格的跳板式導(dǎo)航，以突出內(nèi)容的優(yōu)先級(jí)（圖1-9）。
最近經(jīng)典的游戲：“別踩白塊兒”（圖1-10）也是跳板式模塊的經(jīng)典體現(xiàn)。
它把各種游戲模式用網(wǎng)格區(qū)分開(kāi)，僅用黑白兩色就能清晰的讓用戶理解并操作。正如前面所說(shuō)，在網(wǎng)格布局的設(shè)計(jì)中，不一定必須遵循幾乘幾的網(wǎng)格形式，甚至可以成比例的放大或者縮小某些選項(xiàng)，用以彰顯他的功能特色，舉一反三，設(shè)計(jì)師還可以合并他的多種網(wǎng)格形式，使得功能之間的邏輯流程更準(zhǔn)確。比如別踩白塊兒中的每個(gè)游戲選項(xiàng)，點(diǎn)擊的二級(jí)菜單也用跳板式或者列表式展現(xiàn)了更多的功能選擇。
個(gè)性化的跳板式導(dǎo)航可在顯示菜單選項(xiàng)的同時(shí)顯示用戶個(gè)人資料。通常會(huì)提供自定義功能，允許用戶改變跳板導(dǎo)航的布局，如優(yōu)酷界面。
通過(guò)以上的案列分析，我們可以整理如下幾點(diǎn)：
1.為同等重要的內(nèi)容項(xiàng)使用網(wǎng)格布局。
2.為相比之下更為重要的內(nèi)容項(xiàng)使用不規(guī)則布局。
3.視情況使用個(gè)性化設(shè)置和自定義選項(xiàng)。
主要導(dǎo)航模式——第二種：列表菜單式
列表菜單式導(dǎo)航與跳板式導(dǎo)航其實(shí)是有共同點(diǎn)的，他們的共同點(diǎn)在于，每個(gè)菜單項(xiàng)都是進(jìn)入應(yīng)用各項(xiàng)功能的入口點(diǎn)。
但是不同點(diǎn)在于列表菜單式導(dǎo)航有很多種變化形式，包括個(gè)性化列表菜單，體現(xiàn)分組列表和增強(qiáng)列表等。
案列分析：
個(gè)性化列表的方式：在photo sticker中首頁(yè)就采用了個(gè)性化列表菜單的方式。而IOS系統(tǒng)設(shè)計(jì)則采用了分組列表菜單式。
印象筆記的IOS版本它把列表式導(dǎo)航與跳板式導(dǎo)航設(shè)計(jì)相結(jié)合。下廚房即是增強(qiáng)列表導(dǎo)航，何為增強(qiáng)列表導(dǎo)航呢？即就是在簡(jiǎn)單的列表菜單之上增加搜索、瀏覽或過(guò)濾之類(lèi)的功能后形成的。
其實(shí)列表菜單式導(dǎo)航，這個(gè)從網(wǎng)站到手機(jī)APP上都很常用的，遵循由上至下的閱讀習(xí)慣方式，所以使用起來(lái)用戶不會(huì)覺(jué)得困難。
通過(guò)例舉的四個(gè)案列，以及列表菜單式導(dǎo)航與跳板式導(dǎo)航的對(duì)比，列表菜單，更適合用來(lái)顯示較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題。
主要導(dǎo)航模式——第三種：選項(xiàng)卡式
選項(xiàng)卡式導(dǎo)航，在不同的操作系統(tǒng)有不同的表現(xiàn)和規(guī)則。所以在設(shè)計(jì)時(shí)需要為不同的操作系統(tǒng)專門(mén)定義選項(xiàng)卡的位置。
Ios、webOS和Blackberry（黑莓）系列都把選項(xiàng)卡放在了屏幕底端，這樣用戶就可以用拇指進(jìn)行操作。
選項(xiàng)卡的導(dǎo)航設(shè)計(jì)方式，一般為四個(gè)導(dǎo)航按鈕最為普遍，最方便操作的是第二和第三個(gè)按。受制于屏幕寬度的限制，其欄目的個(gè)數(shù)是有限的，不能超過(guò)5個(gè)。過(guò)多的話明顯不利于用戶的切換。從界面布局來(lái)看，也降低體驗(yàn)友好度。
目前也有部分APP在選項(xiàng)卡的基礎(chǔ)上，衍生出了一種交互比較好的彈出導(dǎo)航菜單。突出選項(xiàng)卡上展示的那些核心功能的按鈕，方便用戶快捷操作。
選項(xiàng)卡至于低端的應(yīng)用市場(chǎng)上面有很多，這里列舉幾個(gè)比較常見(jiàn)的APP：
屏幕底部水平滾動(dòng)的選項(xiàng)卡是個(gè)非常不錯(cuò)的設(shè)計(jì)，如的Waterlogue應(yīng)用，它是一款水彩風(fēng)格照片處理工具，下面的水平翻動(dòng)選項(xiàng)卡可以讓用戶選擇多種水彩風(fēng)格
Android（安卓）、Symbian(塞班）和Windows系統(tǒng)都把選項(xiàng)卡定位在屏幕頂端，它模仿了網(wǎng)址導(dǎo)航模式。
Horner包含了可隱藏菜單，不過(guò)它能很妙地從頂部出現(xiàn)，由于明亮的顏色和有關(guān)聯(lián)性的巨大圖標(biāo)，它與整個(gè)界面內(nèi)容形成了鮮明對(duì)比。Bettertec設(shè)計(jì)的氣流計(jì)算APP，巧妙地運(yùn)用了占據(jù)頂部的標(biāo)簽頁(yè)。
頂部菜單和底部意義差不多，把菜單放在頂部，可以遵循從上至下的閱讀習(xí)慣，但也有缺點(diǎn)，即不適用與單手操作。
單手操作用戶是所示的這兩種姿勢(shì)（左手用戶相反）。綠色代表容易點(diǎn)擊區(qū)域，黃色為拇指伸展可到點(diǎn)擊區(qū)域，紅色區(qū)域超出單手可點(diǎn)擊范圍。
所以不管是在導(dǎo)航設(shè)計(jì)中，還是在移動(dòng)應(yīng)用的其它設(shè)計(jì)中，我們應(yīng)該盡可能的考慮用戶的手勢(shì)操作習(xí)慣，給用戶更好更便捷的體驗(yàn)。
單手操作手指滑動(dòng)區(qū)域圖片
網(wǎng)易新聞則采用了頂部可滑動(dòng)的導(dǎo)航形式，屏幕頂端可滾動(dòng)的選項(xiàng)卡:用戶移動(dòng)選項(xiàng)卡后能看到更多的菜單選項(xiàng)。
愛(ài)奇藝應(yīng)用同樣也采用了頂部滑動(dòng)導(dǎo)航的模式。但是這里更值得一提的是，為已選擇的菜單項(xiàng)設(shè)置使用易于識(shí)別或帶有標(biāo)簽的圖標(biāo)等不同的視覺(jué)效果，用戶就能清晰的知道自己選擇了哪一項(xiàng)。
主要導(dǎo)航模式——第四種：陳列館式
陳列館式的設(shè)計(jì)通常在平面上顯示各個(gè)內(nèi)容項(xiàng)來(lái)實(shí)現(xiàn)導(dǎo)航。?主要用來(lái)顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤(pán)、網(wǎng)格或幻燈片演示。
陳列館式導(dǎo)航能夠很好地應(yīng)用與用戶需要經(jīng)常瀏覽，頻繁更新的內(nèi)容，如下圖的超級(jí)相冊(cè)和便簽本。
相冊(cè)是我們?cè)谌粘Ｉ钪袝r(shí)常運(yùn)用到的一個(gè)功能，使用頻率高，圖片數(shù)量多，所以采用陳列館的形式是再合適不過(guò)了。
而便簽本也不陌生，下圖中的便簽本可以上下左右拉伸不斷創(chuàng)建新的收納空間，一個(gè)個(gè)方方正正的分類(lèi)視圖，顏色各異卻能達(dá)到一種養(yǎng)眼的和諧美。沒(méi)有花哨的功能，主界面上只簡(jiǎn)潔地顯示收納盒名稱與其中的項(xiàng)目數(shù)量。
最美應(yīng)用:是一款通過(guò)互聯(lián)網(wǎng)平臺(tái)，每天為用戶發(fā)送一款賞心悅目的移動(dòng)互聯(lián)網(wǎng)應(yīng)用。它通過(guò)類(lèi)似幻燈片的形式來(lái)導(dǎo)航，用戶通過(guò)查看每個(gè)應(yīng)用來(lái)劃屏切換屏幕內(nèi)容，而它下面的進(jìn)度條也會(huì)互動(dòng)性的跟隨著用戶的切換而進(jìn)行圖標(biāo)的動(dòng)態(tài)變化。
主要導(dǎo)航模式——第5種? 儀表式
儀表式導(dǎo)航提供了一種度量關(guān)鍵績(jī)效指標(biāo)是否達(dá)到要求的方法。
過(guò)設(shè)計(jì)以后，每一項(xiàng)量度都可以顯示出額外的信息。這種主要的導(dǎo)航模式對(duì)于商業(yè)應(yīng)用、分析工具以及銷(xiāo)售和市場(chǎng)應(yīng)用非常有用。
Timi時(shí)光記賬—精美獨(dú)特的時(shí)間軸記賬:Timi 時(shí)光記賬采用了時(shí)下非常流行的時(shí)光軸的形式，幫你整理賬目，簡(jiǎn)潔明了，界面精美，在方便好用的同時(shí)，還滿足了視覺(jué)享受的需求~。
樂(lè)動(dòng)力：通過(guò)數(shù)據(jù)來(lái)查看自己每天活動(dòng)狀態(tài)。下滑還有很多功能，都可以點(diǎn)擊查看。
主要導(dǎo)航模式——第6種? 隱喻式
隱喻式導(dǎo)航的特點(diǎn)是用頁(yè)面模仿應(yīng)用的隱喻對(duì)象。
這種導(dǎo)航主要用于游戲，但在幫助人們組織事物（如日記、書(shū)籍、紅酒等），并對(duì)其進(jìn)行分類(lèi)的應(yīng)用中也能看到。
途書(shū)筆記，用牌照記錄數(shù)據(jù)的筆記。它把導(dǎo)航界面菜單做成了一本一本的書(shū)，有一本書(shū)的形式，隱喻的表達(dá)了書(shū)的概念。自定義標(biāo)題，分類(lèi)進(jìn)行查閱。
找你妹的游戲中，導(dǎo)航就用闖關(guān)的進(jìn)度來(lái)顯示，直觀且具有趣味性。
主要導(dǎo)航模式——第7種：超級(jí)菜單式
移動(dòng)設(shè)備上的超級(jí)菜單式導(dǎo)航與網(wǎng)站所用的超級(jí)菜單導(dǎo)航類(lèi)似，它在一個(gè)較大的覆蓋面板上分組顯示已定義好格式的菜單選項(xiàng)。
這種導(dǎo)航模式在現(xiàn)在的app設(shè)計(jì)中使用的比較少，而且一般會(huì)用做分類(lèi)檢索de 次級(jí)導(dǎo)航使用。在手機(jī)網(wǎng)站的導(dǎo)航設(shè)計(jì)中比較常見(jiàn)。
美團(tuán)中就采用了超級(jí)菜單式導(dǎo)航做為次級(jí)導(dǎo)航使用。
以上均是主要導(dǎo)航模式：那么接下來(lái)針對(duì)次級(jí)導(dǎo)航模式進(jìn)行案列賞析。
次要導(dǎo)航模式：
這里我們值得注意的是在導(dǎo)航的設(shè)計(jì)中，所有的主要導(dǎo)航模式都可以用作次級(jí)導(dǎo)航。我們經(jīng)常能夠看到選項(xiàng)卡下再用選項(xiàng)卡導(dǎo)航、導(dǎo)航卡下用列表導(dǎo)航、選項(xiàng)卡下采用儀表式導(dǎo)航、跳板式導(dǎo)航下采用陳列館式導(dǎo)航燈情況。
而次級(jí)導(dǎo)航模式是否可以用作主導(dǎo)航，答案不是確定的，因?yàn)槭挛锒际秦灤┤诤系模饕氵\(yùn)用得當(dāng)，一切均有可能。現(xiàn)在我把這三種歸納為次級(jí)導(dǎo)航是針對(duì)現(xiàn)有市場(chǎng)產(chǎn)品進(jìn)行分析得出，并不一定是絕對(duì)。
次級(jí)導(dǎo)航模式——第8種：?頁(yè)面輪盤(pán)式。
通過(guò)這種導(dǎo)航模式，操作者可利用“滑動(dòng)”操作快速瀏覽一系列離散的頁(yè)面。
瘋狂來(lái)找錢(qián)就采用頁(yè)面輪盤(pán)式，頁(yè)面指示器（iOS中的術(shù)語(yǔ)，指用來(lái)表示頁(yè)面數(shù)量的小點(diǎn)）可以顯示出導(dǎo)航中的頁(yè)面數(shù)量；執(zhí)行“滑動(dòng)”操作可以顯示下一頁(yè)。
次級(jí)導(dǎo)航模式——第9種：圖片輪盤(pán)式
圖片輪盤(pán)式導(dǎo)航類(lèi)似于一個(gè)二維輪盤(pán)，圖片輪盤(pán)式導(dǎo)航更多的應(yīng)用于播放器和需要多圖片展示應(yīng)用中。
香蕉相機(jī)，作為一個(gè)相機(jī)應(yīng)用，該有的功能相對(duì)還是挺齊全的。拍照、添加相冊(cè)圖片、添加文字等等，都木有問(wèn)題，還有很文藝的濾鏡和相框~
圖片輪盤(pán)式導(dǎo)航可以查看更多的香蕉圖標(biāo)，相加幾個(gè)來(lái)幾個(gè)~~~~
次級(jí)導(dǎo)航模式——第10種：擴(kuò)展列表式
擴(kuò)展列表式導(dǎo)航通過(guò)左/右/上/下拉屏幕或者點(diǎn)擊按鍵顯示更多的信息。
在網(wǎng)易新聞，TIMI記賬和暢讀等應(yīng)用設(shè)計(jì)當(dāng)中，通過(guò)點(diǎn)擊屏幕左上角的按鈕喚出切換項(xiàng)，有些也可以通過(guò)向右或者向左，滑動(dòng)手指來(lái)完成。所以當(dāng)我們覺(jué)得菜單比較占用位置的時(shí)候，可以嘗試用這種方式來(lái)隱藏菜單，需要注意的是設(shè)計(jì)展開(kāi)菜單按鈕大部設(shè)計(jì)在左或右上角這些顯眼的位置。
一個(gè)簡(jiǎn)單的滑動(dòng)動(dòng)畫(huà)，就像拉出一個(gè)抽屜，「抽屜式導(dǎo)航」這個(gè)名稱應(yīng)該就是來(lái)源于此。抽屜式導(dǎo)航突破了數(shù)量的限制，更大程度上釋放了主體空間，也因此提高了操作成本。
此處就個(gè)人意見(jiàn)，如果能將主要功能項(xiàng)組織在 4 到 5 項(xiàng)，選項(xiàng)卡導(dǎo)航的設(shè)計(jì)方式可能會(huì)更好，否則，就應(yīng)該優(yōu)先考慮抽屜式導(dǎo)航了。抽屜式導(dǎo)航通過(guò)縱向排列切換項(xiàng)解決了具有過(guò)多的切換項(xiàng)這一問(wèn)題。不過(guò)這也意味著導(dǎo)航不能和主體內(nèi)容同時(shí)出現(xiàn)在屏幕上
