数极客首页

表单中的勾选框和开关

创建

表单时,交互设计师总是会面临一个选择,选用哪种UI元历来

表示可选项的操作。当然,我们每个人都有自己

的规律
。但是,在选用可选项控件时,依然
要多加思索

表单中的勾选框和开关

可选项能够
用勾选框、开关、单选框和下拉菜单表示。选择得当的话,任何一种都十分
出色。本文中,我们重点关注勾选框和开关。

勾选框

勾选框用在一系列选项中,用户能够
选择恣意
数据量
,包括0个、1个,或者许多个。换言之,每个勾选框在列表中都是相互

独立的,勾上一个框并不会取消其他选项。

表单中的勾选框和开关

带有标签的勾选框

开关

开关组件是在仿照物理开关,让用户翻开
或关闭某个项目。

表单中的勾选框和开关

开关提供了两种简单直接的对立选项

开关组件通常用于表现一个动作(例如开端
或中止
某个操作)。它相似
于电灯开关:

表单中的勾选框和开关

开关通常用在电灯开打开

勾选框和开关的最佳理论

运用
规范
的视觉表现

勾选框应当是一个小方框,选中时有一个勾,或者一个叉。

表单中的勾选框和开关

选中和未选中的勾选框组件。图片来源:Material Design

开关应当看起来有开和关的状态

表单中的勾选框和开关

选中和未选中状态的开关组件。图片来源:Material Design

用户在操作各种控件时,应当提供明晰
的视觉反响

。细微的动画能让体验更细致——在移动

应用中特别
如此,

表单中的勾选框和开关

iOS7/8的开关按钮。来源:Dribbble

纵向排列列表

纵向展示

列表,每行一个选项。这关于
开关和勾选框都有效。假如
一定要横向排列,一行有多个选项,就要调整好按钮和标签的距离

,哪个选项对应哪个标签明晰
明了。下面的例子中,元素之间的距离

都太近了。

表单中的勾选框和开关

很难肯定
选项4对应的到底是哪个选框

开关的当前状态应该在控件外面

设计开关时,你应该避免

状态和操作的歧义。我们以iOS6的开关设计为例,留意
看写着ON的蓝色状态按钮。

表单中的勾选框和开关

并不能肯定
标签(例子中是“ON”)是指当前状态,还是按下的操作

你能判别
按钮当前是开着的吗,或者拖动滑块、点击、点按时会开启?“ON”在这里是个状态(名词)还是动作(动词)?并不分明

不应该让用户感到困惑,辨别
出操作和状态十分
重要。实践
上,高亮显现
当前状态,能够

让它愈加
友好。

表单中的勾选框和开关

文字颜色标明
了往常

的状态(亮起的是ON)

勾选框运用
肯定的文案

运用
肯定、有效的文案作为勾选框的标签,用户就很分明
假如
勾上选框会发作
什么。避免

“不要给我发邮件”这样的承认

文案,这就意味着用户要勾上选框来阻止某些事发作

表单中的勾选框和开关

勾选框永远都应该运用
肯定的指令,不能用承认

文案,例如“请勿……”

勾选框运用
Label标签,增大操作区域

一切
的勾选框都有标签,但并非都运用
label标签。勾选框实质
上很小,但是依据
费茨定律,它们就很难点击或者点按。要增大操作区域,让用户在点击或点按标签与相关文字时就能选当选
项,而不只
仅是那个小方框。

表单中的勾选框和开关

让用户经过
点击方框或它的标签来选当选

勾选框只用来改动
设置,不能作为操作按钮

作为一个二元选择,勾选框和开关的主要区别,是勾选框是状态,而开关是操作。假如
一个操作合适
用物理开关表示,那么开关可能就是最合适
的控件。

下面的例子很显然
,在开关中,无线网络是开着的。但在勾选框里,用户还需求
思索

无线网络能否
开启,能否
需求
勾选这个框来开启无线网络。

表单中的勾选框和开关

用开关来开启或关闭效劳
或硬件组成,例如WIFI

勾选框和开关的提交操作

勾选框的操作能够
延后(例如作为表单的一部分

),但开关的操作应当立刻
触发。

良好的用户体验,是立刻
改动
开关对应的设置项,而不是点按了“保管
”或返回上个界面之后才保管
。我们在理想
生活中对开关的希冀
就是如此(例如我们知道

,按下开关灯立刻

就亮了)。

表单中的勾选框和开关

iOS中的开启WIFI

当用户必需
执行额外步骤才干
让改动
生效时,运用
勾选框。

表单中的勾选框和开关

当用户必需
点击“提交”或“下一步”按钮,修正
才干
生效时,选用勾选框

结论

设计界面时,交互元素的选择要坚持
分歧
、可预期。遵照
设计规范
,能让用户更好预测控件的功用
、怎么操作。相反,违犯
规范
会让界面觉得
很脆弱——似乎

会毫无预兆发作
任何事情。

十分
感激

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小同伴
们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

本文原创发布,未经答应
,不得转载。

新一代大数据用户行为剖析
与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析
用户行为数据和业务数据,能够
自动监测网站、APP、小程序等多种渠道推行
效果剖析
,是增长黑客们必备的互联网数据剖析
软件。数极客支持实时多维剖析
、漏斗剖析
、留存剖析
、途径
剖析
等十大数据剖析
办法
以及APP数据剖析
网站统计网站剖析
小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析
模型,是数据剖析
软件
范畴
首款应用定量剖析
与定性剖析
办法
数据剖析
产品

发表评论

评论已关闭。

相关文章