日期选择器设计

今天是日期选择日！在为不同的项目创建了很多这样的项目后，我仍然在寻找完美的项目。让我们试着找出使日期选择器好用或痛苦的原因。

日期选择器设计看起来很简单。事实上，选择日期往往是一个痛苦的经历。糟糕的例子可以在网络上找到。

我真的相信，要设计一个好的体验，重要的是不要从一开始就跳入决策。花点时间提问，找到答案，创建用户故事并浏览网页。

通用日期输入模式

1.文本输入。最简单的方法是让用户输入日期。如果提供了适当的验证，这总是有效的。可以与日历日期选择器一起使用。

日期输入示例

2.下拉选择每个值：日期，月份，年份。仍然经常在网络上使用。会变得非常令人沮丧，特别是如果用户需要输入时间。

夏洛特斯威夫特的出生日期选择器

3.日历。选择日期范围的最常用方法。多个示例可以在网上找到。移动友好。

日历由安德鲁卢卡斯

4.时间表。适合在有限的时间内挑选日期范围。长时间不准确，不适合移动设备。

Bilal的时间线示例

5.在移动设备上滚动日期选择器。很好地工作，当用户不必滚动过去/将来太远。

移动日期选择器

选择合并或单独使用这些模式可以在选择日期时创建良好的用户体验。如何合并它们是每个特定项目的问题。

文本输入和日历模式组合的示例

我们将审查实际用例，因为上下文驱动大多数设计决策（并且最好将其考虑在内！）。我们会尝试为情况选择最佳模式。

案例：设备性能分析。 

用户：技术经理。 

用户的主要目标：分析设备性能，随时检测性能下降。

用户问答

所以我们已经知道我们的用户和他的目标。日期选择器是实现此目标的工具之一。但是在我们抓住那个尖锐的人之前，仍然有问题需要回答。

日期选择器应该用于什么？

“深入到老的性能数据。我想很容易地看到特定时期的报道。“

2.你需要选择一个日期还是范围？

“范围。像6小时范围，或一周。“

3.对于范围选择器，有没有经常使用的范围？

“呃...我经常需要6​​个小时。一个月也会很好。“

4.仅仅是日期选择器，还是应该选择时间？

“我们可以从日期开始。但我如何选择最近的6个小时。“

日期选择器主要用于网络还是手机

“我们专注于网络，也许是平板电脑。但我的管理想要在未来某个时候使用移动版本。不过，我认为它不会起作用。“

6.你需要选择日期，这在很久以前？

“有时我需要查看去年的数据，以查看随时间推移的性能变化。”

7.您目前在这部分产品中的经历有什么不好？

“我必须点击数据表中的页面才能查看过去的报告。这有点令人沮丧，但我已经习惯了。“

草绘它

我们现在所拥有的信息可以确定体验的必要构建模块。

1.Calendar。这可以说是选择日期范围的最常见模式，即移动友好型。 日历的具体细节应该涵盖世界某些地区用户的需求。在我们的情况下，它是星期一至星期日的周表示。这个月拼写为更好的理解。

2.文本输入字段。这个元素将简化选择范围的时间，因为用户将有另一种输入数据的方式 - 输入数据。因此，我们需要“From” - “To”字段以及时间字段。他们将允许用户看到选取的范围并根据需要键入日期。有一点需要记住的是，不同的国家习惯于不同的数据表示。在我们的例子中，dd / mm / yyyy是用户最熟悉的日期格式。

3.时间选择器。这可以是完全不同的帖子，但对于第一次迭代，我们将使用带箭头的文本输入点击小时和分钟。

4.预设。对于经常使用的范围，将提供“显示最后”链接。预设本身应该仔细选择和测试，以提供最佳体验。

下一步是组合这些构建块。迭代时需要修改一些内容。这在最初阶段最终看起来像这样：

设计它

在我们组织完积木后，我们最终可以转移到我们最喜欢的工具上。我创建了一个快速迭代，所以我们可以看到它的外观。

这是该设计的第一个数字版本。我相信它会经历更多的迭代和测试，直到我确信它对用户有效。