UI组件——选择控件简介
发布网友
发布时间：2022-09-25 04:25
共1个回答
热心网友
时间：2023-09-15 09:49
掌握在哪些情况下使用哪些选择控件可以使您的表单更有用。了解哪些图标用于哪些选择控件也是表单设计的一个重要方面。
选择控件有两种主要类型：复选框和单选按钮。复选框是唯一允许用户多选多个选项或使用零个选项的选择 控件 。单个复选框的选择不取决于列表中的其他复选框是选中还是未选中。
您可以使用独立的复选框来启用或禁用选项，例如在新闻通讯注册表单上授予发送电子邮件的权限或同意条款和条件。
如果您有多个相关的复选框选项，请考虑包括全选/取消全选按钮。
复选框图标 应该是方形的，带有复选标记或 X 表示选中的复选框。虽然创建独特的图标形状可能很诱人，但统一的元素可提供跨系统的一致性。方形复选框意味着您的界面对用户来说将是直观的，他们不必花时间熟悉您产品的 UI。
当一个复选框下有多个“子”复选框，并且有的被选中而有的没有被选中时，父复选框将显示为 不确定状态 。它通常用水平线或正方形表示。
当只能选择一个选项时，使用单选按钮是有意义的。对于付款方式、交付类型或类似选项，您可能需要 单选选项 ，如果多个选项会造成混乱。
与复选框相比，单选按钮选项是互斥的，选择一个选项会取消选择之前在列表中选择的任何其他按钮。创建单选按钮时，始终启用默认选择，设置最安全的选项以防止数据丢失。
切勿将单选按钮用于应立即生效的命令。
单选按钮图标 是圆形的，基于早期收音机上的物理按钮。它们是在内部使用点或实心圆圈来显示所选选项的轮廓圆圈。
与复选框一样，坚持单选按钮的标准设计很重要，以防止用户混淆。
图标形状 对于选择控件很重要。遵守约定（方形表示复选框，圆形表示单选按钮，圆角矩形表示开关）使您的 UI 对于新用户来说更加直观，并有助于消除对如何与表单交互的困惑。
您的 标签大小 需要足够大，以便用户在填写表格时轻松阅读它们。虽然理想尺寸因平台而异，但 14 像素通常是一个安全的选择。调整标签的重量和颜色，使它们不像正文那样突出，同时仍然保持可读性。
为了提高可用性，请为复选框或单选按钮等内容创建 可操作的标签 。可操作标签是可点击的，这意味着用户可以点击选择的任意位置来激活它。确保可点击区域足够大，让人们可以舒适地点击，尤其是在触摸界面上。在桌面 UI 上，使用指针光标指示标签可单击。
在您的选择控件和标签周围包含足够的空白区域非常重要，这样它们就不会拥挤并且更容易扫描。 标签边距 将标签与选择控件分开，为它们提供喘息空间并允许用户更快地完成表单。
但是，较大的边距使用户很难分辨哪个标签对应于哪个选择控件，尤其是在选项列表很长的情况下。
标签有一个主要功能——让用户不必思考。这意味着避免使用模棱两可、可能令人困惑的 标签命令 对您来说至关重要。以关键字（通常是动词）开始您的标签，并删除任何多余的短语或问题。
标签应该简短明了，如果是开关，它们应该指出开关打开时会发生 什么 。
标签应该简洁明了。您可以通过大声朗读标签并添加“开/关”来检查它是否有意义。
将您的输入对齐到屏幕左侧的单个列上。为什么？有两个原因：
单一的垂直线更容易遵循。
研究表明，使用从左到右语言的用户倾向于从屏幕左侧开始扫描页面。
你仍然可以使用水平布局，但是你的按钮和标签应该被安排好，以便用户可以毫不费力地分辨出哪个选项对应于哪个标签。
在移动设备上使用开关打开和关闭 选项 时，请确保将这些开关对齐到屏幕的右侧，同时保持标签与左侧对齐。由于设备屏幕的大小不同，这种 移动对齐方式 使界面更易于扫描和使用。
切换开关 是选择控件，仅提供 2 个互斥选项（通常为“开”或“关”）并且始终具有默认值。
拨动开关是更改即时反馈的系统设置的最佳解决方案，例如打开暗模式或飞行模式。
拨动开关的选择立即生效。另一方面，在选择复选框选项后，用户必须按下提交按钮。
切勿在表单中使用带有其他选择控件或需要用户单击保存或提交的输入的切换开关。
