Redesigning the toggle switch
A UX challenge to rethinking toggle design
原文链接：（需要魔法上网🧙🏻♂️）
定义及历史
切换开关（toggle switch）在软件中通常被简化成-toggles，是拥有互斥状态的组件，比如：“on”和：“off“不同于复选框需要点选保存才能生效，切换开关的交互是即时的。（生效即时）
切换开关最被人所熟知的应该就是灯的开关了💡，在19世纪初灯的开关就由按压式开关改成了切换式开关。经过一百多年后，灯的切换开关设计就被流传了下来。
软件中的切换开关也有着类似的故事。自从苹果公司在初代iPhone的设置中设计了切换开关，切换开关的样式和整体风格就没有变化过。举个🌰：我朋友设计了3种不同与标准样式的切换开关：
这几个设计都有它们自己的风格，但是为了能成为在所有APP中适用的合理的组件，他们又要和标准的切换开关保持一致性。
灯具开关的优点
灯具开关最明显的优点就在于可以很直观得看到当前状态。开关无论是开或关，都影响房间的明暗状态。
你想哦，你知道当房间是黑的时候，拨动（电灯）开关灯就会亮起来，反之同理。这种视觉效果上的提示不是通过电灯开关设计的，而是用户周遭环境的提示。这就是为什么用开关控制别的房间的灯是很迷的做法（没有周遭环境提示）
一些切换开关也有同样的线索哦——像是Dark Mode的切换开关，但是其他很多切换开关是不会给予即刻的反馈的：
在你收到下一条信息之前，打开声音的开关不会有任何反馈。
还有一个给予即时反馈的例子是播放/暂停健。你耳机可以得到即时的反馈，但是当你的耳机摘下了也就暂停了。
大家都知道这种感觉，就是在一个安静的环境下你就不想去听很诡异风格的音乐，于是需要即时暂停
有些读者可能会发问了，切换按钮的颜色给予了必要的反馈，但是有很多的人他对色彩认知障碍咋办？<br /><br />只有0.005%的人患有色彩认知障碍
我的挑战
这一点（照顾0.005%的色彩认知障碍者）给我留下了一个挑战：创造一个有多种可视状态的切换开关组件，这样人们就不用完全依靠颜色和环境来辨识开关状态了。
重新设计toggle
设计想法💡1:有提示文字的按钮
按钮本身是可操作的，加入提示文本，颜色提示可以让用户快速了解当前状态。
如果去掉提示文本，按钮的状态就需要被定义，这会让用户产生过多的思考。举个栗子：
用户可能会这么想 好嘛，我看到了绿色所以这个设置是开启状态，但是按钮上写的是「打开」，这就意味着现在是关闭状态。哦~我懂了按钮目前是绿色的是因为点击按钮会让状态改变…
设计想法💡2:有提示文字的立式开关
立式的开关更容易让人们联想到现实生活中的开关。我在开关的滑块和滑道上加上了提示文字，这样用户就知道按钮状态是可以切换的，毕竟谁会去点击未命名的按钮呢？😶
我曾见过很多人对于改点滑块还是滑道感到困惑
而这个设计会额外占用24像素的空间（文本占用空间）而且提示文字也会造成新的困扰。一个相对较好的处理方式是用电气开关的标记来替代提示文字。
去掉滑块上的文字我会对当前所在状态感到迷惑
很遗憾的是，只有少数人知道 「I」和「O」是什么意思。
总的来说，不管提示文字是什么，立式开关都难以阐明开与关的状态，所以立式开关就很难被应用到「设置」中，「设置」中各个选项状态的可见性是很重要。
哪一个更容易快速查看？我觉得是左边的
设计想法💡3:对半式按钮
这是我第二满意的设计方案，主要包含以下特点：
1.选中状态有加粗的文本
2.选中状态有更厚的边框
3.选中状态有着浅色阴影和文字颜色。
根据我之前的说法，现在这种设计方案可以让用户快速地扫描他们「设置」中的选项，且知道该选项目前的状态。
唯一美中不足的是，这种设计很占据空间。这启发了我最后一种设计想法。
最后的设计想法：切换框开关
之前有提到说复选框的交互不是即时的，但是复选框比切换按钮更常见也更容易理解。在1897年的投票文件上出现了复选框
他们使用「X」来替代「✅」，意思是一样的
最后一种设计想法中我们可以结合复选框，当然需要切换按钮给他带来即时反馈。因此 我决定将这两者结合起来：
我们创造出带有切换功能的复选框。它有着之前这些设计想法的视觉特征同时也节约了空间。
若有收获，就点个赞吧
0 人点赞
