移動(dòng)端導(dǎo)航設(shè)計(jì)，這里一定有你不知道的——細(xì)節(jié)系列第 01 篇

      為什么寫這篇講導(dǎo)航的，本質(zhì)上是希望提高自己界面設(shè)計(jì)的組件化意識(shí)，也是對(duì)近期自己看的關(guān)于導(dǎo)航方面文章的一個(gè)總結(jié)和輸出。

      前言

      結(jié)構(gòu)和組織是關(guān)于建造房間的，而導(dǎo)航設(shè)計(jì)則是關(guān)于增加門窗的——《信息架構(gòu)》

      在英文中Navigation這個(gè)詞源于拉丁文，原意是：操縱船只在海上航行。所以導(dǎo)航的目的在于幫助我們到達(dá)目的地。通俗的l來說就是你知道自己在哪，下一步怎么走，如果不想去先前的目的地，那也可以順利的回到出發(fā)的原點(diǎn)，這就是導(dǎo)航的作用。

      對(duì)于導(dǎo)航優(yōu)缺點(diǎn)的思考，我主要從以下三方面來考量：

      第一，操作方式。是滑動(dòng)、點(diǎn)擊還是其他手勢(shì)，不同的操作方式難易程度是不同的；

      第二，導(dǎo)航所處的位置。在頁面頂端還是底部，結(jié)合操作方式來考慮操作的便捷性，例：導(dǎo)航在頂部，但不能滑動(dòng)操作，對(duì)用戶而言便捷性就比較差；

      第三，導(dǎo)航模塊之間切換是否方便。是否需要頁面的跳轉(zhuǎn)才能切換不同模塊，不同的切換方式難易程度也不同；

      這篇文章主要講的是移動(dòng)端的導(dǎo)航，但我們需要知道的是，在產(chǎn)品中沒有孤立存在的模塊，導(dǎo)航系統(tǒng)與組織系統(tǒng)、標(biāo)簽系統(tǒng)之間是密不可分的。

      一、導(dǎo)航分類

      導(dǎo)航分為主導(dǎo)航與次級(jí)導(dǎo)航，主導(dǎo)航進(jìn)一步又分為全局導(dǎo)航與瞬時(shí)導(dǎo)航。

      全局導(dǎo)航——你能看到每一個(gè)，找出你想要的那一個(gè)。

      瞬時(shí)導(dǎo)航——平時(shí)藏起來，需要的時(shí)候一點(diǎn)就出來。

      二、各種導(dǎo)航優(yōu)缺點(diǎn)

    （一）底部Tab欄（標(biāo)簽欄）

     底部 Tab 欄最大的優(yōu)勢(shì)在于不同模塊之間方便快速的切換，無論是 iOS 還是 Andriod 系統(tǒng)，我們看到最多的主導(dǎo)航方式就是底部Tab欄，形式如下圖所示：       優(yōu)點(diǎn)：

      切換快速方便——可以承載同一優(yōu)先級(jí)的內(nèi)容，位置處于頁面底部且層級(jí)扁平，可以進(jìn)行方便快速的切換；

      缺點(diǎn)：

      遮擋內(nèi)容——常駐的Tab 欄遮擋了部分內(nèi)容，減少了頁面承載信息的容量，當(dāng)然現(xiàn)在有新型模式：上滑閱讀時(shí)隱藏Tab 欄，下滑返回時(shí)顯示，這種模式某種程度上解決了這個(gè)問題；

      承載數(shù)量有限——模塊數(shù)量不超過5個(gè)，數(shù)量上的限制也就限制了 APP 主導(dǎo)航的分類數(shù)量，是否使用此導(dǎo)航方式，要根據(jù) APP 的組織系統(tǒng)來決定；

      （二）底部Tab欄擴(kuò)展形式——駝式導(dǎo)航

      優(yōu)缺點(diǎn)與底部Tab欄基本相同，“駝峰”的作用主要是把一項(xiàng)對(duì)于產(chǎn)品來說高優(yōu)先級(jí)的行動(dòng)放在突出位置，并用較大的“視覺重量”來展示，如下圖所示的閑魚、有道云筆記的駝式導(dǎo)航，它們都有自己的最優(yōu)先級(jí)的模塊需要突出展示，因此選用了駝式導(dǎo)航。

            （三）跳板式導(dǎo)航 （宮格式導(dǎo)航）

      跳板式導(dǎo)航最大優(yōu)勢(shì)在于生動(dòng)的圖標(biāo)設(shè)計(jì)使得模塊“好找”，當(dāng)然這也會(huì)有兩面性，形式如下圖所示：

      優(yōu)點(diǎn)：

      好找——較大的設(shè)計(jì)“重量”是通過圖標(biāo)來實(shí)現(xiàn)的，用戶對(duì)圖像的記憶是超過文字的，這也會(huì)使用戶在操作了幾次后潛意識(shí)就能找到要找的模塊，當(dāng)然僅有文字的跳板式導(dǎo)航無此優(yōu)點(diǎn)，如下圖所示，僅就好找這個(gè)維度，有圖標(biāo)的愛奇藝是勝過僅有文字的網(wǎng)易嚴(yán)選的；

      缺點(diǎn):

      麻煩——無法在多入口間來回轉(zhuǎn)換，不適合信息較為扁平的 APP例：新聞?lì)?APP不適合宮格式導(dǎo)航，你可以想象你看完軍事類的新聞，想看看科技新聞，總得先回到主頁面再跳轉(zhuǎn)到科技類頁面，頁面跳轉(zhuǎn)的增加導(dǎo)致用戶操作的繁瑣程度增加；

      壓力大——?？硕芍赋?，一個(gè)人面臨的選擇越多，壓力越大，這在宮格數(shù)量較多時(shí)會(huì)突顯，再加設(shè)計(jì)模式的扁平化，進(jìn)一步增加用戶的選擇壓力；

      題外話：雖然現(xiàn)在宮格式導(dǎo)航出鏡率與早年相比大幅下降，但從手機(jī)操作系統(tǒng)誕生之日起，宮格式與輪播式導(dǎo)航的組合一直作為系統(tǒng)主導(dǎo)航存在，原因在于對(duì)大多數(shù)用戶而言經(jīng)常使用的 APP 最多也就十幾個(gè)，宮格式突出圖標(biāo)的展現(xiàn)方式有利于提高APP的辨識(shí)度。 

      （四）列表菜單式導(dǎo)航（層級(jí)導(dǎo)航）

      列表式導(dǎo)航的最大優(yōu)勢(shì)在于可以高效、清晰地展示信息，同時(shí)可以容納較多信息，形式如下圖所示：

            優(yōu)點(diǎn)：

      高效——Y軸方向占用空間少，可以高效、清晰地展示信息，X軸方向可以容納較多信息，適合于既要有名稱又要有描述的模塊，例：支付寶—支付-我的頁面—余額一欄就可以看到你有多少余額，而不用進(jìn)入，體現(xiàn)了列表式導(dǎo)航欄的高效；

            好分組——鑒于屏幕Y軸方向有較大的空間可以利用，也就可以利用這些空間進(jìn)行分組分類。

      缺點(diǎn)：

      麻煩——同宮格式導(dǎo)航導(dǎo)航缺點(diǎn)1，這里不在贅述；

      壓力大——同宮格式導(dǎo)航導(dǎo)航缺點(diǎn)2，舉個(gè)例子，無論iOS系統(tǒng)或Andriod系統(tǒng)設(shè)置使用的都是列表式導(dǎo)航，很多情況下主導(dǎo)航與次級(jí)導(dǎo)航都是列表式導(dǎo)航，這種層級(jí)較深的情況就需要增加搜索系統(tǒng)輔助查找，從視覺設(shè)計(jì)的角度來看，列表式與搜索的形式很契合；

      視覺疲勞——當(dāng)同級(jí)內(nèi)容過多時(shí)，由于列表式導(dǎo)航形式較為單一，不斷在Y軸方向滑動(dòng)，容易造成視覺疲勞；

      題外話：鑒于以上優(yōu)缺點(diǎn)，列表式導(dǎo)航也主要以次級(jí)導(dǎo)航的方式存在，僅有設(shè)置、郵箱等突出效率的 APP會(huì)將其作為主導(dǎo)航。

      （五）固定選項(xiàng)卡&分段選項(xiàng)卡&滾動(dòng)選項(xiàng)卡

      iOS平臺(tái)的分段選項(xiàng)卡與Andriod平臺(tái)的固定選項(xiàng)卡、滾動(dòng)選項(xiàng)卡本質(zhì)上都是通過在頁面頂端對(duì)內(nèi)容進(jìn)行再分類，這三種導(dǎo)航的最大優(yōu)點(diǎn)在于在能夠使用戶清晰的看到APP的分類，滾動(dòng)選項(xiàng)卡、分段選項(xiàng)卡一般以二級(jí)導(dǎo)航的形式存在，固定選型卡既有以主導(dǎo)航形式存在的情況，也有以二級(jí)導(dǎo)航形式存在的情況，下面來看看他們分別有什么優(yōu)點(diǎn)與缺點(diǎn)。

      （1）固定選項(xiàng)卡，形式如下圖所示：

      

 優(yōu)點(diǎn)：

      方便——相比列表菜單及跳板式導(dǎo)航，固定選項(xiàng)卡能夠通過滑動(dòng)方便的在模塊間切換內(nèi)容；

      優(yōu)先級(jí)一致——可以承載重要性及使用頻率處于同一等級(jí)的信息、模塊或者任務(wù)等；

      顯眼——位置處于頁面頂部，基于用戶由上至下的瀏覽習(xí)慣，固定選項(xiàng)卡處于頁面“顯眼處”；

      缺點(diǎn)： 

      承載數(shù)量有限——數(shù)量一般不超過4個(gè)；

      遮擋內(nèi)容——同 Tab 欄缺點(diǎn)1；

      （2）滾動(dòng)選項(xiàng)卡：

                                                                                              優(yōu)點(diǎn)：

      能裝——可以承載多個(gè)選項(xiàng)卡，且部分應(yīng)用選項(xiàng)卡內(nèi)容及順序可以自己定制，這也就解決了固定模式帶來的弊端——某些用戶喜歡的內(nèi)容需要滑動(dòng)半天：

      瘦——由于滾動(dòng)選項(xiàng)卡是以滑動(dòng)操作為主，點(diǎn)按的操作方式較為低頻，因此選項(xiàng)卡大多以“瘦小”的文字形式展現(xiàn)，占用空間較少；

     缺點(diǎn)：

     壓力大——同跳板式導(dǎo)航缺點(diǎn)2，一般滾動(dòng)選項(xiàng)卡數(shù)量較多，這就增加了用戶的選擇壓力。

     遮擋內(nèi)容——同 Tab 欄缺點(diǎn)1

      （3）分段式選項(xiàng)卡：

            優(yōu)點(diǎn)：

      優(yōu)先級(jí)一致——可以承載重要性及使用頻率處于同一等級(jí)的信息、模塊或者任務(wù)等；

      顯眼——位置處于頁面頂部，基于用戶由上至下的瀏覽習(xí)慣，固定選項(xiàng)卡處于頁面“顯眼處”；

      缺點(diǎn)：

      不能滑——不能滑動(dòng)操作，只能點(diǎn)按，且因分段式選項(xiàng)卡處于頁面頂端，給用戶的操作帶來了不便：

      承載數(shù)量有限——數(shù)量一般不超過3個(gè)；

      （五）陳列館式導(dǎo)航

      一般以次級(jí)導(dǎo)航的方式存在，最大的優(yōu)勢(shì)在于能夠突出展示內(nèi)容，與跳板式導(dǎo)航的區(qū)別在于，陳列館式導(dǎo)航可以隨時(shí)更新內(nèi)容，類似圖片直播類的 APP 使用這種導(dǎo)航形式比較多，一般有三種形式——網(wǎng)格式布局、輪盤布局、瀑布流網(wǎng)格布局，如下圖所示，從左至右分別是一直播、小米有品、花瓣：

            優(yōu)點(diǎn)：

      直觀——可以實(shí)時(shí)更新內(nèi)容，對(duì)于內(nèi)容的展示較為直觀；

      缺點(diǎn)：

      不適合當(dāng)家做主——由于其適合作為展示內(nèi)容的窗口，因此不適合作為主導(dǎo)航；

      題外話：瀑布流網(wǎng)格式布局的部分畫面半隱藏式的展示內(nèi)容，吸引用戶繼續(xù)往下探索，有利于使用戶進(jìn)入沉浸式狀態(tài)，但輪盤式布局的缺點(diǎn)在于在用戶以縱向?yàn)g覽為主的情況下，向X軸要空間的但會(huì)打斷用戶向下瀏覽的順暢性，且承載內(nèi)容有限，一般卡片的數(shù)量都少于10個(gè)。

      （六）隱喻式導(dǎo)航

      隱喻式導(dǎo)航的最大優(yōu)勢(shì)在于降低學(xué)習(xí)成本，但我們需要避免的是為了隱喻而隱喻，不應(yīng)該被隱喻限制住了手腳。

      例：如果在移動(dòng)端或者PC端使用隱喻式文件夾，那你就不可能在一個(gè)文件夾中放一個(gè)文件夾，再放一個(gè)文件夾......但實(shí)際上我們可以以俄羅斯套娃的形式不斷在文件夾套文件夾，從而使對(duì)我們的資源進(jìn)行更好的分類管理，打破現(xiàn)實(shí)中文件夾的局限性，而不是要死板硬套的隱喻。

      題外話：如下圖所示，這是錘子科技的 Smartisan OS 系統(tǒng)的相機(jī)圖標(biāo)，這就是很好的隱喻，采用相機(jī)鏡頭=作為手機(jī)相機(jī)圖標(biāo)，降低了用戶成本，當(dāng)然畫的也很好。

      （七）抽屜式導(dǎo)航

      抽屜式導(dǎo)航最大的優(yōu)勢(shì)在于能藏，這也注定了它最大缺點(diǎn)是藏起來的內(nèi)容人們經(jīng)常會(huì)忘了它們的存在。如下圖所示，從左至右抽屜式導(dǎo)航主要有三種形式，浮層式、嵌入式、3D模式。

      優(yōu)點(diǎn)：

      能藏——將大部分模塊隱藏起來，使得界面更加美觀，且突出產(chǎn)品的核心功能，避免用戶被不太重要的內(nèi)容所影響，畢竟用戶精力有限

      好展現(xiàn)創(chuàng)意——由于主導(dǎo)航的內(nèi)容在大半個(gè)頁面上，頁面背景部分給設(shè)計(jì)師留下的創(chuàng)意空間就比較大，設(shè)計(jì)師可以結(jié)合品牌特點(diǎn)在背景上營(yíng)造相應(yīng)的氛圍。

      缺點(diǎn)：

      容易忘——藏在抽屜里的模塊，優(yōu)先級(jí)明顯降低，所以產(chǎn)品大流量入口不適合放在抽屜導(dǎo)航中；

      題外話：基于用戶從左到右的文字瀏覽習(xí)慣，抽屜導(dǎo)航的圖標(biāo)大部分情況下是在左上角，屬于用戶單手操作的盲區(qū)。

      （八）下拉菜單式

      與抽屜式導(dǎo)航類似，最大優(yōu)勢(shì)在于能藏，使得界面內(nèi)容保持簡(jiǎn)潔，一般下拉式菜單不會(huì)覆蓋整個(gè)頁面，甚至也不會(huì)增加黑色蒙版，因此會(huì)給用戶頁面層級(jí)較少的錯(cuò)覺，避免了頻繁的頁面跳轉(zhuǎn)。

      優(yōu)點(diǎn)：

      能藏——將功能隱藏在一小塊，保證了界面的簡(jiǎn)潔，同時(shí)也使得界面上能夠容納更多的操作；

      缺點(diǎn)：

      容易忘——同抽屜式導(dǎo)航缺點(diǎn)1。   

      題外話：在iOS中下拉菜單為自定義控件，而Andriod 系統(tǒng)為這種導(dǎo)航提供了特別的控件——Spinner控件。Spinner用于同一個(gè)類別下的不同視圖間進(jìn)行導(dǎo)航，類似便簽類APP，在頂部設(shè)置文件夾，在此導(dǎo)航中包括各種不同的文件夾，類似通話便簽、私密便簽等各類文件夾，但我們?cè)诒ＷC對(duì)用戶而言可理解且符合邏輯的情況下，不應(yīng)該過于死板。

      （九）卡片式導(dǎo)航

      卡片式導(dǎo)航的原型是撲克牌，模仿了撲克牌中常見的切牌、洗牌、翻牌等手法，卡片式導(dǎo)航的最大優(yōu)點(diǎn)在于可以突出內(nèi)容，例：如下圖所示，最新版（8.11.0版）微博在信息架構(gòu)上做了調(diào)整，視頻模塊采用了卡片式導(dǎo)航。

      優(yōu)點(diǎn)：

      有趣——配合操作動(dòng)效，與用戶交互的方式比較有趣，相比其他交互方式更為吸引用戶；

      秩序感——卡片整體性較好，秩序感更強(qiáng)，每個(gè)卡片就是一塊內(nèi)容；

      缺點(diǎn)：

      效率低——對(duì)于卡片只能逐個(gè)查看，不能進(jìn)行全局性瀏覽，也不能進(jìn)行跳躍式查看，效率較低；    

      浪費(fèi)空間——占用頁面空間較大,最好在需要突出內(nèi)容的 APP使用這種導(dǎo)航方式，也就是物盡其用，避免在不必要的情況下使用卡片式導(dǎo)航，造成頁面空間的浪費(fèi)。

      （十）輪播式導(dǎo)航

      這種導(dǎo)航方式主要是通過增加頁面指示器配合卡片式導(dǎo)航，讓用戶知道這里不僅僅有一張卡片，本質(zhì)上來說這也是增加了頁面指示器的卡片式導(dǎo)航，卡片式導(dǎo)航有的優(yōu)缺點(diǎn)，它也都有，只是這種導(dǎo)航方式不會(huì)占據(jù)整個(gè)頁面空間，從這個(gè)角度來說它最大的優(yōu)勢(shì)在于向X軸方向要空間，拓展頁面范圍。

      優(yōu)點(diǎn)：

      增加空間——從X軸方向要空間，拓展頁面范圍，使得同樣一塊內(nèi)容可以展示較多內(nèi)容，主要在banner、天氣類APP中使用，如下圖所示這是錘子科技商城首頁中的輪播式 banner。

      缺點(diǎn):

      大家不一樣——處于第一頁面的卡片優(yōu)先級(jí)遠(yuǎn)高于其他頁面；

      承載數(shù)量有限——一般數(shù)量不會(huì)超過10個(gè)；

      效率低——同卡片式導(dǎo)航的缺點(diǎn)，對(duì)于卡片只能逐個(gè)查看，不能進(jìn)行全局性瀏覽，也不能進(jìn)行跳躍式查看，效率較低；  

      (十一)折疊菜單式導(dǎo)航

      折疊菜單式導(dǎo)航最大的優(yōu)勢(shì)在于不用跳轉(zhuǎn)頁面就能夠看到更多信息，除列表式的折疊菜單外，也有部分APP金剛區(qū)使用折疊式菜單，如下圖所示的酷狗音樂首頁，采用這種方式的目的在于只給用戶展示最重要的流量入口，節(jié)省首頁的空間資源；

            

      優(yōu)點(diǎn)：

      能藏——類似于抽屜式導(dǎo)航優(yōu)點(diǎn)1；

      減少跳轉(zhuǎn)——避免頁面的跳轉(zhuǎn)，從而給用戶層級(jí)較少的感覺，減輕用戶使用壓力；

      缺點(diǎn)：

      承載數(shù)量有限——能夠承載的模塊有限，適于隱藏太多內(nèi)容；        

      （十二）儀表盤式導(dǎo)航

      儀表盤式導(dǎo)航類似于列表式導(dǎo)航，通過各種類型圖表展示關(guān)鍵數(shù)據(jù)， 使得用戶不用跳轉(zhuǎn)至下一頁面，也能夠?yàn)g覽關(guān)鍵數(shù)據(jù)，其優(yōu)勢(shì)與劣勢(shì)同列表式導(dǎo)航；

      三、尾巴

      最后跟大家說說在選擇導(dǎo)航時(shí)的需要把握的要點(diǎn)，我們還是得從產(chǎn)品出發(fā)，從產(chǎn)品信息架構(gòu)出發(fā)，對(duì)于寬而淺的組織架構(gòu)，我們可能會(huì)選擇滾動(dòng)式選項(xiàng)卡作為二級(jí)導(dǎo)航，例：今日頭條、網(wǎng)易新聞；對(duì)于核心業(yè)務(wù)突出的產(chǎn)品，我們可能會(huì)選擇抽屜式導(dǎo)航作為主導(dǎo)航，例：滴滴出行。設(shè)計(jì)，只有適合與否，適合的就是好的。

     最后的最后，這是我“這一篇就夠了”系列第一篇，下一篇講注冊(cè)登錄流程，感謝你的閱讀并期待你的關(guān)注，能對(duì)你有所啟發(fā)，是我的榮幸。