@惜可若己 ：設計師都知道設計絕不僅僅是做出外表好看的東西，設計還涉及到如何做才能讓用戶使用你的網站/應用程序。這項工作內容就像跟用戶間對話一樣，而導航就是對話內容之一。因為如果用戶連他們究竟在哪兒都搞不清楚，那你的網站/應用程序設計得再棒又有什么用呢？來看這篇好文，幫你做出合格的底部導航設計！

如果你連基礎都沒打好，建議最好學習一下：《交互基礎知識科普！帶你認識最熱門的12種導航模式》。
如果想看深入的好文，可右戳直達：《交互設計實戰！Tab導航與側邊抽屜導航的巔峰對決》

一、為何底部導航如此重要

Steven Hoover 在他的「用戶究竟如何使用移動設備」的研究中發現，49%的人習慣于使用單個拇指來完成所有操作。在下圖中，屏幕中不同顏色的區域表明用戶拇指能夠觸及的難度等級，其中，綠色區域表示很容易觸及的范圍，黃色則表示拇指要伸展開來才能夠到，而要觸達紅色區域則要求用戶改變設備的手持方式。

△ 用戶單手操作智能手機的區域圖

這樣看來，將頂級（經常使用的）功能放在屏幕的底部是非常重要的，因為這里是用戶使用拇指能輕松跟設備產生交互的位置。

許多程序正是遵循上述原則，使用底部導航來表示程序中最重要的功能。Facebook便是代表之一，這樣做也允許了用戶能在不同功能間快速切換。

△ Facebook iOS客戶端底部導航

二、底部導航設計的四個關鍵點

導航通常就是指引用戶前往他們想去的地方的工具。底部導航則應該用來表示程序中常用的幾項重要功能。這些功能要求能夠直接從應用程序的任何地方訪問。

好的底部導航設計遵循以下規則：

1、只顯示最重要的功能

使用3-5個頂級導航標簽。如果少于3個標簽，考慮使用標簽選項卡替代。

避免使用超過5個底部導航塊，否則會造成塊與塊間顯示太擁擠，也容易造成誤點錯點問題。另外，過多導航塊會讓你的程序看起來更加復雜。

如果你的頂層導航塊確實超出了5個，不要都放在底部導航，考慮放在其他地方或選出最重要的放在底部。

2、避免使用滾動設計

對于小屏幕來說，隱藏一部分導航塊顯然是一個解決方案——你不用擔心屏幕限制，只需要把導航塊置于一個可滾動區域。但是這種方式難免會降低使用效率，因為即使你已經看到了你需要的塊，你可能仍然需要滾動一下才能看到全部標簽。

△ Rookie Cam iOS客戶端滾動設計方案

3、告知用戶當前位置

沒有向用戶表明其當前所在的位置大概是所有程序常常犯的一個錯誤。而對于用戶，在成功地使用導航之前，他們要搞清楚的基本問題便是“我現在在哪”。

好的設計應該是用戶在沒有任何外界指引的情況下，也能僅靠第一眼就能知道該如何從A點到B點。你應該使用合適的視覺線索（圖標、標簽或者顏色）直觀的告訴用戶，而不必有任何多余的解釋。

（1）圖標

底部導航塊往往都是使用圖標表示，它們應該傳達出跟其內容匹配的信息。雖然有一些用戶熟知的通用圖標，大多是用來代表諸如搜索、郵箱和打印等功能。不過這種通用圖標非常稀少。但是程序設計者常常設計出從視覺樣式很難識別出其對應的功能特性的圖標。

△ Bloom.fm Android客戶端之前的做法，用戶很難理解自己當前的位置

（2）顏色

避免在底部標簽欄使用不同顏色的圖標和標簽，應該使用程序的基本色調來突出當前所選標簽。

△ 左：不同顏色的圖標使你的程序像圣誕樹 右：僅使用一種基本色調

請遵循一條簡單的規則——給當前的選中標簽使用程序的基本色調進行著色。

△ Twitter iOS客戶端底部按鈕

如果底部導航欄本身有顏色，應該使當前選中的圖標和文本標簽呈黑色或白色狀態。

△ 左：避免在一個有色的底部導航欄使用不同顏色的圖標 右：使用黑色或白色圖標

（3）文本標簽

文本標簽應該是對導航功能的一個簡短清晰的定義。應該避免使用太長的標簽造成因被截取而顯示不全或換行現象。

△ 避免文本標簽換行、截取、壓縮

素有標簽元素應該很容易被用戶看清楚。用戶點擊元素時他們應該清楚的理解要發生什么了。

（4）目標大小

應該使目標區域足夠大能被輕易的觸摸點擊到。

Android設計規范建議底部導航欄遵從以下尺寸進行設計：

△ 手機上固定大小的底部導航欄

（5）標簽上的標記符號

你可以在一個標簽欄圖標上顯示一種標記符號來表明有與該視圖或模式有關的新信息。

△ 使用標記符號與用戶對話

4、使導航不言自明

優秀的導航設計就好比指導用戶旅程的一只無形的手。畢竟，如果都不能別用戶發現，那么即使最棒的功能或最能引人注目的內容也無法接觸到用戶。

（1）行為

每一個底部導航標簽圖標都必將帶領用戶到新的地方，可能不光光是打開一個菜單或是彈出框。點擊一個底部導航標簽時，應該直接帶領用戶前往相關的視圖或者刷新當前活躍的視圖。

不要使用標簽欄給用戶提供那些在當前屏幕/模式下發揮作用的控件元素，如果你想提供給用戶控件，請使用工具欄。

△ iOS的工具欄

（2）爭取一致性

盡可能在每種情況下顯示相同的標簽。這樣的視覺穩定性對用戶來講是極好的。

不要在一個標簽不起作用的時候移除它。如果你在某些情況下移除一個標簽而在另一些情況下不這么做，這會使用戶感知到的你的程序設計不穩定甚至不可預測。最好的方法是保持所有標簽向用戶開放，只不過如果某個標簽下的內容不能用時要解釋給用戶。例如，如果一個用戶并沒有離線文件，Dropbox里的離線文件標簽對應的屏幕告訴用戶該如何使用離線文件。這個功能也叫做空狀態處理。

△ Dropbox的空狀態

（3）隱藏導航

如果屏幕內容是一個滾動式的信息流，標簽欄可以在用戶向上滾動加載新內容時隱藏，而在用戶嘗試向頂部回滾時重新顯示。

△ 底部導航攔可以根據用戶的滾動方向動態變化

（4）視覺愉悅

避免使用直接的橫向運動來在不同視圖間轉換，不同視圖間應該使用淡入淡出的動畫來進行過渡。

△ 淡入淡出的動畫

三、總結

底部導航應該：

可見且結構良好——使用3-5個標簽欄并避免使用滾動式結構；

清晰的——標簽欄應該易于瀏覽且尺寸足夠大；

簡單的——確保每個導航圖標帶領用戶前往合適的地方，并保持包括底部導航在內的所有元素在整個程序中都具有一致性。

四、結論

幫助用戶正確的導航應該是幾乎每一個站點和應用程序中一件極為優先的事情。這種做法背后的目的是創建一個符合用戶的自然心理模型的交互系統。

你是在為你的用戶設計。多去考慮你的用戶角色，想想他們在使用你的程序時的目標，而你正需要設計出合理的導航結構幫助他們實現目標。對他們而言，你的產品越容易使用，他們就越有可能真的去使用。

「技多不壓身的設計師才有高薪資！」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：uxplanet

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com