底部導(dǎo)航欄的表現(xiàn)形式一般分為三種：文字+圖標(biāo)；文字；圖標(biāo)。

我們都知道UI設(shè)計(jì)并不僅僅是做出好看的東西，還涉及到交互和數(shù)據(jù)還有轉(zhuǎn)化率，就像是設(shè)計(jì)師通過界面在于用戶交流一樣，而底部導(dǎo)航欄就是交流對(duì)話中的一個(gè)。因?yàn)槿绻脩暨B他們?cè)诋a(chǎn)品的哪里都不知道，那么我們的設(shè)計(jì)再好優(yōu)秀也是沒用的。

底部導(dǎo)航欄的用法

底部導(dǎo)航欄在屏幕底端展示3至5個(gè)目標(biāo)選項(xiàng)，每一個(gè)選項(xiàng)由一個(gè)圖標(biāo)和文字標(biāo)簽展示，點(diǎn)擊底部導(dǎo)航圖標(biāo)時(shí)，將帶領(lǐng)用戶前往與之關(guān)聯(lián)的視圖。

這里將目標(biāo)選項(xiàng)放在底部的原因是，在手持的移動(dòng)設(shè)備上容易被觸及，符合拇指定律，方便用戶單手操作。

底部導(dǎo)航欄的展示

根據(jù)我的觀察，底部導(dǎo)航欄的表現(xiàn)形式一般分為三種，首先我們先來(lái)說第一種：

1. 文字+圖標(biāo)

大部分的平臺(tái)都是使用的扁平風(fēng)格，只有在節(jié)假日的時(shí)候才會(huì)出現(xiàn)，而多數(shù)情況下，我們常見的底部導(dǎo)航欄都是以文字+圖標(biāo)的形式出現(xiàn)，在選中的狀態(tài)下，設(shè)計(jì)師也會(huì)根據(jù)對(duì)整體風(fēng)格的把控和產(chǎn)品調(diào)性，增加一些變化和趣味，來(lái)突出產(chǎn)品的風(fēng)格。如下圖所示：

全名K歌和知乎的底部導(dǎo)航欄就是使用文字加圖標(biāo)的形式，其中全名K歌的底部圖標(biāo)增加了一些有趣的變化，讓底部圖標(biāo)變得更有趣，同時(shí)文字的存在能夠更好的讓用戶對(duì)圖標(biāo)進(jìn)行理解，提高用戶識(shí)別效率。

2. 文字

文字按鈕目前來(lái)說產(chǎn)品里使用的也是比較多的，大多出現(xiàn)在以圖片和視頻為主的產(chǎn)品和界面中，如下圖所示：

抖音、美圖秀秀、小紅書，這三款A(yù)PP的底部導(dǎo)航欄都是文字作為模塊切分，在使用的過程中，更能夠關(guān)注與閱讀內(nèi)容，底部操作欄視覺層級(jí)相比上面的那種層級(jí)比較低，不影響瀏覽視覺，同時(shí)文字按鈕降低了用戶的理解成本。

3. 圖標(biāo)

單圖標(biāo)按鈕是很少見的，很多圖標(biāo)都沒有很強(qiáng)的識(shí)別度，所以僅僅用圖標(biāo)放在底部操作欄，會(huì)造成用戶的認(rèn)知負(fù)擔(dān)，不建議使用獨(dú)立的按鈕。如下圖所示：

VSCO是一款給用戶推薦產(chǎn)品的APP，因此底部操作欄只有三個(gè)按鈕，從設(shè)計(jì)的架構(gòu)和產(chǎn)品的邏輯上來(lái)說，比較有利于用戶對(duì)圖標(biāo)點(diǎn)擊操作。

Same的是一款社交的APP，有別于目前的大部分產(chǎn)品，它的底部是使用的單圖標(biāo)的形式，雖然整體界面比較簡(jiǎn)約，但是辨識(shí)度比較低，造成了使用產(chǎn)品時(shí)的認(rèn)知負(fù)擔(dān)。

小總結(jié)

1. 當(dāng)頁(yè)面圖片以圖片為主時(shí)，使用純文字或者純圖標(biāo)的能夠降低底部圖標(biāo)對(duì)用戶造成的干擾，但是純圖標(biāo)的底部導(dǎo)航欄降低了用戶的識(shí)別度，引起用戶使用時(shí)的認(rèn)知負(fù)擔(dān)。
2. 文字+圖標(biāo)的搭配屬于最穩(wěn)妥的方式，適用于大部分的產(chǎn)品底部圖標(biāo)設(shè)計(jì)。

底部導(dǎo)航欄圖標(biāo)的設(shè)計(jì)

當(dāng)我們準(zhǔn)備做APP底部導(dǎo)航欄設(shè)計(jì)的時(shí)候，不知道大家有沒有遇到過經(jīng)常不知道該用面性還是線性的糾結(jié)中，究竟要選擇哪種對(duì)用戶來(lái)說才是合適的呢？

大多數(shù)的人會(huì)覺得是出于個(gè)人喜好，但是一項(xiàng)名為《面性圖標(biāo)vs線性圖標(biāo)，對(duì)于可用性方面的影響》的研究表明：不同的圖標(biāo)存在著不同的識(shí)別效率，而面性圖標(biāo)一般會(huì)比線性圖標(biāo)更快被用戶所識(shí)別。

1. 特征線索

用戶要辨認(rèn)圖標(biāo)依靠的就是特征線索，如果一個(gè)圖標(biāo)沒有明顯的特征，是很難被用戶所識(shí)別出來(lái)的。如下圖所示：

如上圖所示，發(fā)現(xiàn)的特征線索是它的眼睛，沒有眼睛，發(fā)現(xiàn)就是個(gè)橢圓；目的地的線索特征就是中間的圓，沒有了中間的圓，就是個(gè)小氣泡；行程是做成了行李的樣子，而沒有了行李箱上的特征標(biāo)志，就變成了一個(gè)很普通的包。

所以圖標(biāo)上的特征線索是用戶識(shí)別的關(guān)鍵，在我們?cè)O(shè)計(jì)圖標(biāo)的時(shí)候，一定要確保它包含了用戶識(shí)別的線索。

2. 什么情況下用線性圖標(biāo)

圖標(biāo)除了要包含特征線索以外，線性和面性圖標(biāo)之間也有區(qū)別，當(dāng)一些圖標(biāo)的外部特征為它的特征線索時(shí)，線性圖標(biāo)會(huì)比面性圖標(biāo)的識(shí)別度來(lái)的更為突出。

當(dāng)我們的底部圖標(biāo)的信息屬于特征線索比較微妙，并且出現(xiàn)在邊緣的時(shí)候，我們可以使用線性圖標(biāo)，或者換個(gè)角度來(lái)說，就是當(dāng)我們選擇底部圖標(biāo)為線性的表現(xiàn)形式的時(shí)候，在圖標(biāo)的表現(xiàn)形式上，盡量往形狀的邊緣特征來(lái)靠，這樣能夠讓圖標(biāo)更加突出并且很快被識(shí)別。

3. 什么情況下用面性

大多數(shù)圖標(biāo)其實(shí)就是將現(xiàn)實(shí)生活中的對(duì)象變成一個(gè)小縮影，因此面性剪影的圖標(biāo)形式認(rèn)知高于線性圖標(biāo)。

盡管如此，用戶還是能夠識(shí)別線性圖標(biāo)，但是當(dāng)圖標(biāo)的內(nèi)部空間比較狹窄的時(shí)候，用戶識(shí)別線性圖標(biāo)需要花費(fèi)更多的時(shí)間來(lái)識(shí)別。

對(duì)于內(nèi)部空間比較擁擠，或者線條比較多的圖標(biāo)，最好使用面性圖標(biāo)，剪影的表現(xiàn)方式提供了一個(gè)更簡(jiǎn)潔也更具辨識(shí)度的方式，從這里我們可以發(fā)現(xiàn)一個(gè)事實(shí)，線性圖標(biāo)的設(shè)計(jì)表現(xiàn)要求要高于面性圖標(biāo)，因?yàn)榫€性圖標(biāo)要在具有表現(xiàn)力的同時(shí)還需要有很高的識(shí)別度，同時(shí)不能太過復(fù)雜，內(nèi)部不能過于擁擠。

劃重點(diǎn)

1. 當(dāng)頁(yè)面圖片以圖片為主時(shí)，使用純文字或者純圖標(biāo)的能夠降低底部圖標(biāo)對(duì)用戶造成的干擾；
2. 文字+圖標(biāo)的搭配屬于最穩(wěn)妥的方式，適用于大部分的產(chǎn)品底部圖標(biāo)設(shè)計(jì)。
3. 圖標(biāo)是由有識(shí)別度的特征線索組成的，而面性圖標(biāo)的識(shí)別度速度更快；
4. 線性圖標(biāo)的內(nèi)部間距比較寬的時(shí)候，更容易識(shí)別，內(nèi)部間距比較窄的時(shí)候，使用面性圖標(biāo)會(huì)更好；
5. 圖標(biāo)的特征線索在邊緣的地方，使用線性的圖標(biāo)識(shí)別度更高。

參考引文：

《可視、清晰和簡(jiǎn)單：APP底部導(dǎo)航設(shè)計(jì)三原則》http://t.cn/R9O0eFn

《如何正確使用線性圖標(biāo)與面性圖標(biāo)》http://t.cn/Eoc8MPl

《移動(dòng) APP UI 的底部導(dǎo)航如何設(shè)計(jì)，才能讓用戶體驗(yàn)更佳？》http://t.cn/EocR49X

本文由 @潘團(tuán)子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議