導航欄設計中最常見的元素有哪些

1.導航的定義導航設計的定義是：元素的組合，允許用戶在信息架構中穿行。

簡單點理解就是：我們從用戶的心智模型出發(fā)，結合業(yè)務目標，對信息架構的一個梳理，來幫助用戶完成目標。

2.導航的作用導航設計大的作用就是：

告訴用戶當前在哪里，從哪里來，能到哪里去。當然我們還需要為用戶跳轉提供方法，并且能明確讓用戶感受到導航欄元素與頁面的關系，最后是表達出內容與用戶瀏覽界面的關系。

3.導航的種類&樣式

a.底部導航欄設計底部導航欄設計是我們最常見的導航模式之一，位于頁面底部，用于一級頁面當中負責各主業(yè)務模塊的切換，一般會保持3～5個標簽，適用于頻繁切換業(yè)務模塊的產品。例如優(yōu)酷、豆瓣、淘寶、網(wǎng)易云音樂：

優(yōu)點：切換快速方便，用戶不會輕易迷失；iOS原生系統(tǒng)，開發(fā)成本低；屬于拇指熱區(qū)范圍內，操作方便，用戶體驗好。

缺點：導航數(shù)量有限，最多3～5個，可擴展性不高；占用一定的空間，沉浸式體驗不足，且在小機型上極其容易影響顯示區(qū)域的視覺大小。

b.頂部導航頂部導航欄位于頁面頂部，一般位于導航欄或者狀態(tài)欄下方，用作于二級導航，基本都以純文字的形式出現(xiàn)（避免干擾用戶瀏覽頁面核心內容），常見的頂部導航欄有：固定頂部標簽導航&可滑動標簽導航。例如UC頭條、LOFTER、網(wǎng)易有錢、京東金融：

優(yōu)點：滑動式頂部標簽可無限添加標簽，可擴展性強；技術上，適配簡單，減少開發(fā)成本；占據(jù)空間比底部導航欄小，節(jié)省空間；劃屏切換，簡單便捷。

缺點：標簽數(shù)量多，容易導致產品頁面過多，用戶需要耗費大量精力不斷滑動；越是后面的標簽容易被遺忘，導致流量遺失。

c.舵式導航舵式導航一般位于底部標簽欄中間，以“+”號的形式出現(xiàn)，是產品中需要重點突出的功能，一般用于UGC內容生產發(fā)布。例如閑魚、微博、LOFTER、轉轉：

優(yōu)點：以顏色或大小的區(qū)別來展示核心，視覺沖擊力強，讓人更加有有點擊的欲望；展示效果上靈活多變，增添了交互趣味。

缺點：層級較深，需要用戶二次點擊才能到達目標，增加了用戶的交互路徑，不適合頻繁切換；其次隱藏的功能不能太多，如果過多會給用戶造成選擇壓力，引起用戶的反感情緒。

d.側邊欄導航側邊欄導航是除了核心功能意外的主要功能全部隱藏在側邊欄里，一般通過點擊左上角的icon彈出，左側區(qū)域現(xiàn)實導航中的內容。例如小紅書、優(yōu)酷、滴墨書摘、滴滴：

優(yōu)點：隱藏次要功能，聚焦核心內容；隱藏減少非核心功能，沉浸式體驗優(yōu)秀；節(jié)省頁面空間；標齊選項可擴展性強。

缺點：其他功能使用率低；切換功能操作麻煩，交互路勁長。

e.宮格式導航宮格導航是將主要功能入口的聚合羅列在頁面中，讓用戶能夠快速的了解產品所有的業(yè)務或者功能，用戶可以根據(jù)自身的需求快速選擇。各個功能入口相對獨立，沒有交集，無法相互跳轉交互，一般適用于二級頁面。宮格導航的組合方式靈活多樣。例如支付寶、下廚房、微信、嗶哩嗶哩：

優(yōu)點：擴展性好；展現(xiàn)直觀，重要的功能平鋪呈現(xiàn)給用戶，促使用戶可以快速選擇。

缺點：平鋪功能入口過多，增加了用戶選擇的壓力；切換繁瑣，想要切換其他模塊必須返回主頁面；無法直接展現(xiàn)內容，對用戶缺乏直接的吸引力。

f.下拉式導航下拉式導航與抽屜導航類似，將非核心功能隱藏。這列導航多用于二級導航；基本都以半浮層的形式展現(xiàn)，點擊浮層意外的區(qū)域自動收起；對比側邊欄導航，下拉導航能讓用戶清楚感知當前所在位置。例如趕集、轉轉、微博、微店：

優(yōu)點：節(jié)省頁面控件；交互方便，點擊icon喚醒，點擊其他區(qū)域收起隱藏；與界面的連貫性強，用戶能夠清楚的知道自己所在的位置。

缺點：大部分位于頂部，操作不便，不易頻繁操作；入口不明顯，容易被忽視。

g.列表式導航列表導航條目清晰可以實現(xiàn)用戶在內容選項中的快速切換，一般有icon+文字組成，右側有大量留白，符合人們自左到右的閱讀習慣。每個列表都是一個功能入口，功能切換必須返回列表主頁。例如微信、TIM、京東金融、網(wǎng)易蝸牛讀書：

優(yōu)點：可延展性強，可以不斷添加信息；符合人們自左到右、自上而下的閱讀習慣；條目清晰，用戶可以根據(jù)自己的需求快速尋找自己想要的信息。

缺點：切換不方便，必須返回列表頁面才能進行切換，交互路徑長；信息較多時，需要頻繁的滑動界面頁面，閱讀效率低且容易造成閱讀疲勞。

h.分段式導航分段式導航是iOS自帶的標準控件，一般應用于二級導航，適合切換頻率比較高的頁面，導航數(shù)量通常在2～4個。例如網(wǎng)易音樂、網(wǎng)易云課堂、appstore：

優(yōu)點：入口清晰，切換方便且不會迷失。

缺點：可擴展性弱，只能應用于2～4個標簽；樣式守舊，靈活程度不高，不能通過手勢滑動。

i.點聚式導航點聚式導航的特點是懸浮icon一直都會浮在頁面的頂層，用戶可以隨時點擊選擇自己需要的功能入口。當信息層級復雜，并且模塊中有用戶頻繁使用的核心功能，在這些條件的限制下選擇點聚式導航是好方案。例如ZAKER新聞、好奇心日報：

優(yōu)點：節(jié)省空間，點擊彈出其他功能菜單；通常icon的視覺效果會比較醒目，容易吸引用戶點擊。

缺點：由于一直浮在頁面的頂層，會遮擋頁面內容；點聚式導航僅靠icon按鈕展示，理解學習成本高。

4.總結

1.導航欄的定義是元素的組合，允許用戶在產品的信息架構中穿行。

2.導航欄的大作用就是引導用戶在在產品的信息架構中穿梭，即從哪里來、到哪里去。

3.導航欄的樣式匯總，詳細的優(yōu)缺點分析幫助我們在工作如何區(qū)分篩選導航欄的設計樣式。

新聞標題：導航欄設計中最常見的元素有哪些
鏈接分享：http://www.muchs.cn/news/32413.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、小程序開發(fā)、App開發(fā)、網(wǎng)站導航、標簽優(yōu)化、Google

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)