【Material Design视觉设计语言】UI组件设计(十二):滑块

作者:郭孝星
微博:郭孝星的新浪微博
邮箱:[email protected]
博客:http://blog.csdn.net/allenwells
Github:https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计(一):按钮
【Material Design视觉设计语言】UI组件设计(二):卡片
【Material Design视觉设计语言】UI组件设计(三):纸片
【Material Design视觉设计语言】UI组件设计(四):表格
【Material Design视觉设计语言】UI组件设计(五):提示框
【Material Design视觉设计语言】UI组件设计(六):分隔线
【Material Design视觉设计语言】UI组件设计(七):网格
【Material Design视觉设计语言】UI组件设计(八):列表
【Material Design视觉设计语言】UI组件设计(九):菜单
【Material Design视觉设计语言】UI组件设计(十):选择器
【Material Design视觉设计语言】UI组件设计(十一):进度条
【Material Design视觉设计语言】UI组件设计(十二):滑块
【Material Design视觉设计语言】UI组件设计(十三):Toast
【Material Design视觉设计语言】UI组件设计(十四):Tabs
【Material Design视觉设计语言】UI组件设计(十五):文本框

滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

一 连续滑块

在不要求精准、以主观感觉为主的设置中使用连续滑块,让使用者做出更有意义的调整。

【Material Design视觉设计语言】UI组件设计(十二):滑块_第1张图片

【Material Design视觉设计语言】UI组件设计(十二):滑块_第2张图片

二 带有可编辑数值的滑块

用于使用者需要设定精确数值的设置项,可以通过点触缩略图、文本框来进行编辑。

【Material Design视觉设计语言】UI组件设计(十二):滑块_第3张图片

【Material Design视觉设计语言】UI组件设计(十二):滑块_第4张图片

三 间续滑块

间续滑块会恰好咬合到在滑动条上平均分布的间续标记(tick mark)上。在要求精准、以客观设定为主的设置项中使用间续滑块,让使用者做出更有意义的调整。应当对每个间续标记(tick mark)设定一定的等级区间进行分割,使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的,使用者不可对其进行编辑。

四 附带数值标签的滑块

用于使用者需要知晓精确数值的设置项。

【Material Design视觉设计语言】UI组件设计(十二):滑块_第5张图片

【Material Design视觉设计语言】UI组件设计(十二):滑块_第6张图片

你可能感兴趣的:(产品设计,-,Material,Design)