app日期选择器的要如何设计?

在使用各种 APP 的过程中,我们经常会遇到选择日期的场景,比如记账的时候、安排行程的时候、购买车票以及预订酒店的时候。有时我们需要选择一个日期,有时则需要选择两个日期或一段日期,那么在不同的使用场景中我们应该使用什么样的日期选择器呢?这篇文章就和大家分享一下日期选择器的常见样式和使用场景。

 

 

 

选择一个日期

有一种场景是单纯地选择一个日期够了,还有一种场景是除了选择日期外还需要添加任务行程,这就用到了两种不同的方式。

1.底部日历弹窗

通过点击页面中的选择日期按钮,页面底部弹出日历,选择完后自动确认。这种方法多使用在只需要选择日期的场景。

优点是:省去多余的操作,用户使用方便。

缺点是:功能单一,除了选择日期外不能进行其他操作。如下图:

以随手记账为例,它的产品目标是让用户记录某天的花销情况,侧重点是让用户选择花销的具体内容和数量,时间是次要的,所以它使用了底部日历弹窗的方式。

 

2.顶部下拉日历

默认状态下,顶部显示一行日历,下拉显示完整日历,可以添加其他功能。这种方式多用在除了选择日期外还需要进行其他操作的场景。

优点是:页面面积大,可添加其他内容。

缺点是:操作相对复杂,用户操作成本较高。如下图:

以滴答清单为例,它的产品目标是让用户安排某天要做的任务行程,用户首先要确定日期,然后再去添加当天的任务,所以它使用了这种方式。

 

 

选择两个日期

有一种场景是单纯地选择一个日期够了,还有一种场景是除了选择日期外还需要添加任务行程,这就用到了两种不同的方式。

1.两个页面间跳转

首先选择完去程时间后,再跳转到第二个页面选择返程时间。常使用在需要选择一到两个日期的场景下。

优点是:比较灵活,既可以选择单个日期,也可以选择两个日期;在日历中添加价格,让用户很轻易地做出对比。

缺点是:两个页面来回跳转增加了操作成本。如下图:

以马蜂窝购买机票的功能为例,它的产品目标是让用户购买单程和往返机票。如果只是购买单程票的话,我们选择完去程日期后直接点搜索就可以了;但是如果要买往返票,我们除了要选择去程日期,还要跳转到另一个页面选择返程日期。这样做既满足了购买单程票用户的需求,又满足了购买往返票用户的需求。

这里需要注意的是:在用户选择返程日期的时候,去程日期要在页面中显示出来,给用户一个反馈,让用户确认自己之前的选择内容无误,再进行下一步操作。

 

2.两个 Tab 间跳转

这种方法是通过一个页面中用两个 Tab 跳转来实现,常用在需要选择两个日期的场景中。

优点是:操作简单,省去来回切换页面的步骤。

缺点是:比较死板,没有上一种方式灵活,只能选择两个日期,如下图:

以携程旅行购买火车票功能为例,它首先让用户选择“单程”还是“往返”,然后跳转到对应的页面,点击单程就只能选择去程的票,点击往返,则可以同时选择去程和返程的票。

 

 

选择一段日期

在预定酒店的时候我们需要选择“入住”到“离开”的这一段日期,常用同一个页面点击两次完成操作的方式。

同一个页面点击两次完成操作

通过点击两下,分别选择两个日期,之间的日期全部包含在内。

优点是:这种方法操作简洁方便,给用户的反馈直观明了。

缺点是:如果没有确定按钮,用户误触后必须重新选择。如图:

上图中,马蜂窝、驴妈妈、携程旅行的预订酒店页面,都使用这种方式,第一次点击选择入住日期,第二次点击选择离店日期。驴妈妈和携程旅行没有确定按钮,如果用户选择错了就必须重新选择。

PS:这种方式也可以用在选择两个日期的场景下,去掉中间的日期就可以了。

 

 

总结

今天主要讲的一件事是日期选择器的常见样式及使用场景,我总结了以下3点:

1.当产品目标是只需要选择一个日期没有其他功能需求时,直接使用较为简洁的弹窗方式即可;如果还有其他需求场景,可选择顶部下拉日期的方式。

2.当产品目标是只需要选择两个日期时,可以使用两个 Tab 跳转的方式;如果既需要选择一个日期,又需要选择两个日期,则可以使用两个页面间跳转的方式。

3.当产品目标是选择一段日期时,可以使用同一个页面点击两次完成操作的方式,这种方式操作简单,反馈直观明了。

 

 

 

作者:青山

公众号:海盐社

每天更新,
全站高品质素材免费下载!