专栏名称: PMCAFF

PMCAFF成立于2008年，是国内知名的互联网产品社区；是BAT等国内外一线互联网公司产品经理学习交流的平台，定期出品深度产品观察，互联产品研究首选。

时间选择控件在不同场景下的应用

PMCAFF · 公众号 · 产品 · 2020-11-24 16:40

正文

时间选择控件在产品设计中是一个非常常见且通用的元素，在各种产品中几乎都有应用。随着各种App和网站类产品在不同操作场景中的渗透发展，我们在进行产品设计时也应更追求功能实现方式的“恰如其分”。本文将探讨时间选择控件在各类场景中的选择与应用。

01 什么是时间选择控件

时间选择控件是引导用户选择时刻或时段的一种可操作对象。

时间选择控件的出现，表明了功能的实现需要用户参与设置时间，或用户可以按照时间维度来获取所需信息。并且，它限定了功能中时间可被设置的格式，简化了时间设置的操作流程，避免了用户直接使用键盘输入的情况下可能出现的多次试错操作。

用户通过功能中的时间选择控件，可以快速了解功产品支持的功能操作，并且可以明确产品支持的时间设置格式，节省了用户对产品功能的学习时间。

02 为什么要在功能中加入时间选择控件

时间格式可以看作是文本+数字+符号的选用及组合，具有非常多种。比如，我们在填写一些登记表时，在出生日期那一栏，我们可以写作：1990.1.1或1990/1/1或1990年1月1日，又或1990-1-1等等。

在设计产品功能时，使用时间选择控件和文本录入控件均可完成对时间的设置，但文本录入控件需要用户自行输入，面对时间格式的多种选择，势必会令用户感到为难。

若使用时间选择控件则可以规避这样的问题，这主要是由于时间选择控件具有以下三个作用：

1 、明确时间设置格式

时间选择控件明确了功能中时间设置的格式，用户操作控件进行选择即可。若使用文本输入控件，有太多时间格式可选择，这会在用户操作时给用户带来使用负担。

比如，在Excel中对于时间格式的设置，就有这么多种选择，若将语言切换为英语，还会出现更多类型。

使用时间选择控件，用户可以直接从界面的显示上了解功能中的时间格式，免去了用户对于时间格式选择的苦恼。

2 、增强用户操作的确认感

使用文本录入的形式设置时间，由于时间格式太多又涉及到中英文语言的切换，在输入的时候，用户并不能确认自己选择的格式是否正确。使用时间选择控件，会消除用户操作时的疑虑，增强操作的确认感。

在下图中，需要用户设置预约日期，若是文本录入的形式，很可能会引发用户思考是否需要填写年度信息，还是仅仅输入月份和日期即可。使用时间选择控件，按照控件的设置依次选择年月日后再进行提交，对用户来说更具对操作的确认感。

3 、避免用户错误的录入操作

文本输入的多种时间格式和符号语言类型选择，会明显提高用户错误录入的几率。在多次试错操作后，用户或许仍旧无法完成时间的设置。使用时间选择控件，可以有效降低用户录入错误的几率。

还是举上面填写预约日期的例子，如果用户连续尝试输入多种符号与阿拉伯数字组合成的年月日格式，一直无法成功保存，最后发现功能限制预约日期为纯数字的格式，用户一定会非常崩溃。

03 怎样选择合适的时间选择控件

1 、判断场景中时间要素的类型：

时间选择控件从形式上可大致分为两大类：选择时间点和选择时间段，我们可以根据场景中对时间要素类型的要求来进行引用。

1 ）场景中，功能完成的时间要素为确定的时刻，选择指定时刻的控件。

在这类场景中，用户的行为或功能的执行是在某个时刻发生且能立即完成的，不具备时间上的连续性。

所以，仅需要用户指定一个确定的时刻，即可达成功能的使用目的。

例如设置闹钟及预定车票，闹钟的响起和列车的出发，都是在某个时刻发生的：

2 ）场景中，功能完成的时间要素为一段时间，选择指定时段的控件。

当用户行为或功能执行具有“自某时开始，至某时结束，以及期间内所有时刻，当前操作均生效”的属性时，场景中的时间要素为时间区间，就需要使用至少两个指定时刻的控件来进行时段的设置。这两个指定时刻的控件，分别对应时间段中的开始时间和结束时间。

例如预订酒店的场景，用户需选择“入住日期”及“退房日期”来选出符合入住需求的酒店：

2 、判断场景对时间精确度的要求

在确定时间要素的类型之后，需要判断场景中时间要素的精确度，从而得出时间选择控件的形式。场景中时间要素的精确度，需要满足用户对于时间要素设置的需求，同时避免场景中时间设置功能的冗余操作。

1 ）恰当的时间精确度，需要满足同一场景中不同用户对时间要素的设置需求

我们的产品功能，需要满足不同用户在同一场景下的使用目的，因此对于场景中，用户参与设置的时间要素，我们也应当考虑其精确度上的通用性，即对于时间选择控件来说，选择合适的精确度，以保证不同用户的使用需求。

例如同样是设置提醒，当事件的时间跨度为一天时，例如纪念日，用户需要对事件进行全天提醒设置，则仅需要时间精确度为“天”的时间选择控件即可；若是需要将事件的提醒范围设置成一天中的某个时间段时，时间选择控件的精确度便需要到“小时”或“分钟”。

定义功能中的时间选择控件精确度时，需要满足场景下不同用户的使用需求，提升功能的通用性。

2 ）恰当的时间精确度，应当避免场景中时间设置功能的冗余操作

虽然时间选择控件支持多种时间精确度的定义可以满足不同用户的使用需求，但也不能为此，在不考虑实际使用场景的情况下将时间选择控件的精确度定义得过细。这样反而可能造成用户在使用时间选择控件时，进行在其使用目的之外的多余操作。

例如，在支付宝查看交易记录的场景中，对于普通用户和入驻商家这两类角色的用户，两者用到的时间选择控件精确度是不同的。

商家使用精确度到“秒”的控件，由于其拥有的交易数据量很大，使用精确度更细的时间选择控件，可以便于其筛选目标数据，若是使用精确度更粗的时间选择控件，对于大量的交易数据可能起不到商家希望达到的筛选作用。

如果在普通用户使用的账单产品中，也像商家那样，使用精确度到“秒”的控件，而普通用户却没有这样精确的筛选需求。当看到这样的时间选择控件，用户可能会认为需要按照时间选择控件的格式，一直选择到最细的时间精确度才能完成功能的使用。这无疑为用户带来了产品使用中的多余操作。

粗略来看，常用的时间选择控件的精确度按照由粗到细可分为以下几个层级：

我们可以先根据场景中用户对功能的需求将时间选择控件的精确度定位到较高的层级，再选择对应层级中最合适的精确度。

若是最终选定的精确度颗粒较大，需注意是否满足场景中不同用户对功能的使用需求；若是精确度颗粒较小，则需确认是否会给目标用户造成疑惑，从而进行不必要的操作。

另外，对于指定时间段的同一组控件，开始时间与结束时间的精确度需保证统一。

04 提升时间选择控件在场景下的易用性

经过上面的步骤，基本已经可以确定出我们在功能中引入的时间选择控件是怎样形式与怎样精确度的。

然而，同类型场景下衍生出的各个产品，在功能实现形式上大同小异，却往往有那么几个产品让人感觉特别顺手且便捷。他们的特殊在于，在功能设计上，通过一些小细节提升了产品整体的易用性。

我认为，对于时间选择控件这个元素，可以从以下几个维度来提升产品易用性。

1 、增加参考值

时间选择控件中的参考值，指的是控件中时间在其他维度的属性。

时间参考值的存在，解决了用户面对单一维度的时间展示形式时，难以做出选择的问题。除非用户对时间的选择意愿非常明确，若是时间选择控件中仅展示时间的主体属性，无法体现出不同时间的特性，对用户来说，他面对的选项间没有足够的差异度，就像是要求其从同类项中选出特殊项一样难。

在时间选择控件中增加时间的其他属性，可令时间之间的差异度变得明显，用户借助这些参考值，更容易进行判断并做出决定。

比较常见的做法有，将日期选择控件设计成月历的形式，用户使用时可以参考某个日期对应的是礼拜几。就像在一些出行类产品中，时间选择控件上还会标注公休日、法定节假日，帮助用户顺利地选出时间。

2 、设置初始值

时间选择控件中的初始值指的是，在用户未对时间选择控件进行操作前，时间选择控件中默认选中的时间。

对于时间选择控件设置初始值，能对不熟悉产品功能的用户形成操作引导，直观展示产品功能。某些场景中，时间是数据展示内容的主要决定因素，未对时间进行定义时，无法获取匹配的数据进行展示。面对没有值的操作界面，对不熟悉功能逻辑的用户来说，产品的使用会变得更加难以上手。

所以在这样的功能场景中，通过为时间选择控件定义初始值，可以帮助初次进入功能的用户快速知晓产品功能，进行主动操作后进一步了解产品功能。

通常，在时刻选择控件中，初始值会设置为用户进入当前功能的时间。

时间选择控件在不同场景下的应用

正文

(adsbygoogle = window.adsbygoogle || []).push({});

01

什么是时间选择控件

02

为什么要在功能中加入时间选择控件

03

怎样选择合适的时间选择控件

04

提升时间选择控件在场景下的易用性

请到「今天看啥」查看全文