移动选择控件

选择控件允许移动用户选择选项、打开和关闭设置、选择日期或日期范围。一些控件看起来可以互换，但它们的错误应用会大大增加交互成本。

正确设计的选择控件可帮助用户在不注意流程的情况下继续执行任务。应用不当的复选框、单选按钮或切换会阻碍用户并减慢他们的流程，迫使他们付出额外的精神或体力努力，从而导致沮丧并最终放弃。

复选框 

复选框 是 UI 组件，允许同时进行多项选择，还允许用户启用或禁用选项。启用后，框内会显示一个复选标记。禁用时，它们是空的。有时，设计人员还使用多级列表的不确定状态来指示从属选项具有不同的状态（启用、禁用或空白）。

复选框类似于拨动开关，但这些控件有不同的应用场景。使用复选框：

• 需要用户最终审核并通过单击提交（或任何相关）按钮确认后生效的操作。

• 选择/取消选择复选框后用户必须采取的其他步骤的表单。

• 一个类别下的多项选择列表。

• 需要视觉上清晰的开/关状态的操作。

在设计复选框时，您应该坚持适用于其他控件（如按钮）的建议。复选框应具有可识别的图标形状和样式以及可访问的触摸目标大小。

对于长长的选项列表，复选框标签通常很短且简洁。但是，单个复选框可以更具描述性——例如，同意产品条款和条件的复选框通常很长且具有解释性。

单选按

虽然复选框允许选择多个选项，但单选按钮只允许选择一个。当它们未被选中时它们是空的，当它们被选中时用一个点填充。

设计师在设计单选按钮时应该记住什么？

• 当您至少提供两个互斥选项时，应使用单选按钮。

• 垂直排列您的列表，每行一个选项以获得更好的可扫描性。水平对齐需要在按钮与其标签之间留出更多空间。否则，用户可能会对哪个标签伴随哪个按钮感到困惑。

• 如果您有 5 个以下的选项，请使用单选按钮而不是下拉菜单。它需要较少的交互成本并且具有较小的认知负荷。这使得单选按钮成为移动界面的更好选择。

• 显示单选按钮的默认值选择。依靠用户研究结果来决定用户更有可能选择哪些选项。

• 允许用户通过点击图标和标签来选择一个选项。

坚持单选按钮的标准视觉表示。避免尝试用户可能不熟悉并导致混淆的样式

切换开关

切换开关 是仅提供 2 个互斥选项（通常为 On 或 Off）且始终具有默认值的选择控件。

由于设计人员有时会错误地将切换开关替换为单选按钮或复选框，因此定义使用场景至关重要：

• 当所选选项立即生效时使用切换。这就是为什么我们经常在“设置”页面使用切换开关，在该页面中选择会立即应用，用户不需要确认他们的决定。

• 确保标签直接清晰。避免使用问题并通过说出开关打开时会发生什么来制定标签

• 使用颜色对比来表示 On 和 Off 状态之间的差异。On 状态应该更具对比性，以便即使有视力障碍的人也能注意到差异。

下拉菜单

下拉菜单是深受用户认可的经典 UI 组件。它们在点击（或单击桌面）时展开并包含预定义选项列表。基本下拉菜单仅允许选择一项，而其他下拉菜单可能允许多项选择，所选标签显示在菜单顶部。

有趣的是，一些研究人员告诫不要使用下拉菜单。首先，下拉菜单会隐藏选项，并且可能会出乎意料地让人不知所措，因为在您点击菜单之前，列表的长度是不可见的。其次，它们需要太多的交互成本，特别是如果列表很长并且需要用户滚动。

在决定添加下拉列表之前，请考虑以下替代方案：

评估选项列表

如果下拉列表中的项目太多，请考虑添加自动建议搜索输入，以帮助用户更快地找到他们需要的内容。此外，优先考虑选项并将最常见的选项放在列表顶部。

使用替代选择控件

如果列表很短（最多 5 个项目），请使用单选按钮等替代选择控件，通过使所有选项可见来最大限度地减少交互。

使用输入而不是下拉菜单

考虑到打字总是需要更多的手动工作，设计师经常避免使用输入。但是，当用户需要提供一些经常询问的数据（例如，出生日期）时，他们可以比从下拉列表中选择值更快地键入文本。

使用智能默认值

调查用户的需求并在下拉列表中提供智能默认值，包括最常见的选择，让用户免于做额外的工作。

让电脑做工作

如果一个系统可以在不要求用户提供这些数据的情况下获得特定数据，那么让计算机来完成这项工作。例如，应用程序可以通过卡号识别卡类型（例如，维萨卡或万事达卡），而无需询问用户。

选择器

选择器是  用于选择日期、日期范围或两者的 UI 组件。单击时，选择器会展开到一个对话框中，并为用户提供一组可供选择的日期选项。

在移动设备上，您会遇到两种类型的选择器。输入选择器要求用户手动输入日期，并且更适合过去或将来的日期（例如，生日或护照到期日期）。

日历选择器在点击时会展开一个带有日期的小对话框。通常，当用户需要选择接近当前日期不超过一年的日期时，设计人员更喜欢这样的 UI 组件。

否则，用户需要滚动很多，这需要太多的努力。

Apple 找到了一个非常优雅的对话框和下拉菜单替代方案——从屏幕底部升起并提供用于选择值的滚轮的选择器。它们可能更方便，但人机界面指南建议仅对中等大小的列表使用选择器，并使用逻辑排序选项来简化流程。

设计日历选择器是一项具有挑战性的任务。以下是一些需要考虑的指针：

在年月之间建立清晰的导航

显示月份和年份的最生动和方便的方法是显示当前年份的所有可用月份，然后在单独的屏幕上显示其他年份。留出足够的空间，避免在对话框中使用额外的下拉菜单。

区分选定日期和当前日期

区分选定日期和当前日期至关重要。这取决于您如何设计它，因为没有既定的规范。例如，谷歌日历使当前日期比所选日期更显眼，而 iOS 日历则相反。

禁用无效日期选项

为防止用户意外选择无效日期，请将其显示为已禁用。当用户尝试点击它们时，使用微妙的灰色或使日期无效。

滑块控件

滑块控件 是用于调整音量和亮度等设置、选择价格范围或应用图像过滤器的 UI 组件。 它们立即生效，并允许用户通过沿 水平轨道移动手柄（称为拇指）来微调值 。随着滑块从左向右移动（在从右向左的语言（如阿拉伯语）中从右向左移动）并且其值增加时，最小值和拇指之间的轨道部分会填充颜色。

在移动设备上，设计师应该小心使用滑块，确保它们易于操作。拇指应具有适当的触摸目标大小，因此即使是老年人或有运动障碍的人也可以毫不费力地拖动它。

您可以自定义轨道颜色、拇指图标以及代表最大值和最小值的左右图标，以强化您的品牌风格并增加对该功能的认可度。

当值的准确性很重要时，滑块不是最佳解决方案。考虑使用单选按钮或简单的输入字段来提供更精确的值并最小化交互成本。

以上内容为转载