這個控件叫:Segment Control/分段控件(附錄與Tabs的區別)

鑒于國內交互設計名詞混亂不統一,很多設計師不知道如何用專業術語稱呼一個控件,因此我開了《這個控件叫什么》專題,梳理控件的名稱和使用事項,希望能為推動交互設計發展,做出一點微小的貢獻。

Segment Controls

Segment Control(分段控件/分段選擇器/分段選擇控件)是iOS原生控件之一,Segment Control是一組分段(segment )的線性集合,每一個分段的作用是互斥的,即點擊某分段使之處于觸發狀態,那么同一個Segment Controls的其他分段將恢復正常狀態,所以Segment Control本質上是一個單選組件。橫向排布所有選項,相比于下拉菜單( drop-down menu)有更好的可見性。

如何使用

Segment Control通常用于切換不同的視圖,或者在表單中作為單選組件使用。


表單中的Segment Controls
  • 限制分段數量控制在5個以內
    較寬的分段更容易點擊,為了提高可用性,建議在手機屏幕上每個Segment Control的分段控制在5個以內。因此分段的文案長度需要精簡,建議每個分段控制在2-4個漢字。

  • 不要在同一個Segment Control中混用文字和圖標
    一個分段就像是一個按鈕,按鈕內當然可以使用文字或者圖標代表其含義,但是請不要在同一個Segment Control中混用文字和圖標,避免讓用戶覺得混亂和不一致。


    文字分段和圖標分段
  • 盡量保持各分段大小一致
    同一個Segment Control內,所有分段都應該具有相等的寬度。如果其中某些分段比其他分段寬,會讓整個控件看起來不協調,缺少一致性。

Tabs和Segment Control的區別

左為Tabs,右為Segment Controls

經常國內發現App把Tabs和Segment Controls弄混的情況,給用戶帶來困擾,其實這兩個控件有諸多不同。

  • 來源不同
    Tabs來自Android規范,早在Android 2.0時代,官方的通訊錄App就使用頂部Tab導航,之前Android 4.0規范和最新的Material Design都將Tabs作為推薦的導航形式。而Segment Control則來源于iOS規范。
  • 操作方式不同
    Segment Control只能通過點擊控件本身的分段來進行操作,而Tabs除了點擊控件本身外,還可以通過屏幕內左右滑動切換不同的視圖。
  • 適用場景不同
    Segment Control除了適用于表單的單選組件,其作為視圖切換控制時,一般來說,起到的是分割和篩選同類數據的作用。例如App Store的排行榜,[總排行榜]這個長列表數據集,通過Segment Controls把長列表分割成付費的、免費的和暢銷的幾個子列表數據集。再比如「設置」中的電池用量,Segment Controls把開機后[所有時間耗電的App]篩選出[過去24小時]和[過去4天]這一部分數據。所以說Segment Controls本質上和下拉菜單一樣,只是有更好的可見性罷了。
    Segment Controls本質是篩選,和下拉菜單一樣

    而Tabs沒有這種限制,Tabs里Tab呈現的內容可以有很大的差別,當然Tabs不能作為表單的單選組件。
  • 數量限制不同
    在手機屏幕里,Segment Control分段限制在5個以內,而Tabs可以通過Scrollable tabs這種形式,擴展更多的Tab數量。


    Scrollable tabs








《這個控件叫什么》專題

這個控件叫:Badge/徽標/小紅點
這個控件叫:A-Z index/字母索引導航
這個控件叫:Skeleton Screen/加載占位圖
這個控件叫:Page Indicator/Page Controls/頁面指示器
這個控件叫:Stepper/步進器
這個控件叫:Switch/開關/滑動開關/切換開關
Toast(吐司提示)的曾經、現在與未來
這個控件叫:Picker/選擇器/拾取器
這個控件叫:Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤
這個控件叫:Action Sheet/動作菜單/動作面板/行動列表
這個控件叫:Popover/氣泡彈出框/彈出式氣泡/氣泡
這個控件叫:Text fields/輸入框/文本框
這個控件可能叫:Notice Bar/通告欄

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 附錄與Tabs的區別。 Segment Controls(分段控件/分段選擇器/分段選擇控件)是iOS原生控件之一...
    拾葉姑娘閱讀 994評論 0 2
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,245評論 4 61
  • 嗯哼嗯哼蹦擦擦~~~ 轉載自:https://github.com/Tim9Liu9/TimLiu-iOS 目錄 ...
    philiha閱讀 5,027評論 0 6
  • 當清晨的第一縷陽光照在海南幼兒園小3班的墻壁上,緩緩地拉開了幼兒園一天的序幕。教室旁邊的銀杏樹身披黃金甲一般,...
    最拽貓咪閱讀 483評論 0 0
  • (選自《中觀論頌講記》) 印順導師 緣起是因果性的普遍法則,一切的存在,是緣起的。這緣起的一切,廣泛的說:大如世界...
    蘊流閱讀 557評論 0 3