**：海鹽社（id：hys-ssc ）
作者：姜正
前言一次優秀的使用者體驗必不可少的就是乙個優秀的導航設計，但往往大家總是容易忽略這一點！試想如果使用者在使用產品的時候不知道自己在**、該到**去，這種情況下會給使用者造成極差的使用者體驗，導致使用者直接放棄當前操作。所以今天和大家分享一下關於導航設計的彙總以及優缺點的分析。
目錄1.導航的定義
2.導航的作用
3.導航的種類&樣式
4.總結
導航設計的定義是：元素的組合，允許使用者在資訊架構中穿行。
簡單點理解就是：我們從使用者的心智模型出發，結合業務目標，對資訊架構的乙個梳理，來幫助使用者完成目標。
導航設程式設計客棧計最大的作用就是：告訴使用者當前在**，從**來，能到**去。
當然我們還需要為使用者跳轉提供方法，並且能明確讓使用者感受到導航欄元素與頁面的關係，最後是表達出內容與使用者瀏覽介面的關係。
a.底部導航欄設計
底部導航欄設計是我們最常見的導航模式之一，位於頁面底部，用於一級頁面當中負責各主業務模組的切換，一般會保持3～ 5 個標籤，適用於頻繁切換業務模組的產品。例如優酷、豆瓣、**、網易雲**：
優點：切換快速方便，使用者不會輕易迷失；ios 原生系統，開發成本低；屬於拇指熱區範圍內，操作方便，使用者體驗好。
缺點：導航數量有限，最多3～ 5 個，可擴充套件性不高；占用一定的空間，沉浸式體驗不足，且在小機型上極其容易影響顯示區域的視覺大小。
b.頂部導航
頂部導航欄位於頁面頂部，一般位於導航欄或者狀態列下方，用作於二級導航，基本都以純文字的形式出現（避免干擾使用者瀏覽頁面核心內容），常見的頂部導航欄有：固定頂部標籤導航&可滑動標籤導航。例如uc頭條、lofter、網易有錢、京東金融：
優點：滑動式頂部標籤可無限新增標籤，可擴充套件性強；技術上，適配簡單，減少開發成本；佔據空間比底部導航欄小，節省空間；劃屏切換，簡單便捷。
缺點：標籤數量多，容易導致產品頁面過多，使用者需要耗費大量精力不斷滑動；越是後面的標籤容易被遺忘，導致流量遺失。
c.舵式導航
舵式導航一般位於底部標籤欄中間，以「+」號 的形式出現，是產品中需要重點突出的功能，一般用於ugc內容生產發布。例如閒魚、微博、lofter、轉**
優點程式設計客棧：以顏色或大小的區別來展示核心，視覺衝擊力強，讓人更加有有點選的慾望；展示效果上靈活多變，增添了互動程式設計客棧趣味。
缺點：層級較深，需要使用者二次點選才能到達目標，增加了使用者的互動路徑，不適合頻繁切換；其次隱藏的功能不能太多，如果過多會給使用者造成選擇壓力，引起使用者的反感情緒。
d.側邊欄導航
側邊欄導航是除了核心功能意外的主要功能全部隱藏在側邊欄裡，一般通過點選左上角的 icon 彈出，左側區域現實導航中的內容。例如小紅書、優酷、滴墨書摘、滴滴：
優點：隱藏次要功能，聚焦核心內容；隱藏減少非核心功能，沉浸式體驗優秀；節省頁面空間；標齊選項可擴充套件性強。
缺點：其他功能使用率低；切換功能操作麻煩，互動路zmrrm勁長。
e.宮格式導航
宮格導航是將主要功能入口的聚合羅列在頁面中，讓使用者能夠快速的了解產品所有的業務或者功能，使用者可以根據自身的需求快速選擇。各個功能入口相對獨立，沒有交集，無法相互跳轉互動，一般適用於二級頁面。宮格導航的組合方式靈活多樣。例如支付寶、下廚房、微信、嗶哩嗶哩：
優程式設計客棧點：擴充套件性好；展現直觀，重要的功能平鋪呈現給使用者，促使使用者可以快速選擇。
缺點：平鋪功能入口過多，增加了使用者選擇的壓力；切換繁瑣，想要切換其他模組必須返回主頁面；無法直接展現內容，對使用者缺乏直接的吸引力。
f.下拉式導航
下拉式導航與抽屜導航類似，將非核心功能隱藏。這列導航多用於二級導航；基本都以半浮層的形式展現，點選浮層意外的區域自動收起；對比側邊欄導航，下拉導航能讓使用者清楚感知當前所在位置。例如趕集、轉轉、微博、微店：
優點：節省頁面控制項；互動方便，點選 icon 喚醒，點選其他區域收起隱藏；與介面的連貫性強，使用者能夠清楚的知道自己所在的位置。
缺點：大部分位於頂部，操作不便，不易頻繁操作；入口不明顯，容易被忽視。
g.列表式導航
列表導航條目清晰可以實現使用者在內容選項中的快速切換，一般有icon+文字組成，右側有大量留白，符合人們自左到右的閱讀習慣。每個列表都是乙個功能入口，功能切換必須返回列表主頁。例如微信、tim、京東金融、網易蝸牛讀書：
優點：可延展性強，可以不斷新增資訊；符合人們自左到右、自上而下的閱讀習慣；條目清晰，使用者可以根據自己的需求快速尋找自己想要的資訊。
缺點：切換不方便，必須返回列表頁面才能進行切換，互動路徑長；資訊較多時，需要頻繁的滑動介面頁面，閱讀效率低且容易造成閱讀疲勞。
h.分段式導航
分段式導航是 ios 自帶的標準控制項，一般應用於二級導航，適合切換頻率比較高的頁面，導航數量通常在2～ 4 個。例如網易**、網易雲課堂、app store：
優點：入口清晰，切換方便且不會迷失。
缺點：可擴充套件性弱，只能應用於2～ 4 個標籤；樣式守舊，靈活程度不高，不能通過手勢滑動。
j.點聚式導航
點聚式導航的特點是懸浮 icon 一直都會浮在頁面的頂層，使用者可以隨時點選選擇自己需要的功能入口。當資訊層級複雜，並且模組中有使用者頻繁使用的核心功能，在這些條件的限制下選擇點聚式導航是最佳方案。例如zaker新聞、好奇心**：
優點：節省空間，點選彈出其他功能選單；通常 icon 的視覺效果會比較醒目，容易吸引使用者點選。
缺點：由於一直浮在頁面的頂層，會遮擋頁面內容；點聚式導航僅靠 icon 按鈕展示，理解學習成本高。
1.導航欄的定義是元素的組合，允許使用者在產品的資訊架構中穿行。
2.導航欄的最大作用就是引導使用者在在產品的資訊架構中穿梭，即從**來、到**去。
3.導航欄的樣式彙總，詳細的優缺點分析幫助我們在工作如何區分篩選導航欄的設計樣式。
本文標題: 導航欄設計樣式大全
本文位址:
css實戰導航欄設計
遇到滑鼠在上方時，區域使用藍色作為底色，與其他未選中區域的文字的顏色儲存一致，選中區域的文字變為白色。答 實現效果圖如下 實現的 使用的標籤是 hover選擇器 乙個html 的小技巧 把行內的元素居中?答 直接設定行高 line height 25px 精靈圖是什麼？答 歷史上網速較慢的時候，小圖...
vue前端專案 導航欄跳轉 頁面保留導航樣式
在 router index.js 裡配置 父子導航欄，並在子導航欄增加匯出index.vue 配置導航和頁面路徑 const goods import pages goods const goodslist import pages goods goodslist const shopwindow...
元件實戰（一） 導航欄設計
常見導航欄的設計與封裝，以及一些知識點的記錄。為了避免元件太細不好管理，這裡的導航欄包括了logo以及導航選單等等。導航欄是黏性的，也就是拖動到下方時，導航欄會fix在頂部。其次，導航欄是自適應的，當介面不適合時會摺疊，靠按鈕展開。固定時，摺疊與未摺疊 非固定時，摺疊與未摺疊 展開時 v for遍歷...