【解构ui】滑动条
有没有觉得这两天我更新的有点勤快呢~最近把用了许久的Mweb给买了，把Mou给卸载了。。。Mweb新版本带上了图床功能，配合着七牛一起,用起来真是爽爽哒，比起之前我要一张张的去调图片Markdown语法效率高多了。那今天咱们来聊一聊一个比较小的控件滑动条（Sliders）。
什么是滑动条
滑动条顾名思义就是在一定的数值范围内通过滑动条来设置参数，选取数值。 常见的滑动条使用的地方比如说声音，亮度， 或者色彩饱和度之类的。
滑动条包含的一些元素： 滑动条颜色（track color） , 缩略图标（thumb image）, 以及左右的图标（left and right icons）
左右两别的icon可以使用相同的，通过大小来表达强弱大小等概念。
什么时候使用滑动条
在物理世界的交互中，我们也很早就接触到了滑动条，比如调节音量。因此在虚拟世界中，滑动条的使用也是很好的映射。
当某些参数的设置并不需要那么精准的时候，而且有直接的反馈的时候，滑动条是很好的选择。 比如说亮度调节，用户很难用数字来表达自己理想的亮度，因此通过滑动条直接给到用户反馈。
滑动条的类型
单一滑动条&双闸滑动条（single & Double)
单一滑动条
单一滑动条适合设置一个大致的一个数值的设置，
双闸滑动条
双闸滑动条适用于需要选择一定范围区间数值的设置。
连续性滑动条&离散型滑动条(Continuous & Discrete）
连续性滑动条
连续性滑动条适用于选择一定范围内大致的数值，比如设置价格区间
Airbnb 就使用这种方式来选择价格区间。
离散型滑动条
离散型滑动条会提前设置好参数，比如给餐厅评分。
是否需要精确的设置数值
如上所说，使用滑动条来设置参数，并没有那么精确，因为在一个屏幕上用手指调节一个较小的枝干是比较难以获取精准数值的。 因此当一个精准的数值对使用来说没有太大影响的时候，使用一个大致的参数就行了。 这时候滑动条就是一个很好的选择。
如果你需要设置一个精确的数值，可以在滑动条一方设置输入框。 如果精确的数值非常重要的话，那你可以考虑换一个UI控件。
显示范围， 和树状图。
如果你用滑动条来做过滤功能， 应该将精确的数值显示出来。 并且告知用户最大和最小数值分别是多少。 树状图可以很好的帮助用户理解哪些是有比较多的搜索结果， 避免出现零结果。 比如下方airbnb让用户选取价格范围的滑动条的时候，就有清晰的画出树状条，帮助用户理解哪个价格范围区间获取的搜索结果比较多。
在触屏上， 不要让数值放在容易被手指遮住的地方。
在桌面端的时候，数值可能会出现在滑动条下方， 这没有什么问题，但是一旦到触屏上， 数值还在下方， 手指可能就会遮住， 因此要让数值能够被人看到，就必须放在手指不容易遮住的地方。
提供视觉反馈
在设计滑动条的时候，也要实时的给用户提供视觉反馈。
Material Design中滑动条的四种状态。
小结
滑动条是一个很好的工具，如果你需要设置一个比较大致的数值，那么滑动条很合适，在设置滑动条的时候，确保用户能够较为轻松的选择数值，不要让他们纠结在如何选择精确的数值上。
