环球观察：体验设计师必知的“时间戳”控件设计

在 UX 设计中，时间戳是时间的展示形式，会对业务带来重要的影响。但在实际中，却很容易被人忽视。时间戳在不同的场景和状态下都有差异化，那么它有什么规律呢？本文结合 58 相关产品的实践向大家阐述时间戳控件的设计方法。

" 时间戳 " 即时间信息的展示方式，它是一个在 UX 设计中经常出现，又容易被忽视的元素。许多人都以为时间戳仅仅向用户传递时间信息，其实它也会对业务带来重要影响。同时时间戳的设计非常灵活，在不同场景和状态下都有差异化设计。那么这其中有什么规律可循呢？本文将结合 58 相关产品的实践向读者阐述时间戳控件的设计方法。

一、时间戳类型

(资料图片)

时间戳的类型分为绝对时间和相对时间两种，二者覆盖了全部的时间戳场景，其中绝对时间强调 " 准确性 "，而相对时间强调 " 即时性 "。

绝对时间和对时间的差异

1. 绝对时间

绝对时间是指事件发生的确切时间，目标为用户提供精确的日期和时间，强调事件的准确性。它由 " 日期（年月日）+ 时间（时分秒）" 的格式组成，既包含时间点也包含时间段，如：" 下午 2:00 开会 "、"2022 年 11 月 1 日～2022 年 12 月 1 日放假 " 等。优势是时间信息传达精准，给用户以确定性，强化对时间信息的感知；缺点是会导致文本过长浪费空间。绝对时间的常用的展示方式有以下 3 种：

"2007 年 2 月 6 日 " 和 "2007-02-06" 是公历日期标准格式，用 "-" 分割时个位数需要加 "0"。

"2007/02/06" 在不同国家有着不同的展示顺序，在设计时需要谨慎使用。

"2007.02.06" 使用英文句号做分割，容易与英文字段混淆造成误解，建议尽量少用。

我们建议平台使用统一的展示方式，以保证统一性同时提升用户感知。

2. 相对时间

相对时间是指事件发生的时间与现在所处时间的差值，目标是提供相对的模糊时间，向用户强调事件发生的即时性。它大多数由 " 日期（年月日）/ 时间（时分秒）+ 定语 " 的格式组成，如：" 帖子发布于 2 天前 "、" 会员 30 天后到期 " 等。使用场景多用于：倒计时、即时性资讯、通知推送等。优势是用户的理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是相较于绝对时间不够精确。

设计时首先要注意单位换算。试想一下随着时间的增加，单位前的数字会不断增长导致字段所占空间越来越大，以至于浪费空间并增加阅读成本。因此时间单位需要随着时间推移而变化，尽可能使用简短的字段描述相对时间，如将 "48 小时前 " 简称为 "2 天前 "，将 "712 天前 " 简称为 "2 年前 "。

其次要关注时间取整。由于相对时间只提供及时性的模糊时间，因此为了降低用户理解成本并节省空间，我们可以将相对时间戳做取整处理，如将 "1 小时 15 分钟前 " 取整为 "1 小时前 "。

相对时间戳的设计注意「单位换算」和「时间取整」

二、时间戳颗粒度

绝对时间戳是由 " 日期 + 时间 " 组成的，在不同场景中设计师会使用不同的颗粒度来设计时间戳。

" 日期 + 时间 " 的组合

1. 粗颗粒度

精确到 " 日 " 的时间戳，作为时间维度的 Tips 应用在各种设计组件中，向用户传达最基础的时间信息。

2. 中等颗粒度

精确到 " 分 " 的时间戳，常用于精确事件的时间展示，有 2 种展现形式：

动态日期：以 "XX 12:00" 的格式出现，多用于时效性强的场景，如聊天信息和新闻资讯。根据时间发生的日期和当日距离有差异化：前一天发生，可写作 " 昨天 "；一周内发生可以写周几，如 " 周二 12:00"；超过一周内发生可以写日月，如 "2 月 6 日 12:00"；超过一年内发生可以加上年，如 "2022 年 2 月 6 日 12:00"。

固定日期：以 "2022 年 2 月 6 日 12:00" 的格式出现，应用于关键时间节点的展示场景，相比较上一种方式更正式且传达的确定感更强。

中等颗粒度的格式差异

3. 细颗粒度

精确到 " 秒 " 的时间戳，应用于金融交易场景，如交易记录、订单记录等。举例：58 到家 App 的订单模块，用户在查看订单记录时，给他们传达强烈的确定感，从而产生安全感并提升对平台信任。

58 到家 APP 的订单模块

倒计时的设计也会精确到秒，并被广泛应用在各类运营活动上。如下图，58 到家的运营活动，用户看到时间一分一秒地流逝对心理造成压力，从而产生激励作用，增强消费欲望。

限时运营活动的倒计时

三、时间戳应用场景

为了能更好地使用时间戳，我们还需要知道它在不同场景下的作用。

1. 重要内容

在设计中作为重要的内容要素使用，来强调关键的时间节点。如运营活动，该场景下时间戳对于活动内容的传达有重要影响，甚至关系到用户能否顺利完成活动任务，如用户能否在规定时间内完成抽奖获得礼物，或能否按时观看直播。因此在设计中需要增强这部分的优先级和视觉表现力。

运营活动的时间要素

2. 行为标记

记录用户的关键行为。在用户进行某个动作后打上时间的标记。很多关键操作都存在可追溯性，包括付款、修改内容、创建产出物等。因此设计时间戳为的是让用户能够在查找相关信息时，实现快速定位。以下图的 B 端产品为例，我们在「智慧营销平台」和「云效 2.0」使用了时间戳引导，方便用户以时间维度查看操作行为。

B 端场景下标记用户的操作行为

3. Tips 信息

用户在浏览产品内容时，时间戳作为该条内容的附属信息，起到补充说明的作用。该场景下时间戳的优先级较低，需要弱化处理。根据内容的差异性可以选择不同的类型和颗粒度，如下图中的收到消息时间使用绝对时间展示从而强调准确性，而 Feed 流中帖子的时效性更强，可以不提供精确时间，故使用相对时间展示。

时间戳 Tips 信息

四、写在最后

不难看出时间戳是一个可灵活运用的设计元素，需要设计师选择合适的类型、格式和颗粒度，并与应用场景紧密贴合，保证用户有良好的体验和感知。它不仅承担着传递时间信息的任务，也可以给业务带来价值，像在 B 端场景下利用时间戳帮助用户追溯操作行为，或在 C 端场景下利用倒计时产生紧迫，感刺激用户消费，从而提升订单转化。

时间戳虽然常见，但它的关注度却不高，许多设计师都是凭主观感觉设计，因此我们从一个理性的视角去梳理时间戳的设计方法，希望这篇文章能帮到你。

作者：李祖威

来源公众号：58UXD（ID：i58UXD），58UXD，全称 58 同城用户体验设计中心。

本文由人人都是产品经理合作媒体 @58UXD 授权发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。