布局与交互

分段控件 Segmented Control

一排选项共用一个滑动指示块,点哪滑到哪,用于同一内容的视图切换

当前视图:卡片(指示块滑动切换,内容即时联动)

分段控件(Segmented Control)把 2~5 个互斥选项装进一个胶囊容器,一个滑块指示器在选项间滑动——iOS 的经典控件。它和选项卡(Tabs)长得像,分工不同:分段控件切换的是同一份数据的展示方式(列表/卡片/表格),选项卡切换的是不同的内容区。

什么时候用:列表/地图切换、时间粒度切换(日/周/月)、内容密度切换。超过 5 段、或选项之间不是互斥关系时改用别的(下拉或开关)。

对 AI 说清楚的三要素:① 指示块滑动 0.2~0.3s 带轻微软回弹;② 切换时内容即时联动(无感切换最忌点了没反应);③ 各段宽度等分、选中态字重加深,不靠颜色区分。

复制即用的提示词片段

视图切换用分段控件(Segmented Control):2~5 个互斥选项排在
一个胶囊容器里,共用一个白色滑块指示器,点击目标段时指示器
0.25s 滑动过去,内容区即时联动切换;选中段加粗变深。