基础知识|选项卡与分段控件

上周在工作中,有涉及到选项卡的设计,然而当我找了一些竞品来看,我发现我慌了,这是选项卡吗?这不是分段控件吗?这分段控件还能用在这里的吗?我有点自我怀疑了,觉得大家一看选项卡、分段控件就会觉得这是很基础的UI知识,我怎么连这个都分不清楚呀,嗨~怕大家笑话,于是请教了同事、下来学习了一下,害怕以后别人问到我,我答不上来哈哈哈,一起学习呀~

基础知识|选项卡与分段控件

01、分段控件/Segment Controls

分段控件是iOS系统里的原生设计控件。它是两个或多个分段的线性集合,每个分段都充当一个互斥的按钮。

基础知识|选项卡与分段控件

设计中需注意的点

分段控件的设计形式相对比较简单,在设计中可注意以下几点:

1.分段控件通常用于显示不同的视图,展示不同的内容。本质上和下拉菜单相似,只不过它同时展示了所有分段,有更好的可见性。

1.限制分段个数提高可用性。分段控件控制在5个以内,且不支持滑动。个数越少,每个分段的宽度就会越宽,有效的点击范围就会越大,从而提高了可用性。

2.保持统一。分段控件的每一个分段属于同一个层级,所以分段的宽度应保持一致,且设计样式也需要保持统一。用文本样式就保证所有分段都用文本样式,用图标就让所有分段都用图标。

3.分段控件常位于内容区域顶部。

02、选项卡/Tabs

选项卡是Andriod系统里的原生设计控件。用在不同页面或相同层次结构的内容组之间进行内容切换的控件,起着导航作用。选项卡的设计形式更加的灵活。

选项卡的构成

选项卡的主要组成元素为标签、容器、选中态指示器。

基础知识|选项卡与分段控件

1、标签:标签可以是文本、图标标签,也可以是文本+图标的形式。

2、容器:承载每个标签项的底层容器,最常见的就是白色色块,但现在容器的设计形式越来越多样化、个性化了。

3、选中态指示器:通常为带有品牌色的矩形条来指示当前被激活的标签项。

选项卡分类

选项卡的分为固定选项卡和滑动选项卡。

1.固定选项卡(fixed tabs)

固定选项卡指在屏幕中显示出全部选项卡,每个标签的宽度均分固定,不支持滑动。固定选项卡的个数不要超过4个。

基础知识|选项卡与分段控件

2.滑动选项卡(scrollable tabs)

滑动选项卡没有固定的宽度,可容纳更多的标签项,某些选项卡将保持在屏幕外,直到滑动完为止。滑动选项卡的设计要注意透出可滑动信号。
基础知识|选项卡与分段控件

设计中需注意的点

1.选项卡更多起着导航作用,所以标签的表意一定要明确。当标签项很多时,建议不要使用纯图标。

2.选项卡的设计样式更加灵活,容器与选中态的指示器设计样式我们可以追求一些差异化的设计。

3.选项卡可以和其他组件组合,所以选项卡几乎可以位于页面中的任意位置,如:卡片或者表格

4.应用滑动选项卡时,需要漏出信号让用户知道还有更多的标签项,比如可通过露出部分文本、阴影遮罩等设计形式。

03、分段控件与选项卡的对比

基础知识|选项卡与分段控件

侧重点:

分段控件属于iOS系统里侧重试图切换、内容展示的控件;

选项卡属于Andriod系统里侧重内容导航的控件。

标签个数:

分段控件标签个数不超过5个;

固定选项卡标签个数不超过4个,滑动选项卡不限制个数

设计形式:

分段控件设计形式一般为按钮形式,容器为线框,选中态为品牌色色块。

选项卡的设计形式更加多样化,常规选中态为品牌色的标签项与矩形下划线。

操作形式:

分段控件只能点击,不能滑动;

选项卡既可以点击也可以滑动。

04、选项卡设计形式

现在各类app的选项卡的设计形式越来越多样化,我们可以总结一些好的、差异化的设计形式,作为设计参考。

▿应用在瀑布流中的选项卡,一开始位于页面中间,滑动后固定在页面顶部固定。可以把指示器与标签作为设计机会点。

基础知识|选项卡与分段控件

▿卡片里的选项卡,设计形式特别多样化,容器的设计形式可以作为设计机会点

基础知识|选项卡与分段控件

▿固定在顶部的选项卡,一直位于页面顶部起着模块导航作用。可以将标签,特别是图标标签作为设计机会点。

基础知识|选项卡与分段控件

追求创新,也别忘基础的理论知识呀

之所以对分段控件和选项卡分不清楚,是因为对iOS与Andriod两端的平台设计规范还不够了解,了解得不够透。工作这么久了,有时会为了创新、追求差异化设计而忽略了一些设计规范,所以现在iOS与Andriod的设计几乎没有什么差异,很多设计控件也越来越混用了,在工作中设计稿也几乎都是以iOS端为准进行设计,但是觉得作为还处在初阶的设计师,还是更需要了解与掌握最根本的理论知识后,再来谈创新与差异化设计。共勉呀~

业界动态

以小红书产品发布功能为例,设计师如何做竞品分析?

2021-4-12 11:39:51

业界动态

全面拆解影响“用户忠诚”的2个维度

2021-4-12 12:40:56

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