日历控件如何切换语言 vant_切换开关设计指南

原作者：Alita Joyce 翻译者：Winton 正文字数：2456 以后就是社畜了，会比较忙吧，尽量一周一更，各位观众老爷还请谅解。

该篇文章承接至Taras Bakusevych的文章——《选择类控件——UI组件系列》。

该篇文章为《选择类控件——UI组件系列》中的文章一。

以下为文章的脉络

---

1. 摘要 2. 提供即时的结果 3. 提供简单明了、清晰肯定的标签 4. 遵循标准的视觉设计 5. 始终如一地执行 6. 总结 以下为正文

---

摘要

---

切换开关是数字化开关。它们提示用户在两个相互排斥的选项之间进行选择，并且总是有一个是默认值。切换开关应该提供即时的结果，让用户可以根据需要自由控制自己的喜好。 每天早上，我会在起床后，把水倒进烧水壶里，然后打开开关。一旦水烧开了，我就把烧水壶关掉，给自己倒一杯开水。我的水壶上的开关就是一个切换开关的例子。如果你仔细观察，你会发现切换开关在我们身边随处可见，因为很多东西都只有两种简单的状态：要么是开，要么是关(而不是“只开一点”)。从电灯开关，到打开移动热点，再到我们最喜欢的移动应用上的偏好设置页面，我们每天都在与切换开关互动。 定义： 切换开关是一种数字化的开关。

切换开关最好在改变系统功能和偏好状态时使用。切换开关可以取代两个单选按钮或一个复选框，让用户在两种相反的状态之间进行选择。

有时，决定使用哪个用户界面元素——单选按钮、复选框或切换开关——可能很困难。当你想知道哪个选项适合你的设计时，请考虑选项的数量和类型，以及是否有任何明确的默认值。下表总结了关于这些常用UI元素的问题和答案。

当设计师为特定场景使用合适的UI元素时，它可以帮助用户预测UI元素将做什么以及如何控制它。为了避免用户的挫败感，并确保理解力，请遵循这些关于切换开关的指南。 提供即时结果

---

切换开关应该立即生效，不应该要求用户点击保存或提交后才应用新的状态。一如既往，我们应该努力使系统与现实世界相匹配。思考一下我的烧水壶：我不应该打开开关，拔掉电源线来体验状态的变化。因此，用户期望从数字化的切换开关中得到的即时结果与他们从现实世界的对应物(如电灯开关)中得到的结果是一样的。即时的结果是切换开关的一个方面，它赋予了用户根据需要更新其偏好的自由和控制能力。

如果即时结果无法实现或看起来不合适，应该使用替代方案(即单选按钮或单个复选框——见上图)。如果你正在考虑在长表单中加入切换开关，而在长表单中还存在其他类型的文本框，用户需要点击提交按钮才能使其更改生效的话，那么请不要这样做。这种情况会让用户感到困惑，因为他们无法确定自己的切换选择是否会立即生效。不惜一切代价避免混淆。将产生即时效果的控件与需要点击命令按钮的控件分开。

上图的做法是错误的 在美联航iOS应用中，除了视觉上的变化之外，当用户点击切换开关时，什么都没有发生。那么用户如何知道切换开关是否有效？它没有提供任何结果。在这种情况下，单个复选框将是最好的选择。

上图的 做法是正确的 当iOS系统开启飞机模式时，苹果提供了立竿见影的效果，将状态栏左上角的信号条改为飞机图标。 提供简单明了、清晰可见的标签

---

保持切换开关的文本标签简短直接。可以考虑Tog的交互设计原则之一，其中指出：“菜单和按钮标签应该先有关键词，形成唯一的文本标签”。例如，在设计一个用户可以更新通知偏好的设置页面时：请说邮件通知或文本通知，而不要问“你想接收我们发给你的邮箱通知吗? ”。我们知道，用户只阅读他们认为需要的内容，因此在你的文本标签上预先添加关键字，并删除多余的短语。避免提出问题，写出可扫描性。

切换开关的文本标签应说明在打开开关时控件将执行的操作；他们不应中立或模棱两可。如有疑问，请直接显示文本标签，并在末尾附加“开 /关”。如果没有意义，请重写编写文本标签。

上图的 做法是错误的 Le Tote的这个切换开关的文本标签“Include non-maternity items?” 是不肯定的，这不得不让用户去猜测是包含还是排除产品。

上图的 做法是正确的 相对而言，Google日历中使用的拨动开关标签是直接的、毫不含糊的，它们描述了开关开启时系统的状态，并与 "开/关 "的切换按钮有关联。 遵循标准的视觉设计

---

确保切换开关看起来像滑块，并利用视觉提示(位移和色彩)来避免混淆。首先，当用户改变切换开关的状态时，开关也应该改变位置——就像在现实世界中一样。

色彩是切换器的重要视觉标志，有两点需要注意：对比度和文化差异。当设计师使用低对比度的颜色时，用户就很难知道一个切换开关是开还是关。因此，应该总是保持高对比度的颜色来表示状态变化。此外，一定要评估对用户的社会和文化影响。例如，对于那些将其与停止标志或红绿灯联系在一起的人来说，开启位置的红色是反直觉的。

此外，状态描述文本——切换器旁边的 "开 "和 "关 "字样——可以提供系统状态的清晰可见性。

上图的做法是错误的

上图的切换开关是开还是关？在Windows 10中，有一个状态描述符(单词 "Off")用于识别切换开关的当前状态(关闭)。遗憾的是，这个描述文本是含糊不清的：因为“关”字出现在开关的右侧，而切换点在左侧，所以用户也可以将切换点的状态理解为开启(也就是远离标签文本“Off”)。

在添加状态描述文本时，要坚持使用on/off，以符合现实世界的惯例，并将off和on分别放置在切换器的左侧和右侧，以避免混淆。如果一个切换器旁边只有一个描述文本，可以把它当作切换开关的标签文本。

如果你不确定如何平衡色彩与状态描述文本，请进行评估和测试，以确定哪种组合最适合你的用户。

上图的 做法是正确的 Daylio Android的应用使用了对比色(紫色)，并且没有状态描述文本来明确表示切换的状态(左边截图中为关闭，右边截图中为开启)。 始终如一地执行

---

遵循平台规范，确保切换开关在你的应用程序中实现一致。不一致会迫使用户放慢速度，花更多的时间思考如何与组件交互。不要让用户怀疑有两个单选按钮或语句是否与切换开关的功能不一样。

上图的做法是错误的

大通银行iOS应用中并未对切换开关和单选按钮进行统一。除元素类型和内容数量之外，这三个页面几乎完全相同。当我与这些页面互动时，我期望它们的功能是一样的。然而与此相反的是，我花了时间去想为什么我的偏好设置没有立即生效。

总结

---

切换开关帮助用户更新偏好、设置和其他类型的信息。当使用切换开关时，提供简短直接的标签文本，使用标准的视觉设计，并提供即时的结果。请记住，切换开关只应在用户需要在两种相反的状态之间做出决定时使用。当你审查网站或应用上使用切换开关时，请评估当前场景，确保它们的使用是统一的。请记住，这个简单的用户界面组件可以对用户体验产生重大影响。

喜欢的同学可以一键三连

???