在開(kāi)始之前，請(qǐng)大家先思考下面兩個(gè)問(wèn)題～

問(wèn)題1：你的產(chǎn)品真的需要Tab Bar嗎？

好像并不是。雖然淘寶、微信、微博、美團(tuán)等大多數(shù)主流的產(chǎn)品都在使用Tab Bar，但這并不意味著所有產(chǎn)品都需要它。

問(wèn)題2：為什么產(chǎn)品要有Tab Bar？

答案是為了易于使用，意味著通過(guò)Tab Bar這種簡(jiǎn)單的設(shè)計(jì)可以輕松幫助用戶導(dǎo)航到頁(yè)面。

#1顯示最重要的信息

導(dǎo)航欄應(yīng)該只包含最有用的信息，不能添加過(guò)多無(wú)用的標(biāo)簽使導(dǎo)航欄混亂。許多App在導(dǎo)航欄上添加搜索功能，因?yàn)檫@有助于用戶更快地導(dǎo)航和檢索內(nèi)容。

#2擴(kuò)展導(dǎo)航的功能

主流App更喜歡在底部導(dǎo)航欄中使用4-5個(gè)標(biāo)簽，這樣能保持導(dǎo)航欄的整潔，還避免了標(biāo)簽過(guò)多導(dǎo)致用戶難以精確點(diǎn)擊選項(xiàng)的情況。

#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)等等。

#8在導(dǎo)航欄中顯示更新

Tab Bar不僅僅起到導(dǎo)航的作用，很多時(shí)候還能通過(guò)狀態(tài)變化告知用戶更多的信息。

原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》從TikTok、Youtube、Pinterest等主流海外產(chǎn)品中，學(xué)習(xí)如何設(shè)計(jì)底部導(dǎo)航欄

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)