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