標(biāo)簽可能看起來像一個微小、乏味的圖形用戶界面設(shè)計，但我們合理的運用Tab的特點，易用易理解，就能為你的用戶體驗加分。

最簡單的界面小部件會是大模塊功能的基石，是否用好用得合適對產(chǎn)品的體驗起著重要的作用。本文談?wù)摰木褪且粋€經(jīng)常被誤用的設(shè)計元素：Tab。

上下文替換

在相同的上下文中使用Tab來替換視圖，設(shè)計的標(biāo)簽是平行的性質(zhì)，而不是導(dǎo)航到不同的區(qū)域。這種Tab切換，可以直觀的看到邏輯塊后面的Tab內(nèi)容，這樣當(dāng)用戶選擇一個給定的標(biāo)簽時，可以很容易地預(yù)測前后Tab的內(nèi)容及關(guān)系。如果人們需要比較不同的標(biāo)簽后面的信息，使用這類Tab作為信息切換就比較合適。

如下圖：藍色圈出部分。

功能類導(dǎo)航

同理，只有當(dāng)用戶不需要同時從多個選項卡中查看內(nèi)容時才使用Tab導(dǎo)航。因為使用Tab導(dǎo)航會增加用戶短期記憶的負(fù)擔(dān)，增加了認(rèn)知負(fù)荷和互動成本，并降低可用性。在產(chǎn)品設(shè)計時，導(dǎo)航設(shè)計應(yīng)該突出當(dāng)前選定的標(biāo)簽。確保突出顯示，這樣用戶就可以分辨出哪個選項被選中了。

當(dāng)然，除了強調(diào)被選中的內(nèi)容，你還可以標(biāo)記當(dāng)前頁的大小，通過一個粗體標(biāo)簽，圖標(biāo)，或者通過排序來突出優(yōu)先級。同時，未選中的標(biāo)簽應(yīng)清晰易讀，成為提醒用戶的附加選項。如上圖：綠色圈出部分。

內(nèi)容類標(biāo)簽

將當(dāng)前標(biāo)簽連接到內(nèi)容區(qū)域，就像你正在用標(biāo)簽的幾個物理索引卡進行移動一樣。這強調(diào)了顯示面板，也告訴用戶選項卡被選中時，只有幾個標(biāo)簽。將標(biāo)簽放在標(biāo)簽面板的頂部，而不是在兩側(cè)或底部，用戶經(jīng)常會忽略它們。

標(biāo)簽控制的范圍從視覺設(shè)計應(yīng)該是顯而易見的。打個比方，使用標(biāo)簽就像翻閱抽屜里有一個老式的卡片目錄索引卡，所以用戶必須能夠一眼分辨什么是“卡片”（即標(biāo)簽面板）。如下圖案例：

總結(jié)一下：

Tab的使用應(yīng)該將外觀與功能功能設(shè)計的相同?！耙恢滦浴痹趫D形用戶界面控制設(shè)計是非常重要的，因為它建立了用戶在界面上的感知：用戶知道如何使用你的Tab，而無需進一步探索或容易出錯的猜測。

這就意味著，他們可以把自己的全部時間和腦力去理解的內(nèi)容和功能。大部分人會認(rèn)為Tab本身沒有價值，但它們的光芒會在不禁意間感染到你的用戶。在我們設(shè)計功能的時候，可以通過做一個快速的A / B測試，讓Tab的設(shè)計符合用戶習(xí)慣。

作者：Mandy權(quán)，微信公眾號：Q產(chǎn)品，一名快樂的產(chǎn)品經(jīng)理！～

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