实用技巧的10个按钮和选框设计技巧

  UI设计是指人机交互、操作逻辑、界面美观的整体设计。良好的UI设计不仅使软件具有个性和品味，而且使软件操作舒适、简单、自由，充分反映了软件的优点，使人们更容易掌握。长期从事金融和企业数字产品设计，在表单和控件设计领域造诣深厚。本文梳理了他总结的10个按钮和框架设计经验，非常实用。

  在UI界面中，各种开关、按钮和框架选择控制器是非常常见的组件，它们看起来并不复杂，但在实际使用中非常精致，它们不仅与体验有关，而且还涉及到一些界面逻辑问题。

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

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

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

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

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

  多选按钮（Multi-select Chips）对于复选框来说，它是一种通用的替代品，用户可以选择其中的多个选项，而且这个按钮大多用于移动设备。

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

  01.熟悉按钮的不同显示状态

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

  02.别忘了「未定状态」

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

  03.不要误用「拨动开关」

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

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

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

  05.避免非常规控件样式

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

  06.便于用户扫描列表中的排版

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

  07.如果纵向空间不够，请用按钮代替框架

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

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

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

  09.使用下拉菜单承载大量类似的选项

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

  10.单选按钮最好提供默认选项

  通常，一旦选择了单选按钮，用户就无法取消选择并恢复原始状态。因此，一些用户可能不愿意做出选择，此时应该提供一个「无」选项。最好提供默认选项，并按逻辑顺序进行排序。

  相对较大的触发区域是确保用户在移动终端上交互的重要基础。允许触发区域包含按钮、文本标签和周围的空白区域，使交互更容易。根据菲茨定律，点击区域的大小对交互有非常直接的影响。复选框和单选按钮通常很小，单击时不容易被击中「瞄准」，尤其是在移动屏幕上。