2019-5-16 鶴鶴
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們都知道UI設計并不僅僅是做出好看的東西，還涉及到交互和數據還有轉化率，就像是設計師通過界面在于用戶交流一樣，而底部導航欄就是交流對話中的一個。因為如果用戶連他們在產品的哪里都不知道，那么我們的設計再好優秀也是沒用的。
底部導航欄的用法
底部導航欄在屏幕底端展示3至5個目標選項，每一個選項由一個圖標和文字標簽展示，點擊底部導航圖標時，將帶領用戶前往與之關聯的視圖。
這里將目標選項放在底部的原因是，在手持的移動設備上容易被觸及，符合拇指定律，方便用戶單手操作。
底部導航欄的展示
根據我的觀察，底部導航欄的表現形式一般分為三種，首先我們先來說第一種：
1、文字+圖標
大部分的平臺都是使用的扁平風格，只有在節假日的時候才會出現，而多數情況下，我們常見的底部導航欄都是以文字+圖標的形式出現，在選中的狀態下，設計師也會根據對整體風格的把控和產品調性，增加一些變化和趣味，來突出產品的風格。如下圖所示：
全名K歌和知乎的底部導航欄就是使用文字加圖標的形式，其中全名K歌的底部圖標增加了一些有趣的變化，讓底部圖標變得更有趣，同時文字的存在能夠更好的讓用戶對圖標進行理解，提高用戶識別效率。
2、文字
文字按鈕目前來說產品里使用的也是比較多的，大多出現在以圖片和視頻為主的產品和界面中，如下圖所示：
抖音、美圖秀秀、小紅書，這三款APP的底部導航欄都是文字作為模塊切分，在使用的過程中，更能夠關注與閱讀內容，底部操作欄視覺層級相比上面的那種層級比較低，不影響瀏覽視覺，同時文字按鈕降低了用戶的理解成本。
3、圖標
單圖標按鈕是很少見的，很多圖標都沒有很強的識別度，所以僅僅用圖標放在底部操作欄，會造成用戶的認知負擔，不建議使用獨立的按鈕。如下圖所示：
VSCO是一款給用戶推薦產品的APP，因此底部操作欄只有三個按鈕，從設計的架構和產品的邏輯上來說，比較有利于用戶對圖標點擊操作。
Same的是一款社交的APP，有別于目前的大部分產品，它的底部是使用的單圖標的形式，雖然整體界面比較簡約，但是辨識度比較低，造成了使用產品時的認知負擔。
小總結：
1、當頁面圖片以圖片為主時，使用純文字或者純圖標的能夠降低底部圖標對用戶造成的干擾，但是純圖標的底部導航欄降低了用戶的識別度，引起用戶使用時的認知負擔。
2、文字+圖標的搭配屬于最穩妥的方式，適用于大部分的產品底部圖標設計。
底部導航欄圖標的設計
當我們準備做APP底部導航欄設計的時候，不知道大家有沒有遇到過經常不知道該用面性還是線性的糾結中，究竟要選擇哪種對用戶來說才是合適的呢？
大多數的人會覺得是出于個人喜好，但是一項名為《面性圖標vs線性圖標，對于可用性方面的影響》的研究表明：不同的圖標存在著不同的識別效率，而面性圖標一般會比線性圖標更快被用戶所識別。
1、特征線索
用戶要辨認圖標依靠的就是特征線索，如果一個圖標沒有明顯的特征，是很難被用戶所識別出來的。如下圖所示：
如上圖所示，發現的特征線索是它的眼睛，沒有眼睛，發現就是個橢圓；目的地的線索特征就是中間的圓，沒有了中間的圓，就是個小氣泡；行程是做成了行李的樣子，而沒有了行李箱上的特征標志，就變成了一個很普通的包。
所以圖標上的特征線索是用戶識別的關鍵，在我們設計圖標的時候，一定要確保它包含了用戶識別的線索。
2、什么情況下用線性圖標？
圖標除了要包含特征線索以外，線性和面性圖標之間也有區別，當一些圖標的外部特征為它的特征線索時，線性圖標會比面性圖標的識別度來的更為突出。
當我們的底部圖標的信息屬于特征線索比較微妙，并且出現在邊緣的時候，我們可以使用線性圖標，或者換個角度來說，就是當我們選擇底部圖標為線性的表現形式的時候，在圖標的表現形式上，盡量往形狀的邊緣特征來靠，這樣能夠讓圖標更加突出并且很快被識別。
3、什么情況下用面性？
大多數圖標其實就是將現實生活中的對象變成一個小縮影，因此面性剪影的圖標形式認知高于線性圖標。
盡管如此，用戶還是能夠識別線性圖標，但是當圖標的內部空間比較狹窄的時候，用戶識別線性圖標需要花費更多的時間來識別。
對于內部空間比較擁擠，或者線條比較多的圖標，最好使用面性圖標，剪影的表現方式提供了一個更簡潔也更具辨識度的方式，從這里我們可以發現一個事實，線性圖標的設計表現要求要高于面性圖標，因為線性圖標要在具有表現力的同時還需要有很高的識別度，同時不能太過復雜，內部不能過于擁擠。
劃重點
1、當頁面圖片以圖片為主時，使用純文字或者純圖標的能夠降低底部圖標對用戶造成的干擾；
2、文字+圖標的搭配屬于最穩妥的方式，適用于大部分的產品底部圖標設計。
3、圖標是由有識別度的特征線索組成的，而面性圖標的識別度速度更快；
4、線性圖標的內部間距比較寬的時候，更容易識別，內部間距比較窄的時候，使用面性圖標會更好；
5、圖標的特征線索在邊緣的地方，使用線性的圖標識別度更高。