幾何

從這篇文章開始,會從解析UI組件向UI模塊過渡,模塊比組件的整體性更強、更復雜,也有更大范圍的影響力,我把模塊分為:導航類、內容區、操作類和反饋類,它們是可以直接組成頁面的部分。

在導航類中有一種很基礎也很重要的模塊:tab選項卡與分段控件。它們功能一致,分別來自于安卓和蘋果。其物理原型為書本上的小標簽:

物理原型

 

tab選項卡

Tab選項卡(tabs)是安卓系統中用來在不同頁面或不同數據組之間切換的模塊,這些頁面或數據組分別用tab選項卡中的一個標簽項(tab item)來表示,它們所代表的內容是屬于同一層級、相互獨立的的–沒有順序關系或比較關系,所以,tab選項卡不適合用在帶有操作順序的場景中(不能用一個tab表示一個步驟),這類場景最好用步驟條來展示。

 

Tab選項卡通常位于頁面上方,在內容區和頂部應用欄之間,有時候也存在于某個容器頂部。

圖源:材料設計

組成元素

Tab選項卡由3部分組成:

  • 容器*
  • 標簽項*
  • 選中狀態指示器*

標*為必須元素

容器:是承載整個模塊的細長矩形。

標簽項:包括文本標簽和/或圖標,兩者至少要有一個,且形式統一。文本標簽不可以帶省略號(截斷),那樣會影響用戶理解。單獨文本往往會比單獨圖標更能被理解,所以如果只是用圖標作為標簽項,應保證它的含義明確。

選中狀態指示器:用來指示當前激活的標簽項,材料設計的風格是用下劃線和改變標簽項的顏色來區分。

 

分類

它分為固定tab選項卡(fixed tabs)和可滑動tab選項卡(scrollable tabs)。固定類在手機上不能超過4個標簽項,每個等寬且全部可見。

可滑動的則可以容納更多數量的標簽項,它們會延伸到界面之外:

圖源:材料設計

不論哪種選項卡,都可以通過點擊標簽或左右滑動(移動端)來切換。

 

TIP:

  • 不要把可左右滑動的內容鑲嵌到tab選項卡的內容區域。

 

狀態

Tab選項卡中標簽的狀態有三種:懸停、聚焦和按下。注意這三種狀態和標簽是否激活無關,即非激活和激活的標簽都有這三種狀態。

 

分段控件

分段控件(segmented control)是蘋果手機、桌面和電視中都有出現的模塊。這里的“段“和上面tab選項卡的”標簽項“類似,每段的寬度相等,而且最好內容量級相當。每段可以放文本或圖標或兩者的組合,文本盡量使用名詞。

分段控件是一個觸發類的選擇模塊,本質上和下拉菜單相同,只不過它同時展示了所有分段,所以有更好的可見性。

 

蘋果移動端

分段不能超過5個,以2-4個為宜。

?圖源:蘋果

 

蘋果桌面端

充當按鈕或可切換按鈕,?每段文本要簡短。

 

電視端

電視上的分段控件不要和其他可上焦的元素離太近,在蘋果的規范中,分段控件上焦即選中,不需要點擊。但也有不少電視廠家是需要點擊步驟的。分段數量不要超過7段,否則會耗費較多的時間來瀏覽和理解。

分段圖標宜簡單直觀,而不要有太多細節。

 

小結:

  • tab選項卡和分段控件的區別在于:前者數量可以超出頁面并用滑動方式切換,后者數量不能超過5個且不能延伸到頁面外。

 

其他導航模塊

導航模塊共有十幾種,它們分別適合不同的終端和場景,下面的幾種模塊是和tab選項卡以及分段控件很相似的:

底部導航欄(安卓移動端和平板)

安卓手機上最常見的一種導航,用于應用級頁面間的切換。它的組成元素為容器和導航項,每個導航項可由圖標、文本組成,數量為3-5個。

TIP:
  • 如果將底部導航欄和tab標簽欄同時使用,在設計時應注意它們的優先級關系:底部導航層級最高。

 

 

標簽欄(蘋果)

 

蘋果移動端

Iphone常見的導航模式,位于應用底部,也是用來切換應用級的頁面。數量為3-5個,iPad上可以多些。如果某個標簽暫不可用,不要隱藏該標簽,整個應用的標簽欄應該保持一致。

 

蘋果電視端

不僅切換應用級的頁面,還可以切換流媒體或直播節目的內容。標簽的命名應該指代明確并簡潔。

TIPS:

  • 對導航欄和標簽欄這兩種模塊,不同廠家有不同的叫法,如標簽欄/標簽選項條(百度小程序),標簽頁(螞蟻),選項卡(Layui)等,但實際是一個意思。
  • 安卓底部導航欄和蘋果標簽欄的區別:前者每次離開后返回到原來導航項時,將回到該頁頂層;后者離開再回來后是回到離開時的地方。
標簽視圖(蘋果)
?
蘋果桌面端有一個和分段控件類似的標簽視圖(tab view)。它用來裝載密切關聯的、同級別的內容。
比起分段控件,它所承載的內容更多,主要用于整個窗口視圖的界面切換。而分段控件適合用在工具欄等面板中,所影響的范圍相對較小。
蘋果電腦用戶對標簽視圖的模樣很熟悉,看到它時便會有習慣性的期待。?它是由標簽控件(tabbed control,和分段控件長得像)和內容區組成。
標簽視圖的內容區會隨著標簽控件的選擇而切換,?標簽控件可以在內容區的上下左右任何一邊,也可以隱藏??丶盗繛?-6個,超過6個的話可以換成其他組件或模塊。注意標簽視圖中的標簽控件只能影響到該視圖里內容,超過該視圖時,用全局控件來控制:
本文小結
  • 導航類模塊有很多種,本文主要介紹了安卓移動端的tab選項卡、底部導航欄,蘋果移動端和電視端的標簽欄、桌面端的標簽視圖以及蘋果三種終端都有的分段控件。

這些就是導航的一部分知識,回見??

 

參考文章:

1.?蘋果.?Human Interface Guidelines -iOS、MacOS、tvOS

2.?龍爪槐守望者.?這個控件叫:Segment Controls/分段控件

3.?Material Design.?Components-Tabs

4.?百度. 小程序設計指南

5.?螞蟻金服.?手機端設計指引

6. Layui.?web端-tab

 

原文地址:UI設計語言(公眾號)

作者:a珠珠

轉載請注明:學UI網 » UI模塊-tab選項卡、分段控件和它們的好朋友…

登錄收藏
 
你可能喜歡的:
App bars: top 頂部應用欄App bars: top 頂部應用欄
設計向善|QQ群作業策劃故事設計向善|QQ群作業策劃故事
UI 場景中的 Banner 布局樣式探索UI 場景中的 Banner 布局樣式探索
設計進階:設計方案如何被量化驗證?設計進階:設計方案如何被量化驗證?
Feed流 - 圖片比例設計(二)Feed流 – 圖片比例設計(二)
設計沉思錄 | 如何用感染力提升設計價值設計沉思錄 | 如何用感染力提升設計價值
“個人主頁”設計相關思考“個人主頁”設計相關思考
手機端主按鈕應該放在那里?手機端主按鈕應該放在那里?
原創 | IM聊天界面的設計規則原創 | IM聊天界面的設計規則
產品改進沒方向?不妨從用戶反饋找找靈感(二)產品改進沒方向?不妨從用戶反饋找找靈感(二)
?
天津十一选五app 好运快三是官方彩票吗 河北11选5任六 内蒙古快三最近遗漏 淘股王 上海天天选四今天开奖 正规赌博十大网站app 云南体彩十一选五TOP10遗漏 黑龙江p62开奖号码是多少 棋牌游戏赚钱wx15 贵州快三今日推荐号