UX 设计之——复选框和开关按钮

   <p style="text-align: center;"><img src="https://simg.open-open.com/show/cbc51504c11495d9620f50deafe903a9.png"></p>    <p>当设计表单时，交互设计师常常不得不面对一个问题，就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然，我们都有可能遵循某种既定的规则。无论如何，在做出这个选择时我们都应该牢记一些注意事项。</p>    <p>要实现选择特定的选项，我们可以选用复选框、开关按钮、单选按钮或者下拉框等控件。从中选择出最合适的则往往能发挥巨大作用，在本文中，我们将关注复选框和开关按钮。</p>    <h2>一、复选框</h2>    <p>复选框一般用在有多个选项时，用户可以做出零个、一个或者任意多个选择。换句话说，复选框控件中的每个选项都是彼此独立的，选择一项后并不会排斥其他项。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b062566ff0be57ef1cc412cfa380a8c7.jpg"></p>    <p>复选框及其标签</p>    <h2>二、开关按钮</h2>    <p>开关按钮代表在物理上的ON/OFF状态间进行切换。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/574f3fe9bb470c54390196026dc84942.png"></p>    <p>开关支持两个简单的、完全对立的选择</p>    <p>开关按钮一般用来来标示一个动作（比如开始或停止一件事），其作用类似于实际生活中的灯控按钮。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4b9d91e1dc0f81e1517b638742987372.jpg"></p>    <p>开关被普遍用在对点灯的控制上</p>    <h2>三、复选框和开关按钮的最佳实例</h2>    <p>1、使用标准的可视化模型</p>    <p>一个复选框应该是一个在选中状态下有标记符的小正方形。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e94c19504b567db80483bc303b03d09b.png"></p>    <p>选中和未选中状态下的复选框</p>    <p>一个开关按钮应该看起来确实如一个ON/OFF类的开关。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f9be4048f16274b83f97fc138ebf84fe.png"></p>    <p>选中和未选中状态下的开关按钮</p>    <p>你应该给和用户产生交互的控件一个清晰的视觉反馈效果。精妙的动画能够让用户感觉到你在设计上的投入（愉悦用户），这对那些在现实中有映射的实体的控件尤为重要，即使这些控件好像跟用户间还隔着一层玻璃屏。</p>    <p>2、最好垂直布局你的各个选项</p>    <p>要试着让你的多个选项间垂直排列，每行显示一个。这条规则对复选框和开关按钮都适用。如果你必须（非得）使用水平方向排列多个选项，请务必确保使按钮跟标签间的距离合适，好让用户能区分出哪个按钮对应哪个标签。以下的例子中，元素间距太近：</p>    <p>很难看明白哪个按钮和哪个标签是一组</p>    <p>3、开关按钮的当前状态应该标示在其本身外面</p>    <p>设计开关按钮时，重要的一点就是要必然按钮状态表达含糊不清。我们拿iOS6中的开关设计来举例：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/45895fb6838b3973918eb6393147d7dd.png"></p>    <p>不能清楚的表达“ON”是当前状态还是触发的动作</p>    <p>你能明白其中的“ON”表示的是当前状态还是移动、点按之后才是“ON”状态？这里的“ON”究竟指的是状态（形容词）还是你需要触发的动作（动词）？</p>    <p>你不应该使用户产生疑惑，而需要将状态和动作区分开来。事实上，这个设计能通过高亮显示当前状态向用户传达出更强的友好性。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/183f5a230b2f2978c18ba79153619eef.png"></p>    <p>文本的颜色突出了当前状态</p>    <p>4、请使用正向措辞表述复选框的标签</p>    <p>请使用正向措辞表述复选框的标签，这样用户就能够清楚的认识到选中该选项后会发生什么。避免使用如“不要再发送邮件给我”这样的否定语，这意味着用户不得不去修改选中状态来判定前后的变化。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ea31f23bb2e78569210c3e943084ed57.png"></p>    <p>复选框标签应该使用正向措辞，不要用像“不要...”这样的语句</p>    <p>5、应该使标签部分也可点击</p>    <p>所有的复选框都标签，但并非所有的标签部分都作为选中热区。复选框本身很小，按照费茨定律，它们很难被点按到，因此，为了扩大可点区域，应该将标签部分也归入可点的热区部分。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a1a4745d21fa7d2005d0b7f89c275be4.png"></p>    <p>让用户能够通过点击复选框本身或标签达到选中效果</p>    <p>6、复选框仅用来修改设置项，不作为操作按钮</p>    <p>对一个二元选项来说，一个复选框和一个开关按钮最大的不同在于前者用于标示状态，后者用来指明动作。如果一个物理上的实体开关能执行这个动作，那开关按钮便可能是最好的控件选择。</p>    <p>在下面的例子中，开关按钮很清晰的表明WiFi处于打开状态，而使用复选框则导致用户不得不去思考究竟当前的WiFi已经打开还是要取消选中后才对。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9ffc01345d5748a58d23acc3c67e317a.png"></p>    <p>使用开关按钮来切换服务或者硬件组成</p>    <p>7、伴随复选框和开关按钮的交互</p>    <p>要表明复选框选中前后带来的影响（比如复选框作为表单的一部分，你在点击“提交”表单后才可能看到选中与否的不同），你可以延迟一定的步骤。 然而对于一个开关按钮，则应该在用户切换后立刻显示出不同，而不是非得要等到用户点击“保存”、或回到前一个页面才看到所有变化。这正如我们在现实生活中也有对于这类开关的期望一样（例如我们都知道在将开关打开后电灯立刻就亮了）。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b78abb635d0c750cc38e50f347eee376.jpg"></p>    <p>在iOS中打开WiFi</p>    <p>当用户需要执行几个动作后才能看到因选项改变导致的不同时，可以考虑使用复选框。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/39f5de269af3d434ed5d99c9dcf04cda.png"></p>    <p>用户必须在点击“submit”后才能看到选项的选中与否造成的影响</p>    <h2>四、结论</h2>    <p>设计用户界面时，尽量保证你所选择的界面元素具有良好的一致性和可预见性。如果选择遵循设计标准，你的设计自然能够增强用户对控件功能和操作方法的可预见性。相反地，违反标准的设计会导致这个界面破裂不堪——就好比如果不向用户发出预警，任何事情都可能发生一样。</p>    <p> </p>    <p> </p>    <p>来自：https://mp.weixin.qq.com/s?__biz=MzA4OTI4NDY5Ng==&mid=2472320530&idx=1&sn=e7876f5062f4d1a0bef31c1948676873&chksm=86b57725b1c2fe336114b0979b1c200949095fa56d7ebdbf856052c4428724967e830254ab73#rd</p>    <p> </p>