E3.07.1segmented control view switch设计

分段适合少量并列且互斥的视图切换

别名: 分段控件 · segmented control · 互斥视图切换

概念解释

分段控件(segmented control)把两到大约五个并列、互斥的视图或模式排成一条可点的段:日 / 周 / 月、列表 / 网格、我的 / 全部。点一段,眼前的内容立刻换成对应视图,上一段不再亮。它不是表单里的单选——单选写的是即将提交的字段值,分段写的是「现在正在看哪一面」。也不是页签:页签常带独立滚动和更多条目,分段更短、更像工具上的模式开关。

并列指各段是同一对象的不同面,不是流程里的先后步骤。互斥指同一时刻只能亮一段。

机制

各段共享一条几何轨道,位置本身在说「这些是同一维度上的取值」。人把轨道读成模式旋钮:拨到哪一段,显示模型就切到哪一套过滤或排列。立即切换强化了这个读法——内容跟着亮段走,因果落在控件上,而不落在提交按钮上。

少量是几何加认知的双重要求。段少,标签能横向铺开,轨道作为整体可被一眼抓住。一旦段变成一串要横滑的碎片,轨道感碎掉,分段就退化成拥挤的页签或按钮组,互斥仍在,并列的「同一维度」却读不出来。

边界

字段值(性别、配送方式)即便互斥,也不该用分段,除非改值的同时就要换视图;否则用户会以为切完已经提交或已经换页。两个以上维度(时间粒度 × 对象类型)不能塞进一条分段,第二条维度应另起控件。深层导航(三个以上信息架构层级)用分段会把层级压扁成并列,应回到页签或侧栏。键盘上分段通常用方向键在段间移动,若每段其实是独立页面,焦点和历史栈会对不上。

怎么落地

  • 只把同一对象的少数互斥面做成分段,并让点选立即换视图。
  • 用组标签说出维度名字(「视图」「范围」),避免段文案被读成几个无关按钮。
  • 需要提交的字段改用单选或下拉;需要很多目的地的改用页签或导航。
  • 验证:遮住内容只留分段,问「点另一段会发生什么」。若回答是「提交 / 发出动作 / 进入下一步」而不是「换一种看法」,控件就用错了类型。

延伸

  • 同组E3.07.2 段数增加会压缩标签至不可读 · E3.07.3 分段不适合承载动作
  • 相邻E3.02 单选按钮 · E5.11 页签 · E1.14 按钮组与分裂按钮
  • 站内检索segmented control · view switcher · mutually exclusive segments

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.07.1