2019-5-16 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
我們都知道UI設(shè)計(jì)并不僅僅是做出好看的東西，還涉及到交互和數(shù)據(jù)還有轉(zhuǎn)化率，就像是設(shè)計(jì)師通過界面在于用戶交流一樣，而底部導(dǎo)航欄就是交流對話中的一個(gè)。因?yàn)槿绻脩暨B他們在產(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)形式一般分為三種，首先我們先來說第一種：
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ù)對整體風(fēng)格的把控和產(chǎn)品調(diào)性，增加一些變化和趣味，來突出產(chǎn)品的風(fēng)格。如下圖所示：
全名K歌和知乎的底部導(dǎo)航欄就是使用文字加圖標(biāo)的形式，其中全名K歌的底部圖標(biāo)增加了一些有趣的變化，讓底部圖標(biāo)變得更有趣，同時(shí)文字的存在能夠更好的讓用戶對圖標(biāo)進(jìn)行理解，提高用戶識(shí)別效率。
2、文字
文字按鈕目前來說產(chǎn)品里使用的也是比較多的，大多出現(xiàn)在以圖片和視頻為主的產(chǎn)品和界面中，如下圖所示：
抖音、美圖秀秀、小紅書，這三款A(yù)PP的底部導(dǎo)航欄都是文字作為模塊切分，在使用的過程中，更能夠關(guān)注與閱讀內(nèi)容，底部操作欄視覺層級相比上面的那種層級比較低，不影響瀏覽視覺，同時(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)品的邏輯上來說，比較有利于用戶對圖標(biāo)點(diǎn)擊操作。
Same的是一款社交的APP，有別于目前的大部分產(chǎn)品，它的底部是使用的單圖標(biāo)的形式，雖然整體界面比較簡約，但是辨識(shí)度比較低，造成了使用產(chǎn)品時(shí)的認(rèn)知負(fù)擔(dān)。
小總結(jié)：
1、當(dāng)頁面圖片以圖片為主時(shí)，使用純文字或者純圖標(biāo)的能夠降低底部圖標(biāo)對用戶造成的干擾，但是純圖標(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é)中，究竟要選擇哪種對用戶來說才是合適的呢？
大多數(shù)的人會(huì)覺得是出于個(gè)人喜好，但是一項(xiàng)名為《面性圖標(biāo)vs線性圖標(biāo)，對于可用性方面的影響》的研究表明：不同的圖標(biāo)存在著不同的識(shí)別效率，而面性圖標(biāo)一般會(huì)比線性圖標(biāo)更快被用戶所識(shí)別。
1、特征線索
用戶要辨認(rèn)圖標(biāo)依靠的就是特征線索，如果一個(gè)圖標(biāo)沒有明顯的特征，是很難被用戶所識(shí)別出來的。如下圖所示：
如上圖所示，發(fā)現(xiàn)的特征線索是它的眼睛，沒有眼睛，發(fā)現(xiàn)就是個(gè)橢圓；目的地的線索特征就是中間的圓，沒有了中間的圓，就是個(gè)小氣泡；行程是做成了行李的樣子，而沒有了行李箱上的特征標(biāo)志，就變成了一個(gè)很普通的包。
所以圖標(biāo)上的特征線索是用戶識(shí)別的關(guān)鍵，在我們設(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í)別度來的更為突出。
當(dāng)我們的底部圖標(biāo)的信息屬于特征線索比較微妙，并且出現(xiàn)在邊緣的時(shí)候，我們可以使用線性圖標(biāo)，或者換個(gè)角度來說，就是當(dāng)我們選擇底部圖標(biāo)為線性的表現(xiàn)形式的時(shí)候，在圖標(biāo)的表現(xiàn)形式上，盡量往形狀的邊緣特征來靠，這樣能夠讓圖標(biāo)更加突出并且很快被識(shí)別。
3、什么情況下用面性？
大多數(shù)圖標(biāo)其實(shí)就是將現(xiàn)實(shí)生活中的對象變成一個(gè)小縮影，因此面性剪影的圖標(biāo)形式認(rèn)知高于線性圖標(biāo)。
盡管如此，用戶還是能夠識(shí)別線性圖標(biāo)，但是當(dāng)圖標(biāo)的內(nèi)部空間比較狹窄的時(shí)候，用戶識(shí)別線性圖標(biāo)需要花費(fèi)更多的時(shí)間來識(shí)別。
對于內(nèi)部空間比較擁擠，或者線條比較多的圖標(biāo)，最好使用面性圖標(biāo)，剪影的表現(xiàn)方式提供了一個(gè)更簡潔也更具辨識(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)頁面圖片以圖片為主時(shí)，使用純文字或者純圖標(biāo)的能夠降低底部圖標(biāo)對用戶造成的干擾；
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í)別度更高。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com