在手机上设置起床闹钟或者提醒事项时，我们都会遇到时间选择组件的小伙伴。平日使用中大家都应该对它不陌生，但是提到要设计它，应该遵循怎样的原则去考虑？要注意的方面有哪些？本篇文章将给大家讲讲~
时间选择组件的分类
一、基于需求场景，可以分为“选择时间点”类型和“选择时间段”类型。
如上图示例，在滴滴预约打车的场景下，用户期望师傅能在某个精确的时间点间附近来接驾，由此“选择时间点”类型组件提供了日期、小时、分钟三个维度的选择；在搜索机票的场景下，用户期望对某一段日期范围进行搜索，由此“选择时间段”类型组件提供了日期维度的选择。不同的需求场景催生不同的时间选择组件。
二、基于操作方式可分为：点击型（Click）、滚轮型（Picker）和点击输入型（Click&Input）。
在移动端上，常用点击型和滚轮型这两种类型，一般单时间维度选择的组件用点击型，多时间维度选择的组件用滚轮型。如上图所示，选择自由程度可以从日期、时段、小时和分钟四种维度出发的话，就需要用滚轮型来实现，因为滚轮型可以在一定的操作空间里顺畅地提供用户更多选择。其中滚轮型是基于iOS DesignGuide的官方认证形式，大部分产品为了匹配iOS风格都会使用这种方式；但在安卓上，Material Design把滚轮型稍作了变形，把其操作方式映射为一个时钟的模式，通过滚动时钟表盘的操作来达到选择时间的目的，跟调节机械手表的方式类似。
在PC端（Windows系统与MacOS系统）上，常用点击输入型。如上图最右的方式所示，是从Windows早期年代延展过来的，无论是Windows系统还是MacOS系统上打开也是几乎完全一致的形式。
设计原则
想要为它设计，我们先来明确组件设计的原则。时间选择组件就类似一个小型表单，对于表单而言它的易用价值大于它的感官价值。所以从体感流程上考虑，设计原则有以下三点：
一、想
着手设计之前，应该想清楚场景对时间选择组件的需求程度。这是一个验证需求合理性的步骤，设计应该结合用户使用场景，去评判这个组件对用户需求满足的价值。而且由于使用场景还决定了它的操作复杂程度，组件中的时间内容结构（只可选日期，还是既可选日期又可选小时）也要在这个阶段想清楚。
二、看
得到明确的方案框架后，就需要看组件的构建内容和提示文案上是否都清晰明了地向用户传达功能含义。禁止花哨拐弯抹角的概念传达，功能概念越直接明了且减轻思考成本越好。
三、用
在组件真正使用的过程中操作成本越少越好，因为大家都不想把时间花费在完成表单上。所以在设计落地方案的时候，要保证用户在用的时候操作步骤简单，这样这个“小表单”才能高效地完成它的使命。为什么输入型的操作方式现在越来越少见？就是因为它在所有操作中对比使用而言是最复杂的一种，用户既需要键盘输入又要点击，操作成本大。如果还要兼顾输入操作带来的特殊状态判断，也浪费开发资源，倒不如直接提供点击操作就完成需求了。
以上的原则既定，是将时间选择组件定位于像表单的立场那样思考。后续遇到真正表单设计的时候也可以参考这些原则。
时间选择组件的构造
明确原则后，就可以着手考虑要怎么设计一个时间选择组件了。先从基本构造开始了解：
一、时间信息（要选择的时间维度内容）
二、内容存放区（存放已选择的信息）
三、行为（操作按钮）
四、验证状态（对操作的反馈展示）
一般的时间选择组件都由以上基本元素构成。其中某些场景下，行为（操作按钮）中的最终确认按钮可以被省略。
比如像我在“高铁管家”App上选择乘车时间的时候，时间选择组件承载于一个新页面中，当对我对“7月17号”这个日期点击后，则自动选中并返回上级页面（参考上面动图）。这种方式在操作顺畅上来讲没问题，能让我更快地进入查看搜索结果的流程，也且满足“操作简单”的原则。
从PC端举个栗子
下面通过举例一些常见产品中对时间选择组件的设计，进而剖析设计组件中需要考虑的问题。
在“选择时间段”类型中，举例PC端的两个常见旅游平台“飞猪”和“天巡”作对比分析。评判维度就基于组件的构造元素来分别探讨：
时间信息展示上：展示用户所需
旅游用户的需求都是为未来作计划的，内容展示上用户能直接查看本月和下月两个月时间信息，可以避免过多的翻页操作。其中当天日期被代替以相对时间概念“今天”，原因是由于很大部分情况下大家都会忘记今天到底是几号，今天到底星期几的实时，所以相对概念会比只展示日期数字的方式更直观地表达现在的时间状态，也暗示用户的可选区间从这里开始。
从样式上来看，信息展示隐喻了日历的概念，使表现模型更加符合用户的心理模型。
内容存放区上：提供有效的默认值，文本框水平排布以方便信息确认
内容存放区在PC端上会以文本框形式存在，展示状态有两种：默认状态和已选状态。
在默认状态下，天巡会把文本框中的默认值设置为当天时间至往后四天的日期，而飞猪则将默认值以日期格式信息填充。这样的设置方式来讲，天巡的方式会更好，起码对某些当天出发的用户减少了出发日期的选择成本。但像飞猪设置的时间格式，从理解上来讲，可能大部分人都会懵逼这是什么，容易造成认知疑惑。
在信息排布上，飞猪对出发日期和返程日期的文本框采用了垂直排布，天巡采用了水平排布。从上图中已选状态的对比来看，展开日历弹层选择的状态下，飞猪垂直排布的方式用户无法对两个时间信息进行查看确认。天巡水平排布的方式更适合令用户随时随地地对已选信息进行确认。
行为上：连贯必要操作
天巡中的出发日期选中后，则会触发文本框自动聚焦到返程日期，操作步骤上用户最少点击三次则可完成日期选择。但由于飞猪上不会自动聚焦，所以最少点击次数是四次。又因为聚焦至返程日期文本框的操作是完成日期选择的必要步骤，所以自动聚焦能使操作更加连贯，感受上更加自然顺畅地就能查看到想看的搜索结果了。
还有的是天巡还提供了别的行为操作按钮：如“7月出发”、“8月出发”和“全年出发”。猜测的设计意图是，来搜索机票的用户大部分不一定都有明确旅游时间，可能注重价格偏好的用户会考虑从某个范围的日期内筛选机票，这些操作按钮能将时间选择的成本转化为一步。这里也看出满足了“场景为先”的设计原则。
另外还有两个小细节值得探讨：
①飞猪的时间信息选择弹层的第一页最左侧会有一个置灰的左箭头按钮，由于根本没有展示上月时间信息的必要，所以这个按钮在第一页的情况下完全可以去掉，待用户切换到第二页的时候再出现。
②飞猪中有弹层关闭按钮（最右上角），但天巡的弹层中没有。从飞猪角度考虑，选中就能关闭弹层，点击其他文本框能关闭弹层，点击页面其他非内容区域也能关闭弹层，到底有没有用户会需要一个明显按钮去关闭它？不知道设计者是否有其他意图，从内容复杂性和可用性来讲我认为是可以去掉的。
验证状态上：禁止非常理的错误状态被触发
这个点上飞猪和天巡都是采用了一致的逻辑方式：当出发日期选择了7月4日，返程日期选择了7月8日，在修改返程日期的时候，是不能选择7月4日前的日期。因为这是不符合常理的时间设置。通过系统的操作禁用就能减少不必要的错误状态提示，也减轻了对特殊状态判断的开发成本。
从App端再举个栗子
在“选择时间点”场景中，挑选了iOS端的闹钟和高德地图App来进行对比分析。
时间信息展示上：与PC端类似，以相对时间概念辅助信息定位
比较特殊的是，在高德地图上把滚轮和筛选项的形式结合在一个弹层中了。但仔细看才发现滚轮内容上还有一个“现在出发”的选项，因为选择内容的形式差异性太大，被忽略的概率也会增大。
内容存放区上：基于需求场景提供有效的默认值
在App端上存放区就不一定是文本框内容，比如闹钟就比较特殊，它的确定内容存放在上一页闹钟列表页中。而高德地图则在首次打开的场景便在内容存放区提供了默认值，对于无需打开弹层进行修改操作的用户比较友好，在“选择时间点”类型的场景下，也一般使用当前时间来作为默认值。
行为上：连续的时间点可考虑循环滚动
在闹钟应用中发现一个值得点赞的细节点：当本机系统设置了12小时制，每滚动完小时中的12个数字，会影响到左边上午/下午的时段信息变化。比如当前选择的时间是“上午 11”，当把小时滚轮切换到“12”，左侧滚轮会自动为你切换到“下午”选项。这样的关联性操作能够令时间选择器更加人性化，用户只需聚焦更少的操作区域就能完成需求。但由于高德地图中的滚轮是没有设置循环滚动的，如果采用了这种逻辑的话，也会更加便利，体验来讲对于渐进的日期信息，推荐循环滚动这种方式。
验证状态上：与PC端类似，禁止非常理的错误状态被触发
由于闹钟的时间信息设置不会有非常理情况出现，所以不需要验证。但在高德地图中，如果小时滚轮被切换到了当天过去的时间点，则会被强制自动回滚当前时间点的值。当用户在当前页面停留过久，也会被强制回滚。比如打开页面的时间是今天10点55分，但真正操作时的时间是11点15分，那么点击确定按钮后会被强制切换为“现在出发”选项下的搜索结果。
从可能遇到的特殊状态来看，高德地图都提供了应对措施，且把用户的操作尽量往正确的操作。
如何对时间选择组件进行设计
基于上面所列举PC端和App端的例子可以发现，有的设计方向其实是趋同的。除了遵循设计原则之外，还基于竞品的分析总结了以下六点注意事项来辅助我们更好地设计时间选择组件：
一、遵循场景为先的原则，为实际用户需求设计
开始设计前很重要的步骤，得先明确在哪个用户使用场景设计时间选择组件，需要展示的时间信息维度有哪些，单位时间信息维度内，值与值之间的差距应该是基于什么规则/常理。
二、选择合适的载体和操作方式
时间选择组件的载体有弹窗、页面两种形式。选择方式还是以“操作简单”的原则为前提。
①App端：若是一个主操作（比如设置一个系统闹钟），基于操作形态的稳定性，常规设置页面以页面载体展示，操作方式优先滚轮型。还有像选择日期时间维度的场景，由于本月和下月的日期信息较多，在内容信息量大又需要平铺展示的时候就适宜用页面形式承载。
若是一个辅佐操作（比如在GTD中添加一条代办项，提示时间设置只是个辅助功能），那可以选择弹窗载体展示，操作方式基于功能复杂性选择滚轮型或者点击型。另外基于单手操作的考虑，弹窗还可以考虑底部弹出的形式。
②PC端：一般为非模态弹窗载体展示，操作方式可以只提供点击型。
三、合理设置时间选择组件中的默认值
像上面所提的闹钟和高德地图的形式一样，设置一个默认时间点比设置提示文案或时间格式更有意义。但默认值不仅可以代以当前时间，有的场景还是要回归需求考虑。
举一个项目中遇到的例子讲讲：如上图“京东医生”App截图所示，当时的页面需求为：为医生设计一个添加电话问诊时段的功能，以令医生的可接诊时间展示在患者端前台页面。在考虑默认值设置的过程中，曾纠结了好久到底要把哪个值设置为默认值。
最终从医生的操作需求角度出发，决定提供一个医生常设时段作为默认值，常设时段代表医生们都会经常选择这个时段作为问诊时间，这样设置能方便只添加这个时段区间的医生们快速进行添加。后续也还可以基于医生们的实际添加情况动态调整默认值，以达到更效率的效果。
四、设计操作更加连贯的交互方式
“选择时间点”类型的组件可以考虑单个滚轮满足循环滚动逻辑，令操作区域可以聚焦到某两个甚至一个滚轮中；“选择时间段”类型的组件可以考虑选择开始时间和结束时间是连续操作的，不要从中插入其他多余步骤以额外增加操作成本。
五、注意特殊状态场景的反馈
注意检查当前设计是否会触发选到过去时间点的特殊状态。可以考虑不必要的选择值置灰或者强制正向引导（如上文提到高德地图的逻辑）。
另外对于“选择时间段”类型的组件，如果遇到像上面京东医生App中添加问诊时段的需求场景，注意把连续时段信息合并。因为医生们可以先添加“9:00—10:00”时段，再添加“10:00—11:00”时段。这种情况下，为了保证页面信息更轻量与减轻阅读负担，可以将前端展示逻辑设置为把连续时段合并成一个时段展示，即“9:00—11:00”时间段。这种验证场景也需要先向产品确认可行性并尽量推动落地，以满足更好地展示信息。
六、时间格式的统一性
一般情况下，时间段间用“—”进行连接，时间格式选用“年/月/日”的方式。时间格式中的分隔符到底选“/”还是“-”，没有特别的倾向，只要基于平台统一性和内容展示区域的大小考虑清楚，选择一种合适的即可。
五感下的创新
除了上面所说的设计关注点之外，最近还有其他在时间选择组件中的形式创新诞生，以满足更好地完成使命。
触感反馈
在iOS 7之后，iOS上的滚轮选择器在滚动信息元素时添加了振动触感与滚动音效，令虚拟操作更加逼真。
动效反馈
跟时间选择场景有关的交互创新惊叹之作，便不得不提起“Peek的日历”这款iOS端应用。它利用了炫酷的交互动效，把日历中的时间选择场景做的精致有趣。同时里面使用了很多种内容转场的动效效果，把原本枯燥的功能型场景代入动效，增添了页面活力。
由于该软件如今在中国地区下架了，所以想了解具体效果可以查看官网首页的视频：http://www.peekcalendar.com。或者也可以看看最美应用对这个应用的简单介绍：https://zhuanlan.zhihu.com/p/19683002#!
以上便是我对于时间选择组件的思考与总结，个人观点难免有疏漏，欢迎大家一起讨论学习~
留言说说你有遇到过什么反人类的时间选择组件么？😯
网友评论