拆解「开关」背后的设计细节

honghu2

拆解「开关」暗地里的设计细节

作者从糊口中的现实环境动身，探究了开关暗地里的设计思惟并拆解了详细的设计细节。

01 糊口中的背面案例
故事要半年前起头讲起：阿谁时辰我搬到了新的出租屋，房间里设置装备摆设的洗衣机比以前的大了一倍，并且操作区上散布着的密密层层的文字和按钮让洗衣机看起来很高档，我对此颇有好感。
维维下载网
但是这类好感并无延续多久，在我第一次利用它时：将衣物放进洗衣机——选择好时候和洗涤方法——按下启动按钮（以下图右边白色按钮）。



按下后洗衣机发出了“滴”的一声，在我的认知里它应当是起头事情了，可是10秒事后没有任何抽水声和洗衣服的声音……

我迷惑地想：“是否是适才并无乐成启动？”因而再次按下了启动按钮，又是“滴”的一声，可是此次我等了 1 分钟没有任何反响。以后的十分钟里，我与这台匪夷所思的呆板“交涉”屡次才理解了它的运行方法。

这台洗衣机启动后必要期待大要十几秒才起头运行，可是在我按下启动按钮后我得不到任何反馈或提醒来奉告我洗衣机已起头事情了，以是迷惑的我又按下了一次启动按钮，但是使人解体的是这台洗衣机的启动和暂停按钮是一体的，我第二次按下现实是举行了暂停操作，从而致使我第二次的狐疑。

若是你是这台洗衣机的设计师，你会怎样解决上述的问题呢？

可能你的心中已有了谜底，可是在答复以前咱们先试着探讨问题的本色。

人们不论是利用平常物品仍是与呆板举行交互，城市面临两个阶段的问题。一个是「履行」，一个是「评估」。

履行时用户必要理解若何操作，操作后可能会有甚么成果。评估时用户必要晓得详细产生了甚么，作为设计师咱们要经由过程公道的手腕帮忙用户解决这些问题，包管交互的可用性和流利性。

凡是咱们会利用「意符」在用户履行前告诉用户若何理解、若何操作、操作后会有甚么成果；在评估前经由过程「反馈」告诉用户成果是甚么。

对付意符的界说，在《设计生理学 1-平常的设计》一书中，作者唐纳德·诺曼做出了如许的诠释：

人们必要某种方法领会他们将要利用的产物或办事，某些标识表白的用处，会产生甚么，有甚么样的替换方案。人们寻觅蛛丝马迹，寻觅任何可以帮忙他们应答和理解的符号，任何可能标识出成心义的信息的符号很是首要。

设计师必要供给这些线索，人们所必要的和设计师必需供给的，就是意符。除此以外，良好的设计请求对产物的目标、布局和装备的操作与利用者举行杰出的交接。那就是意符的感化。

简而言之，意符就是在用户利用前，呆板为了让用户更好地舆解和利用它而做出的提醒。而反馈就更好理解了，呆板在咱们操作后做出的反响就是反馈，没有反响一样也是一种反馈。

下图展现了呆板与用户若何举行交互：一个公道的设计可让用户快速顺畅地举行 1234 四个步调进而完成使命，而糟的设计会让用户不竭反复这个流程。

之以是会呈现糟的设计，就是由于在步调 1 和 3 没有举行公道的意符提醒和反馈提醒让用户摸不着脑子，进而致使用户按照本身的猜想和过往履历来举行操作，最后获得非预期的成果。



回到文章起头时的洗衣机开关问题，由于起头和暂停按钮是一体的，在没有任何意符和反馈的环境下我按下这个按钮时我其实不晓得我启动的是起头操作仍是暂停操作。

咱们可以就这个问题列出如下解决方案：
增长文字提醒，如启动时在显示屏上显示“已启动”，暂停时显示“已暂停”；增长语音提醒，启动开关后利用语音告诉用户“已启动”或“已暂停”。
固然解决方案有不少，每小我均可以按照场景想出分歧的解决方案。

与实际呆板的开关雷同，在 UI 设计中咱们若是举行开关设计也必要遵守响应的设计原则。一个公道的开关设计主体包括的意符别离有两种：
暗示当前状况；暗示操作后的状况。
主体以外咱们还可以添加辅助提醒加倍清楚地转达意符和反馈。

接下来将先容一些常见的开关类型和辅助提醒类型，最后总结出体验优良的开关设计法子。
02 开关类型1. icon
在 UI 设计中最多见的开关可能就是 icon 了，即由单一的 icon 经由过程色彩或图形的变革来暗示开或关的状况。

由于交互设计古往今来并无同一的严酷尺度，以是究竟是将开关 icon 的样式设计为「当前状况样式」仍是设计为「按下以后的状况样式」并无一个商定俗成的法则。

但是，比拟而言现在各种 App 设计中常见的且体验比力好的方案仍是将开关样式设计为当前状况样式。以下图iPhone自带相机的实况照片开关icon就是显示当前状况。



但是，其实不是说将开关样式设计为当前状况样式做法广泛且体验更好便可以如许做了，有些开关的设计由于利用遍及，已在用户的心智中扎根，咱们若是强行扭转反而拔苗助长致使体验变差。

最典范的就是视频和音乐的播放暂停开关，他们暗示的就是操作后的状况而不是当前状况，以下图。



是以，大部门利用的开关类 icon 都是混用当前状况和操作后状况的，以下图哔哩哔哩的视频播放界面，播放暂停开关 icon 暗示的是操作后状况，弹幕开关暗示的是当前状况，而视频锁开关 icon 又酿成了暗示操作后状况了。



是不是同一倒不是关头，关头是咱们是不是可以或许让用户理解响应的意符和反馈，方针是让用户在操作开关前可以或许晓得当前状况是甚么，操作开关后当前状况是甚么。

举一个反例，下图中的美颜相机的夜拍模式开关就没有直观表示出当前是开仍是关，这类有歧义的设计可能让新手用户不知所措，可能原本未开启的功效让用户误觉得已开启，致使拍出来的照片不合适用户预期。



由此咱们可以看出，单一的 icon 开关若是没有其他的辅助提醒会造成意符和反馈的缺失，进而构成较大的歧义性，用户会在迷惑中依照本身固有的生理模子和过往履历举行果断，体验是以低落。
2. 主体与开关分手（分手式）
上一部门举了美颜相机的反例，其意符和反馈不明致使的歧义问题致使了用户的狐疑，但利用「主体与开关分手」（后文一致简称为“分手式”）的开关设计可以解决这个问题，它在乎符和反馈层面都赐与了用户提醒，可视性很强，彻底解决了开关状况没法被用户感知的问题。

分手式开关指的是，主体再也不充任开关，只当成开关的名称或icon，此外建造一个开关转达意符和反馈，解决了当前状况与操作后状况混同的问题，其凡是的样式以下图。



以下图，Faceu激萌分歧于美颜相机设计方法就是将主体与开关分手，很清楚地转达了当前开关状况。



大部门App的设置页面利用的开关都是主体与开关分手的方法，以下图。



不言而喻，分手式开关直观展现了当前状况，在解除歧义方面优于 icon 开关，但同时错误谬误也很较着，它占用了过量页面空间并美感欠佳。
3. 名称变革
名称变革指的是开关依靠于其名称的变革告诉用户开关确当前状况和操作，常见的类型以下：



部门 App 会将开关的名称变革的方法同一，但也有部门 App 会将这两类举行混用，即一个是暗示当前状况，一个是暗示操作。

下图为部门 App 的名称开关，咱们可以将上图的开关名称类型的序号对号入坐。



暗示操作的按钮文字具备必定指导性，用户轻易感知和触发，反之，暗示状况的按钮文字因为不具备指导性，若是用户没有对这种按钮构成利用习气乃至难以意想到它是可点击的，是以咱们可以操纵其特征举行逆向利用指导用户的举动。

好比在直播App中，咱们但愿指导用户存眷主播，又试图防止用户存眷后又取关主播。咱们便可以将“存眷”建造为暗示操作，案牍写为“存眷主播”（属于1.开启……）。将“取缔存眷”建造为暗示当前状况，案牍写为“已存眷”（属于7.已开启……）。

先后的色彩举行区别，“存眷主播”的按钮建造得比拟度强，吸引力大，“已存眷”做得弱一些，让用户误觉得不成点击，以下图的斗鱼直播。



但是，名称变革的开关因为说话的模胡性，依然造成为了部不同义。咱们可以发明不少App的名称变革开关设计中，城市在操作后参加其它提醒来解除歧义（如：toast 提醒），有些App则并未参加，是以在后文中会偏重先容辅助提醒的长处和利用法子。
4. 小结
icon、分手式、名称变革，若是依照解除歧义的好坏分列的话，大要是 分手式>名称变革>icon。

那如许的话是否是应当把开关都换成份离式呢？固然不是，分手式固然在乎符和反馈的层面很充实地消除歧义，可是其也有较着的错误谬误，分手出的开关会占用部门空间，可能会影响雅观，是以咱们必要按照需乞降页面布局选择最合适的开关类型。

那名称变革和icon类的开关若何解除歧义呢，咱们可以经由过程添加下面先容的辅助提醒来解除歧义。
03 辅助提醒1. 情况表示
情况表示指的是用户在操作开关前，开关之外的区域赐与用户的提醒，这些提醒自己存在于交互流程中其实不是咱们决心参加的，用户按照这些提醒可以果断当前状况和按下开关后的状况。

比方在旁观视频时，当用户去按下视频播放按钮前，用户会经由过程当前图象静止与无声音这个情况表示大白当前状况是多是视频未播放，以是应当按下播放按钮让视频播放。

再好比获得 App 的夜间模式，用户可以经由过程当前界面的样式果断当前是不是已开启了夜间模式，以下图。



看下图，若是没有情况表示，你能分清获得的夜间模式的开关哪一个当前状况是夜间哪一个当前状况是日间吗？



是以，情况表示的上风是咱们不必要举行此外设计其他的意符和反馈告诉用户当前状况，情况赐与的表示已足够直观。
2. 模态/非模态提醒
当用户按下开关后模态和非模态提醒可以在反馈层面告诉用户，让用户晓得本身是触发了开启仍是封闭。

常见的模态提示控件是「告诫框（Alerts）」，非模态提示控件是「提醒框（toast）」，前者提示强度大，利用在一些伤害、首要的反馈中，后者则利用在一些轻量的提醒中。

先容 icon 开关的部门咱们提到了美颜相机的夜拍模式的 icon 开关状况难以区别，但美图秀秀在这里利用了顶部的非模态提醒在反馈层面告诉用户当前状况，很好地解决了这个问题，以下图。



拉勾网的设置中，暗藏简历为伤害操作，用户极有可能因为开关名称的歧义或因为忽略触发开关致使简历被暗藏从而错过事情机遇，是以此处设计了一个情势为告诫框的模态提醒来告诉用户当前状况和潜伏危害。


3. 辅助案牍
辅助案牍指的是在主体（主体多是开关名称、icon 或两者皆有之）以外此外安排一些案牍信息来充任意符和反馈。下图案例就是高德舆图的下车提醒的开关，开关的主体是名称，可是下面的一行辅助案牍很清楚地转达了当前的开关是甚么状况。


4. 其他辅助提醒
其实不是所有提醒都必要让用户瞥见，咱们可以赐与用户其他感官的旌旗灯号告诉用户当前开关的状况。

在实际糊口中，咱们会经由过程钥匙在锁中扭动发出的声音果断锁是不是被打开，经由过程触摸感觉摩托车是不是继续触动果断其是不是已熄火。

一样，在 UI 设计中，咱们也依然可使用听觉和触觉来解除开关的歧义。一个比力优异的案例是高德舆图，当用户打开下车提醒以后，会呈现语音提醒“已开启下车提示”，它充实斟酌到身处户外的用户可能其实不能很便利地获得屏幕上的视觉信息，是以利用语音的情势提醒用户。
5. 小结
辅助提醒很好地弥补了开关在解除歧义上的不足，但咱们必要公道利用不然就会发生不需要的视觉噪声。

以下图，试想音乐的暂停播铺开关若是参加的 toast 提醒会怎样样呢？因为咱们已可以经由过程“手机是不是发作声音”这个情况表示获知当前的开关状况，若是再参加 toast 提醒必定会呈现不需要的视觉噪声。


04 总结
先容完开关类型和辅助提醒后，咱们若何将其利用到咱们的产物中，设计出无歧义或低歧义的开关呢？

若是咱们选择的开关类型已足够的解除歧义，如分手式，咱们就不太必要分外地增长辅助提醒了。可是若是利用轻易造成歧义的开关，咱们可以依照（开关类型+辅助提醒 1+辅助提醒 2+…………）的公式举行设计，即一种辅助提醒不足够解除歧义，可使用多种一块儿。

举个上文的例子，高德舆图的下车提示开关的设计就是「名称变革开关+辅助案牍+语音提醒」 的组合。

但是，任何设计都不是完善的，不少处所都必要咱们做出让步，固然咱们可以选择符合的开关类型和辅助提醒解决歧义问题，但随之而来便可能呈现其他问题。

如分手式开关解除歧义结果很好，可是占用空间且不雅观，模态和非模态提醒赐与用户的反馈比力强，可是可能打搅到用户。

综合上文提到的三款相机软件作为案例，以下图，咱们可以发明在解除歧义的进程中防止不了对用户酿成的滋扰或页面雅观度的低落，咱们很难去评判Faceu激萌、美颜相机和美图秀秀哪一个设计得更好，它们只是在易用性和雅观性之间找到了它们所认为的均衡点。详细若何设计，仍是要详细问题详细阐发。



那末咱们应当若何举行弃取呢，在这里咱们要斟酌此外的身分。咱们可以从如下角度阐发，利用频率、用户人群、潜伏危害等。

利用频率：利用频率越高，用户对操作的认识度越高，歧义对用户酿成的理解与影象本钱就低落了，设计可以方向低滋扰和雅观度，反之利用频率越低，歧义对用户酿成的理解与影象本钱升高，设计就应当方向于易理解。

用户人群：分歧的用户人群的气概偏好、认知能力是纷歧样的。比方，咱们要设计一款方针用户为年青人的相机产物，设计气概简约，此时咱们比力方向的设计方案可能就雷同美颜相机。反之，若是咱们的方针用户是中老年人，就要方向于易用而捐躯雅观度，方案转而方向美图秀秀或Faceu激萌。

潜伏危害：开关的切换若是会致使潜伏危害，设计就应当方向于易理解，且必要利用模态提示告诉用户危害，比方用户若是封闭了推送通知开关，会致使接管不到及时首要的信息通知，此时不但要利用易辨认的开关类型，还必要添加模态提示告诉用户危害。

咱们可以将这些斟酌角度放到雷达图，以下图所示，终极构成的面积越大咱们越应当将按钮建造得易理解、易利用小蝌蚪，反之咱们可以方向于将开关建造得更雅观捐躯一些易用性。斟酌到一些特别产物的特别用户属性，咱们可以鄙人图中增长其他斟酌角度，其其实不是一成稳定的。



以上是本次对开关设计的思虑，看似小小的一个开关，包括的学问却不乏其人。作为一个互联网产物设计从业者，必定要长于感觉糊口，用设计师细腻的心里去端详、洞察身旁的一切事物，发明美与不足，思虑改良法子，并在这个进程中逐步晋升自我的价值。

作者：Ballen成明；公家号：设成于思（ID：123456）

本文由 @Ballen成明 原创公布于人人都是产物司理，未经作者允许，制止转载。

题图来自Unsplash，基于CC0协定。