close

Tab(選項卡)的產品設計原則及應用 - 網頁設計

http://webdesign.zoapcon.com

譯者:西喬 來源:Smashing Magazine 作者:Jacob Gube

Module Tabs(也稱選項卡,后文中簡稱Tab,以便更符合中國設計師的日常叫法) 是一個常見的交互元素——將不同的內容重疊放置在某一布局區塊內,重疊的內容區里的每次只有其中一層是可見的。用戶通過鼠標點擊或移到內容區所對應的標簽上,來請求顯示該層內容區。

(譯注:本文中指的是狹義的Tab,指在界面的某一版塊區域內所應用的Tab設計。實際上,絕大多數網站導航也是Tab的一種應用。)

web界面的設計趨勢是縮短頁面屏長,降低信息的顯示密度,但同時又不能犧牲可視的信息量。在這種趨勢下,Tab 這種交互元素成為了一個越來越普遍的應用。例如在Blog界面的設計中,人們在側邊欄使用Tab模式來顯示 ”最新更新|最熱更新“ 的文章列表以引導用戶快速跳轉到文章內容頁,這種模式令頁面結構緊湊同時在視覺上不那么喧賓奪主。

本文將討論基于web頁面或其它web應用中如何設計Tab,同時分享一些產品設計原則、真實的應用案例、教程以及一些能幫助你直接實現Tab應用的免費腳本。

分析Tab元素的構成

為了統一叫法以便于進行討論,我們先花時間來認識一下Tab元素的每個構成部分。

 

標簽:用戶控制切換內容區的操作區域。
標簽和內容區在視覺上看起來應該是一個整體。
標簽上的文字應該簡潔、無歧義并能準確描述出它所對應的內容區的信息特征。
標簽有選中和未選中兩種狀態,每次只能有一個標簽是選中狀態,在頁面剛載入時,默認第一個標簽是選中狀態。
內容區:Tab元素中重疊的區塊。用于顯示信息內容。
內容區和標簽一一對應,
當前顯示的內容區對應選中狀態的標簽,當前隱藏的內容區對應未選中狀態的標簽。
用戶應當能很輕易地通過控制標簽來切換對應的內容區。
默認被選中的內容區應該在頁面載入后立即顯示。

一 。什么情況下應用Tab設計

當交互設計師希望節省頁面空間;緊湊布局;且需要組合的幾種信息之間具有關聯性時,可以選擇Tab應用。

信息之間具有某種關聯特征

構成一個整體的每個元素之間都應該具有邏輯上的關聯性。所以出現在同一個tab元素中的幾種信息自己應該具有關聯特征,這樣用戶才能將整個Tab區域視為一個整體。例如在Blog中很常見的信息組合:“ 最新更新 | 最熱文章 | 評論最多 ” 。

下圖是網站Webdesigner Depot的側邊欄上的Tab元素:“全部文章 | 最受歡迎 | 最新更新”

 

信息之間不應該存在對比或并行的關系

Tab元素中,同一時刻,只能顯示一層內容區。當用戶需要對位于不同內容區上的信息進行對比,或者這幾種信息同時顯示會更便于用戶閱讀時,就不應該使用Tab。否則會導致用戶為了比對所需的信息,而不停在標簽之間進行切換。

下面這個案例中,BGPatterns (一個在線制作背景圖案的網站)tab就用得不是地方。當用戶想設計或修改他所制作的背景圖案時,必須反復在幾個標簽之間進行切換。Tab在這里妨礙了用戶的操作。如果在頁面上同時顯示這4個內容區上的信息,可用性和友好度會更高。

 

另一個反面案例:網站 Best Web Gallery 在它側邊欄上所放置的Tab,標簽分別是 ”特別推薦“(包含了一些網站所有者認為值得注意的鏈接)和 “最新評論”。 這兩組信息之間并沒有邏輯聯系,用戶會很疑惑為什么這兩者要放在一起呢。所以這個Tab中的兩組信息最好分開放置。

 

每個內容區應該有一個簡短明確的標題。

Tab元素的標簽區寬度是有限的,所以標簽區的文字應該簡潔扼要,具有代表性,長度控制在1~3個英文單詞。用精煉的方式展示信息,除了保持設計樣式不變形外,還可以讓用戶更快速地處理文字信息,用以預測隱藏區域上所包含的內容。

Tab應該用于展現精煉的內容。

Tab本意用于展現標準化和易于理解的信息。基于此,Tab應該只用于顯示信息摘要和內容要點,例如列表,數據圖表,或1~2段簡短的文字這種形式。


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜
    創作者介紹
    創作者 apsc 的頭像
    apsc

    apsc的部落格

    apsc 發表在 痞客邦 留言(0) 人氣()