編輯導(dǎo)語：導(dǎo)航欄的存在可以幫助用戶快速找到所需頁面，提升了產(chǎn)品的易用性，進(jìn)而優(yōu)化了用戶的產(chǎn)品體驗。那么，如何判斷你的產(chǎn)品是否需要底部導(dǎo)航欄？如果需要，底部導(dǎo)航欄又應(yīng)該如何設(shè)計？本篇文章里，作者結(jié)合幾款海外產(chǎn)品，總結(jié)了底部導(dǎo)航欄的設(shè)計策略，一起來看一下。

大家好，我是Clippp。今天為大家?guī)淼奈恼率?strong>「底部導(dǎo)航欄」設(shè)計。很多受歡迎的產(chǎn)品中都有我們值得學(xué)習(xí)和借鑒的設(shè)計思考點，通過分析海外主流產(chǎn)品，帶大家掌握底部導(dǎo)航欄（Tab Bar）的基本知識，找到解決問題的方法并開拓創(chuàng)意思維。

在開始之前，請大家先思考下面兩個問題～

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

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

▲ 很多APP沒有Tab Bar，比如日歷、計算器、滴滴、Uber等。對于是否要在APP中使用Tab Bar，應(yīng)該分不同的情況靈活考慮。

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

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

明白了上面的問題后，接下來就要考慮如何來設(shè)計Tab Bar，能更好地滿足用戶的需求和體驗。

一、顯示最重要的信息

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

▲ 在Spotify底部導(dǎo)航中，主頁選項用于播放或收聽所有內(nèi)容，搜索選項用于搜索下一首歌曲和播客，音樂庫選項用于播放列表中喜歡和保存的歌曲，單獨的會員選項方便用戶輕松點擊并快速完成購買操作。

二、擴(kuò)展導(dǎo)航的功能

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

▲ Pinterest的導(dǎo)航欄上只有四個選項，這有助于用戶輕松點擊。消息選項會實時更新消息數(shù)量，對用戶來說這樣的提示很直觀。另外搜索功能包含在導(dǎo)航欄中，方便輕松地在主頁和搜索結(jié)果之間來回切換。

三、容納多種標(biāo)簽形式

多數(shù)APP底部導(dǎo)航欄會使用「圖標(biāo)+文字」的標(biāo)簽形式，這樣能清楚地告知用戶點擊標(biāo)簽之后的結(jié)果。

有時候我們也會看到有些產(chǎn)品的導(dǎo)航欄只有圖標(biāo)沒有文字，但這種形式并不會影響我們的操作，因為當(dāng)導(dǎo)航欄的標(biāo)簽使用了用戶特別熟悉的形狀和內(nèi)涵，完全可以省略文字。

▲ 宜家APP的導(dǎo)航欄使用了大眾都很熟悉的圖標(biāo)，所以即使不加文字，我們也能清楚地知道這3個圖標(biāo)分別代表了主頁、分類、我的。

▲ 相對于宜家，Youtube的導(dǎo)航欄就顯得有點復(fù)雜，因為Youtube的圖標(biāo)含義用戶可能并不是很熟悉，加上文字說明很有必要。

四、文字標(biāo)簽應(yīng)該簡短

文字標(biāo)簽應(yīng)該簡短而清晰，準(zhǔn)確的文字說明能對用戶使用正確導(dǎo)航起到關(guān)鍵作用。

▲ TikTok導(dǎo)航所有的文字標(biāo)簽都簡短，并且中間的添加圖標(biāo)還隱藏掉了文字，以此來引吸引用戶的注意力。

五、避免隱藏導(dǎo)航欄

Tab Bar通常包含了最重要的導(dǎo)航信息，應(yīng)該始終向用戶展示，避免在用戶滾動頁面的情況下被隱藏掉。

▲ Pinterest導(dǎo)航欄的設(shè)計是個例。當(dāng)滾動頁面時，底部的導(dǎo)航欄會隱藏，這么設(shè)計的原因可能是為了防止導(dǎo)航欄遮擋圖像，保證用戶看到更多的圖像內(nèi)容。

六、傳達(dá)位置

Tab Bar幫助用戶輕松導(dǎo)航，但如果用戶不知道自己的位置，將會影響他們?yōu)g覽和使用產(chǎn)品的體驗。

▲ 多鄰國APP通過改變導(dǎo)航圖標(biāo)的樣式來讓用戶清晰地知道自己所有的板塊。

▲ Headspace在底部導(dǎo)航欄加上了線條裝飾，每次切換選項，線條都會跟著一起切換，確保告知用戶確切的位置。

七、從反饋中學(xué)習(xí)并不斷改進(jìn)

反饋是關(guān)鍵，如果想改善產(chǎn)品的導(dǎo)航欄設(shè)計，就要考慮并測試用戶最喜歡哪個導(dǎo)航選項，不使用哪個導(dǎo)航，需要四個還是五個選項等等。

▲ Pinterest通過收集用戶的使用反饋情況來不斷改進(jìn)導(dǎo)航欄的設(shè)計，幫助用戶更方便地使用產(chǎn)品，這些不斷打磨的改進(jìn)真是產(chǎn)品成功的關(guān)鍵。

八、在導(dǎo)航欄中顯示更新

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

▲ 在Twitter主頁導(dǎo)航中，當(dāng)有新內(nèi)容推送時，主頁就會出現(xiàn)更新的狀態(tài)，提示用戶查看新內(nèi)容。這樣的設(shè)計在Youtube、Pinterest等很多主流產(chǎn)品中都有使用。

參考：uxplanet.org/learn-to-design-tab-bar-from-tiktok-youtube-pinterest-spotify-instagram-slack-duolingo-etc-ee571c5943a

#專欄作家#

作者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。