底部標(biāo)簽欄（也稱為導(dǎo)航欄）是移動(dòng)設(shè)計(jì)中最流行的導(dǎo)航類型之一。它位于易于觸及的區(qū)域，使用戶的拇指可以輕松訪問(wèn)。盡管它相對(duì)簡(jiǎn)單，但要正確設(shè)計(jì)可能會(huì)很棘手。

在本文中，我將分享設(shè)計(jì)標(biāo)簽欄時(shí)要記住的 7 件事。

標(biāo)簽欄導(dǎo)航剖析

底部標(biāo)簽欄可以是純圖標(biāo)導(dǎo)航：

或圖標(biāo)可以與文本標(biāo)簽的組合：

所選導(dǎo)航選項(xiàng)通常具有不同的視覺(jué)風(fēng)格，可以幫助用戶一目了然地了解當(dāng)前位置。

蘋果 iOS 標(biāo)簽欄

對(duì)于 Apple iOS，導(dǎo)航選項(xiàng)的容器大小等于 390x49。（也可以是375）

蘋果iOS標(biāo)簽欄

容器中圖標(biāo)的大小為：

• 25x25 pt 用于常規(guī)標(biāo)簽欄

• 18x18 pt 用于緊湊的標(biāo)簽欄

對(duì)于方形字形，圖標(biāo)應(yīng)該是：

• 23x23 pt 用于常規(guī)標(biāo)簽欄

• 17x17 pt 用于緊湊的標(biāo)簽欄

對(duì)于文本標(biāo)簽，Apple iOS 使用 SF 字體，中文使用思源黑體或者蘋方，大小 10 和中等粗細(xì)。

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

1.不要在bar中放置觸發(fā)動(dòng)作的元素

標(biāo)簽欄包含導(dǎo)航目的地，而不是操作。不要放置觸發(fā)動(dòng)作的控件，例如創(chuàng)建。

?“創(chuàng)建”是行動(dòng)，而不是導(dǎo)航選項(xiàng)

此規(guī)則的唯一例外是使用視覺(jué)上區(qū)分的號(hào)召性用語(yǔ)元素，如下例所示。

? 帶有特定號(hào)召性用語(yǔ)對(duì)象的標(biāo)簽欄

2.不要添加超過(guò)5個(gè)導(dǎo)航圖標(biāo)

Tab 欄最適合 3-5 個(gè)頂級(jí)導(dǎo)航目的地。使用超過(guò)五個(gè)選項(xiàng)會(huì)使目標(biāo)彼此過(guò)于接近并損害可用性。用戶可能會(huì)意外觸發(fā)錯(cuò)誤的選項(xiàng)。

? 導(dǎo)航選項(xiàng)太多。與拇指（紅色圓圈）相比，觸摸目標(biāo)（導(dǎo)航選項(xiàng)）太小。

該怎么辦：

• 如果您只有兩個(gè)頂級(jí)導(dǎo)航選項(xiàng)，則可以進(jìn)行分段控制。

• 如果您有五個(gè)以上的導(dǎo)航選項(xiàng)，則很有可能并非所有選項(xiàng)都是最重要的。您可以評(píng)估導(dǎo)航選項(xiàng)，如果您仍然有五個(gè)以上的目的地，您可以使用像漢堡菜單這樣的控件。

3. 不要設(shè)計(jì)可滾動(dòng)的標(biāo)簽欄

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

? 可滾動(dòng)的標(biāo)簽欄

4. 不要使用不熟悉的圖標(biāo)

您在標(biāo)簽欄中使用的圖標(biāo)對(duì)您的目標(biāo)受眾來(lái)說(shuō)應(yīng)該是非常清晰的。如果您懷疑圖標(biāo)的含義是否明確，則應(yīng)始終將圖標(biāo)與標(biāo)簽一起使用。

? 用戶可能不清楚第二個(gè)導(dǎo)航選項(xiàng)

5. 不要使用“灰+灰”的顏色組合

圖標(biāo)顏色對(duì)比度差和標(biāo)簽字體小是標(biāo)簽欄設(shè)計(jì)的兩個(gè)常見(jiàn)問(wèn)題。

• 始終檢查文本和圖標(biāo)的顏色對(duì)比度。3 : 1 是活動(dòng)用戶界面組件和圖形對(duì)象（如圖標(biāo)和圖形）的最小比例（根據(jù)WCAG）
  

• 確保文本標(biāo)簽清晰易讀。

? 導(dǎo)航圖標(biāo)顏色對(duì)比度差

6. 不要截?cái)鄻?biāo)簽

您在標(biāo)簽欄中沒(méi)有太多空間，所以當(dāng)涉及到文本標(biāo)簽時(shí)，每個(gè)字符都很重要。切勿截?cái)鄻?biāo)簽，因?yàn)橛脩舨磺宄浜x。相反，嘗試編寫(xiě)清楚地傳達(dá)選項(xiàng)的簡(jiǎn)短標(biāo)簽。

? 第二個(gè)標(biāo)簽被截?cái)?/span>

7. 不要使用花哨的動(dòng)畫(huà)過(guò)渡

花哨的動(dòng)畫(huà)對(duì)于初次使用的用戶來(lái)說(shuō)可能看起來(lái)很酷，但一旦您開(kāi)始定期使用該應(yīng)用程序，很快就會(huì)變得煩人。每個(gè)需要太多動(dòng)作但沒(méi)有提供實(shí)用價(jià)值的對(duì)象都會(huì)成為讓用戶感到沮喪的視覺(jué)噪音。這就是為什么要盡量避免在選項(xiàng)之間使用花哨的轉(zhuǎn)換。

GIF

? 避免使用花哨的動(dòng)畫(huà)效果來(lái)更改導(dǎo)航

↓↓長(zhǎng)按二維碼加靜電老師咨詢↓↓

純小班教學(xué) 秋期班開(kāi)始報(bào)名啦

??報(bào)名送價(jià)值199元正版Eagle軟件??
10月火爆開(kāi)課