UI组件-滑块 用户超爱的选择小助手

在设计界面交互时,为了让用户主动提供信息,有很多种方式供其录入或选择。比如,用文本框打字输入、从复选框中勾选、从下拉菜单里选择,等等。今天的主角–滑块组件也是选择工具的一种。

什么是滑块

滑块(Slider)是让用户通过滑动,在一定范围内选择数值,或数值范围的组件。

xnfyp2cbqgx.gif插图

图源:追波Cuberto

滑块是触发类组件,也就是说,每滑到一个位置,会立刻响应,这个属性很方便调试和即时预览效果。滑块还有个特点是只能在一定范围内选择。在这两种条件都满足时,就可以使用滑块,它比选择控件和文本框等组件都来得快捷方便。

滑块经常出现在调音量、播放条控制进度的场景中:

uoijwmgnhtv.png插图(1)

腾讯视频

类型

滑块分为两种:连续滑块(Continuous slider)和间续滑块 (Discrete slider)。

连续滑块

用户在一定范围区间内可自由选择数值。适合场景:不要求精准,遵照用户的主观感受,比如调音量:

1mhxg2rtksc.gif插图(2)

iOS 13音量滑条

间续滑块

用户在一定范围内只能选择特定值,滑动小滑块时,它会自动咬合到最接近的特定位置。适合场景:要求精准,以设定值为主,比如字号设置,字号只能是离散的整数:

hrpsoesvy1q.png插图(3)

iOS 13字号设置

原型

滑块的形状有线性和圆形之分,它们的物理原型分别是调音器推杆和旋钮开关:

4kwt1m5kihm.png插图(4)

线性滑块和圆形滑块的原型

一个滑块

剖析一下滑块的组成元素:

轨道*小滑块*选中值标签刻度文本框滑块标签

标*为必需

2atqrwa0ucl.png插图(5)

轨道(track):可以是线性或圆形,线性轨道是UI中用得更多的,它可以垂直或水平分布。圆形轨道多用在和圆圈形象相关的场景,比如时钟区间,旋转角度等。

n432ykxz0bc.png插图(6)

线性轨道和圆形轨道

图源:追波Shunsuke Kawai/Renat Muratshin

在从左至右阅读的语言中,水平轨道其数值是左边最小,右边最大。

小滑块(thumb):有些地方把thumb这个元素也翻译作“滑块”,但由于整个组件叫滑块,为了不混淆我把thumb叫做小滑块。小滑块绝大多数时候是一个圆,偶尔也会是方形或指针形状。

avbcp3bnyha.png插图(7)

macOS指针形状的小滑块

小滑块可能会有两个,这样的滑块叫区间滑块(Range slider),它是用来选择一个范围的。

ibgxa0s5f31.gif插图(8)

tip

区间滑块的两个小滑块如果是同色的纯色块,那么它们两太接近的时候,要加上描边效果,以免两者融化在一起难以辨认:

bwurqpf12pe.png插图(9)

选中值标签(value label):这是告知用户当前选中的数值,它既可以悬浮于小滑块上方,也可以出现在轨道边上一个固定的地方–如上面的macOS节能面板。设计移动端时,要注意手指的遮挡,这时标签不能离小滑块太近了。选中值标签可以只在滑动时出现,也可以常显。

刻度(tick mark):沿着轨道分布的若干刻度,可以帮助用户在滑动时更准确地感知选项值。它可以用在连续和间续滑块中。刻度不一定是均匀分布的,这和参数值本身是否呈线性有关。如果参数值呈线性,通常只需要标最小值和最大值就足够了,但如果非线性,如下图的macOS的关屏时间设置,不仅需要有刻度,还需加上对刻度值的描述,否则会有歧义:

avbcp3bnyha.png插图(7)

时间刻度不是线性分布,需要文字描述其刻度

最小值和最大值的描述文本可以用更形象的图标来替代,比如用一大一小的图标表示字号大小:

amnkkwbgaxx.jpg插图(10)

文本框:可以辅助滑块做精准输入,对那些明确自己要录入哪一个数值,不乐意通过滑块来逐渐接近目标值的用户有帮助。同时,文本框还可以自带一个步进器(stepper)。文本框和滑块要做到互相实时同步。

im2gt1zghrd.gif插图(11)

带有步进器的文本框(蚂蚁金服)

滑块标签:和选中值标签不同,这是介绍整个滑块的,一般带个冒号结尾。

tips

线性滑块的轨道在最小值和小滑块之间的部分需要填充一个焦点色,区间滑块的两个小滑块之间同理。当小滑块的形状是一个指针,且有刻度标记时,可以不填充颜色,如上图macOS节能面板;选用最符合直觉的滑块形状,举个🌰,物体平移用线性更好,旋转用圆形更佳;小滑块可以给出厂默认位置做个标记,让用户知道原来位置在哪。这个细节虽小却能避免用户因滑离了原来位置而不安,提升体验。

rx3d5lqetot.png插图(12)

索尼电视的滑块经过原始位置时有个小竖线标记

操作和状态

滑块的操作在不同终端的差别:

m3jsacfwvzy.png插图(13)

滑块的状态有四种:

zxaqqfwsmtc.png插图(14)

状态示意图:

kjd155dh2i4.png插图(15)

滑块的大小

以下是常见的大小,单位pt,供参考:

移动端:

ldbgrna5ulo.png插图(16)

PC端:

4bhimkk5xkv.png插图(17)

TV端:

sqniqasa0zb.png插图(18)

备注:对应换算

750*1334的移动界面:1px=2pt桌面端1px=1pttv端1px=2pt

本文小结

滑块是让用户通过滑动,在一定范围内选择数值,或数值范围的组件;它分为连续滑块和间续滑块,分别适用于不求精确和要求精确;滑块可以是线性,也可以是圆形,前者更常见,后者多用在和圆圈形象相关的场景;滑块的组成元素:轨道*、小滑块*、选中值标签、刻度、文本框、滑块标签;它的操作主要为拽动小滑块、方向键控制步移和直接点击轨道某个位置;这些操作和状态会因终端而异。

这些就是滑块的知识,回见哦☀️

原文地址:UI设计语言(公众号)

作者:a珠珠

人已赞赏
UI设计

设计APP一定不能忘记的五件事情

2020-10-13 0:04:34

UI设计

界面布局| 移动端常见8种界面布局的分析与运用

2020-10-13 2:05:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索