网站建设：设计完美的日期和时间选择，日期时间选择怎样设计用户体验好

有什么能设计一个如此困难体面的日期选择器？基本上，我们只需要输入字段，并且表示日历不够清楚的图标，并且一旦用户点击该图标，我们就弹出与排一字排开的日子里一点点覆盖。对？

好吧，不是每一个日期选择器适合所有接口，就像不是每个接口实际上需要一个日期选择器。但是，日期选择器时是必需的，往往它只是有点太繁琐和恼人指定一个日期，也往往会产生不相关的结果，甚至是零结果页面，虽然只是一些小的改进将使它更容易使用。

在过去的几年里，我花了很多时间与多家公司尝试了各种方法和可用性测试研究它们的工作。本系列文章是观察和实验的总结在这段时间做。经过数月的过程中，我们将探讨一切从转盘到汽车配置器。已经调查了手风琴的设计两个星期前，让我们来看看今天将日期和时间选择器的设计-在所有的各个方面和他们的外观和交互设计的味道。

首先第一件事情，虽然：日期选取器通常被认为是万无一失组件的日期选择-可预测的，一致的，通用的-所以往往不是，我们使用它们只是因为他们似乎是日期输入一个普遍接受的模式。但就像任何其他形式的元素，有时他们应该是不得已而为之的方法，帮助用户的输入，如果它不能以更好的方式来推断。现在，有哪里日期选择器是非常有帮助的情况下，并且在有些情况下，他们只是慢下来的用户。我们的工作的话，是要仔细研究我们自己的方案，并找出该帧的时间和日期的问题，帮助用户快速，方便地提供输入的最佳方式。

最好的输入是匹配用户的意图，而无需要求用户精确，当然之一。但是，如果我们设定一个预算上的日期输入至多两个水龙头？三个水龙头的日期范围？5个抽头，如果我们把一个时间段到游戏中呢？你可能会想，如果这真是一个大问题; 毕竟，这只是一个小小的日期选择器！如果日期选择是前面和中心在你的界面，你应该想到用户使用了很多，并走向极端，以优化输入的日期是不是真正的优化问题，相反却是你的网站的体验的核心要素。

事实上，有大量的上下文中，日期选择器重要：无论是用于医疗约会，水疗，船租赁，电视指南，网上银行，没有直达航班，或夏季别墅出租 – 几乎任何要求日期输入有可能有一些不大不小的日期和时间选择的。而更多的，往往不是所有的这些网站往往使用相同的（jQuery的）实现，插入UI而回，从此幸福地遗忘。但是，它可能不适合你的特殊情况下的最佳选择。

日期选择器的设计考虑

如果我们在日期选择器的性质仔细一看，有一个很好的许多设计问题有待解决 – 其中许多人是不能直接在所有：

• 难道我们设计一个日期选择器，日期范围选择器或一个时间选择器？
• 如果用户能够键入一个日期在输入字段或仅使用日期选择器选择预定义值？
• 如果日期选择器覆盖，当用户点击输入出现或者当他们点击日历图标（或两者）？
• 如果该日期选择器包含默认值预填充？如果是，什么样的价值观应该是默认？
• 我们应该包括某种“以前，现在，未来”的导航？如果是这样，我们如何设计好几天，几个月甚至几年？
• 我们应加强通过显示体验可用性，价格等？
• 有关窄屏幕日期范围选择器，应一次两个日期被选择的重叠自动消失，或只在“继续”按钮，用户点击继续吗？
• 如若运行一周从周一到周日或从周日到周六？
• 我们如何避免显示不可用日期或零结果死角？
• 是日期选择器首先使用日期选择正确的模式？

事实上，我们有很多的决策考虑，且大多不是那么简单的。但是，让我们来解决一个问题，在同一时间。我们应该问自己的第一个主要问题是什么问题，并在上下文中我们到底要解决哪有日期选择器的帮助有或者更具体地说，将有助于什么样的日期选择器的用户无缝地完成他们的任务向前推进。

我们需要什么样的投入？

选择一个接口模式适用于您的问题之前，有必要了解什么样日期输入的实际需要是非常重要的。是否足以知道仅仅一天，或者你需要一个日期范围？后者并不意味着你必须使用两个日期拾荒者，虽然，但它会影响相互作用和组件的设计。

您可能还希望与延长日期选择器时输入，但并不意味着经历了逐步发生-日期选择器第一，时间选择第二个。也有办法在一个单一组分两个日期和时间选择集成。我们将在本文稍后探讨其中的一些。

除此之外，它是寻找到预期值的范围，您的访问者将最有可能类型，也许你就需要使用一组预定义的选项延长日期输入，或限制可接受值的范围，或者是个好主意与数字输入补充它使客户能够在手动键入值。事实上，后一种选择可能是有用的，往往不是 – 问题是，这是相当难以得到的权利。

数字输入对于日期范围较长链接

有一两件事是肯定的：如果你一直在考虑一个日期选择器，机会是很高，你知道，你需要某种输入的日期的（废话！）。你可以，当然，使用三个独立的数字输入，通过分隔符号分隔-也许<select>有一天，月和年下拉-但与设计，用户将通过窃听和滚动，这不一定成行最无缝的或快速的体验。我们希望可以尽快选择的日期，并且能够设定日期有两个分（点击可打开日历，并点击挑一天）会比对付三个独立的输入字段要容易得多。

那好吧。如果不是三个独立的输入，我们只保留一个-或许与格式帮手DD/MM/YYYY，例如？当用户开始打字，日，月和年之间的过渡应该发生无缝和自动，这样用户就不需要做任何事情，但继续输入数字键盘上。理想情况下，他们会与之后的输入完成，最多八个按键。显然，我们不能假设用户是否知道确切的日期，但它会做出精准的输入可能的，互补的到正规的日期选择器有用。尤其是在数据输入可以有很大的差异（如使用护照到期日期）接口，输入值，而不是无休止通过窃听年和月只是听起来比较合理的，对不对？

那么，数字输入必须足够可靠来管理各种极端情况-有很多他们。当然，我们会使用某种标签或占位符的指示日，月，年输入的顺序与输入格式的例子，但在线验证应该赶快拿起生病的格式输入，并建议更正向前驱动用户在输入流。当心上一周开始的一天。如果您的公司是国际，大多数客户来自美国，那么你可能需要改变基于用户的位置或偏好，以避免misbookings的UI。

作为可靠也意味着宽容。如果用户想选择2019年3月1日，随着数字输入MM/DD/YYYY，他们将需要输入01 / 03 / 19。作为设计师，这正是我们期待的输入。

现在，如何将用户在数据中该数值输入时输入？如果发现用户在输入一个日期打字，你会看到他们暂停第二，键入1，然后手动切换到一个月输入，类型3，然后手动切换到一年的输入和键入年-无论是19或2019。

其他用户将发挥它的安全和类型03和01明确。还有一些人将尝试包括在任一输入分隔符号。因为在一些实现一次输入激活占位符消失，一些用户会使用比你占了一个不同的分隔符号-通常是一个连字符（-）或斜线（/）。有些用户会尝试通过在输入字段中使用向上和向下箭头增加数值。而有些用户将通过在日期打字时的字段选择选项卡。哦，那是一场噩梦它是在线验证！

用户为什么这样做？这主要是因为他们已经被烧毁，在过去 -由笨重的接口，其数据输入是设计不当，导致来回一个令人沮丧的经历-比如，看到一个错误的理解输入，然后打一个微小的日期或月份选择输入纠正它，但结束了复位其他输入结果。在所有这些情况下，很容易感到沮丧。而在所有这些情况下，设计师的实施应该能够正确地解释输入，并支持用户，而不是抛出左右（带自动完成或智能建议）错误。

保持的日期格式建议（在占位符）当用户激活的输入字段。保持显示的分隔符和占位符为用户手动输入的日期。如果由于某种原因，是不可能的，使用浮动标签继续显示格式（这确实有一定的可访问性问题，但也有一些解决方案也是如此。）

数值输入事项在输入的范围差别很大的情况下-这可能跨越多年，如签证有效日期，或占预测的输入，如生日日期。这就是它的价值投资到合适的数字输入。你甚至可以把它带到一个新的水平，支持实际的上下文敏感的输入。也许不是要求特定的输入格式，可以支持查询，如“昨天”，“现在”，“今天”，“下周五”，“一年前”，“两个星期前”，甚至是“10天进七月。”

根据您的应用程序的性质，允许灵活的日期可能是有用的，并且在打字输入字段中的查询是很容易的。如果这是不可能的，那么它可能是一个好主意，增加对易可点击的，预定义的选项“今天”，“明天”，“7天”等旁边的日期选择器。对于机票的最佳票价搜索时，可以使用它。事实上，这也正是该技术Kremlin.ru使用。当然，你还需要沟通，你支持这种“聪明”的模糊输入突出为好。

虽然数字输入是有用的，这是件好事，它可以作为一个备用，在某些情况下，日期选择器是无限更有用-例如，当客户预订短暂的假期。如果用户正在寻找未来六周内快速周末之旅，但他们没有考虑到具体的日期-相反，他们正在探索的定价和可用性，这意味着他们将几天和几周之间跳跃，并有可能甚至几个月，很多。在这种情况下，数字输入将太慢而劳累，而日历视图会更加的方式有关，因为它显示在抽头的电网一字排开周末选项。

但对于默认值？链接

如果我们检查的日期选取器输入场的相互作用有点接近，我们会在一些围绕其交互设计微型决策绊倒。如果输入域的默认值，还是应该留空，也许是填充了一个日期占位符，显示了正确的输入的例子吗？如果我们使用默认值，其值我们选择呢？一旦用户选择了日期，但刷新页面，应该输入是持久的领域或自动重启？

坦率地说，我们没有测试，也没有我们发现任何偏好，上述任何选项，但似乎为客户设定的随机值是不是真的是最好的选择，因为它会迫使客户“修理”的价值观从看似随意的人，以他们实际上是在寻找的人。然而，如果你的客户可能会购买您网站上的最后一分钟的交易（无论是显示，公共交通或酒店），那么当前的日期（“今天”），甚至当前时间（“现在”）可能是一个不错的选择-尤其是在时间敏感的背景下，像电视指南。最终的决定将来自你已经从你的常客收集的一般行为。

一旦用户选择了日期或时段，但刷新页面（有意或无意），我们可以选择取消选择或保持原样。如果用户不慎刷新，他们不会很高兴他们输入丢失并无需重新键入它。这是令人沮丧的。如果用户故意刷新，他们会看到预定的日期，并有“修理”的日期。这可以说是相当令人沮丧的，除非你提供了一个明显的“复位”或“新的搜索”链接旁边的日期输入。不用手动删除所有先前输入的，客户可以用一个水龙头清除选择。这也是一个微型步进可帮助为好，如日期可能不会显著改变。在这后一种情况下，调整使用两个本地滚轮的日期，例如，将只是太烦人。

简而言之，这是预填充只有当你确信用户可能选择这些日期的日期是个好主意; 同时，坚持数据页面刷新后（除非输入是时间敏感的），并添加一个“重置”链接，使用户能够方便地取消他们的意见。顺便说一句，这重置链接也许应该在日历覆盖可用。

设计日历覆盖链接

有人可能会认为你需要成为真正的创意想出一个独特的设计日历覆盖。毕竟，他们是如此的大部分时间一般！通常情况下，叠加下出现的日期输入字段，且多为上窄屏幕全屏覆盖，并在桌面上一个较小的面板。该天行一字排开，分组为周，下拉菜单导航年和月。然而，事实证明，日历覆盖可以包含各种级别的详细信息和导航。

最简单的问题是，如果连续一周在周一或周日开始？嗯，这取决于你提供服务，你的目标受众。如果一个日期选择器总是包含一年的输入？也许不是在公共交通网站，电视指南或食品配送服务。如果你显示所有日选项和月选项所有的时间？也许不是，如果你正在设计一个汽车租赁网站-你可能不会需要预订一辆车比几个月更提前。如果你是在几个月使用这些服务时，明年可能是一个选项-如在十二月中旬-你可能会离开，不显示年份，因为一月显然是即将到来的今年一月份。

有复杂性给它另一个层面，虽然。在某些情况下，显示一周的实际日（星期一，星期二，等等）是非常重要的（例如，对于需要提前预约）。在其他情况下，这是不相关的（如生日）。有时候我们确实想显示可用性或价格（如订机票）。有时我们想知道一个日期范围（租用夏季别墅）或确切的时隙（餐厅订位），而不仅仅是一个日期。在这种情况下，我们需要补充的日期选择了时隙的选择，或注明起始日期和结束日期以某种方式之间的连接。

这是值得考虑的详细程度在你的日期选择器提供早期帮助用户做出明智的选择更加迅速。如果可用性问题，考虑清楚分离可用和不可用的选项。此外，如果有与不同的日期相关联的不同选项或价格标签，那么它可能是有用的颜色代码，表明更好的票价或更好的可用性。如果很多客户都在上周末预约您的服务，清楚地表明周末以及潜在的公众假期。

你会选择什么，突显在你的界面选择的一天？也许在那一天可用性？也许不同的开启或关闭的时间？在该日期的实物展示运行？这也是一个安全的赌注，以限制或禁用某些选项，或至少提供一个提示在日历立即如果选定的日期范围将不承担预期的结果。

找出关键细节这是给您的客户的重要和显着地暴露它-例如，用灰点（表示不可用）和绿点（可用）。后者可能会出现在不同的尺寸，不同等级的可用性。这并不一定是全详细视图，虽然-有可能，甚至是颜色渐变叠加会做的工作，与可一旦选择的日期逐步披露清单详细视图。

这很容易得到所有这些优良特性和指标中输了，但它也是重要的是获得基本的权利第一。不要忘了注明当天，让客户可以轻松地查看远程日期和当前日期之间的关系。

显然，你将需要一天，大概是一个月的大部分时间，但你可能并不需要显示在今年所有的时间。或者至少，如果当年没有使用那么多，它并没有被作为其他输入身份显赫，并在需要时，用某种或许只出现逐步披露。在所有这些情况下，您还需要包括某种形式的日，月和年之间的导航。它不必是唯一一个select下拉虽然。