[译]UX设计之复选框和开关按钮

1467275084-8958-267326-fa3e91971dd4bc8c

当设计表单时,交互设计师常常不得不面对一个问题,就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然,我们都有可能遵循某种既定的规则。无论如何,在做出这个选择时我们都应该牢记一些注意事项。

要实现选择特定的选项,我们可以选用复选框、开关按钮、单选按钮或者下拉框等控件。从中选择出最合适的则往往能发挥巨大作用,在本文中,我们将关注复选框和开关按钮。

一、复选框

复选框一般用在有多个选项时,用户可以做出零个、一个或者任意多个选择。换句话说,复选框控件中的每个选项都是彼此独立的,选择一项后并不会排斥其他项。

1467275003-7072-267326-b81c5aeb85f7c706

复选框及其标签

二、开关按钮

开关按钮代表在物理上的ON/OFF状态间进行切换。

1467275009-6505-267326-09aabb7ce414aeb1

开关支持两个简单的、完全对立的选择

开关按钮一般用来来标示一个动作(比如开始或停止一件事),其作用类似于实际生活中的灯控按钮。

1467275008-3833-267326-1b9efb1aab99c185

开关被普遍用在对点灯的控制上

三、复选框和开关按钮的最佳实例

1、使用标准的可视化模型

一个复选框应该是一个在选中状态下有标记符的小正方形。

1467275008-2987-267326-8897e336e54eb039

选中和未选中状态下的复选框

一个开关按钮应该看起来确实如一个ON/OFF类的开关。

1467275008-6507-267326-6cd1d792d86eb3cc

选中和未选中状态下的开关按钮

你应该给和用户产生交互的控件一个清晰的视觉反馈效果。精妙的动画能够让用户感觉到你在设计上的投入(愉悦用户),这对那些在现实中有映射的实体的控件尤为重要,即使这些控件好像跟用户间还隔着一层玻璃屏。

2、最好垂直布局你的各个选项

要试着让你的多个选项间垂直排列,每行显示一个。这条规则对复选框和开关按钮都适用。如果你必须(非得)使用水平方向排列多个选项,请务必确保使按钮跟标签间的距离合适,好让用户能区分出哪个按钮对应哪个标签。以下的例子中,元素间距太近:

1467275018-7771-267326-a117ca154b6e0a11

很难看明白哪个按钮和哪个标签是一组

3、开关按钮的当前状态应该标示在其本身外面

设计开关按钮时,重要的一点就是要必然按钮状态表达含糊不清。我们拿iOS6中的开关设计来距离:

1467275022-8809-267326-27a3a1cf3a95cdb3

不能清楚的表达“ON”是当前状态还是触发的动作

你能明白其中的“ON”表示的是当前状态还是移动、点按之后才是“ON”状态?这里的“ON”究竟指的是状态(形容词)还是你需要触发的动作(动词)?

你不应该使用户产生疑惑,而需要将状态和动作区分开来。事实上,这个设计能通过高亮显示当前状态向用户传达出更强的友好性。

1467275022-2145-267326-c978a716b1314419

文本的颜色突出了当前状态

4、请使用正向措辞表述复选框的标签

请使用正向措辞表述复选框的标签,这样用户就能够清楚的认识到选中该选项后会发生什么。避免使用如“不要再发送邮件给我”这样的否定语,这意味着用户不得不去修改选中状态来判定前后的变化。

1467275023-6114-267326-a3ed943df059180d

复选框标签应该使用正向措辞,不要用像“不要...”这样的语句

5、应该使标签部分也可点击

所有的复选框都标签,但并非所有的标签部分都作为选中热区。复选框本身很小,按照费茨定律,它们很难被点按到,因此,为了扩大可点区域,应该将标签部分也归入可点的热区部分。

1467275024-7798-267326-6300cff5ced2965d

让用户能够通过点击复选框本身或标签达到选中效果

6、复选框仅用来修改设置项,不作为操作按钮

对一个二元选项来说,一个复选框和一个开关按钮最大的不同在于前者用于标示状态,后者用来指明动作。如果一个物理上的实体开关能执行这个动作,那开关按钮便可能是最好的控件选择。

在下面的例子中,开关按钮很清晰的表明WiFi处于打开状态,而使用复选框则导致用户不得不去思考究竟当前的WiFi已经打开还是要取消选中后才对。

1467275026-4431-267326-a218001881c82a0f

使用开关按钮来切换服务或者硬件组成

7、伴随复选框和开关按钮的交互

要表明复选框选中前后带来的影响(比如复选框作为表单的一部分,你在点击“提交”表单后才可能看到选中与否的不同),你可以延迟一定的步骤。 然而对于一个开关按钮,则应该在用户切换后立刻显示出不同,而不是非得要等到用户点击“保存”、或回到前一个页面才看到所有变化。这正如我们在现实生活中也有对于这类开关的期望一样(例如我们都知道在将开关打开后电灯立刻就亮了)。

1467275026-3660-267326-99b47c1e80c1a3bc

在iOS中打开WiFi

当用户需要执行几个动作后才能看到因选项改变导致的不同时,可以考虑使用复选框。

1467275029-7341-267326-ef472aae90cbb668

用户必须在点击“submit”后才能看到选项的选中与否造成的影响

四、结论

设计用户界面时,尽量保证你所选择的界面元素具有良好的一致性和可预见性。如果选择遵循设计标准,你的设计自然能够增强用户对控件功能和操作方法的可预见性。相反地,违反标准的设计会导致这个界面破裂不堪——就好比如果不向用户发出预警,任何事情都可能发生一样。

译自:https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41#.jqbjnhofd

文/三达不留点gpj(简书作者)
原文链接:http://www.jianshu.com/p/c9eeff27d761
已获得译者转载权,著作权归作者所有,转载请联系译者。

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16046/

(0)
TinadminTinadmin
上一篇 2016-06-30 16:19
下一篇 2016-07-01

相关推荐

  • 怎么让引导不再是无用小透明?

    在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有 “这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友好…

    2015-11-19
  • 『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么?

    文章来自设计癖 2014 年 12 月 9 日,小米又一次涉嫌抄袭。这一次的对象,是日本巴慕达公司的 AirEngine 安之风空气净化器。同样的专利许可授权纠纷,同样深表遗憾的回应。巴慕达与曾经的魅族、年初的 Pressy 以及…

    2014-12-27
  • Facebook 改变「点赞」背后的故事

    Facebook 在上段时间做出了一个改变,堪称是最近科技界的最重磅的新闻之一,那就是他们改变了自己实施已达 7 年的「赞」的功能,增加了 5 种新的回复选择。从某种程度上说,这是 Facebook 近几年在自身产品设计上迈…

    IxD案例 2016-03-03
  • 资讯类APP竞品分析报告

    一、摘要 为了能深入了解主流新闻客户端在「功能模块」、「内容运营」以及「界面交互」上的特点,我对Zaker、今日头条、网易新闻这3款APP进行了对比分析,并得出结论: Zaker定位于具备明确新闻需求的用户,整体较…

    2015-03-17
  • Axure-小红书APP登陆界面划屏效果制作

    有一款叫做小红书的APP(不是小黄书)登陆界面做的非常清新脱俗,教他家用Axure模仿练习一下他的登陆界面划屏效果,这个内容虽然有些多,但是制作方法并不难,耐心跟着做的话肯定没问题哒!点击观看效果 效果分析 …

    2016-01-06
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • 交互设计-网站页面视差效果(Axure RP 7.0 源码下载)

    很多(想)学习Axure的朋友,都是伸手党,这是一条不争的事实,直接拿过来省事又省时;
    能真正学会并驾驭这款软件的毕竟是少数(其他软件也一样,这似乎是一条无法打破的规律),不过金乌老师还是希望想使用这款工具帮你应付差事(实现梦想)的小伙伴儿们加油,自学是很辛苦的,只有经历了挫败、枯燥、郁闷的适应期才能真正适应并喜欢上自学这种方法,不积跬步无以至千里。

    IxD案例 2015-01-05
  • 隐藏在今日头条百亿市值背后的算法:巨大可能与现实困境

    文/余亮 无论2016年科技圈热门的噱头有多少,对数据基础设施方面的耕耘仍然是决定实力的关键。阿里之类电商数据帝国自不待言,今日头条、一点资讯等在资讯数据领域的开拓更加值得注目。比起电商的物流数据,资讯算…

    2016-01-27