Material Design——Sliders

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Material Design——Sliders

滑块允许用户从一系列值中进行选择。

一、用法

滑块沿条反映了一系列值，用户可以从中选择单个值，他们是理想的调整设置，如音量，亮度，或应用图像筛选器。

滑块的两端都可以有图标，以反映一系列的值。

· 即刻可见的效果

使用滑块进行的更改是即时的，允许用户进行滑块调整，直到找到他们的首选项，它们不应该与那些在提供用户反馈方面有微小延迟的设置一起使用。

· 当前状态

滑块反映了它们控制的设置的当前状态。

△ 数值

· 可编辑的数值

可编辑的数值允许用户设置滑块的确切值。

在按下拇指或值指示符字段后，值指示符输入成为文本输入的可编辑项，拇指位置立即被更新以匹配任何值的变化。

· 数值

对于从左到右显示的语言，比如英语，范围的最小值出现在左边，最大的值出现在右边。

对于从右到左的语言，比如阿拉伯语，这个位置会被切换(左边的值最大，右边的值最小)。

具有可编辑数值的滑块。

△ 原则

· 可调 滑块只能用于从一系列值中选择选项

· 立即 当与滑块交互时，应立即表示更改

· 可访问的 滑块应该提供可供用户选择的所有选项

△ 类型

· 连续的滑动条 

连续滑动允许用户在主观范围内选择一个值。

Continuous slider

· 离散滑动条 

通过引用离散滑动器的值指示器，可以将其调整为特定的值。

可能的选择可以通过使用滚动条来组织，滑块拇指会对其进行吸附(或者输入会向上或向下四舍五入)。

Discrete slider

二、分析

滑块可以包含以下元素:

1. Track

轨迹显示了可供用户选择的范围。对于从左到右(LTR)语言，最小的值出现在最左边，最大的值出现在最右边。对于从右到左(RTL)语言，这个方向是反向的，最右边的值最小，最左边的值最大。

2. Thumb

拇指沿着轨迹滑动，通过其位置显示所选的值。

3. Value label (optional)

值标签显示当前选定的特定数值。

4. Tick mark (optional)

标记表示用户可以移动滑块的预定值。

三、连续滑块

使用连续滑块允许用户进行有意义的选择，而不需要特定的值。

△ 行为

Click and drag：这个连续的滑块是通过单击拇指并拖动来控制的；Click jump：这个连续的滑块是通过点击轨迹来控制的。

Click and arrow：这个连续的滑块是通过点击拇指来控制的，然后使用箭头键来移动它；Tab and arrow：这个连续的滑块是通过使用tab键选择所需滑块的拇指来控制的，然后使用箭头键来移动它。

△ 状态

连续滑动器具有正常、聚焦、单击和禁用状态。

四、离散的滑块

离散滑块在按下拇指时显示一个数值标签，这允许用户输入一个精确的值。

△ 行为

Click and drag：这个离散的滑块是通过单击拇指并拖动来控制的；Click jump：这个离散的滑块是通过点击轨迹来控制的。

Click and arrow：这个离散的滑块是通过单击拇指控制的，然后使用箭头键来移动它；Tab and arrow：这个离散的滑块是通过使用tab键来选择所需滑块的拇指，然后用箭头键来移动它来控制的。

Tick marks (Optional)：离散的滑块可以在滑块轨道上使用均匀间隔的标记标记，拇指会吸附在滑块上。每个标记都应该以用户可识别的增量方式改变设置；Value entry field (Optional)：在选择拇指或输入字段后，值输入字段可编辑。在输入文本后，滑块位置会自动更新以反映新值。

△ 状态

离散滑块具有正常、聚焦、单击和禁用状态。

---

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~