这个控件叫:Segment Controls/分段控件

作者:龙爪槐守望者

原文地址:zhuanlan.zhihu.com/p/26070656

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。

v2-1f8f6d6d286af83e3e04b6984f62db27_hd.jpg

Segment Controls

Segment Controls(分段控件/分段选择器/分段选择控件)是 iOS 原生控件之一,Segment Controls 是一组分段(segment )的线性集合,每一个分段的作用是互斥的,即点击某分段使之处于触发状态,那么同一个 Segment Controls 的其他分段将恢复正常状态,所以 Segment Controls 本质上是一个单选组件。横向排布所有选项,相比于下拉菜单( drop-down menu)有更好的可见性。


如何使用

Segment Controls 通常用于切换不同的视图,或者在表单中作为单选组件使用。

v2-86db54081223115a176fd53ebf1ebd81_hd.jpg

表单中的 Segment Controls

  • 限制分段数量控制在 5 个以内
    较宽的分段更容易点击,为了提高可用性,建议在手机屏幕上每个 Segment Controls 的分段控制在 5 个以内。因此分段的文案长度需要精简,建议每个分段控制在 2-4 个汉字。

  • 不要在同一个 Segment Controls 中混用文字和图标
    一个分段就像是一个按钮,按钮内当然可以使用文字或者图标代表其含义,但是请不要在同一个 Segment Controls 中混用文字和图标,避免让用户觉得混乱和不一致。


v2-e2e1e6901f6348790dc1172aeeab8f2a_hd.jpg

文字分段和图标分段

  • 尽量保持各分段大小一致
    同一个 Segment Controls 内,所有分段都应该具有相等的宽度。如果其中某些分段比其他分段宽,会让整个控件看起来不协调,缺少一致性。


Tabs 和 Segment Controls 的区别

v2-8fd2aca716027b3757b99092e731743f_hd.jpg

左为 Tabs,右为 Segment Controls


经常国内发现 App 把 Tabs 和 Segment Controls 弄混的情况,给用户带来困扰,其实这两个控件有诸多不同。

  • 来源不同
    Tabs 来自 Android 规范,早在 Android 2.0 时代,官方的通讯录 App 就使用顶部 Tab 导航,之前Android 4.0 规范和最新的 Material Design 都将 Tabs 作为推荐的导航形式。而 Segment Controls 则来源于 iOS 规范。

  • 操作方式不同
    Segment Controls只能通过点击控件本身的分段来进行操作,而 Tabs 除了点击控件本身外,还可以通过屏幕内左右滑动切换不同的视图。

  • 适用场景不同
    Segment Controls 除了适用于表单的单选组件,其作为视图切换控制时,一般来说,起到的是分割和筛选同类数据的作用。例如 App Store 的排行榜,[总排行榜] 这个长列表数据集,通过 Segment Controls 把长列表分割成付费的、免费的和畅销的几个子列表数据集。再比如「设置」中的电池用量,Segment Controls 把开机后 [所有时间耗电的App] 筛选出 [过去24小时] 和 [过去4天] 这一部分数据。所以说 Segment Controls 本质上和下拉菜单一样,只是有更好的可见性罢了。

v2-9113f8e66a100e5d1ae0e2e929ac9d06_hd.jpg

Segment Controls 本质是筛选,和下拉菜单一样


而 Tabs 没有这种限制,Tabs 里 Tab 呈现的内容可以有很大的差别,当然 Tabs 不能作为表单的单选组件。

  • 数量限制不同
    在手机屏幕里,Segment Controls 分段限制在 5 个以内,而 Tabs 可以通过 Scrollable tabs 这种形式,扩展更多的 Tab 数量。

v2-8a4554da6c02c2d2a676b1caf5152e8a_hd.jpg

Scrollable tabs

欢迎阅读上一期 Skeleton Screen/加载占位图:uicircle.club/a/89


更多文章,欢迎访问 uicircle.club

微信公众号:uicircle

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入所在城市的微信群
  • 免费参与各种线上活动、线下聚会
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们