2022-9-8 博博
① 導(dǎo)航的起源與本質(zhì)
導(dǎo)航，英文是 Navigation，是 Navigate 的名詞形式，源于 1530 年代，由詞根 Navis 船+agere 駕駛組合而成。指的是借助某些科學(xué)儀器，找到從一個(gè)島嶼到另一個(gè)島嶼的路徑。
圖1 導(dǎo)航的起源
誕生于中世紀(jì)大航海的導(dǎo)航，從誕生之初就跟起點(diǎn)、目標(biāo)和路徑密切相關(guān)。隨著導(dǎo)航的發(fā)展，導(dǎo)航領(lǐng)域從海洋擴(kuò)展到陸地，航空、太空，以及互聯(lián)網(wǎng)。
圖2 導(dǎo)航領(lǐng)域的類型
今天我們重點(diǎn)要聊的就是移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的導(dǎo)航設(shè)計(jì)，雖然脫離了物理空間，但導(dǎo)航的本質(zhì)始終是不變的。
圖3 導(dǎo)航的本質(zhì)
導(dǎo)航本質(zhì)：告訴用戶“我”在哪里（起點(diǎn)）？“我”能去到哪里（目標(biāo)）？“我”該怎么去（路徑）？
基于此，導(dǎo)航設(shè)計(jì)一定要能清晰的體現(xiàn)用戶當(dāng)前所在的位置（一般用選中態(tài)表示），并通過(guò)其他未選中的導(dǎo)航，來(lái)告知用戶可以去的目標(biāo)，再通過(guò)最簡(jiǎn)單的點(diǎn)擊或滑動(dòng)等操作讓用戶去往目的地。
圖4 互聯(lián)網(wǎng)產(chǎn)品導(dǎo)航示意
我歸納了移動(dòng)端常見的 10 種導(dǎo)航形式，大家可以根據(jù)其優(yōu)缺點(diǎn)和適用場(chǎng)景按需選用。
圖5 移動(dòng)端常見的10種導(dǎo)航形式
① 底 Tab 導(dǎo)航
底 Tab 導(dǎo)航在 iOS 中叫標(biāo)簽導(dǎo)航，在 Android 中稱之為底部導(dǎo)航，我將其稱為底 Tab 導(dǎo)航，它是 iOS 中最倡導(dǎo)和常見的導(dǎo)航形式。（現(xiàn)在也全面征服了 Android 系統(tǒng)）
圖6 底Tab導(dǎo)航
優(yōu)點(diǎn)：清晰直觀的展示了產(chǎn)品的核心功能，點(diǎn)擊切換方便快捷。
缺點(diǎn)：只能容納 3-5 個(gè)，數(shù)量有限。
使用場(chǎng)景：產(chǎn)品包含 3~5 個(gè)需要高頻切換使用的非同類型模塊時(shí)可用。
② 舵式導(dǎo)航
舵式導(dǎo)航可以看做是底 Tab 導(dǎo)航的一個(gè)變異，區(qū)別就在于把中間的導(dǎo)航像船舵一樣凸顯，以此來(lái)強(qiáng)調(diào)中間的導(dǎo)航功能（一般用于承載發(fā)布類功能）。
圖7 舵式導(dǎo)航
優(yōu)點(diǎn)：舵式導(dǎo)航特殊的造型和顏色可以很好的吸引用戶注意力，促進(jìn)功能轉(zhuǎn)化。
缺點(diǎn)：為了讓舵居中，導(dǎo)航個(gè)數(shù)只能為 3 個(gè)或 5 個(gè)，數(shù)量有限制。聚合多個(gè)發(fā)布類功能時(shí)，需要二次選擇，操作不夠便捷。
使用場(chǎng)景：對(duì)于強(qiáng)調(diào) UGC 類的產(chǎn)品或者特別高頻的操作可以使用。
③ 頂 Tab 導(dǎo)航
頂 Tab 導(dǎo)航最開始是 Android 推出用以抗衡 iOS 底 Tab 導(dǎo)航的，結(jié)果大家已經(jīng)有感知了（抗衡徹底失?。?。但頂 Tab 導(dǎo)航并沒(méi)有因此而消失，而是重新找到了自己作為次級(jí)導(dǎo)航的生態(tài)位。
圖8 頂Tab導(dǎo)航
優(yōu)點(diǎn)：可以承載 2~N 個(gè)導(dǎo)航，可拓展性強(qiáng)，手勢(shì)切換比較便捷。
缺點(diǎn)：手勢(shì)切換有學(xué)習(xí)成本，頂部點(diǎn)擊不方便，看不見的導(dǎo)航內(nèi)容不容易被發(fā)現(xiàn)和使用。
使用場(chǎng)景：作為主導(dǎo)航幾乎已被底 Tab 取代，作為次級(jí)導(dǎo)航非常常見，特別是有多個(gè)并列層級(jí)的內(nèi)容需要展示時(shí)。
④ 抽屜導(dǎo)航
如果產(chǎn)品只有一類核心展示的內(nèi)容，可以使用抽屜導(dǎo)航而不用底 Tab 導(dǎo)航，以最大限度的利用屏幕空間。
圖9 抽屜導(dǎo)航
優(yōu)點(diǎn)：可拓展性強(qiáng)，可以收納多個(gè)不常用的功能，釋放屏幕展示空間。
缺點(diǎn)：被隱藏的功能不容易被發(fā)現(xiàn)和使用。
使用場(chǎng)景：某些核心功能比較單一的產(chǎn)品，或者跟底 Tab 導(dǎo)航組合使用，收納不常用的功能。
⑤ 菜單式導(dǎo)航
跟抽屜式導(dǎo)航類似，把一組操作收納到一個(gè)地方，用戶可以點(diǎn)擊快速選擇。
圖10 菜單式導(dǎo)航
優(yōu)點(diǎn)：可拓展性強(qiáng)，可以收納多個(gè)功能，釋放屏幕展示空間。
缺點(diǎn)：被隱藏的功能不容易被發(fā)現(xiàn)和使用。
使用場(chǎng)景：當(dāng)頁(yè)面功能較多，無(wú)法全部直接展示時(shí)，可以使用下拉菜單統(tǒng)一收納。
⑥ 宮格式導(dǎo)航
早期比較流行的主導(dǎo)航，現(xiàn)在是比較常用的局部導(dǎo)航。
圖11 宮格式導(dǎo)航
優(yōu)點(diǎn)：信息層級(jí)扁平，個(gè)數(shù)較少時(shí)，核心功能一目了然，用戶選擇成本低。
缺點(diǎn)：個(gè)數(shù)較多時(shí)視覺(jué)認(rèn)知成本、查找成本都很高，進(jìn)入功能后切換成本也高。
使用場(chǎng)景：平臺(tái)類產(chǎn)品的核心功能展示，或者普通產(chǎn)品的重要功能/運(yùn)營(yíng)入口。
⑦ 列表式導(dǎo)航
對(duì)于主要以文本為載體的產(chǎn)品，采用列表式導(dǎo)航非常常見，比如短信、郵件、記事本、設(shè)置等。
圖12 列表式導(dǎo)航
優(yōu)點(diǎn)：有足夠的文本/圖標(biāo)顯示空間，可以顯示標(biāo)題和輔助文字，傳遞的信息內(nèi)容相對(duì)豐富、直觀，而且可以顯示多條內(nèi)容。
缺點(diǎn)：整體頁(yè)面信息會(huì)比較密集，頁(yè)面布局相對(duì)呆板，條目多時(shí)查找會(huì)比較困難。
使用場(chǎng)景：適用于展示多條以文本為主體的內(nèi)容。
⑧ 瀑布流導(dǎo)航
對(duì)于主要以圖片/視頻為載體的產(chǎn)品，采用瀑布流導(dǎo)航的非常常見，比如花瓣、點(diǎn)評(píng)、淘寶、bilibili 等。
圖13 瀑布流導(dǎo)航
優(yōu)點(diǎn)：能夠凸顯圖片的吸引力，讓用戶聚焦在圖片上，促進(jìn)內(nèi)容的轉(zhuǎn)化。同時(shí)可以承載無(wú)限多的內(nèi)容，自動(dòng)加載不翻頁(yè)，增強(qiáng)用戶瀏覽的沉浸感和效率。
缺點(diǎn)：屏幕空間占用較大，依賴于信息推薦的精準(zhǔn)度。
使用場(chǎng)景：適用于展示多條以圖片為主體的內(nèi)容。
⑨ 輪播式導(dǎo)航
當(dāng)產(chǎn)品/模塊提供的信息足夠簡(jiǎn)單扁平，一屏即可顯示全部核心信息時(shí)，可以采用整屏輪播或區(qū)域輪播的導(dǎo)航形式。
圖14 輪播式導(dǎo)航
優(yōu)點(diǎn)：操作簡(jiǎn)單，信息呈現(xiàn)直觀。
缺點(diǎn)：未輪播的信息曝光率和轉(zhuǎn)化率都比較低。
使用場(chǎng)景：簡(jiǎn)單的小工具類產(chǎn)品可以整屏顯示核心信息。運(yùn)營(yíng)廣告位可以區(qū)域輪播展示。
⑩ 沉浸式導(dǎo)航
在活動(dòng)類、游戲類產(chǎn)品中，常常采用沉浸式導(dǎo)航，增強(qiáng)用戶沉浸感。
圖15 沉浸式導(dǎo)航
優(yōu)點(diǎn)：導(dǎo)航與頁(yè)面融為一體，視覺(jué)感受沉浸，頁(yè)面更有吸引力。
缺點(diǎn)：用戶可能注意不到某些是內(nèi)容的元素，導(dǎo)致該元素的轉(zhuǎn)化率較低。
適用場(chǎng)景：活動(dòng)類、游戲類的產(chǎn)品中。
① 確認(rèn)信息結(jié)構(gòu)
導(dǎo)航設(shè)計(jì)是以信息結(jié)構(gòu)為基礎(chǔ)的，所以在進(jìn)行導(dǎo)航設(shè)計(jì)之前，我們需要將范圍層提供的所有信息進(jìn)行分析，刪減、分類、整理形成特定的信息結(jié)構(gòu)。
圖16 從信息到信息結(jié)構(gòu)
以微信的部分信息為例，我們將信息進(jìn)行分類、整理、命名形成了上述的組織系統(tǒng)，讓信息與信息之間的邏輯關(guān)系一目了然。
這里大家可以參考行業(yè)競(jìng)品的信息架構(gòu)，結(jié)合自己對(duì)業(yè)務(wù)關(guān)系的理解，輔助以卡片分類的方式，整理出最適合的信息結(jié)構(gòu)。
PS：為了提升導(dǎo)航的易用性，建議的導(dǎo)航廣度最好不超過(guò) 5，深度不超過(guò) 3。這樣符合米勒定律，用戶的選擇壓力較小，也不容易迷失在較深的路徑中。（當(dāng)然這只是一個(gè)建議，優(yōu)先要保證的還是信息結(jié)構(gòu)的合理性，不能為了滿足上述建議而破壞信息之間本身的邏輯關(guān)系，時(shí)刻牢記認(rèn)知成本＞操作成本，不能為了減少操作成本而增加認(rèn)知成本）
② 選擇導(dǎo)航形式
根據(jù)信息結(jié)構(gòu)中主導(dǎo)航功能的個(gè)數(shù)，以及主導(dǎo)航功能之間的優(yōu)先級(jí)關(guān)系，再結(jié)合各導(dǎo)航的適用場(chǎng)景、個(gè)數(shù)限制、內(nèi)容豐富度、功能可見性、操作便捷性等，匹配合適的主導(dǎo)航、次級(jí)導(dǎo)航和局部導(dǎo)航形式。
圖17 導(dǎo)航總結(jié)
從現(xiàn)況來(lái)看，多數(shù)產(chǎn)品都愿意采用底 Tab 的主導(dǎo)航形式，因?yàn)榭梢云毓舛鄠€(gè)功能，用戶點(diǎn)擊操作方便，學(xué)習(xí)成本低，利于其他功能的轉(zhuǎn)化，后續(xù)拓展也比較方便（可以配合抽屜式導(dǎo)航、頂 Tab 導(dǎo)航，菜單式導(dǎo)航和局部導(dǎo)航混合使用）
③ 優(yōu)化導(dǎo)航路徑
信息結(jié)構(gòu)梳理了信息節(jié)點(diǎn)之間的邏輯關(guān)系，但用戶在真正使用產(chǎn)品時(shí)，有些子節(jié)點(diǎn)的功能/信息，其優(yōu)先級(jí)和頻率反而更高，為了讓用戶能夠方便快捷的使用這些子功能，還需要結(jié)合用戶的使用場(chǎng)景，在合適的場(chǎng)景下添加一些節(jié)點(diǎn)和路徑，以提升用戶操作的流暢性和效率。
圖18 組織系統(tǒng)和導(dǎo)航系統(tǒng)的關(guān)系
還是以微信的導(dǎo)航設(shè)計(jì)為例，因?yàn)樘砑雍糜?，掃一掃、收付款功能重要性和使用頻率，微信特地在首頁(yè)增加了一個(gè)菜單導(dǎo)航，方便用戶能更快捷的觸達(dá)這些功能。
所以導(dǎo)航設(shè)計(jì)，不僅要正確的反映信息之間的結(jié)構(gòu)關(guān)系，選擇合適的導(dǎo)航形式，更重要的是根據(jù)用戶的目標(biāo)、認(rèn)知和習(xí)慣來(lái)組織導(dǎo)航節(jié)點(diǎn)，讓用戶可以很直觀的理解“我”在哪，“我”可以去哪？并通過(guò)最便捷的操作到達(dá)目的地。
作者：悅姐聊設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn