antd 日期时间选择_日期选择器的交互细节

日期选择器在设计中是经常出现的。比起传统的单选按钮、多选按钮，日期的选择形式在交互设计中多种多样。例如，订酒店的日期选择与日历中的日期选择就不同。订酒店的时候，用户更希望了解未来的信息，而且一般会以“天”为单位订酒店。浏览日历的时候，用户可能只是想查某些日子发生的事情，时间跨度可能是年、月、日。因此，它们在设计时的表现形式是有差别的。

设计一个日期选择器有哪些要注意的点呢?

01 时间跨度的选择

下图的两个app例子，一个是提供一周饮食建议的亲问，一个是用来预定机票的Wego，这两个app由于使用场景的不同，提供给用户不同时间跨度的视图。对于用户来说，饮食app展示一周的食谱便已经足够，而预定机票的时候，则需要展示未来几个月的时间跨度才更加便于选择。

Fig 1亲问(left) 与Wego(右图) 日历视图

02 选择单个日期 vs 选择日期范围

Fig 2单个日期输入

Fig 3日期范围输入

是希望用户选择一个日期还是选择一个日期的范围呢?这与实际的业务有关系。下图中可以看到，一个是预订单程机票的场景，另一个是预订双程机票的场景。单程机票的日期选择方式十分直接:单击日期选择框→进入日期选择器→选择一个日期→(确认)→返回界面。

那么双程机票，比较容易想到也可以共用这个流程，只需要再加一个返程的选择器，然后再重复一次就可以了。

Fig 4机票预定日期选择(Jestar App)

但这样毕竟效率比较低，需要选两次，所以进化了一种可以选择范围的日期选择器，可以一次性选择所有的日期，如下图Airbnb选择日期则可以一次性选择一个范围的日期，提升了效率。

Fig 5在同一页面进行日期范围选择(Airbnb)

03 推荐日期

Fig 6默认提示

是否要在打开日期选择器的时候，给用户一个推荐或者提示，这个提示是什么?是否能确保这个提示就是用户最需要的?

下图是使用携程小程序时候的一个截图，那时候是3月份左右，打开的时候会在清明节那一天闪动，过一段时间才会消失，这个原因不言而喻，就是猜测用户意图，预估用户希望预订节假日的酒店。

Fig 7携程小程序

04 日期的优先级

Fig 8不同排序的日期展示

日期选择器如果是以周为时间维度，那么它展现的每周的开始是星期一还是星期天呢，这个我个人其实也没有定论，只能说经过一些观察，大部分与旅游、预订相关的应用(如下图右侧Agoda)都会优先选择以周日为一周的开始，而日程安排类应用(见下图左侧Vegan) 则倾向于选择按照周一至周日为顺序展示日期。

Fig 9从周一开始(Vegan App) VS 从周天开始(Agoda App)

05 用户意图与输入

Fig 10选择前后日期比较价格

用户在输入日期时，他的意图到底是什么呢？是明确的还是不明确呢?

比如机票预订，以我自己为例子，我有时候会选择一个日期，然后对比前后的日期，来选择这个时间段比较实惠的机票，所以结果的展示也包含了前后几天日期的快速切换。因此日期的选择是贯穿于搜索前中后始终的，但是对于用户的意图比较明确的场景，比如查看某一天的球赛。日期的搜索可能展示在搜索前就可以满足用户诉求。

06 日期选择器的出现节点

日期选择的时候，用户有时候希望手动直接填写，有时候则希望在日期选择器中选择。根据场景的不同，日期选择器可以有不同的出现节点。

1)输入文字时

Fig 11在定焦文本框的时候，日期选择器出现

当用户定焦文本框，准备输入时。日期选择框应该在什么时候弹出?是输入文字之前还是输入文字之后?用户是否希望有这个选择?这都是需要权衡的问题。如果日后在项目中有机会的话，我会数据埋点尝试对两种弹出节点进行比较，观察哪种比较吸引用户点击。

2)输入完成后

Fig 12  在完成开始日期输入，继续输入结束日期的时候，日期选择器出现

场景设定在用户需要选择一个日期的范围，开始日期输入完成之后，后续应该怎么做呢?有些设计是在用户填写完第一个日期之后，自动跳到结束日期的选择，这样就保证了使用的流畅性。但这又涉及代码的判断问题，例如，怎样判断用户的开始日期已经输入完毕了？是通过用户的停顿判断，还是根据数据的有无判断，不符合预期的跳转是否会对用户造成干扰？

07 其他

1)黄金预定时间

对于旅游预订类产品，周六、周日是黄金时间，可以适当强调。例如，有的机票预订网站会画一条竖线将周六、周日分隔，以便更清晰地展现给用户。前文提到的日历有很多从周日开始，其实从商业角度来看，周日在头，周六在尾，可能还不是最优的信息展示方式。如果周六和周日能连在一起，是否会更便于用户选择呢?

Fig 13黄金预定时间

2)前馈

在设计日期选择器时，会希望用户的选择总是有结果的，所以有些日期的选择器上会给予提示。下图左侧是NBA的app，日期上会显示每天的比赛场次，右图是机票比价的app，用颜色展示了每个日期的票价对比。

Fig 14 NBA app(左边)&Skyscanner App(右边)

3)定位与返回

钉钉着重于日程与时间安排，可以看到下方左图，3 月旁边有一个“今” 字，这其实是一个隐含的按钮，单击就可以随时定位到今天的日程。而右图(Naver Calendar)则有常驻底部的“Today”按钮，方便用户随时返回今天。

Fig 15回到今天

Fig 16  IOS 日历(左边)&Naver日历(右边)

08 一些随机的想法

Fig 17日历+滑动条奇异结合体

日期选择器是数据选择的一种交互模式，而关于数据选择，也有一些其他的交互模式，比如单选按钮，复选按钮，滑动条，我觉得既然他们都为了类似的目的存在，应该也是存在共通性的吧？也许他们在一定条件下还可以互相结合与转化，变幻出更新形式的数据选择模式？