UI模块-tab选项卡、分段控件和它们的好朋友…

从这篇文章开始,会从解析UI组件向UI模块过渡,模块比组件的整体性更强、更复杂,也有更大范围的影响力,我把模块分为:导航类、内容区、操作类和反馈类,它们是可以直接组成页面的部分。

jlf0om00cvt.jpg插图

在导航类中有一种很基础也很重要的模块:tab选项卡与分段控件。它们功能一致,分别来自于安卓和苹果。其物理原型为书本上的小标签:

3que2jw2jmx.jpg插图(1)

物理原型

tab选项卡

Tab选项卡(tabs)是安卓系统中用来在不同页面或不同数据组之间切换的模块,这些页面或数据组分别用tab选项卡中的一个标签项(tab item)来表示,它们所代表的内容是属于同一层级、相互独立的的–没有顺序关系或比较关系,所以,tab选项卡不适合用在带有操作顺序的场景中(不能用一个tab表示一个步骤),这类场景最好用步骤条来展示。

Tab选项卡通常位于页面上方,在内容区和顶部应用栏之间,有时候也存在于某个容器顶部。

rg2ut1khmt1.jpg插图(2)

图源:材料设计

组成元素

Tab选项卡由3部分组成:

容器*标签项*选中状态指示器*

标*为必须元素

4cvbfrxqzc5.jpg插图(3)

容器:是承载整个模块的细长矩形。

标签项:包括文本标签和/或图标,两者至少要有一个,且形式统一。文本标签不可以带省略号(截断),那样会影响用户理解。单独文本往往会比单独图标更能被理解,所以如果只是用图标作为标签项,应保证它的含义明确。

选中状态指示器:用来指示当前激活的标签项,材料设计的风格是用下划线和改变标签项的颜色来区分。

分类

它分为固定tab选项卡(fixed tabs)和可滑动tab选项卡(scrollable tabs)。固定类在手机上不能超过4个标签项,每个等宽且全部可见。

可滑动的则可以容纳更多数量的标签项,它们会延伸到界面之外:

hqi0ds5uqjy.jpg插图(4)

图源:材料设计

不论哪种选项卡,都可以通过点击标签或左右滑动(移动端)来切换。

TIP:

不要把可左右滑动的内容镶嵌到tab选项卡的内容区域。

状态

Tab选项卡中标签的状态有三种:悬停、聚焦和按下。注意这三种状态和标签是否激活无关,即非激活和激活的标签都有这三种状态。

knjd2jpdhjt.jpg插图(5)

分段控件

分段控件(segmented control)是苹果手机、桌面和电视中都有出现的模块。这里的“段“和上面tab选项卡的”标签项“类似,每段的宽度相等,而且最好内容量级相当。每段可以放文本或图标或两者的组合,文本尽量使用名词。

分段控件是一个触发类的选择模块,本质上和下拉菜单相同,只不过它同时展示了所有分段,所以有更好的可见性。

苹果移动端

分段不能超过5个,以2-4个为宜。

llgvjeih4zs.jpg插图(6)

图源:苹果

苹果桌面端

充当按钮或可切换按钮,每段文本要简短。

gyfvjgtml03.jpg插图(7)

电视端

电视上的分段控件不要和其他可上焦的元素离太近,在苹果的规范中,分段控件上焦即选中,不需要点击。但也有不少电视厂家是需要点击步骤的。分段数量不要超过7段,否则会耗费较多的时间来浏览和理解。

分段图标宜简单直观,而不要有太多细节。

小结:

tab选项卡和分段控件的区别在于:前者数量可以超出页面并用滑动方式切换,后者数量不能超过5个且不能延伸到页面外。

其他导航模块

导航模块共有十几种,它们分别适合不同的终端和场景,下面的几种模块是和tab选项卡以及分段控件很相似的:

底部导航栏(安卓移动端和平板)

安卓手机上最常见的一种导航,用于应用级页面间的切换。它的组成元素为容器和导航项,每个导航项可由图标、文本组成,数量为3-5个。

ct2m0koqapv.jpg插图(8)

TIP:

如果将底部导航栏和tab标签栏同时使用,在设计时应注意它们的优先级关系:底部导航层级最高。

3ggx2pnqumu.jpg插图(9)

标签栏(苹果)

苹果移动端

Iphone常见的导航模式,位于应用底部,也是用来切换应用级的页面。数量为3-5个,iPad上可以多些。如果某个标签暂不可用,不要隐藏该标签,整个应用的标签栏应该保持一致。

苹果电视端

不仅切换应用级的页面,还可以切换流媒体或直播节目的内容。标签的命名应该指代明确并简洁。

0vihodw5034.jpg插图(10)

TIPS:

对导航栏和标签栏这两种模块,不同厂家有不同的叫法,如标签栏/标签选项条(百度小程序),标签页(蚂蚁),选项卡(Layui)等,但实际是一个意思。安卓底部导航栏和苹果标签栏的区别:前者每次离开后返回到原来导航项时,将回到该页顶层;后者离开再回来后是回到离开时的地方。

标签视图(苹果)

苹果桌面端有一个和分段控件类似的标签视图(tab view)。它用来装载密切关联的、同级别的内容。

比起分段控件,它所承载的内容更多,主要用于整个窗口视图的界面切换。而分段控件适合用在工具栏等面板中,所影响的范围相对较小。

苹果电脑用户对标签视图的模样很熟悉,看到它时便会有习惯性的期待。它是由标签控件(tabbed control,和分段控件长得像)和内容区组成。

1txvxktjkda.jpg插图(11)标签视图的内容区会随着标签控件的选择而切换,标签控件可以在内容区的上下左右任何一边,也可以隐藏。控件数量为2-6个,超过6个的话可以换成其他组件或模块。注意标签视图中的标签控件只能影响到该视图里内容,超过该视图时,用全局控件来控制:bwe2m1c2y4x.jpg插图(12)

本文小结

导航类模块有很多种,本文主要介绍了安卓移动端的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水平的8个技巧

2020-10-11 22:04:43

UI设计

交互设计 | 信息流提高转化的策略

2020-10-11 22:04:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索