用好的交互設計來管理復雜－“Tab”

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

最簡單的界面小部件會是大模塊功能的基石，是否用好用得合適對產品的體驗起著重要的作用。本文談論的就是一個經常被誤用的設計元素：Tab。

上下文替換

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

如下圖：藍色圈出部分。

功能類導航

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

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

內容類標簽

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

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

總結一下：

Tab的使用應該將外觀與功能功能設計的相同。“一致性”在圖形用戶界面控制設計是非常重要的，因為它建立了用戶在界面上的感知：用戶知道如何使用你的Tab，而無需進一步探索或容易出錯的猜測。

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

作者：Mandy權，微信公眾號：Q產品，一名快樂的產品經理！～

本文由 @Mandy權 原創發布于人人都是產品經理。未經許可，禁止轉載。