网页以及APP中的“拨动开关”设计指南

根据定义，UI/UX设计中的切换开关意味着用户必须在两个互斥选项之间进行选择。当用户按下开关时，将显示与所选选项的简短交互，然后立即生效。拨动开关的设计源于现实生活。看看你的日常活动，你会发现你使用了很多物理开关，比如电灯开关和水壶。作为一名UI和UX设计师，如何在设计中实现这些切换开关？

何时使用拨动开关？

切换开关最好用于更改系统功能和首选项的状态。如果您想满足用户更改或更新首选项和设置的需要，设计中应该有一个切换开关。然而，切换设计可能有点混乱，因为它们有非常特定的用途，很像复选框或单选按钮。
不仅仅是在APP之中，包括网页中，都会用到切换开关。如下，是“切换开关”的设计指南，可供参考。

“切换开关”设计指南

1.拨动开关应立即生效

如前所述，拨动开关的设计源于现实生活。以电灯开关为例，想想它是如何工作的。你按下按钮打开灯光，然后再按下按钮将其关闭。
在UI/UX设计中，切换开关简单地模拟了现实生活中的开关，使用户易于理解和使用。换句话说，当用户与切换进行交互时，他们不需要单击“保存”或“确认”来应用新状态。相反，当用户按下开关时，所选选项立即生效，以更改系统功能和首选项的状态。当由于系统延迟而无法立即获得结果时，可以考虑添加处理状态循环动画，以帮助用户知道正在实现切换。但请记住，操作时间不应超过几秒钟。

2.不要忘记写好标签

当我们遇到具有良好标签的切换开关时，我们将更容易理解切换控件的选项以及切换当前处于什么状态。在书写标签时，您需要确保标签短而清晰。单词的数量不应超过两个，但也应清楚地描述切换控件的功能。此外，最好使用左对齐的内联标签，因为这些标签最适合用户扫描布局的方式。请记住，开关是OFF或ON，您不应该添加额外的文本标签，这会使您的界面变得混乱。
3.保持设计的视觉外观一致
众所周知，UI元素的视觉外观有助于用户预测与元素交互时会发生什么。如果您的设计与用户已经知道的不一致，他们将被迫停止并思考如何与UI交互。在创建设计时，您需要确保始终使用您选择用于切换的视觉语言，并且所有切换都应在应用程序中以这种方式实现。

4.选择合适工具来设计拨动开关

这看起来像是一个小细节，但它在整个产品原型化所需的时间和精力上产生了巨大的差异，尤其是在UI设计中包含许多小组件的大型产品。

5.使拨动开关便于移动

作为一名UI/UX设计师，您确保移动开关在各种产品中都可用的方式。要做到这一点，您需要确保布局通常允许以下两件事：允许用户无问题地触摸开关，并允许组件之间有足够的自由空间供界面呼吸。

6.测试您的拨动设计

最后但同样重要的是，需要在发布设计之前进行用户测试，以确保不会发生系统故障。只要记住测试可用性标准，包括通用UI设计和特定的切换组件。测试切换设计的最实用和有效的方法是一个很好的旧A/B测试。当涉及到切换设计时，您需要测试整个页面以及特定组件上的视觉层次结构。此外，在找到用户可以立即理解的标签之前，不要害怕修改标签。
如上就是“切换开关”的设计步骤，在进行网页设计、APP设计的时候，可予以参考和借鉴。