UI设计中14条按钮和选框的设计经验

Date 2024-04-02 11:14:07

在UI界面中，各种开关、按钮和框架选择控制器是非常常见的组件，它们看起来并不复杂，但在实际使用中非常精致，它们不仅与体验有关，而且还涉及到一些界面逻辑问题。在UI界面中，我们可以看到各种开关按钮等组件，如何更好地使用它们是一个值得思考的问题。这篇文章来自资深设计师Tarass Bakusevych，他在表单和控件设计领域造诣深厚。本文梳理了他总结的14个按钮和框架设计经验，非常实用。推荐对UI设计感兴趣的用户阅读。

UI设计中14条按钮和选框的设计经验

英文中的「Toggle」一个词对应于带短柄的拨动开关，拨动时可以在两种不同状态之间切换。

至于「单选按钮」（Radio Buttons）这个词来自汽车收音机。在旧的汽车控制面板上，有一排机械按钮可以存储预设的广播电台，用户可以快速按下按钮切换不同的广播电台。按下其中一个按钮，其他按钮会弹起，这里的按钮相互排斥，多个按钮不能同时激活。

复选框（Checkboxes）通常有一个或多个选项供用户选择。复选框中的选项通常不相互排斥，用户可以选择一个或多个选项。

拨动开关（Toggle-Switch）是最常见的按钮样式，点击切换状态。

选择按钮（Choice Chips）单选按钮是一种简化模式，它通常包含至少两个选项，用户可以选择其中一个，大多数选择按钮出现在移动终端界面上。

多选按钮（Multi-select Chips）它是一种通用的替代品，用户可以选择多个选项，这些按钮主要用于移动设备。

各种选择控制器在用户界面中已经存在了很长时间，因此用户对其功能、认知和期望都很清楚。以下是一个非常简单的列表，列出了大多数常见的选择控制器的类型和使用场景：

一、不要误用「拨动开关」

当涉及到层次结构选项时，不要使用拨动开关。它不仅在视觉上容易分散注意力，而且在使用时也容易导致误判。

二、别忘了「未定状态」

对于复选框，通常只有两种状态：选择和未选择。如果涉及多层次、具有父子结构的复选框系统，则父复选框的状态可能介于全选和未选之间，因为子复选框的部分选择和部分未选择。「未定状态」很容易被忽视。

三、熟悉不同显示状态的按钮

复选框和单选按钮有两种状态：选择和未选择，拨号开关有两种状态：开启和关闭。在实际使用过程中，它们都有不同的状态，如启用、禁止、悬挂、聚焦和按下。虽然这些状态看起来很多，但它们涉及到实际交互的需要和不同的场景，是实现可靠交互的基础。

四、当功能触发立即生效时，使用拨动开关

拨动开关是标准的数字开关功能。当您使用拨动开关控制器时，确保其触发的功能能立即打开/关闭。如果没有，最好使用单个复选框来代替拨动开关。

5.尽量使用单选按钮而不是下拉菜单

使用单选按钮可以使选项始终可见，方便用户直观地比较和查看，从而减少认知负荷，使表单内容更加清晰透明。

六、排版，方便用户在列表中扫描

左对齐复选框+标签的样式效果最好。这确保了用户能够最快地理解和完成操作，并减少错误的发生。事实上，将复选框靠右对齐也是可以的。在移动终端上显示也有优势——单手操作时更容易选择，点击检查时手指不会覆盖标签内容，但标签文本与复选框不能相距太远。

7.如果垂直空间不够，请用按钮代替框架

使用框架选择控制器的问题是，它与相应的标签分开。当垂直控制器有限时，水平排版将非常狭窄。此时，用按钮代替框架选择要好得多。

八、避免非常规控件样式

按钮风格与整个平台的传统风格有很大的不同，很容易带来额外的认知负担。例如，圆形复选框很容易与传统的单选按钮混淆。

九、使用下拉菜单来承载大量类似的选项

如果选项超过6个，最好考虑将其放入下拉菜单中，因为用户无论如何都无法快速记住和比较所有选项，这也适用于大量、相似或可预测的选项，如10%、20%、30%、等等。

上一篇：广州有哪些平面设计的学校？

下一篇： UI设计的本质及价值是什么？

课程推荐

— Course recommendation —

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

more

UI设计中14条按钮和选框的设计经验

课程推荐

— Course recommendation —

课程

友情链接

关于红喵

快速导航

红喵平面设计