【交互设计】选择时间设计

作者：Mufly

对于不少手机应用来说，都有一个选择时间的功能，那么从交互体验的角度来看，这个时间选择表格应该如何去设计比较理论呢？

时间选择，常见的一般分：

1、具体时间点选择，这种类型侧重于具体的时间点选择，而日期一般限制在今天或明天，比如：线上电影订票，一天内会提供很多不同时间点让用户选择；

2、具体日期选择，这种类型侧重于具体日期的选择，时间点一般会固定一个。比如：线上旅游产品预定，一般每天固定一个时间点发团；

3、两者结合，先选择具体的日期，再选择具体的时间点。

这篇文章只探索“侧重具体时间点”的方式，至于“侧重日期选择”的方式，文章最后以一个实例来带过。

说到时间选择表格，也许最先联想到的是“日历”

这种表格方式，确实很直观，也很符合我们的行为习惯，从这种常规的表格方式，我们可以演变出如下形式：

把当天之内，可以“选择的具体时间点”直观的展示出来，让用户浏览后，直接选择想要的时间点

但是，这种方式从用户的视觉路线来说，并不是最快捷的

我们进一步改进这个布局，得到

视觉路线是这样的，更符合时间的叠加，用户可以更直观的滑动选择时间点

这样就完了吗？还没有，上面的例子，我们只是假设每30分钟为一个单位

如果我们每15分钟一个单位呢？时间点变得更多，这种布局就不合适了，我们要如何改进呢？

改为这种形式吗？点击上下箭头，时间单位递增或递减。

这样的体验上，是相当复杂的，因为时间点变成了每15分钟一个单位，每一小时就会有4个时间点可选

假如初始化时9：00，用户需要选择11：00的时间点，就需要跨过8个选项，对于手机用户来说，这个操作是十分繁杂的

那么怎么去优化呢，可以把时钟跟分钟分开来，变成如下图：

这样虽然增加了用户的选择次数，但是降低了整体用户选择的成本。

到这就结束了吗？

其实，我们可以利用一个小小的交互动作，就可以让前面那个方案操作成本更低

利用手机触屏的操作特性，结合视觉引导，做成手指滑动选择的“老虎机”；

这样用户通过快速滑动，可以粗略的定位时钟，在通过慢速的滑动，选定分钟的数据。

比如：初始时9：00，我需要选择14：00，那么我快速滑动“老虎机”，看到时钟靠近14点时，我转为慢速滑动，最后定位在14：00

那么这种方式就是最好的方式吗？

其实还不是，因为交互没有最好的方式，只是最合适的方式。比如初次见到这种选择时间点的方式，用户可能不知道可以滑动，这时候就需要适当的新手指导了。

这里更多的是抛砖引玉，交互设计中思考的过程才是核心。

• 最后来研究一个实例——芒果旅游网app（安卓版）

文章前面探索了侧重时间点的方式，这个实例就来探索侧重日期选择的方式，例子来自“芒果旅游网app” - 酒店预订 - 时间选择页面。

第一眼，好像没什么问题，常见的一个界面

仔细思考后，发现这里采用了情感化的设计，在日历中，引入了今天、明天和后天。

再深入思考，不对啊，这里的情感化设计过度了，反而导致不少问题

存在问题：

如果用户计划出行日期为26号，现在准备来选日期，眼睛扫了一样，没发现26号。

思路1：发现了24号和28号，通过24号或28号推算，得到了26号的位置。

思路2：记得今天是25号，推算出，26号等于明天，找到明天的位置。

这是用户寻找26号的思路过程，也许脑袋转得快的，能一下子就找到26号的位置。但是这样一个思考流程，还是存在可以优化的地方。

优化方案：

去掉明天和后天，保留今天就行了，设计合适就好，不需要过度。

如果用户需要寻找26号，那么一眼就能找到。

如果用户不知道今天几号，只是想明天或后天出行。那么他只需要找到今天的位置，然后就可以推出明天或后天的位置。

为什么这里用具体日期比用明天和后天更好呢？

明天和后天，在日历里是以相对位置存在

而具体日期，则是绝对位置存在

对于有长久计划的出行人，一般都是用具体日期来安排

对于短期临时有出行需求的人，也许忘记今天是几号，但是通过今天这个坐标，他们很容易推出明天或后天的位置来。反之通过今天、明天、后天这些词，或者通过前后具体日期来推算出行的具体日期，难度相对比较高。

另外，对于图中的节日显示方式，在节日名称的上方，增加具体日期会更好些，方便用户快速寻找某一天的位置。

原：

优化后：