Apple HIG:滑块(Sliders)

2026年5月2日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 20 篇文章查看全部

滑块是一个包含称为“滚动块”的控制的水平轨道,可让用户在最小值和最大值之间进行调整。

随着滑块值的变化,最小值和滚动块之间的轨道部分会用颜色填充。你可以选择为滑块显示分别表示最小值和最大值含义的左右图标。


最佳实践

为滑块自定义能够提供更多价值的外观。你可以调整滑块的外观(包括轨道颜色、滚动块图像和着色)以及左右图标,以融入你的 App 设计并传达用途。例如,调整图像大小的滑块可在左侧显示一个较小图像图标,在右侧显示一个较大图像图标。

使用熟悉的滑块方向。用户期望滑块的最小端和最大端在所有 App 中都保持一致。对于水平滑块来说,最小值位于前缘侧,最大值位于后缘侧;而对于垂直滑块来说,最小值位于底部,最大值位于顶部。例如,用户期望可以将表示百分比的水平滑块从前缘侧的 0% 移动到后缘侧的 100%。

考虑通过相应的文本栏和步进器补充滑块功能。尤其是当滑块代表较大的值范围时,用户可能希望看到确切的滑块值,并能够在文本栏中输入特定值。添加步进器可为用户提供一种按整数递增值的便捷方式。相关指南,请参阅文本栏步进器


平台考量因素

在 Apple tvOS 中不受支持。

1. iOS、iPadOS

Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

0 人收藏了本文

为 Gemini 应用绘制插画体系为 Gemini 应用绘制插画体系
Material3设计规范:轮播(Carousel)Material3设计规范:轮播(Carousel)
Apple HIG:页面控制(Page controls)Apple HIG:页面控制(Page controls)
Apple HIG:提醒(Alerts)Apple HIG:提醒(Alerts)
Apple HIG:操作表单(Action sheets)Apple HIG:操作表单(Action sheets)
Apple HIG:进度指示符(Progress indicators)Apple HIG:进度指示符(Progress indicators)
Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Apple HIG:材质(Materials)Apple HIG:材质(Materials)