2023-12-8 周周
前言
從 0 到 1 搭建新頁面時，面對許多功能和信息，我們該怎樣幫助用戶找到目標(biāo)功能和內(nèi)容？有多少導(dǎo)航方式可以選擇？今天帶大家了解導(dǎo)航系統(tǒng)的設(shè)計，讓用戶使用我們的產(chǎn)品不迷路～
導(dǎo)航的英文 navigation 源于 15-17 世紀(jì)的地理大發(fā)現(xiàn)時代，詞源來自拉丁文 navis(船)+agare(引導(dǎo)) ，指引導(dǎo)船舶沿一定航線從一點運(yùn)動到另一點的方法。隨著科學(xué)技術(shù)的發(fā)展，導(dǎo)航的概念也不斷地延伸。
在互聯(lián)網(wǎng)領(lǐng)域，導(dǎo)航設(shè)計是一種專門用于呈現(xiàn)信息空間的界面設(shè)計形式，是產(chǎn)品信息架構(gòu)的外在呈現(xiàn)，它讓用戶能夠在信息架構(gòu)中自由穿行。簡單來說，導(dǎo)航設(shè)計的價值就是在各信息間“鋪路搭橋”、做好“指示牌”，讓用戶知道這里有什么、怎么走、在哪里。
信息&信息架構(gòu)&導(dǎo)航設(shè)計的關(guān)系
1. 導(dǎo)航系統(tǒng)的定義
導(dǎo)航系統(tǒng)，是以幫助用戶查找目標(biāo)功能和內(nèi)容為目的的界面元素的集合。這些元素包含導(dǎo)航的跳轉(zhuǎn)路徑、導(dǎo)航組件、導(dǎo)航上的信息等，單個導(dǎo)航組件是無法成為系統(tǒng)的。
舉個例子：當(dāng)界面上的導(dǎo)航組件單獨拿出來時，我們無法理解這些組件之間是否存在聯(lián)系。但當(dāng)它們被放到頁面對應(yīng)位置上時，就能看出這是在哪一個頁面，以及頁面中包含哪些子模塊。所以，這些導(dǎo)航組件共同完成了該模塊的導(dǎo)航任務(wù)，組成了一個局部導(dǎo)航系統(tǒng)。
導(dǎo)航組件&局部導(dǎo)航系統(tǒng)案例
2. 導(dǎo)航系統(tǒng)的分類
一個產(chǎn)品可以具備多個子導(dǎo)航系統(tǒng)，來共同完成引導(dǎo)用戶的任務(wù)，各個導(dǎo)航系統(tǒng)在產(chǎn)品中承擔(dān)不同的作用。下面將結(jié)合《用戶體驗要素》書中的導(dǎo)航系統(tǒng)分類進(jìn)行介紹——
全局導(dǎo)航：全局導(dǎo)航一般而言是在網(wǎng)站的每一頁都會顯示的全域?qū)Ш较到y(tǒng)，覆蓋整個產(chǎn)品的通路，通常以每個頁面頂端的導(dǎo)航欄形式來實現(xiàn)，它不一定包含全局信息，但是一定可以讓用戶無論在哪個層級都可以去到其目標(biāo)的關(guān)鍵節(jié)點。
局部導(dǎo)航：提供用戶在產(chǎn)品的某個模塊中到“附近地點”的路。在一個嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)層次中，局部導(dǎo)航可能只能提供一個?面父級、兄弟級和子級的通路。
全局導(dǎo)航&局部導(dǎo)航案例
輔助導(dǎo)航：跨越網(wǎng)站的各個層級，使用戶可以在不同層級的頁面間跳轉(zhuǎn)。提供了全局導(dǎo)航或局部導(dǎo)航不能快速到達(dá)的相關(guān)內(nèi)容的快捷途徑。這種導(dǎo)航非常方便“中途折返”型的用戶。
輔助導(dǎo)航案例
內(nèi)聯(lián)導(dǎo)航：嵌入自身內(nèi)容中的導(dǎo)航。有些關(guān)系不適合放在全站和局部導(dǎo)航結(jié)構(gòu)分類中，這時就需要建立指向特定網(wǎng)頁、文件或?qū)ο蟮那榫笆綄?dǎo)航鏈接。合理地使用情景式導(dǎo)航能夠增加導(dǎo)航的靈活性。
內(nèi)聯(lián)導(dǎo)航案例
友好導(dǎo)航：所謂友好導(dǎo)航是指它可以為用戶提供一個便利的前進(jìn)途徑，在需要的時候能夠找到入口信息，通常在不需要的時候成隱藏狀態(tài)（或比較不顯眼）。
友好導(dǎo)航案例
遠(yuǎn)程導(dǎo)航：所謂遠(yuǎn)程導(dǎo)航是指不包含在產(chǎn)品結(jié)構(gòu)中，以獨立的方式存在產(chǎn)品內(nèi)，通常表現(xiàn)為網(wǎng)站地圖、索引表等。
遠(yuǎn)程導(dǎo)航案例
作為設(shè)計師，我們可以從導(dǎo)航的架構(gòu)、框架、組件、信息這幾個維度進(jìn)行設(shè)計。為了便于大家理解，下面我們把「導(dǎo)航系統(tǒng)設(shè)計」類比為「鋪路」——
導(dǎo)航架構(gòu)：確定路通往的方向，讓信息間的關(guān)系符合用戶認(rèn)知、頁面跳轉(zhuǎn)路徑長短合理。
導(dǎo)航框架：確定路具體修在什么位置，在界面尋找合適的位置放置導(dǎo)航。
導(dǎo)航組件：修馬路還是修人行道？挑選合適的、符合用戶習(xí)慣的組件來承載導(dǎo)航功能。
導(dǎo)航信息：裝好路標(biāo)和指示牌，友好地告訴用戶他在哪里，可以去哪里，怎么走。
導(dǎo)航系統(tǒng)設(shè)計內(nèi)容拆解
1. 導(dǎo)航架構(gòu)
以 ios 設(shè)計規(guī)范為例，導(dǎo)航架構(gòu)可分為層級式導(dǎo)航、扁平式導(dǎo)航、內(nèi)容驅(qū)動或體驗驅(qū)動導(dǎo)航。
層級式導(dǎo)航架構(gòu)：在到達(dá)目標(biāo)界面前，每個界面僅做一個選擇。如果要去另一個目標(biāo)界面，必須回溯自己的腳步，或者從頭開始做不同的選擇，呈現(xiàn)了產(chǎn)品信息的包含關(guān)系及信息的深度。
層級式導(dǎo)航架構(gòu)案例
扁平式導(dǎo)航架構(gòu)：允許用戶在同一層級的多個內(nèi)容類別之間進(jìn)行切換，它主要呈現(xiàn)的是產(chǎn)品信息的廣度。
扁平式導(dǎo)航架構(gòu)案例
內(nèi)容驅(qū)動或體驗驅(qū)動導(dǎo)航架構(gòu)：在內(nèi)容中自由移動，或者內(nèi)容本身可以定義導(dǎo)航。游戲、書籍和其他沉浸式應(yīng)用程序通常使用這種導(dǎo)航形式。
內(nèi)容/體驗驅(qū)動導(dǎo)航架構(gòu)案例
在實際的產(chǎn)品設(shè)計中，很少有整個產(chǎn)品僅包含一種類型的導(dǎo)航結(jié)構(gòu)的情況，一般會將前三種類型的導(dǎo)航結(jié)構(gòu)進(jìn)行合理的混合，讓用戶無論如何操作，都能自由地在信息架構(gòu)中穿行。同時，在設(shè)計時還需要注意導(dǎo)航系統(tǒng)的深度及廣度，避免過深和過廣。
2. 導(dǎo)航框架
導(dǎo)航的框架和產(chǎn)品性質(zhì)及用戶使用場景息息相關(guān)，對于不同的產(chǎn)品類型，導(dǎo)航框架也會有所不同，同一產(chǎn)品下的不同模塊，也會有不同的導(dǎo)航布局。
常見的導(dǎo)航框架
內(nèi)容類&社交類產(chǎn)品：產(chǎn)品內(nèi)部包含大量不同類型主題的內(nèi)容，各內(nèi)容在層級上無主次之分，鼓勵用戶探索和社交。這類型產(chǎn)品常使用標(biāo)簽式導(dǎo)航，將導(dǎo)航布局于?面的頂部和底部，有時會布局有金剛區(qū)。
內(nèi)容&社交類產(chǎn)品導(dǎo)航框架案例
工具類產(chǎn)品：核心功能固化，導(dǎo)航架構(gòu)扁平，用戶目標(biāo)明確，只需要用戶快速找到目標(biāo)功能，常使用列表導(dǎo)航及宮格導(dǎo)航，直接把核心功能按照優(yōu)先級鋪在首?上。
工具類產(chǎn)品導(dǎo)航框架案例
游戲類產(chǎn)品：導(dǎo)航本身就是玩法的一部分，要給用戶便捷的入口同時，不能遮擋游戲主界面，因此導(dǎo)航很多時候會環(huán)繞游戲主界面的四周，甚至導(dǎo)航本身成為了場景的一部分。
游戲類產(chǎn)品導(dǎo)航框架案例
閱讀類&（長）視頻類產(chǎn)品：需要把注意力全身心投入內(nèi)容中的場景下，導(dǎo)航有時會成為一種干擾。例如閱讀中和視頻觀看中的場景。此時導(dǎo)航一般會隱藏起來，需要點擊屏幕才能呼出。
閱讀&長視頻類產(chǎn)品導(dǎo)航框架案例
3. 導(dǎo)航組件
確認(rèn)好導(dǎo)航的布局后，該能用哪些組件來搭建呢？下面為大家介紹幾種常見的導(dǎo)航組件。
PC 端和 APP 端常見的導(dǎo)航組件
菜單
簡介：為頁面和功能提供導(dǎo)航的菜單列表。
位置：一般位于網(wǎng)頁頂部導(dǎo)航或網(wǎng)頁左側(cè)。
使用場景：頂部導(dǎo)航一般屬于全局導(dǎo)航，提供網(wǎng)站一級頁面及關(guān)鍵的二級頁面鏈接；側(cè)邊菜單一般是局部導(dǎo)航。
菜單導(dǎo)航案例
標(biāo)簽式導(dǎo)航
簡介：標(biāo)簽式導(dǎo)航相當(dāng)于是 APP 中的菜單控件，是大部分的 APP 都會使用的導(dǎo)航之一。
位置：全局導(dǎo)航位于頁面底部，針對單頁面的局部導(dǎo)航位于頁面頂部、針對單個模塊的局部導(dǎo)航位于該模塊頂部。
使用場景：當(dāng)產(chǎn)品內(nèi)包含的內(nèi)容/功能類型較多且在層級上比較扁平，無明顯上下級關(guān)系，同時用戶需要在這些類別中快速切換時使用。
標(biāo)簽式導(dǎo)航案例
標(biāo)簽式導(dǎo)航的延伸——
側(cè)面標(biāo)簽導(dǎo)航
簡介：放置在側(cè)面的標(biāo)簽導(dǎo)航
使用場景：多運(yùn)用在篩選、分類頁，作為局部導(dǎo)航使用
優(yōu)點 ：拓展性強(qiáng)，能容納多個標(biāo)簽
缺點 ：占用面積大，標(biāo)簽多時閱讀困難
側(cè)面標(biāo)簽導(dǎo)航案例
舵式導(dǎo)航
簡介：樣式上突出中間的功能，像一個舵
使用場景：需要突出或聚合重要且頻繁操作的入口時使用該樣式
優(yōu)點 ：相較于傳統(tǒng)標(biāo)簽式導(dǎo)航，容納了更多功能，重點更突出
缺點 ：多一步操作，新手有一定學(xué)習(xí)成本
舵式導(dǎo)航案例
篩選器
簡介：聚合大量標(biāo)簽信息
使用場景：用戶需要通過選擇多個維度的大量標(biāo)簽來篩選目標(biāo)內(nèi)容/功能時
優(yōu)點 ：能夠容納大量標(biāo)簽
缺點 ：標(biāo)簽多、熱區(qū)小，用戶尋找和點選對應(yīng)標(biāo)簽有一定難度
篩選器案例
頁頭
簡介：?頭是用來放置?面的名稱的，目的是告訴用戶現(xiàn)在所在的?面是哪，與整個網(wǎng)?是什么關(guān)系，上面也可以放置面包屑導(dǎo)航。
位置：一般位于頂部菜單的下方，內(nèi)容區(qū)域的上方。
使用場景：一般適用于 PC 端，需要明確告知用戶處于網(wǎng)站的哪個?面時使用。
頁頭案例
導(dǎo)航欄
簡介：是用來幫助用戶定位、導(dǎo)航、操作的基礎(chǔ)組件; 告知用戶當(dāng)前所在位置，連通?面跳轉(zhuǎn)路徑，同時還承載了針對當(dāng)前頁面全局性的操作。
位置：頁面頂部
使用場景：APP 全局適用
導(dǎo)航欄案例
注意事項：
面包屑
簡介：顯示網(wǎng)站的層級結(jié)構(gòu)，告知用戶當(dāng)前所在位置。由于 APP 端的操作空間有限，且產(chǎn)品的信息結(jié)構(gòu)不會有 PC 復(fù)雜，一般情況下 APP 不會使用面包屑控件。
位置：一般位于?頭中。
使用場景：在層級較深，且用戶需要從最后一個層級回到前面的層級時使用。
面包屑案例
注意事項：
漢堡（抽屜）導(dǎo)航
簡介: 將菜單隱藏在當(dāng)前?面內(nèi)，點擊入口即可像抽屜一樣拉出菜單。
位置: 入口位于左上方，從左側(cè)拉出抽屜；或入口在右上方，從右側(cè)拉出抽屜。
使用場景：
漢堡（抽屜）導(dǎo)航案例
下拉菜單
簡介：點擊或移入觸點，會出現(xiàn)一個下拉菜單?？稍诹斜碇羞M(jìn)行選擇，并執(zhí)行相應(yīng)的命令。
使用場景：當(dāng)?面上的「操作」命令過多時，用此組件可以收納「操作」元素。
下拉菜單案例
注意事項：盡管下拉菜單可以節(jié)省空間，但功能被收納起來，用戶尋找不方便，需要一定學(xué)習(xí)成本。
分頁
使用場景：PC 端列表，內(nèi)容過長時采用分頁的形式分割，每次只加載一個頁面。
分頁案例
在 APP 的操作習(xí)慣中，常常不使用傳統(tǒng)的分頁導(dǎo)航，而是采用其他方法來瀏覽數(shù)據(jù)，比較常見的是內(nèi)容流的形式，用戶上滑會不斷加載地更多內(nèi)容，如果實在要尋找很早之前的內(nèi)容，可通過篩選器來篩選。
舉個例子：在閱讀類APP中，不可避免會有翻?的用戶需求，但是，精確點擊?數(shù)的操作對于APP來說太容易誤觸，因此閱讀類APP中的分?器使用了slider的形式，滑動過程中會提示?數(shù)，避免錯誤點擊。
slider 形式分頁案例
步驟條
使用場景:
步驟條案例
注意事項：
固釘
使用場景：當(dāng)內(nèi)容區(qū)域比較長，需要滾動頁面時，這部分內(nèi)容對應(yīng)的操作或者導(dǎo)航需要在滾動范圍內(nèi)始終展現(xiàn)。
位置：常用于側(cè)邊菜單和按鈕組合。
固釘案例
懸浮球（觸點）導(dǎo)航
因為 APP 的界面比較小，基本上不會使用固釘組件，個別 APP 的界面，由于重點功能沒有合適的位置放置，會使用“懸浮球”組件讓其懸浮在頁面底部，也稱為“觸點導(dǎo)航”，但一般不會像固釘一樣直接在頁面上陳列多個功能。
懸浮球?qū)Ш桨咐?/p>
鏈接
在文章、視頻、圖片中，可以根據(jù)內(nèi)容，適當(dāng)放入相關(guān)的鏈接，讓用戶可以隨時點擊查看。比如在文本內(nèi)容中插入文字鏈接，或在圖片中附上商品標(biāo)簽等。
鏈接案例
宮格式導(dǎo)航
簡介：宮格式導(dǎo)航的最主要特點是利用網(wǎng)格布局將主要入口全部集中在頁面之上，各項之間等同重要，常見形式有 icon+文字、圖片+文字的瓷片。
使用場景：一般適用于功能模版之間相互獨立，沒有明顯的優(yōu)先級之分，且用戶不需要在不同的功能模版之間進(jìn)行頻繁跳轉(zhuǎn)的情況。
宮格式導(dǎo)航案例
注意事項：
列表式導(dǎo)航
簡介：在列表中陳列產(chǎn)品中的核心功能
使用場景：常?于工具類產(chǎn)品、設(shè)置?、APP 中的我的?這種需要高效陳列功能、工具的場景。
（* PC 由于展示空間較大，很少單純的列表導(dǎo)航，一般會在左側(cè)使用側(cè)邊菜單，右側(cè)直接展示導(dǎo)航內(nèi)的內(nèi)容。）
列表式導(dǎo)航案例
注意事項：
列表式導(dǎo)航符合用戶 F 型頁面瀏覽習(xí)慣，傳遞信息效率很高，但同時它縱向占用面積大，所以在設(shè)計時需要注意所占的屏幕空間，以及每屏能顯示多少條選項。
索引表
簡介：一個陳列了產(chǎn)品中，或產(chǎn)品某個模塊中所有內(nèi)容類別的?面。
使用場景：當(dāng)產(chǎn)品中含有大量的內(nèi)容類型、主題和分類時，可以使用索引表。
索引表導(dǎo)航案例
網(wǎng)站地圖
簡介：展示網(wǎng)站中的所有關(guān)鍵?面，方便用戶快速前往。
使用場景：一般是用在一些產(chǎn)品結(jié)構(gòu)復(fù)雜的網(wǎng)站中，很少應(yīng)用在 APP 中。
網(wǎng)站地圖案例
4. 導(dǎo)航的信息設(shè)計
導(dǎo)航上的信息包含哪些呢？以 vivo 官網(wǎng)首頁為例，該頁面的導(dǎo)航中包含了特殊提示、圖形、文案、狀態(tài)等。
導(dǎo)航中的信息內(nèi)容案例
導(dǎo)航信息設(shè)計的要點：
①準(zhǔn)確傳達(dá)產(chǎn)品的信息層級。比如一級菜單上有展開按鈕，二級菜單前無 icon，視覺上體現(xiàn)出父子級的關(guān)系。
導(dǎo)航信息層級案例
②保證閱讀舒適性，讓用戶能快速識別關(guān)鍵信息。
③注意信息的一致性和差異性。同一個功能的名稱和圖標(biāo)應(yīng)保持一致，不同功能則應(yīng)保證差異避免產(chǎn)生歧義。
④遵循目標(biāo)用戶的認(rèn)知和習(xí)慣。如 vivo 應(yīng)用商店針對內(nèi)銷和外銷使用了完全不同的信息表達(dá)方式，迎合不同類型用戶的使用習(xí)慣。
符合不同用戶習(xí)慣的導(dǎo)航案例
優(yōu)秀的導(dǎo)航系統(tǒng)設(shè)計，能夠合理完美地傳達(dá)產(chǎn)品的功能，快速引導(dǎo)用戶使用，而又不會干擾和困擾用戶的選擇。在實際的設(shè)計中，根據(jù)產(chǎn)品的功能特性搭建不同的導(dǎo)航系統(tǒng)。同時，產(chǎn)品的迭代發(fā)展和變化，也會導(dǎo)致導(dǎo)航的設(shè)計產(chǎn)生變化，需要依據(jù)用戶屬性和使用場景進(jìn)行靈活調(diào)整。
文章來源：優(yōu)設(shè)網(wǎng) 作者：VMIC UED
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、用戶體驗公司、軟件界面設(shè)計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
藍(lán)藍(lán)設(shè)計的小編 http://sillybuy.com