APP设计中的时间选择器

时间选择器是我们在设计APP时常见的一种控件，用来帮助用户快速高效的选择/录入时间信息。虽然很常见，但若让你针对产品的时间选择功能来设计一款日期选择器，你头脑里是否对它有清晰明确的概念，快速输出合适的设计方案呢？如果没有的话，那么我们接下来就一起讨论一下，那看似简单的日期选择器背后的设计依据和设计要点。

目录

1. 滚轮时间选择器

2. 日历时间选择器

滚轮时间选择器

用来选择一个很具体的时间，比如说出生年月，出发时间等。要快速精准的确定选择的日期，就需要将日期进行维度划分，通常情况下的时间维度有以下几个方面：某年、某月、某日、某时、某分、某秒。具体的展示形式如下：

设计要点：

1. 可以用今天、明天、后天这种时间表述形式（比如滴滴），减少用户理解的成本，辅助用户快速定位。

2. 可以在具体日期后面增加星期几，辅助对时间的理解和记忆。因为对于上学/上班族的我们来说，我们对周的概念会比日期更敏感。当然不是所有的时间选择都适合增加周的概念来辅助，一般预约类的日期选择需要增加，比如会议日程安排、预约专车等等；而特定日期选择的就不需要了，比如生日的选择。

3. 如果是日程安排可以增加上/下午，这样可以将时间选择范围进一步缩小，提升整体时间选择的操作效率。

4. 没有的时间段不展示出来。比如滴滴的预约用车，是不能预约此刻之前时间段的，所以在此之前的时间就可以不显示，这样可以防止用户犯错。

5. 时间维度不能超过5个，考虑到屏幕宽度，太多维度的话视觉上比较拥挤，操作起来也会很费劲，所以在选择时间维度的时候需要克制。

展示方式：

1. 以弹层的形式出现在页面的底部（如上图）

这是最常见的滚轴式时间选择器，在弹层上面有标题栏，有取消/确认的操作按钮。

优势：

• 常见，用户没有学习成本

• 有确认按钮，用户选择完自己期望的日期后，会点击确认完成时间的选择，对用户来说有选择的终点

• 不改变页面框架结构，实现成本比较低，很多APP甚至会直接选择系统控件

劣势：

• 操作路径比较长，触发时间选择的位置距离底部弹层比较远，

2. 展示在页面内部

这个主要出现在日程安排的功能界面里，为的是方便在当下及时快速的操作，比如TIM和IOS原生日历的日程安排

优势：

• 直接展示在选择位置下方，用户操作路径短，录入效率更高

劣势

• 学习成本高，因为时间选择完成后没有确认按钮，用户在使用的时候会比较迷茫，不确定选择的终点，小心翼翼的点击下一项才发现，原来下一项的触发就是对上一个选择的确认。

• 会改变页面框架，技术实现成本比较高。

日历时间选择器

日历选择器就是将时间以日历的形式进行排布，这种形式可以让用户对时间有清晰的概念，帮助用户选择需要的日期。它的使用场景下有两个大类，一种是单纯的时间选择，一种是对选择的时间做记录。它俩的外表基本相似，交互细节和设计要点有所不同，下面我们分开来介绍一下。

1. 时间的选择

• 它可以进行时间段的选择，比如在马蜂窝预定酒店的时候，需要选择入住时间和离店时间；

• 选择时间时需要其他信息辅助，且这个辅助信息有前后的对比关系。比如在携程买机票的时候，价格是选择日期的一个非常重要的判断标准，用户需要对比前后的票价，选择性价比更高的机票，这样通过日历的形式用户不仅可以快速定位日期，也能直观清晰的对比前后的票价。

设计要点：

• 基本形式跟纸质的日历是一样的，不同的是只用在日历的最上方展示周（日、一、二、三、四、五、六），下方以月为单位进行排布，可以进行上下滑动。

• 选择的时间段会局限在一个范围内，比如马蜂窝入住时间选择范围在1年内，12306时间选择范围在1个月内。

• 不能选择的日期会显示出来，但是会与可选择的日期做明显的区分，一般会降低文字灰度，且用户不能选中。

• 选择时间段时，在选择确认附近展示选择的时间段和选择的天数，帮助用户确认选择的内容，辅助用户校验。

• 默认展示日历为当月。

2. 时间的记录

• 长期连续记录，需要以时间为依据进行数据的对比分析。比如鲨鱼记账、美柚（女生生理期记录）

设计要点：

• 这种记录形式的日历，因为下方有数据显示，所以日历的翻动方式是左右滑动

• 有回今天的功能。因为用户会反复查看前面记录的数据，这样一个功能就非常方便用户在查看数据之后迅速回到今天进行相关的数据记录。

• 与滚轴时间选择器相结合，在选择月份的时候会使用滚轴式时间选择器（如下图）

展示方式：

1. 新页面展示（如上图）

如果你所设计的产品，承载了时间段的选择，承载了辅助信息，记录数据等功能，这种情况下日历的功能操作会比较复杂，界面内容也比较多，就需要这种承载力度大的单独页面来能满足功能复杂性的要求。

2. 弹层展示（如下图）

常用在轻量化的日程安排功能里面，用户在做日程安排的时候，需要对时间有清晰的概念，同时日期又只是一个轻量化的选择，所以这种就会选择这种弹层的日历形式。

如下，Thing是做日程安排的软件，得到的学习计划安排。

总结

时间选择器有两种常见的表现形式：

• 滚轮时间选择器，主要用于单一具体时间的选择，比如生日、出发时间等；

• 日历时间选择器，这种表现形式可以让用户对时间有清晰的概念认知，可以辅助用户进行时间段的选择，展示辅助信息，并且对时间进行记录。

在做产品设计的时候，首先分析自己所设计的产品的功能属性是什么样的，再根据实际的需求选择合适的时间选择器，希望本片文章对你有所帮助，如有任何疑问，欢迎留言一起探讨~~

参考链接：

《解析APP中的2大时间选择器》https://mp.weixin.qq.com/s/rcSyzglzKYJlU1YwgULgsg

海盐社开放招新，后台回数字“2”，查看详情