开关按钮在现实生活和软件界面中都随处可见，但设计都不是很理想，最大的问题是不知道开关当前状态是开还是关，本文试图分析软件界面中开关设计存在的问题，并提供优化方案。

我们知道，开关按钮通常是二态的（要么处于开启状态，要么处于关闭状态），它一般由3种要素构成：（1）开关当前所处的状态描述，开关正处在打开还是关闭的状态，通常用文字或者视觉手段标识出来；（2）开关点按区域，提供一个足够大的“热区”供使用者点按；（3）操作对象说明，一般通过文本标签说明开关操作是针对于哪个对象（比如要打开的是蓝牙）。

现实生活中糟糕的开关设计

在讨论软件界面的开关之前，我们先来看看现实生活中的一些设计糟糕的开关（见图1）。看似简单的开关按钮却设计的不尽如人意，人类千百年来饱受其折磨。

图1、糟糕的拉线开关和小风扇开关

图1左侧的拉线开关我本人曾经使用过，很糟糕，如果灯泡坏了，就只能拧开开关的盖子或者通过电笔来确认当前开关是否正处在关闭的状态，很危险、很不方便。

右侧是一个奇葩的小风扇开关。开关有一个滑槽和拨动块，图中现实“OFF”字样，一般会有两种解释：

【解释一】开关滑块正处在“ON”字样上（被滑块遮住了），所以开关处于打开的状态。

【解释二】我只清楚地看到了“OFF”字样，所以开关处于关闭的状态。

经过上面的分析，我们就知道，不管这种它是开还是关，都是不合理的！最后还是公布一下正确答案，它是关的！

软件界面上糟糕的开关设计

在软件界面上，也存在各种糟糕的开关设计，下面介绍比较常见的两类。

（1） 翻滚按钮

翻滚按钮的问题主要是使用者无法分辨它是一个选择，还是描述当前的状态。虽然翻滚按钮可以大大节省空间，受到一些设计师的青睐，但这种按钮模式没有经过良好的设计，就会让用户很苦恼。

图2、糟糕的翻滚按钮

如图2中我们经常见到的电影或者音乐的播放和暂停翻滚按钮，如果认真思考就会陷入混乱。以左侧的暂停按钮为例，我们完全没有线索去判断这个暂停按钮到底表示的是当前影片正在暂停？还是表示点击它就可以暂停？很明显，约定俗成的答案是后者。

幸运的是，视频画面是动的并且是有声音的（而音乐是有声音的），我们可以通过这个线索来了解影片（或者音乐）当前的状态。但如果画面静止不动时（或者音乐中有很长的休止符时），线索消失，用户将陷入恐慌。

本文的后面（图6）将对此进行重新设计。

（2）文字或图形出现在滑槽内的开关

我们上面提到，风扇小开关也在滑槽内用文字来提示开关的当前状态（见图1）。软件界面上，也存在这种设计，见下图。

图3、文字或图形出现在滑槽内的开关

图中的三种模棱两可的“滑槽开关”设计我们上面已经解释过了，不再重复。可能设计师认为他的设计合理的（表现模型），但用户的想法（心理模型）与他不完全一致。

旧版iOS的开关设计就是图3中下方两组按钮，使用起来也不太方便，一思考文字的含义就容易犯晕，所以果粉只能通过长期使用来适应它了。

本文的后面（图8和图9）将对此进行重新设计。

现实生活中优雅的开关设计

我们知道，生活是设计最好的导师，软件界面中很多元素的设计灵感主要来源于现实生活。在优化软件界面的开关设计之前，我们先来分析一些现实生活中的优秀开关，见下图。

图4、优雅的高压配电箱开关和显示器开关

上图左侧的的高压配电箱是危险开关，万万不能马虎。在颜色方面，“合”字的背景色用警戒色红色，非常醒目；而“分”字的背景用黑色，有一点“漆黑”或者“无（色彩）”的含义。更重要的是，文字“分”和“合”的意义非常清晰，没有使用“开/关”、“接通/断开”等可能有歧义的词。

上图右侧的显示器按钮，非常典型的合理的设计，开关按钮凸起状态很清晰标识可按压区，右侧的指示灯也完美地标识屏幕已经打开，再配合点亮的大屏幕，开关的状态非常清楚！日常生活中，插板、微波炉、蒸蛋器等都是通过类似的工作指示灯来标识开关处于打开的状态。

其实，现实生活中的开关比软件界面的开关要容易设计一些，因为可供利用的知觉通道更多。

现实生活中的开关可通过视觉、听觉（比如打开热水壶开关时听到水沸的声音）、触觉（比如有些开关在打开和关闭时摩擦力或弹力不同），甚至嗅觉（比如确认面包机是否已经打开），“火力全开”来确认按钮的当前状态。而软件界面上，只能依靠视觉，以及部分的听觉（用户可能没开声音，只能作为辅助手段）。

尽管如此，我们还是可以从现实生活中发现优秀开关的一些优良品质，比如意义明确、操作对象鲜明、容易上手。一旦用户用过之后，就不会轻易忘记使用规则，并且识别速度快如闪电！

重新设计开关按钮

有人说，人们似乎已经习惯了痛苦和折磨，但这不是糟糕设计继续存在的理由。我们必须做出改变，寻求优雅的设计方案，毕竟设计的终极目标就是让生活更美好。

下面介绍几种设计原则，并在这些原则的指导下重新设计软件界面上的开关按钮。

（1）明确标识当前状态

明确标识当前开关的状态，并提供操作区。如下图：

图5、明确表示当前状态

上图中的第一组按钮，通过按钮两侧的文字明确表示当前开关的状态，很明确，但为了加快用户的识别速度，加上绿色背景表示就打开中更加完美了（见第二组按钮）！

第三组按钮，通过单选框的形式来选择打开和关闭，也是比较合理的方式。

明确表示当前对象的状态非常重要，开关按钮的很多问题，大多数是由于当前状态不够明显或者不明确造成的。按照这个思路，我们对图2的翻滚按钮进行重新设计（见下图）。

图6、改进后的翻滚按钮

为了表现当前视频正在播放中（见上图左侧），可对播放头进行重新设计（比如前进中的小动画），或者增加一个声音播放的小动画，或者显示已播放时间或者剩余时间（眼睛最多停留两秒就知道当前正在播放中）。简单地说，线索在动，就表示视频正处在播放的状态，反之则反（见上图右侧）。

当然，由于用户可以通过视频窗口变化（或声音变化）来判断影音当前的状态，况且这种翻滚按钮的设计已经“深入人心”，所以，影音播放软件公司无需再考虑重新设计，这就使得糟糕的翻滚按钮大行其道，非常遗憾。

（2）明确标识点击动作

明确标识点击动作，就可以推断出当前状态。动作是有指向性的，比如下图左侧的“请点击打开”按钮，意思就是点击就可以将对象打开，由此可推断当前的对象正处在关闭的状态，反之则反（见下图右侧）。

图7、明确表示点击动作

虽然初看起来这种需要推断的方式好像有点复杂，但命令式的按钮的指向性非常明确，用户很清楚点击这个按钮将会发生什么事情（这一点非常重要），所以实际使用起来效果还是相当不错的。

（3）加强或者削弱某一种解释

上面的“滑槽开关”由于两种截然相反的解释“相互竞争”而导致混乱，所以，如果我们能够通过视觉表现手段加强或者削弱某一种解释，那么平衡的天平将会向其中一边倾斜，易用性将大大提升。见下图：

图8、加强或者削弱某一种解释

上图中，借鉴了高压变电箱的开关设计（指针指向哪种状态就表示当前处在哪种位置，清晰明了），优化方案1直接借用这一概念。优化方案2把开关按钮的透明度调低，让”遮挡”在底下的文字显示出来。

两个方案都是加强某一种解释（即滑块所处的位置就是按钮当前状态），削弱了另一种解释（即当前看到什么字开关就是什么状态）。

（4）减少“信息干扰”

其实，设计师在设计开关时，不需要用大量的语言和图形来解释说明，而仅提供一丁点微妙的“信息”，让用户自己去体会和发现。比如，“关闭”的状态容易让人联想到“空”、 “断开”、 “空白”、 “消失”等消极的词；相反地，“打开”就对应于“满”、 “接通”、 “高亮”、“存在”等积极的词。设计见下图（ios7上的开关）。

图9、信息量很少，干扰很少

经过一番喧嚣之后，终于返璞归真，仅仅留下颜色线索，看起来信息量好像少了，但由于没有了文字或图形的各种“干扰”，开关当前状态的“信号”更清晰了！

细节是魔鬼。即使产品整体的概念是优秀的，令人沮丧的开关控件也会导致一些烦恼，所以我们一定要小心谨慎，确保开关按钮有适当的、明确的行为。

作者：运气超好

来源：用户体验小故事

想了解更多关于互联网岗位知识的信息，请移步微信，关注微信公众号：硅谷堂（ID：guigutang）或下载“硅谷堂”APP。