在UX設(shè)計(jì)中，時(shí)間戳是時(shí)間的展示形式，會(huì)對(duì)業(yè)務(wù)帶來重要的影響。但在實(shí)際中，卻很容易被人忽視。時(shí)間戳在不同的場景和狀態(tài)下都有差異化，那么它有什么規(guī)律呢？本文結(jié)合58相關(guān)產(chǎn)品的實(shí)踐向大家闡述時(shí)間戳控件的設(shè)計(jì)方法。

“時(shí)間戳”即時(shí)間信息的展示方式，它是一個(gè)在UX設(shè)計(jì)中經(jīng)常出現(xiàn)，又容易被忽視的元素。許多人都以為時(shí)間戳僅僅向用戶傳遞時(shí)間信息，其實(shí)它也會(huì)對(duì)業(yè)務(wù)帶來重要影響。同時(shí)時(shí)間戳的設(shè)計(jì)非常靈活，在不同場景和狀態(tài)下都有差異化設(shè)計(jì)。那么這其中有什么規(guī)律可循呢？本文將結(jié)合58相關(guān)產(chǎn)品的實(shí)踐向讀者闡述時(shí)間戳控件的設(shè)計(jì)方法。

一、時(shí)間戳類型

時(shí)間戳的類型分為絕對(duì)時(shí)間和相對(duì)時(shí)間兩種，二者覆蓋了全部的時(shí)間戳場景，其中絕對(duì)時(shí)間強(qiáng)調(diào)“準(zhǔn)確性”，而相對(duì)時(shí)間強(qiáng)調(diào)“即時(shí)性”。

絕對(duì)時(shí)間和對(duì)時(shí)間的差異

1. 絕對(duì)時(shí)間

絕對(duì)時(shí)間是指事件發(fā)生的確切時(shí)間，目標(biāo)為用戶提供精確的日期和時(shí)間，強(qiáng)調(diào)事件的準(zhǔn)確性。它由“日期（年月日）+時(shí)間（時(shí)分秒）”的格式組成，既包含時(shí)間點(diǎn)也包含時(shí)間段，如：“下午2:00開會(huì)”、“2022年11月1日～2022年12月1日放假”等。優(yōu)勢(shì)是時(shí)間信息傳達(dá)精準(zhǔn)，給用戶以確定性，強(qiáng)化對(duì)時(shí)間信息的感知；缺點(diǎn)是會(huì)導(dǎo)致文本過長浪費(fèi)空間。絕對(duì)時(shí)間的常用的展示方式有以下3種：

1. “2007年2月6日” 和 “2007-02-06” 是公歷日期標(biāo)準(zhǔn)格式，用“-”分割時(shí)個(gè)位數(shù)需要加“0”。
2. “2007/02/06” 在不同國家有著不同的展示順序，在設(shè)計(jì)時(shí)需要謹(jǐn)慎使用。
3. “2007.02.06” 使用英文句號(hào)做分割，容易與英文字段混淆造成誤解，建議盡量少用。

我們建議平臺(tái)使用統(tǒng)一的展示方式，以保證統(tǒng)一性同時(shí)提升用戶感知。

2. 相對(duì)時(shí)間

相對(duì)時(shí)間是指事件發(fā)生的時(shí)間與現(xiàn)在所處時(shí)間的差值，目標(biāo)是提供相對(duì)的模糊時(shí)間，向用戶強(qiáng)調(diào)事件發(fā)生的即時(shí)性。它大多數(shù)由“日期（年月日）/時(shí)間（時(shí)分秒）+定語”的格式組成，如：“帖子發(fā)布于2天前”、“會(huì)員30天后到期”等。使用場景多用于：倒計(jì)時(shí)、即時(shí)性資訊、通知推送等。優(yōu)勢(shì)是用戶的理解成本低，不用通過計(jì)算來判斷時(shí)間過去或還剩下多久；缺點(diǎn)是相較于絕對(duì)時(shí)間不夠精確。

設(shè)計(jì)時(shí)首先要注意單位換算。試想一下隨著時(shí)間的增加，單位前的數(shù)字會(huì)不斷增長導(dǎo)致字段所占空間越來越大，以至于浪費(fèi)空間并增加閱讀成本。因此時(shí)間單位需要隨著時(shí)間推移而變化，盡可能使用簡短的字段描述相對(duì)時(shí)間，如將“48小時(shí)前”簡稱為“2天前”，將“712天前”簡稱為“2年前”。

其次要關(guān)注時(shí)間取整。由于相對(duì)時(shí)間只提供及時(shí)性的模糊時(shí)間，因此為了降低用戶理解成本并節(jié)省空間，我們可以將相對(duì)時(shí)間戳做取整處理，如將“1小時(shí)15分鐘前”取整為“1小時(shí)前”。

相對(duì)時(shí)間戳的設(shè)計(jì)注意「單位換算」和「時(shí)間取整」

二、時(shí)間戳顆粒度

絕對(duì)時(shí)間戳是由“日期+時(shí)間”組成的，在不同場景中設(shè)計(jì)師會(huì)使用不同的顆粒度來設(shè)計(jì)時(shí)間戳。

“日期+時(shí)間”的組合

1. 粗顆粒度

精確到“日”的時(shí)間戳，作為時(shí)間維度的Tips應(yīng)用在各種設(shè)計(jì)組件中，向用戶傳達(dá)最基礎(chǔ)的時(shí)間信息。

2. 中等顆粒度

精確到“分”的時(shí)間戳，常用于精確事件的時(shí)間展示，有2種展現(xiàn)形式：

1. 動(dòng)態(tài)日期：以“XX 12:00”的格式出現(xiàn)，多用于時(shí)效性強(qiáng)的場景，如聊天信息和新聞資訊。根據(jù)時(shí)間發(fā)生的日期和當(dāng)日距離有差異化：前一天發(fā)生，可寫作“昨天”；一周內(nèi)發(fā)生可以寫周幾，如“周二 12:00”；超過一周內(nèi)發(fā)生可以寫日月，如“2月6日 12:00”；超過一年內(nèi)發(fā)生可以加上年，如“2022年2月6日 12:00”。
2. 固定日期：以“2022年2月6日 12:00”的格式出現(xiàn)，應(yīng)用于關(guān)鍵時(shí)間節(jié)點(diǎn)的展示場景，相比較上一種方式更正式且傳達(dá)的確定感更強(qiáng)。

中等顆粒度的格式差異

3. 細(xì)顆粒度

精確到“秒”的時(shí)間戳，應(yīng)用于金融交易場景，如交易記錄、訂單記錄等。舉例：58到家App的訂單模塊，用戶在查看訂單記錄時(shí)，給他們傳達(dá)強(qiáng)烈的確定感，從而產(chǎn)生安全感并提升對(duì)平臺(tái)信任。

58到家APP的訂單模塊

倒計(jì)時(shí)的設(shè)計(jì)也會(huì)精確到秒，并被廣泛應(yīng)用在各類運(yùn)營活動(dòng)上。如下圖，58到家的運(yùn)營活動(dòng)，用戶看到時(shí)間一分一秒地流逝對(duì)心理造成壓力，從而產(chǎn)生激勵(lì)作用，增強(qiáng)消費(fèi)欲望。

限時(shí)運(yùn)營活動(dòng)的倒計(jì)時(shí)

三、時(shí)間戳應(yīng)用場景

為了能更好地使用時(shí)間戳，我們還需要知道它在不同場景下的作用。

1. 重要內(nèi)容

在設(shè)計(jì)中作為重要的內(nèi)容要素使用，來強(qiáng)調(diào)關(guān)鍵的時(shí)間節(jié)點(diǎn)。如運(yùn)營活動(dòng)，該場景下時(shí)間戳對(duì)于活動(dòng)內(nèi)容的傳達(dá)有重要影響，甚至關(guān)系到用戶能否順利完成活動(dòng)任務(wù)，如用戶能否在規(guī)定時(shí)間內(nèi)完成抽獎(jiǎng)獲得禮物，或能否按時(shí)觀看直播。因此在設(shè)計(jì)中需要增強(qiáng)這部分的優(yōu)先級(jí)和視覺表現(xiàn)力。

運(yùn)營活動(dòng)的時(shí)間要素

2. 行為標(biāo)記

記錄用戶的關(guān)鍵行為。在用戶進(jìn)行某個(gè)動(dòng)作后打上時(shí)間的標(biāo)記。很多關(guān)鍵操作都存在可追溯性，包括付款、修改內(nèi)容、創(chuàng)建產(chǎn)出物等。因此設(shè)計(jì)時(shí)間戳為的是讓用戶能夠在查找相關(guān)信息時(shí)，實(shí)現(xiàn)快速定位。以下圖的B端產(chǎn)品為例，我們?cè)凇钢腔蹱I銷平臺(tái)」和「云效2.0」使用了時(shí)間戳引導(dǎo)，方便用戶以時(shí)間維度查看操作行為。

B端場景下標(biāo)記用戶的操作行為

3. Tips信息

用戶在瀏覽產(chǎn)品內(nèi)容時(shí)，時(shí)間戳作為該條內(nèi)容的附屬信息，起到補(bǔ)充說明的作用。該場景下時(shí)間戳的優(yōu)先級(jí)較低，需要弱化處理。根據(jù)內(nèi)容的差異性可以選擇不同的類型和顆粒度，如下圖中的收到消息時(shí)間使用絕對(duì)時(shí)間展示從而強(qiáng)調(diào)準(zhǔn)確性，而Feed流中帖子的時(shí)效性更強(qiáng)，可以不提供精確時(shí)間，故使用相對(duì)時(shí)間展示。

時(shí)間戳Tips信息

四、寫在最后

不難看出時(shí)間戳是一個(gè)可靈活運(yùn)用的設(shè)計(jì)元素，需要設(shè)計(jì)師選擇合適的類型、格式和顆粒度，并與應(yīng)用場景緊密貼合，保證用戶有良好的體驗(yàn)和感知。它不僅承擔(dān)著傳遞時(shí)間信息的任務(wù)，也可以給業(yè)務(wù)帶來價(jià)值，像在B端場景下利用時(shí)間戳幫助用戶追溯操作行為，或在C端場景下利用倒計(jì)時(shí)產(chǎn)生緊迫，感刺激用戶消費(fèi)，從而提升訂單轉(zhuǎn)化。

時(shí)間戳雖然常見，但它的關(guān)注度卻不高，許多設(shè)計(jì)師都是憑主觀感覺設(shè)計(jì)，因此我們從一個(gè)理性的視角去梳理時(shí)間戳的設(shè)計(jì)方法，希望這篇文章能幫到你。