几何

从这篇文章开始,会从解析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,和分段控件长得像)和内容区组成。
标签视图的内容区会随着标签控件的选择而切换, 标签控件可以在内容区的上下左右任何一边,也可以隐藏。控件数量为2-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选项卡、分段控件和它们的好朋友…

登录收藏
 
你可能喜欢的:
设计沉思录| 品牌体验一致性&高效协同设计沉思录| 品牌体验一致性&高效协同
Material Design Offline States 离线状态Material Design Offline States 离线状态
Material Design Writing 书写Material Design Writing 书写
真正优秀的图标,少不了这7个底层设计原则真正优秀的图标,少不了这7个底层设计原则
全面解析APP「个人中心」设计思路全面解析APP「个人中心」设计思路
善用“心理账户”,提升用户付费率善用“心理账户”,提升用户付费率
花了半年时间,我们做了一套通用型移动设计规范给大家花了半年时间,我们做了一套通用型移动设计规范给大家
Material Design Onboarding 导览Material Design Onboarding 导览
数据可视化设计师如何建立灵感库?数据可视化设计师如何建立灵感库?
从4款主流产品出发,掌握“搜索”交互从4款主流产品出发,掌握“搜索”交互