底部標(biāo)簽欄可以是純圖標(biāo)樣式，或者圖標(biāo)與文本標(biāo)簽搭配的樣式。

選中的標(biāo)簽需要有不同的視覺風(fēng)格，可以使用按鈕、文字、圓點(diǎn)等樣式來表示選中效果，幫助用戶一目了然地定位當(dāng)前導(dǎo)航。

在Apple iOS底部標(biāo)簽欄中，標(biāo)簽欄的寬為390px，高為49px。

常規(guī)標(biāo)簽欄的圖標(biāo)大小為25x25px，緊湊型的標(biāo)簽欄圖標(biāo)為18x18px。

 二、標(biāo)簽欄設(shè)計(jì)6個(gè)注意事項(xiàng)

1、導(dǎo)航數(shù)量不超過5個(gè)

底部標(biāo)簽欄最適合放置3-5個(gè)導(dǎo)航選項(xiàng)。移動(dòng)端屏幕相對(duì)較小，使用五個(gè)以上的選項(xiàng)會(huì)讓導(dǎo)航擠在一起，并影響可用性。

另外導(dǎo)航選項(xiàng)太多，手指的觸摸面積(紅色圓圈)會(huì)比觸摸目標(biāo)(導(dǎo)航選項(xiàng))的面積大很多，用戶有可能會(huì)意外觸發(fā)錯(cuò)誤的選項(xiàng)。

設(shè)計(jì)解析：

① 如果選項(xiàng)很少，只有兩或三個(gè)時(shí)，可以考慮使用分段控件的設(shè)計(jì)樣式，將分段控件放在頁面上方作為導(dǎo)航。

② 如果選項(xiàng)很多，超過五個(gè)時(shí)，我們需要評(píng)估這些導(dǎo)航的優(yōu)先級(jí)，篩選出最重要的導(dǎo)航。如果必須要保留五個(gè)以上的導(dǎo)航選項(xiàng)，可以考慮使用類似漢堡菜單這樣的控件。

2、不要使用不熟悉的圖標(biāo)

底部標(biāo)簽欄是用戶使用頻率非常高的導(dǎo)航之一，這就需要確保目標(biāo)受眾應(yīng)該對(duì)標(biāo)簽欄中的圖標(biāo)非常清晰，避免讓用戶產(chǎn)生疑惑。

3、圖標(biāo)/文字的顏色不能太淺

圖標(biāo)的顏色對(duì)比度差、導(dǎo)航標(biāo)簽的字體小是在底部標(biāo)簽欄設(shè)計(jì)中兩個(gè)最常見問題。

在底部欄設(shè)計(jì)過程中，我們不僅要區(qū)分已選標(biāo)簽和未選標(biāo)簽的狀態(tài)，保證已選標(biāo)簽更突出，還要注意觀察圖標(biāo)與文字之間、圖標(biāo)與背景之間的顏色對(duì)比度，確保未選狀態(tài)的圖標(biāo)和文字也能夠清晰易讀。

4、不要設(shè)計(jì)可滑動(dòng)的標(biāo)簽欄

可滑動(dòng)的標(biāo)簽欄會(huì)對(duì)導(dǎo)航可見性產(chǎn)生影響，由于并非所有的導(dǎo)航選項(xiàng)都是一次可見，用戶可能很容易錯(cuò)過后面的選項(xiàng)。

另外，當(dāng)用戶左右滑動(dòng)標(biāo)簽欄時(shí)，前面已選的標(biāo)簽可能會(huì)消失，影響使用體驗(yàn)。

5、不要截?cái)鄻?biāo)簽

底部標(biāo)簽欄的空間本身就很小，因此在導(dǎo)航中使用文字時(shí)，每個(gè)字符都顯得很重要。

不要截?cái)鄻?biāo)簽，這樣會(huì)造成用戶不清楚標(biāo)簽的含義，可以嘗試使用更簡練的文字來清楚地傳達(dá)選項(xiàng)含義。

6、不要使用太復(fù)雜的切換動(dòng)畫

花哨復(fù)雜的切換動(dòng)畫對(duì)于初次使用的用戶來說可能看起來很酷，但是一旦用戶熟悉了產(chǎn)品并頻繁使用導(dǎo)航時(shí)，這些復(fù)雜的切換動(dòng)畫就會(huì)變得很煩人。

這些切換動(dòng)畫雖然看起來很復(fù)雜，但卻沒有為產(chǎn)品或用戶帶來任何有用的價(jià)值或信息，因此這些動(dòng)畫就會(huì)變成一種負(fù)擔(dān)，讓用戶感到沮喪。

作者： Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》APP底部標(biāo)簽欄設(shè)計(jì)需要注意哪些問題？我總結(jié)了這6點(diǎn)

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司