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

1 評論 24010 瀏覽 67 收藏 4 分鐘

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

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

上下文替換

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

如下圖:藍色圈出部分。

上下文替換

功能類導航

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

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

內容類標簽

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

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

內容類標簽

總結一下:

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

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

 

作者:Mandy權,微信公眾號:Q產(chǎn)品,一名快樂的產(chǎn)品經(jīng)理!~

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

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 讀起來很拗口

    來自江蘇 回復