Apple HIG:分段控件(Segmented controls)

2025年11月12日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 13 篇文章查看全部


分段控制

分段控制是两个或多个分段组成的线性集,每个分段用作一个按钮。

分段控制中所有分段的宽度通常都相等。分段与按钮类似,也可以包含文本或图像。分段下方(或整个控制下方)也可以有文本标签。


最佳实践

分段控制可以提供单选或多选。例如,在 Keynote 讲演中,用户只可以选择对齐选项控制中的一个分段来对齐所选文本。相比之下,用户可以选择字体属性控制中的多个分段,以组合粗体、斜体和下划线等样式。Keynote 讲演窗口的工具栏也使用分段控制,让用户在主窗口区域中显示和隐藏各种编辑面板。



使用分段控制提供影响对象、状态或视图的密切相关选项。例如,分段控制可帮助用户在工具栏的视图之间切换。避免使用分段控制来提供操作,如添加、移除或编辑内容。

避免使用过多分段挤满控制。过多分段可能造成难以解析且导航耗时。宽界面中的分段尽量不超过约五到七个,iPhone 上则不超过五个。

通常保持分段大小一致。当所有分段宽度一样时,分段控制呈现平衡感。在可能的范围内,最好也保持图标和标题宽度一致。


内容

在单个分段控制中优先采用文本或图像,而非混用两者。虽然单个分段可以包含文本标签或图像,但在单个控制中混用两者可能会导致界面不连贯并令人困惑。

尽可能在每个分段中使用大小相似的内容。所有分段通常宽度一样,因此如果有些分段填充了内容,有些却没有内容,看起来就会效果不佳。

为分段标签使用名词或名词短语。编写文本来描述每个分段,并采用 title-style capitalization(标题式大写)。显示文本标签的分段控制不需要介绍性文本。


平台考量因素

在 watchOS 中不受支持。

iOS、iPadOS

避免在工具栏中使用分段控制。工具栏项作用于当前屏幕,不会像分段控制一样让用户切换环境。

macOS

考虑使用介绍性文本清晰表达分段控制的用途。当控制使用符号或界面图标时,你还可以在每个分段下方添加标签来清晰表达其含义。如果你的 App 包括工具提示,请为分段控制中的每个分段提供一个工具提示。

若要在主窗口区域中进行视图切换,请使用标签视图,而不是分段控制。标签页视图支持高效的视图切换,与组合了分段控制的方框外观类似。考虑使用分段控制帮助用户在工具栏或检查器面板中切换视图。

基于控制大小适当调整自定义界面图标大小。使用以下值作为指导。


控制大小图标大小
常规17x17 个像素 @1x(34x34 个像素 @2x)
小号14x13 个像素 @1x(28x26 个像素 @2x)
迷你12x11 个像素 @1x(24x22 个像素 @2x)

考虑支持弹性载入。在配备妙控板的 Mac 上,弹性载入可让用户将所选项目拖到分段上,然后用力点按(而非放置所选项目)来激活分段。用户还可在分段激活后继续拖移项目。

Apple tvOS

考虑在执行内容过滤的屏幕上使用拆分视图,而不是分段控制。使用拆分视图在内容和过滤选项之间来回导航对用户来说通常较轻松。根据放置的位置,分段控制可能不那么容易触及。

避免将其他可聚焦元素靠近分段控制。分段会在焦点移至其上时变为选中,而不是在用户点按时选中。仔细考虑分段控制相对于其他界面元素的位置。如果其他可聚焦元素靠得太近,用户尝试在分段之间切换时可能会不小心聚焦到它们。

visionOS

当用户注视使用图标的分段控制时,系统会显示工具提示,其中包含你所提供的描述性文本。

0 人收藏了本文

Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Material3设计规范:标签页(Tabs)Material3设计规范:标签页(Tabs)
Material3设计规范:工具提示(Tooltips)Material3设计规范:工具提示(Tooltips)
Material3设计规范:缓动与动效时长(Easing and duration)Material3设计规范:缓动与动效时长(Easing and duration)
Material3设计规范:高度层级(Elevation)Material3设计规范:高度层级(Elevation)
Material3设计规范:动效系统(Motion physics system)Material3设计规范:动效系统(Motion physics system)
Apple HIG:标签栏(Tab bars)Apple HIG:标签栏(Tab bars)
Material3设计规范:颜色角色(Color roles)Material3设计规范:颜色角色(Color roles)