常见的交互式控件（如日期选择器）通常很容易被我们忽视。正是这些共同元素的设计能够反映产品关注和关注的水平。

日期选择控件（选择器）是一种控件，允许用户选择（填写）应用程序中的日期或时间，尤其是在B端产品中。这种控制看起来很简单，但它的易用性也很容易被忽视。当谈到对此功能的需求时，许多开发人员（当然还有设计人员）会立即说：“互联网上有很多很酷的选择器，它们都是开源的。我们可以找到一个合适的选择。我们不会对于这个浪费时间……”但一切都不是那么简单。大多数开源选择器要么丑陋（主要来自几年前的xp时代设计风格），要么极其难以使用（很多都来自后端实用工具，通用但远不易使用）;当然，也有一些选择器看起来很酷且充满个性，但往往不符合我们产品的规范。/p>

我并没有强调每次我们必须重新创建轮子时，我们只想说日期选择器的设计也应该考虑很多可用性问题。无论是选择现有的开源控制还是改进它，还是完全重新设计出酷炫的个性化风格，都有一些易于使用的原则和建议可以帮助我们创造更好的产品体验。 。

　　1、默认选中项：应该有一个合适的默认值

并非所有控件都具有当前或当前时间的默认值。应根据字段类型确定合理的默认时间，以便用户轻松快速输入或减少点击次数。例如，toB协作工具的待办事项功能，根据我们的场景，创建这些项目通常需要在工作日的最后一天完成，然后我们可以将默认值设置为当前周的星期五;和一个入口用户对生日的控制，默认字段需要根据用户组的年龄给出合理的中间值。例如，如果您的产品核心用户组是20-30岁，那么默认时间最好设置为1990-01-01……想象一下，如果此处的默认时间是当前日期（许多不良设计都这样做），那么几乎所有用户都必须多次点击才能找到他们想要的选项。这个原则很简单，但很容易被忽略。

　　2、控制可选/录入的字段范围

为了减少用户错误并确保正常显示产品数据，日期/时间控件应控制可选范围。有两种常见的控制方法。一种是在选择时使不可选日期变灰。第二是选择后进行检查。如果不符合要求，则无法输入和通知（通常是吐司提示）。第一种方法是在用户选择之前进行验证，以防止用户输入错误的数据，而不考虑错误交互设计;第二个也可以达到限制输入的目的，但需要额外的校验和设计。 （吐司提示或弹出窗口），但我认为这种提示是必要的，因为告诉用户为什么有选项无法选择，可以减少用户的疑虑。

　3、清晰明确的提交或确定按钮

我见过很多非常糟糕的日期控件。选择或切换选项后，还需要单击输入框或空白区域以填写/显示所选项目。特别是结合日期和设定时间的控制。如果没有明确的提交和确定按钮，用户将非常紧张和不堪重负：“我已经选择了，我该如何提交？”当然你会说点击选择器以外的空白区域退出（实际上很多人这样做），但是这并没有给用户提供直观的提示并且需要一定的认知成本。对于您只需要选择日期的情况，自动编写所选项目并在单击时自动关闭控件是合理的。

最好有一个明显的“OK”。按钮

如果没有明确的“OK”，用户将会感到困惑。按钮

　4、减少点击次数

要输入日期范围，用户必须输入两个日期。许多设计师会下意识地使用两个日期选择器，这是完全没必要的。首先，日期选择器可以完成日期范围的输入，而额外的日期选择器将增加用户的点击次数。

结合两个价格控制是一个更明智的选择

当然，如果您使用统一控件并且不想设计新控件，则可以选择：在第一个控件中选择日期时，它会自动聚焦到第二个输入框并弹出选择器。这也可以减少点击次数;但如果用户只想修改其中一次，那么自动弹出另一次会使用户感到困惑和多余。

　5、标识出特定日期

用户并不总是“记忆”来在选择器中显示或标记特殊日期，例如日期，选定的默认值，周末，假日等，以帮助用户做出更好，更快的选择。例如，当您选择购买火车票日期时，确定春节的七天可以帮助许多用户快速选择出发日期并返回城市。毕竟，不是每个人都能迅速做出反应。新年前夜是几个月，第七天是什么数字？这可以减少用户的记忆和判断成本，帮助用户快速做出选择，并避免用户犯错误。

　6、特殊的操作按钮

对于通过填写日期或时间来过滤数据的某些选择器，需要向选择器添加诸如“空”的按钮以允许用户快速清除所选项并返回到数据的初始状态。一些入门型选择器还添加一个类似于“清除”按钮的按钮。允许用户快速清除填写的选项或重新选择。还有一些选择器会添加“今天”           提高运营效率。

　　写在最后

常见的交互式控件（如日期选择器）通常很容易被我们忽视。正是这些共同元素的设计能够反映产品关注和关注的水平。微妙的适当设计往往可以带给我们实用性和情感愉悦。我认为这是设计的重要目标之一。

每日设计总结，欢迎拍砖。

本文最初由@RindyChen出版。未经许可，禁止复制。

地图来自网络