從0到1搭建新頁面時，面對許多功能和信息，我們該怎樣幫助用戶找到目標功能和內容？有多少導航方式可以選擇？今天帶大家了解導航系統(tǒng)的設計，讓用戶使用我們的產品不迷路。

一、導航

導航的英文navigation源于15-17世紀的地理大發(fā)現(xiàn)時代，詞源來自拉丁文navis(船)+agare(引導) ，指引導船舶沿一定航線從一點運動到另一點的方法。隨著科學技術的發(fā)展，導航的概念也不斷地延伸。

在互聯(lián)網領域，導航設計是一種專門用于呈現(xiàn)信息空間的界面設計形式，是產品信息架構的外在呈現(xiàn)，它讓用戶能夠在信息架構中自由穿行。簡單來說，導航設計的價值就是在各信息間“鋪路搭橋”、做好“指示牌”，讓用戶知道這里有什么、怎么走、在哪里。

▲ 信息&信息架構&導航設計的關系

二、導航系統(tǒng)

1. 導航系統(tǒng)的定義

導航系統(tǒng)，是以幫助用戶查找目標功能和內容為目的的界面元素的集合。這些元素包含導航的跳轉路徑、導航組件、導航上的信息等，單個導航組件是無法成為系統(tǒng)的。

舉個例子：當界面上的導航組件單獨拿出來時，我們無法理解這些組件之間是否存在聯(lián)系。但當它們被放到頁面對應位置上時，就能看出這是在哪一個頁面，以及頁面中包含哪些子模塊。所以，這些導航組件共同完成了該模塊的導航任務，組成了一個局部導航系統(tǒng)。

▲ 導航組件&局部導航系統(tǒng)案例

2. 導航系統(tǒng)的分類

一個產品可以具備多個子導航系統(tǒng)，來共同完成引導用戶的任務，各個導航系統(tǒng)在產品中承擔不同的作用。下面將結合《用戶體驗要素》書中的導航系統(tǒng)分類進行介紹——

全局導航：全局導航一般而言是在網站的每一頁都會顯示的全域導航系統(tǒng)，覆蓋整個產品的通路，通常以每個頁面頂端的導航欄形式來實現(xiàn)，它不一定包含全局信息，但是一定可以讓用戶無論在哪個層級都可以去到其目標的關鍵節(jié)點。

局部導航：提供用戶在產品的某個模塊中到“附近地點”的路。在一個嚴謹?shù)慕Y構層次中，局部導航可能只能提供一個?面父級、兄弟級和子級的通路。

▲ 全局導航&局部導航案例

輔助導航：跨越網站的各個層級，使用戶可以在不同層級的頁面間跳轉。提供了全局導航或局部導航不能快速到達的相關內容的快捷途徑。這種導航非常方便“中途折返”型的用戶。

▲ 輔助導航案例

內聯(lián)導航：嵌入自身內容中的導航。有些關系不適合放在全站和局部導航結構分類中，這時就需要建立指向特定網頁、文件或對象的情景式導航鏈接。合理地使用情景式導航能夠增加導航的靈活性。

▲ 內聯(lián)導航案例

友好導航：所謂友好導航是指它可以為用戶提供一個便利的前進途徑，在需要的時候能夠找到入口信息，通常在不需要的時候成隱藏狀態(tài)（或比較不顯眼）。

▲ 友好導航案例

遠程導航：所謂遠程導航是指不包含在產品結構中，以獨立的方式存在產品內，通常表現(xiàn)為網站地圖、索引表等。

▲ 遠程導航案例

三、導航系統(tǒng)設計

作為設計師，我們可以從導航的架構、框架、組件、信息這幾個維度進行設計。為了便于大家理解，下面我們把「導航系統(tǒng)設計」類比為「鋪路」——

• 導航架構：確定路通往的方向，讓信息間的關系符合用戶認知、頁面跳轉路徑長短合理。
• 導航框架：確定路具體修在什么位置，在界面尋找合適的位置放置導航。
• 導航組件：修馬路還是修人行道？挑選合適的、符合用戶習慣的組件來承載導航功能。
• 導航信息：裝好路標和指示牌，友好地告訴用戶他在哪里，可以去哪里，怎么走。

▲導航系統(tǒng)設計內容拆解

1. 導航架構

以ios設計規(guī)范為例，導航架構可分為層級式導航、扁平式導航、內容驅動或體驗驅動導航。

層級式導航架構：在到達目標界面前，每個界面僅做一個選擇。如果要去另一個目標界面，必須回溯自己的腳步，或者從頭開始做不同的選擇，呈現(xiàn)了產品信息的包含關系及信息的深度。

▲ 層級式導航架構案例

扁平式導航架構：允許用戶在同一層級的多個內容類別之間進行切換，它主要呈現(xiàn)的是產品信息的廣度。

▲ 扁平式導航架構案例

內容驅動或體驗驅動導航架構：在內容中自由移動，或者內容本身可以定義導航。游戲、書籍和其他沉浸式應用程序通常使用這種導航形式。

▲內容/體驗驅動導航架構案例

在實際的產品設計中，很少有整個產品僅包含一種類型的導航結構的情況，一般會將前三種類型的導航結構進行合理的混合，讓用戶無論如何操作，都能自由地在信息架構中穿行。同時，在設計時還需要注意導航系統(tǒng)的深度及廣度，避免過深和過廣。

2. 導航框架

導航的框架和產品性質及用戶使用場景息息相關，對于不同的產品類型，導航框架也會有所不同，同一產品下的不同模塊，也會有不同的導航布局。

▲常見的導航框架

內容類&社交類產品：產品內部包含大量不同類型主題的內容，各內容在層級上無主次之分，鼓勵用戶探索和社交。這類型產品常使用標簽式導航，將導航布局于?面的頂部和底部，有時會布局有金剛區(qū)。

▲內容&社交類產品導航框架案例

工具類產品：核心功能固化，導航架構扁平，用戶目標明確，只需要用戶快速找到目標功能，常使用列表導航及宮格導航，直接把核心功能按照優(yōu)先級鋪在首?上。

▲工具類產品導航框架案例

游戲類產品：導航本身就是玩法的一部分，要給用戶便捷的入口同時，不能遮擋游戲主界面，因此導航很多時候會環(huán)繞游戲主界面的四周，甚至導航本身成為了場景的一部分。

▲游戲類產品導航框架案例

閱讀類&（長）視頻類產品：需要把注意力全身心投入內容中的場景下，導航有時會成為一種干擾。例如閱讀中和視頻觀看中的場景。此時導航一般會隱藏起來，需要點擊屏幕才能呼出。

▲閱讀&長視頻類產品導航框架案例

3. 導航組件

確認好導航的布局后，該能用哪些組件來搭建呢？下面為大家介紹幾種常見的導航組件。

▲PC端和APP端常見的導航組件

（1）菜單

簡介：為頁面和功能提供導航的菜單列表。

位置：一般位于網頁頂部導航或網頁左側。

使用場景：頂部導航一般屬于全局導航，提供網站一級頁面及關鍵的二級頁面鏈接；側邊菜單一般是局部導航。

▲菜單導航案例

（2）標簽式導航

簡介：標簽式導航相當于是APP中的菜單控件，是大部分的APP都會使用的導航之一。

位置：全局導航位于頁面底部，針對單頁面的局部導航位于頁面頂部、針對單個模塊的局部導航位于該模塊頂部。

使用場景：當產品內包含的內容/功能類型較多且在層級上比較扁平，無明顯上下級關系，同時用戶需要在這些類別中快速切換時使用。

▲標簽式導航案例

（3）標簽式導航的延伸——側面標簽導航

簡介：放置在側面的標簽導航

使用場景：多運用在篩選、分類頁，作為局部導航使用

優(yōu)點：拓展性強，能容納多個標簽

缺點：占用面積大，標簽多時閱讀困難

▲ 側面標簽導航案例

（4）舵式導航

簡介：樣式上突出中間的功能，像一個舵

使用場景：需要突出或聚合重要且頻繁操作的入口時使用該樣式

優(yōu)點：相較于傳統(tǒng)標簽式導航，容納了更多功能，重點更突出

缺點：多一步操作，新手有一定學習成本

▲ 舵式導航案例

（5）篩選器

簡介：聚合大量標簽信息

使用場景：用戶需要通過選擇多個維度的大量標簽來篩選目標內容/功能時

優(yōu)點：能夠容納大量標簽

缺點：標簽多、熱區(qū)小，用戶尋找和點選對應標簽有一定難度

▲篩選器案例

（6）頁頭

簡介：?頭是用來放置?面的名稱的，目的是告訴用戶現(xiàn)在所在的?面是哪，與整個網?是什么關系，上面也可以放置面包屑導航。

位置：一般位于頂部菜單的下方，內容區(qū)域的上方。

使用場景：一般適用于PC端，需要明確告知用戶處于網站的哪個?面時使用。

▲頁頭案例

（7）導航欄

簡介：是用來幫助用戶定位、導航、操作的基礎組件; 告知用戶當前所在位置，連通?面跳轉路徑，同時還承載了針對當前?面全局性的操作。

位置：?面頂部

使用場景：APP全局適用

▲導航欄案例

注意事項：

1、不可放置過多操作按鈕。應保證每個按鈕有足夠大的點擊熱區(qū)、文字按鈕不重疊；

2、不可放置面包屑導航，如果擔心用戶迷失，建議讓導航架構更加扁平?？煽紤]使用標簽式導航；

3、使用標準的返回控件。

（8）面包屑

簡介：顯示網站的層級結構，告知用戶當前所在位置。由于APP端的操作空間有限，且產品的信息結構不會有PC復雜，一般情況下APP不會使用面包屑控件。

位置：一般位于?頭中。

使用場景：在層級較深，且用戶需要從最后一個層級回到前面的層級時使用。

▲面包屑案例

注意事項：

1、面包屑的第一項應該鏈接首頁；

2、當前頁一定是面包屑的最后一項；

3、面包屑的每一項都可以放鏈接，除了最后一項（當前頁），因為用戶已經身處當前頁；

4、實際使用時，一級頁面可以考慮隱藏面包屑導航。

（9）漢堡（抽屜）導航

簡介: 將菜單隱藏在當前?面內，點擊入口即可像抽屜一樣拉出菜單。

位置: 入口位于左上方，從左側拉出抽屜；或入口在右上方，從右側拉出抽屜。

使用場景：

1、收納用戶不常用的、或不屬于當前?面所在的層級的常用功能，作為輔助導航使用；

2、需要用戶專注于內容，需要更多展示空間時使用；

3、不適合頻繁需要切換導航的應用。

▲漢堡（抽屜）導航案例

（10）下拉菜單

簡介：點擊或移入觸點，會出現(xiàn)一個下拉菜單?？稍诹斜碇羞M行選擇，并執(zhí)行相應的命令。

使用場景：當?面上的【操作】命令過多時，用此組件可以收納【操作】元素。

▲下拉菜單案例

注意事項：盡管下拉菜單可以節(jié)省空間，但功能被收納起來，用戶尋找不方便，需要一定學習成本。

（11）分頁

使用場景：PC端列表，內容過長時采用分頁的形式分割，每次只加載一個頁面。

▲分頁案例

在APP的操作習慣中，常常不使用傳統(tǒng)的分頁導航，而是采用其他方法來瀏覽數(shù)據(jù)，比較常見的是內容流的形式，用戶上滑會不斷加載地更多內容，如果實在要尋找很早之前的內容，可通過篩選器來篩選。

舉個例子：在閱讀類APP中，不可避免會有翻?的用戶需求，但是，精確點擊?數(shù)的操作對于APP來說太容易誤觸，因此閱讀類APP中的分?器使用了slider的形式，滑動過程中會提示?數(shù)，避免錯誤點擊。

▲ slider形式分頁案例

（12）步驟條

使用場景:

1、在任務步驟比較離散，完成任務需要比較?的等待時間的時候，用來顯示任務進度，例如：查詢轉賬進度。

2、當任務步驟復雜或者存在先后關系時，將其分解成一系列步驟，引導用戶完成。例如:用戶注冊新賬號。

▲步驟條案例

注意事項：

1、任務流程本身并不復雜的時候，盡量不要使用，避免弄巧成拙，畫蛇添足；

2、每一步驟都需定義清楚，明確用戶當前所在的進度節(jié)點，清晰展現(xiàn)此刻具體步驟及狀態(tài)；

3、及時對狀態(tài)進行追蹤&反饋，避免用戶不知道自己操作是否生效，混淆認知；

4、如果任務是連續(xù)和短暫的，應該使用進度條來顯示，例如：打開?面。

（13）固釘

使用場景：當內容區(qū)域比較長，需要滾動頁面時，這部分內容對應的操作或者導航需要在滾動范圍內始終展現(xiàn)。

位置：常用于側邊菜單和按鈕組合。

▲固釘案例

（14）懸浮球（觸點）導航

因為APP的界面比較小，基本上不會使用固釘組件，個別APP的界面，由于重點功能沒有合適的位置放置，會使用“懸浮球”組件讓其懸浮在頁面底部，也稱為“觸點導航”，但一般不會像固釘一樣直接在頁面上陳列多個功能。

▲懸浮球導航案例

（15）鏈接

在文章、視頻、圖片中，可以根據(jù)內容，適當放入相關的鏈接，讓用戶可以隨時點擊查看。比如在文本內容中插入文字鏈接，或在圖片中附上商品標簽等。

▲鏈接案例

（16）宮格式導航

簡介：宮格式導航的最主要特點是利用網格布局將主要入口全部集中在頁面之上，各項之間等同重要，常見形式有icon+文字、圖片+文字的瓷片。

使用場景：一般適用于功能模版之間相互獨立，沒有明顯的優(yōu)先級之分，且用戶不需要在不同的功能模版之間進行頻繁跳轉的情況。

▲宮格式導航案例

注意事項：

1、宮格式導航拓展性強且可以在空間有限時聚合大量入口，但需要注意限制選項的數(shù)量，過多的選項會導致選擇困難，從而影響用戶體驗。

2、返回路徑較局限，用戶如果要選擇另一個選項，必須返回原頁面。返回路徑較長時，容易產生不良情緒。

（17）列表式導航

簡介：在列表中陳列產品中的核心功能

使用場景：常?于工具類產品、設置?、APP中的我的?這種需要高效陳列功能、工具的場景。

（* PC由于展示空間較大，很少單純的列表導航，一般會在左側使用側邊菜單，右側直接展示導航內的內容。）

▲列表式導航案例

注意事項：

1、列表式導航符合用戶F型頁面瀏覽習慣，傳遞信息效率很高，但同時它縱向占用面積大，所以在設計時需要注意所占的屏幕空間，以及每屏能顯示多少條選項。

（18）索引表

簡介：一個陳列了產品中，或產品某個模塊中所有內容類別的?面。

使用場景：當產品中含有大量的內容類型、主題和分類時，可以使用索引表。

▲索引表導航案例

（19）網站地圖

簡介：展示網站中的所有關鍵?面，方便用戶快速前往。

使用場景：一般是用在一些產品結構復雜的網站中，很少應用在APP中。

▲網站地圖案例

4. 導航的信息設計

導航上的信息包含哪些呢？以vivo官網首頁為例，該頁面的導航中包含了特殊提示、圖形、文案、狀態(tài)等。

▲導航中的信息內容案例

導航信息設計的要點：

1、準確傳達產品的信息層級。比如一級菜單上有展開按鈕，二級菜單前無icon，視覺上體現(xiàn)出父子級的關系。

▲導航信息層級案例

2、保證閱讀舒適性，讓用戶能快速識別關鍵信息。

3、注意信息的一致性和差異性。同一個功能的名稱和圖標應保持一致，不同功能則應保證差異避免產生歧義。

4、遵循目標用戶的認知和習慣。如vivo應用商店針對內銷和外銷使用了完全不同的信息表達方式，迎合不同類型用戶的使用習慣。

▲符合不同用戶習慣的導航案例

四、結語

優(yōu)秀的導航系統(tǒng)設計，能夠合理完美地傳達產品的功能，快速引導用戶使用，而又不會干擾和困擾用戶的選擇。在實際的設計中，根據(jù)產品的功能特性搭建不同的導航系統(tǒng)。同時，產品的迭代發(fā)展和變化，也會導致導航的設計產生變化，需要依據(jù)用戶屬性和使用場景進行靈活調整。