一个完美日期选择器的ui设计过程

在为不同的项目创建了许多日期选择器之后，我仍然在寻找一个完美的设计。让我们试着找出是什么因素让日期选择更好用。

我真的相信，要设计一个好的体验，重要的是不要从一开始就匆忙做出决定。而是花点时间问问题，找到答案，创建用户故事，探索网络。

常用数据输入模式

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

日期输入示例

2.下拉 选择每个值:日期、月、年。仍然经常在网上使用。可能也会很麻烦，特别是如果用户也需要输入时间的话。

出生日期:夏洛特·斯威夫特

3.日历 最常用的选择日期范围的方法。可以在网上找到多个例子。适合移动设备。

日历作者:安德鲁·卢卡斯

4.时间线 适合在有限的时间内选择一个日期范围。较长的时间间隔可能会变得不准确，对移动设备不友好。

时间轴的例子：Bilal

5.滚动 移动设备上的日期选择器。工作得很好，用户不必滚动到过去/未来太久。

移动日期选择器

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

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

我们将回顾真正的用例，因为上下文驱动大多数设计决策(最好考虑到它!)我们将尽力根据情况选择最好的模式。

案例: 设备性能分析。

用户：技术经理。

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

用户问答

所以我们已经知道了我们的用户和他的目标。日期选择器是实现这一目标的工具之一。但在我们抓住这个问题之前，还有很多问题需要回答。

1.日期选择器应该用于什么?

“找以往的性能数据。我希望很容易地可以看到某个时期的报告。”

2.你需要选择一个具体的日子还是一个范围?

“一个范围。大概6个小时，或者一个星期。”

3.对于范围选择器，有经常使用到的时间范围吗?

“我经常需要6个小时。一个月用的也不少。”

4.是否只有日期选择器，需不需要选择具体的时间?

“我们可以从日期开始。重要的是我如何选择最后6个小时。”

5.日期选择器主要用于网络还是移动设备?

“我们关注的是网络，或许是平板电脑。但我的管理层想在未来的某个时候推出手机版。不过，我认为这可能性不大。”

6.你需要选择可以追溯到很久以前的日期吗?

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

7.目前产品哪部分的体验是不好的?

“我必须单击数据表中的页面以查看过去的报告。这有点麻烦，但我已经习惯了。”

草图

我们现在拥有的信息允许定义体验的必要构建块。

1.日历。这可能是选择日期范围最常见的模式，它对移动设备很友好。

日历的细节应该涵盖世界某些地区用户的需求。在我们的案例中，是周一到周日的代表。这个月的拼写是为了更好地理解。

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

3.时间选择器。这可以写一篇完全不同的文章，但是对于第一次迭代，我们将使用用鼠标点击选择分钟或小时，再用文本输入的方法。

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

下一步是合并这些构建块。有些东西需要在迭代时进行更改。在早期阶段是这样的。

设计

在我们组织好构建块之后，我们终于可以转向我们最喜欢的工具了。我创建了一个快速迭代，这样我们就可以看到它的样子。

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