400-800-9385
网站建设资讯详细

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

发表日期:2023-03-13 09:57:33   作者来源:方维网络   浏览:869   标签:网页设计    
根据定义,UI/UX设计中的切换开关意味着用户必须在两个互斥选项之间进行选择。当用户按下开关时,将显示与所选选项的简短交互,然后立即生效。拨动开关的设计源于现实生活。看看你的日常活动,你会发现你使用了很多物理开关,比如电灯开关和水壶。作为一名UI和UX设计师,如何在设计中实现这些切换开关?

何时使用拨动开关?

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

“切换开关”设计指南

1.拨动开关应立即生效

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

2.不要忘记写好标签

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

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

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

5.使拨动开关便于移动

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

6.测试您的拨动设计

最后但同样重要的是,需要在发布设计之前进行用户测试,以确保不会发生系统故障。只要记住测试可用性标准,包括通用UI设计和特定的切换组件。测试切换设计的最实用和有效的方法是一个很好的旧A/B测试。当涉及到切换设计时,您需要测试整个页面以及特定组件上的视觉层次结构。此外,在找到用户可以立即理解的标签之前,不要害怕修改标签。
如上就是“切换开关”的设计步骤,在进行网页设计、APP设计的时候,可予以参考和借鉴。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6719.html