#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~
Material Design链接:Material Design——Sliders
滑块允许用户从一系列值中进行选择。
一、用法
滑块沿条反映了一系列值,用户可以从中选择单个值,他们是理想的调整设置,如音量,亮度,或应用图像筛选器。
滑块的两端都可以有图标,以反映一系列的值。
· 即刻可见的效果
使用滑块进行的更改是即时的,允许用户进行滑块调整,直到找到他们的首选项,它们不应该与那些在提供用户反馈方面有微小延迟的设置一起使用。
· 当前状态
滑块反映了它们控制的设置的当前状态。
△ 数值
· 可编辑的数值
可编辑的数值允许用户设置滑块的确切值。
在按下拇指或值指示符字段后,值指示符输入成为文本输入的可编辑项,拇指位置立即被更新以匹配任何值的变化。
· 数值
对于从左到右显示的语言,比如英语,范围的最小值出现在左边,最大的值出现在右边。
对于从右到左的语言,比如阿拉伯语,这个位置会被切换(左边的值最大,右边的值最小)。
△ 原则
· 可调 滑块只能用于从一系列值中选择选项
· 立即 当与滑块交互时,应立即表示更改
· 可访问的 滑块应该提供可供用户选择的所有选项
△ 类型
· 连续的滑动条
连续滑动允许用户在主观范围内选择一个值。
· 离散滑动条
通过引用离散滑动器的值指示器,可以将其调整为特定的值。
可能的选择可以通过使用滚动条来组织,滑块拇指会对其进行吸附(或者输入会向上或向下四舍五入)。
二、分析
滑块可以包含以下元素:
1. Track
轨迹显示了可供用户选择的范围。对于从左到右(LTR)语言,最小的值出现在最左边,最大的值出现在最右边。对于从右到左(RTL)语言,这个方向是反向的,最右边的值最小,最左边的值最大。
2. Thumb
拇指沿着轨迹滑动,通过其位置显示所选的值。
3. Value label (optional)
值标签显示当前选定的特定数值。
4. Tick mark (optional)
标记表示用户可以移动滑块的预定值。
三、连续滑块
使用连续滑块允许用户进行有意义的选择,而不需要特定的值。
△ 行为
△ 状态
连续滑动器具有正常、聚焦、单击和禁用状态。
四、离散的滑块
离散滑块在按下拇指时显示一个数值标签,这允许用户输入一个精确的值。
△ 行为
△ 状态
离散滑块具有正常、聚焦、单击和禁用状态。
END.THANKS FOR YOUR READING~
如有不当,还请多多指教~