大家好楼肪，我是Clippp培廓。今天為大家?guī)?lái)的文章是「底部導(dǎo)航欄」設(shè)計(jì)。很多受歡迎的產(chǎn)品中都有我們值得學(xué)習(xí)和借鑒的設(shè)計(jì)思考點(diǎn)春叫，通過(guò)分析海外主流產(chǎn)品肩钠，帶大家掌握底部導(dǎo)航欄(Tab Bar)的基本知識(shí)泣港，找到解決問(wèn)題的方法并開(kāi)拓創(chuàng)意思維。
在開(kāi)始之前价匠，請(qǐng)大家先思考下面兩個(gè)問(wèn)題～
問(wèn)題1：你的產(chǎn)品真的需要Tab Bar嗎当纱？
好像并不是。雖然淘寶踩窖、微信坡氯、微博、美團(tuán)等大多數(shù)主流的產(chǎn)品都在使用Tab Bar洋腮，但這并不意味著所有產(chǎn)品都需要它箫柳。
▲?很多APP沒(méi)有Tab Bar，比如日歷啥供、計(jì)算器悯恍、滴滴、Uber等伙狐。對(duì)于是否要在APP中使用Tab Bar坪稽，應(yīng)該分不同的情況靈活考慮。
問(wèn)題2：為什么產(chǎn)品要有Tab Bar鳞骤？
答案是為了易于使用窒百，意味著通過(guò)Tab Bar這種簡(jiǎn)單的設(shè)計(jì)可以輕松幫助用戶導(dǎo)航到頁(yè)面。
明白了上面的問(wèn)題后豫尽，接下來(lái)就要考慮如何來(lái)設(shè)計(jì)Tab Bar篙梢，能更好的滿足用戶的需求和體驗(yàn)。
#1顯示最重要的信息
導(dǎo)航欄應(yīng)該只包含最有用的信息美旧，不能添加過(guò)多無(wú)用的標(biāo)簽使導(dǎo)航欄混亂渤滞。許多App在導(dǎo)航欄上添加搜索功能，因?yàn)檫@有助于用戶更快地導(dǎo)航和檢索內(nèi)容榴嗅。
▲?在Spotify底部導(dǎo)航中妄呕，主頁(yè)選項(xiàng)用于播放或收聽(tīng)所有內(nèi)容，搜索選項(xiàng)用于搜索下一首歌曲和播客嗽测，音樂(lè)庫(kù)選項(xiàng)用于播放列表中喜歡和保存的歌曲绪励，單獨(dú)的會(huì)員選項(xiàng)方便用戶輕松點(diǎn)擊并快速完成購(gòu)買操作。
#2擴(kuò)展導(dǎo)航的功能
主流App更喜歡在底部導(dǎo)航欄中使用4-5個(gè)標(biāo)簽唠粥，這樣能保持導(dǎo)航欄的整潔疏魏，還避免了標(biāo)簽過(guò)多導(dǎo)致用戶難以精確點(diǎn)擊選項(xiàng)的情況。
▲?Pinterest的導(dǎo)航欄上只有四個(gè)選項(xiàng)晤愧，這有助于用戶輕松點(diǎn)擊大莫。消息選項(xiàng)會(huì)實(shí)時(shí)更新消息數(shù)量，對(duì)用戶來(lái)說(shuō)這樣的提示很直觀官份。另外搜索功能包含在導(dǎo)航欄中只厘，方便輕松地在主頁(yè)和搜索結(jié)果之間來(lái)回切換烙丛。
#3容納多種標(biāo)簽形式
多數(shù)App底部導(dǎo)航欄會(huì)使用「圖標(biāo)+文字」的標(biāo)簽形式，這樣能清楚地告知用戶點(diǎn)擊標(biāo)簽之后的結(jié)果羔味。
有時(shí)候我們也會(huì)看到有些產(chǎn)品的導(dǎo)航欄只有圖標(biāo)沒(méi)有文字蜀变，但這種形式并不會(huì)影響我們的操作，因?yàn)楫?dāng)導(dǎo)航欄的標(biāo)簽使用了用戶特別熟悉的形狀和內(nèi)涵介评，完全可以省略文字。
▲?宜家App的導(dǎo)航欄使用了大眾都很熟悉的圖標(biāo)爬舰，所以即使不加文字们陆，我們也能清楚地知道這3個(gè)圖標(biāo)分別代表了主頁(yè)、分類情屹、我的坪仇。
▲?相對(duì)于宜家，Youtube的導(dǎo)航欄就顯得有點(diǎn)復(fù)雜垃你，因?yàn)閅outube的圖標(biāo)含義用戶可能并不是很熟悉椅文，加上文字說(shuō)明很有必要。
#4文字標(biāo)簽應(yīng)該簡(jiǎn)短
文字標(biāo)簽應(yīng)該簡(jiǎn)短而清晰惜颇，準(zhǔn)確的文字說(shuō)明能對(duì)用戶使用正確導(dǎo)航起到關(guān)鍵作用皆刺。
▲?TikTok導(dǎo)航所有的文字標(biāo)簽都簡(jiǎn)短，并且中間的添加圖標(biāo)還隱藏掉了文字凌摄，以此來(lái)引吸引用戶的注意力羡蛾。
#5避免隱藏導(dǎo)航欄
Tab Bar通常包含了最重要的導(dǎo)航信息，應(yīng)該始終向用戶展示锨亏，避免在用戶滾動(dòng)頁(yè)面的情況下被隱藏掉痴怨。
▲?Pinterest導(dǎo)航欄的設(shè)計(jì)是個(gè)例。當(dāng)滾動(dòng)頁(yè)面時(shí)器予，底部的導(dǎo)航欄會(huì)隱藏浪藻，這么設(shè)計(jì)的原因可能是為了防止導(dǎo)航欄遮擋圖像，保證用戶看到更多的圖像內(nèi)容乾翔。
#6傳達(dá)位置
Tab Bar幫助用戶輕松導(dǎo)航爱葵，但如果用戶不知道自己的位置，將會(huì)影響他們?yōu)g覽和使用產(chǎn)品的體驗(yàn)反浓。
▲?多鄰國(guó)App通過(guò)改變導(dǎo)航圖標(biāo)的樣式來(lái)讓用戶清晰的知道自己所有的板塊钧惧。
▲?Headspace在底部導(dǎo)航欄加上了線條裝飾，每次切換選項(xiàng)勾习，線條都會(huì)跟著一起切換浓瞪，確保告知用戶確切的位置。
#7從反饋中學(xué)習(xí)并不斷改進(jìn)
反饋是關(guān)鍵巧婶，如果想改善產(chǎn)品的導(dǎo)航欄設(shè)計(jì)乾颁，就要考慮并測(cè)試用戶最喜歡哪個(gè)導(dǎo)航選項(xiàng)涂乌，不使用哪個(gè)導(dǎo)航，需要四個(gè)還是五個(gè)選項(xiàng)等等英岭。
▲?Pinterest通過(guò)收集用戶的使用反饋情況來(lái)不斷改進(jìn)導(dǎo)航欄的設(shè)計(jì)湾盒，幫助用戶更方便地使用產(chǎn)品，這些不斷打磨的改進(jìn)真是產(chǎn)品成功的關(guān)鍵诅妹。
#8在導(dǎo)航欄中顯示更新
Tab Bar不僅僅起到導(dǎo)航的作用罚勾，很多時(shí)候還能通過(guò)狀態(tài)變化告知用戶更多的信息。
▲?在Twitter主頁(yè)導(dǎo)航中吭狡，當(dāng)有新內(nèi)容推送時(shí)尖殃，主頁(yè)就會(huì)出現(xiàn)更新的狀態(tài)，提示用戶查看新內(nèi)容划煮。這樣的設(shè)計(jì)在Youtube送丰、Pinterest等很多主流產(chǎn)品中都有使用。
最后
慢慢來(lái)比較快弛秋，希望對(duì)你有幫助～
精彩推薦：
2、案例分析：柵格系統(tǒng)的布局設(shè)計(jì)
