移動APP UI界面底部菜單設(shè)計的7個技巧和注意點

移動APP UI界面底部標(biāo)簽欄（也稱為導(dǎo)航欄）是移動設(shè)計中最流行的導(dǎo)航類型之一。位于易于觸及的區(qū)域，使用戶的拇指可以輕松訪問，在本文中，我們將分享在設(shè)計底部菜單時要記住的7個注意事項。

1、不要在菜單欄中放置觸發(fā)動作的功能性元素
底部菜單欄時導(dǎo)航，而不是功能性操作，除非你的這項功能是一個重點主推功能，如：咨詢、搜尋...等

2、不要添加超過5個導(dǎo)航目的地
Tab 欄最適合 3-5 個頂級導(dǎo)航目的地。使用超過五個選項會使目標(biāo)彼此過于接近并損害可用性。用戶可能會意外觸發(fā)錯誤的選項。

3、不要設(shè)計可滾動的菜單欄
可滾動的菜單欄會損害可發(fā)現(xiàn)性。由于一次并非所有導(dǎo)航選項都可見，因此用戶可能很容易錯過重要選項。另外，當(dāng)用戶滾動標(biāo)簽欄時，當(dāng)前位置可能會消失。

4、不要使用不熟悉的圖標(biāo)
您在標(biāo)簽欄中使用的圖標(biāo)對您的目標(biāo)受眾來說應(yīng)該是非常清晰的。如果您懷疑圖標(biāo)的含義是否明確，則應(yīng)始終將圖標(biāo)與標(biāo)簽一起使用，如果你為了突出產(chǎn)品業(yè)務(wù)或品牌特性，可以增加圖標(biāo)的設(shè)計識別度，再配上文字。

5、不要使用“灰上灰”的顏色組合
圖標(biāo)顏色對比度差和標(biāo)簽字體小是標(biāo)簽欄設(shè)計的兩個常見問題。 始終檢查文本和圖標(biāo)的顏色對比度。3 : 1 是活動用戶界面組件和圖形對象（如圖標(biāo)和圖形）的最小比例（根據(jù)WCAG） 確保文本標(biāo)簽清晰易讀。

6、不要截斷標(biāo)簽
您在標(biāo)簽欄中沒有太多空間，所以當(dāng)涉及到文本標(biāo)簽時，每個字符都很重要。切勿截斷標(biāo)簽，因為用戶不清楚其含義。相反，嘗試編寫清楚地傳達(dá)選項的簡短標(biāo)簽。

7、不要使用花哨的動畫效果
花哨的圖標(biāo)動畫對于初次使用的用戶來說可能看起來很酷，但如果你是高頻使用APP，這些看似酷炫的動畫會成為一種視覺累贅，制造大量視覺噪音，給用戶造成困擾。

所以產(chǎn)品設(shè)計視覺不是炫技，而是真正為產(chǎn)品定位、目標(biāo)、業(yè)務(wù)、運營服務(wù)的設(shè)計，當(dāng)然除了一些為投標(biāo)而做的提案設(shè)計除外。