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