體驗設(shè)計師必知的“時間戳”控件設(shè)計
在UX設(shè)計中,時間戳是時間的展示形式,會對業(yè)務(wù)帶來重要的影響。但在實際中,卻很容易被人忽視。時間戳在不同的場景和狀態(tài)下都有差異化,那么它有什么規(guī)律呢?本文結(jié)合58相關(guān)產(chǎn)品的實踐向大家闡述時間戳控件的設(shè)計方法。
“時間戳”即時間信息的展示方式,它是一個在UX設(shè)計中經(jīng)常出現(xiàn),又容易被忽視的元素。許多人都以為時間戳僅僅向用戶傳遞時間信息,其實它也會對業(yè)務(wù)帶來重要影響。同時時間戳的設(shè)計非常靈活,在不同場景和狀態(tài)下都有差異化設(shè)計。那么這其中有什么規(guī)律可循呢?本文將結(jié)合58相關(guān)產(chǎn)品的實踐向讀者闡述時間戳控件的設(shè)計方法。
一、時間戳類型
時間戳的類型分為絕對時間和相對時間兩種,二者覆蓋了全部的時間戳場景,其中絕對時間強(qiáng)調(diào)“準(zhǔn)確性”,而相對時間強(qiáng)調(diào)“即時性”。
絕對時間和對時間的差異
1. 絕對時間
絕對時間是指事件發(fā)生的確切時間,目標(biāo)為用戶提供精確的日期和時間,強(qiáng)調(diào)事件的準(zhǔn)確性。它由“日期(年月日)+時間(時分秒)”的格式組成,既包含時間點也包含時間段,如:“下午2:00開會”、“2022年11月1日~2022年12月1日放假”等。優(yōu)勢是時間信息傳達(dá)精準(zhǔn),給用戶以確定性,強(qiáng)化對時間信息的感知;缺點是會導(dǎo)致文本過長浪費(fèi)空間。絕對時間的常用的展示方式有以下3種:
- “2007年2月6日” 和 “2007-02-06” 是公歷日期標(biāo)準(zhǔn)格式,用“-”分割時個位數(shù)需要加“0”。
- “2007/02/06” 在不同國家有著不同的展示順序,在設(shè)計時需要謹(jǐn)慎使用。
- “2007.02.06” 使用英文句號做分割,容易與英文字段混淆造成誤解,建議盡量少用。
我們建議平臺使用統(tǒng)一的展示方式,以保證統(tǒng)一性同時提升用戶感知。
2. 相對時間
相對時間是指事件發(fā)生的時間與現(xiàn)在所處時間的差值,目標(biāo)是提供相對的模糊時間,向用戶強(qiáng)調(diào)事件發(fā)生的即時性。它大多數(shù)由“日期(年月日)/時間(時分秒)+定語”的格式組成,如:“帖子發(fā)布于2天前”、“會員30天后到期”等。使用場景多用于:倒計時、即時性資訊、通知推送等。優(yōu)勢是用戶的理解成本低,不用通過計算來判斷時間過去或還剩下多久;缺點是相較于絕對時間不夠精確。
設(shè)計時首先要注意單位換算。試想一下隨著時間的增加,單位前的數(shù)字會不斷增長導(dǎo)致字段所占空間越來越大,以至于浪費(fèi)空間并增加閱讀成本。因此時間單位需要隨著時間推移而變化,盡可能使用簡短的字段描述相對時間,如將“48小時前”簡稱為“2天前”,將“712天前”簡稱為“2年前”。
其次要關(guān)注時間取整。由于相對時間只提供及時性的模糊時間,因此為了降低用戶理解成本并節(jié)省空間,我們可以將相對時間戳做取整處理,如將“1小時15分鐘前”取整為“1小時前”。
相對時間戳的設(shè)計注意「單位換算」和「時間取整」
二、時間戳顆粒度
絕對時間戳是由“日期+時間”組成的,在不同場景中設(shè)計師會使用不同的顆粒度來設(shè)計時間戳。
“日期+時間”的組合
1. 粗顆粒度
精確到“日”的時間戳,作為時間維度的Tips應(yīng)用在各種設(shè)計組件中,向用戶傳達(dá)最基礎(chǔ)的時間信息。
2. 中等顆粒度
精確到“分”的時間戳,常用于精確事件的時間展示,有2種展現(xiàn)形式:
- 動態(tài)日期:以“XX 12:00”的格式出現(xiàn),多用于時效性強(qiáng)的場景,如聊天信息和新聞資訊。根據(jù)時間發(fā)生的日期和當(dāng)日距離有差異化:前一天發(fā)生,可寫作“昨天”;一周內(nèi)發(fā)生可以寫周幾,如“周二 12:00”;超過一周內(nèi)發(fā)生可以寫日月,如“2月6日 12:00”;超過一年內(nèi)發(fā)生可以加上年,如“2022年2月6日 12:00”。
- 固定日期:以“2022年2月6日 12:00”的格式出現(xiàn),應(yīng)用于關(guān)鍵時間節(jié)點的展示場景,相比較上一種方式更正式且傳達(dá)的確定感更強(qiáng)。
中等顆粒度的格式差異
3. 細(xì)顆粒度
精確到“秒”的時間戳,應(yīng)用于金融交易場景,如交易記錄、訂單記錄等。舉例:58到家App的訂單模塊,用戶在查看訂單記錄時,給他們傳達(dá)強(qiáng)烈的確定感,從而產(chǎn)生安全感并提升對平臺信任。
58到家APP的訂單模塊
倒計時的設(shè)計也會精確到秒,并被廣泛應(yīng)用在各類運(yùn)營活動上。如下圖,58到家的運(yùn)營活動,用戶看到時間一分一秒地流逝對心理造成壓力,從而產(chǎn)生激勵作用,增強(qiáng)消費(fèi)欲望。
限時運(yùn)營活動的倒計時
三、時間戳應(yīng)用場景
為了能更好地使用時間戳,我們還需要知道它在不同場景下的作用。
1. 重要內(nèi)容
在設(shè)計中作為重要的內(nèi)容要素使用,來強(qiáng)調(diào)關(guān)鍵的時間節(jié)點。如運(yùn)營活動,該場景下時間戳對于活動內(nèi)容的傳達(dá)有重要影響,甚至關(guān)系到用戶能否順利完成活動任務(wù),如用戶能否在規(guī)定時間內(nèi)完成抽獎獲得禮物,或能否按時觀看直播。因此在設(shè)計中需要增強(qiáng)這部分的優(yōu)先級和視覺表現(xiàn)力。
運(yùn)營活動的時間要素
2. 行為標(biāo)記
記錄用戶的關(guān)鍵行為。在用戶進(jìn)行某個動作后打上時間的標(biāo)記。很多關(guān)鍵操作都存在可追溯性,包括付款、修改內(nèi)容、創(chuàng)建產(chǎn)出物等。因此設(shè)計時間戳為的是讓用戶能夠在查找相關(guān)信息時,實現(xiàn)快速定位。以下圖的B端產(chǎn)品為例,我們在「智慧營銷平臺」和「云效2.0」使用了時間戳引導(dǎo),方便用戶以時間維度查看操作行為。
B端場景下標(biāo)記用戶的操作行為
3. Tips信息
用戶在瀏覽產(chǎn)品內(nèi)容時,時間戳作為該條內(nèi)容的附屬信息,起到補(bǔ)充說明的作用。該場景下時間戳的優(yōu)先級較低,需要弱化處理。根據(jù)內(nèi)容的差異性可以選擇不同的類型和顆粒度,如下圖中的收到消息時間使用絕對時間展示從而強(qiáng)調(diào)準(zhǔn)確性,而Feed流中帖子的時效性更強(qiáng),可以不提供精確時間,故使用相對時間展示。
時間戳Tips信息
四、寫在最后
不難看出時間戳是一個可靈活運(yùn)用的設(shè)計元素,需要設(shè)計師選擇合適的類型、格式和顆粒度,并與應(yīng)用場景緊密貼合,保證用戶有良好的體驗和感知。它不僅承擔(dān)著傳遞時間信息的任務(wù),也可以給業(yè)務(wù)帶來價值,像在B端場景下利用時間戳幫助用戶追溯操作行為,或在C端場景下利用倒計時產(chǎn)生緊迫,感刺激用戶消費(fèi),從而提升訂單轉(zhuǎn)化。
時間戳雖然常見,但它的關(guān)注度卻不高,許多設(shè)計師都是憑主觀感覺設(shè)計,因此我們從一個理性的視角去梳理時間戳的設(shè)計方法,希望這篇文章能幫到你。
作者:李祖威
來源公眾號:58UXD(ID:i58UXD),58UXD,全稱58同城用戶體驗設(shè)計中心。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @58UXD 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議。
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
6