在線客服

電話①:189 6508 9135(張先生)
電話②:134 0599 8886(何小姐)
電話③:0591-83489135

品牌設(shè)計


如何設(shè)計「時間顯示」更專業(yè)?


背景

“時間”作為人機交互界面中經(jīng)常出現(xiàn)的元素,本質(zhì)上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯(lián)網(wǎng)產(chǎn)品時會發(fā)現(xiàn),關(guān)于“時間”的顯示狀態(tài)或形式在不同場景、不同頁面里往往是不太一樣的,這是出于怎樣的考慮呢?今天我們就來聊一聊,如何在產(chǎn)品設(shè)計中把握“時間”顯示的訣竅,讓其在頁面中發(fā)揮最大的作用。

“時間”元素的分類

按照“時間”元素在頁面中的出現(xiàn)場景和所起到的作用,可以大致歸為以下幾類:

A. 事件的關(guān)鍵構(gòu)成要素

時間作為描述整個事件的重要組成部分,缺失后會對原本所要傳達的內(nèi)容產(chǎn)生嚴重的影響,進而影響用戶的使用預(yù)期和結(jié)果,比方說用戶可能不能以一個較低的價格完成商品購買,或錯過了產(chǎn)品發(fā)布會的時間。

如何設(shè)計「時間顯示」更專業(yè)?

B. 行為的時間標記

指用戶本人作為行為主體或行為的接收對象,在某一動作發(fā)生后為其所打上的時間標記,比方說“我”購買商品下單的時間或收到一封郵件的時間。

如何設(shè)計「時間顯示」更專業(yè)?

C. 內(nèi)容的附屬信息

用戶在使用產(chǎn)品進行內(nèi)容消費時,時間作為該條內(nèi)容的附屬信息,起到補充說明的作用,比方說一條短視頻或新聞的發(fā)布時間。

如何設(shè)計「時間顯示」更專業(yè)?

在上面的案例中,我們會發(fā)現(xiàn)“時間”在對應(yīng)場景里所發(fā)揮的作用不同,用戶在使用產(chǎn)品時往往對時間存在不一樣的關(guān)注程度。因此我們在做頁面設(shè)計時,要根據(jù)具體場景和用戶訴求判斷“時間”元素的重要性和優(yōu)先級,通常情況下:時間作為事件的關(guān)鍵構(gòu)成要素>行為的時間標記>內(nèi)容的附屬信息,之后再思考用什么樣的設(shè)計形式去展示來達到我們的目標。

“時間”的呈現(xiàn)方式和運用技巧

在討論“時間”元素的設(shè)計之前,我們先共識一些有關(guān)時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度,類似我們高中物理時學過的“時刻”和”時間間隔“的概念。

拿開會舉例子:“下午 4:30 會議開始”、“下午 6:00 會議結(jié)束”描述的是事件開始、結(jié)束的時間點,而“整個會議持續(xù) 1.5 小時”、“會議時間為下午 4:30-6:00”描述的是事件過程的時間段;但是,我們在會議開始時也可以這樣講“會議將在 1.5 小時后結(jié)束”。

通過上面的例子我們可以發(fā)現(xiàn),同樣是描述一件事情,運用不同的時間點、時間段的方式去表達,意思一樣但卻傳遞出不一樣的情感,并且兩者存在如下的“換算”關(guān)系:

時間段加上定語會變成時間點(但同樣是時間點,“下午 6:00”是絕對時間,而“1.5 小時后”是相對時間,剛好對應(yīng)到我們設(shè)計時兩種時間戳類型);

兩個時間點之間則表示時間段。

所以,我們在平時表達或設(shè)計時,要先想清楚用“時間”是想側(cè)重表達某一事件、動作發(fā)生的即刻時間節(jié)點?還是想描述其所持續(xù)的時間過程?之后我們再針對不同語境去選取合適的文案和呈現(xiàn)方式。

如何設(shè)計「時間顯示」更專業(yè)?

時間的呈現(xiàn)方式離不開:時間戳類型、時間顯示格式、時間顆粒度。其中,時間顆粒度指的是描述時間的最小單位,往往顆粒度越細,給用戶傳達的確定感越強(如轉(zhuǎn)賬時間是 12 日 15:15:20),對用戶的激勵作用越明顯(如距搶購結(jié)束僅剩 00 時 01 分 23.6 秒)。

1. 絕對時間戳

絕對時間可理解為事物發(fā)生時的確切時間,由具體日期(年、月、日)和時間(時、分、秒)組成。使用絕對時間戳的優(yōu)勢是信息傳達精準,顯得正式,給人確定感和安全感,同時排布規(guī)整,便于形成認知習慣;但缺點是內(nèi)容顯示過長不利于閱讀,并且占用空間較大。

如何設(shè)計「時間顯示」更專業(yè)?

在時間顯示格式的選擇上,為了避免混淆,推薦使用文字格式或“-”分隔符來分隔日期,而“/”分隔符在不同國家有不同的展示順序習慣,容易造成誤解,盡量少用。

如何設(shè)計「時間顯示」更專業(yè)?

時間顆粒度的選擇依情況而定,一般場景總結(jié)如下:

如何設(shè)計「時間顯示」更專業(yè)?

2. 相對時間戳

相對時間在產(chǎn)品設(shè)計領(lǐng)域通常是指內(nèi)容生產(chǎn)、到達、或狀態(tài)發(fā)生改變時,距當前時間點的時間差值,多用于 push 通知、信息流產(chǎn)品,側(cè)重強調(diào)內(nèi)容的時效性;而“倒計時”也算相對時間的一種,側(cè)重營造時間的緊迫感。使用相對時間戳的優(yōu)勢是用戶辨識、理解成本低,不用通過計算來判斷時間過去或還剩下多久;缺點是不夠精確、正式,并很難衡量兩個時間點的臨近性。

如何設(shè)計「時間顯示」更專業(yè)?

在使用相對時間是,要注意格式友好。時間單位可隨著時間的推移自動改變;數(shù)字不要過多,盡量取整;并且可設(shè)置其與絕對時間轉(zhuǎn)換的臨界點。

如何設(shè)計「時間顯示」更專業(yè)?

總結(jié)

在設(shè)計界面中的“時間”元素時,要遵循場景貼合、便于閱讀理解的總體原則;之后根據(jù)場景和目標,再選取合適的“時間”呈現(xiàn)方式(包括時間戳類型、時間顯示格式、時間顆粒度)。

當時間作為“A.事件的關(guān)鍵構(gòu)成要素”時

一般情況下使用絕對時間,并且要看是為了強調(diào)某一關(guān)鍵時間節(jié)點,還是側(cè)重表達整個持續(xù)過程。此外,選用關(guān)聯(lián)場景的文案或者運用倒計時(相對時間)的形式,可一定程度上促進用戶更加集中注意力,提升對信息的關(guān)注度,并達到特殊的激勵作用和轉(zhuǎn)化效果。

當時間作為“B.行為的時間標記”時

該場景通常是為了追求確定感,通過提供精準的時間和日期便于用戶定位到過去或?qū)淼哪硞€時間點(段)去查找、回顧相應(yīng)內(nèi)容,因此大多數(shù)采用絕對時間,時間顆粒度依具體情況而定。

當時間作為“C.內(nèi)容的附屬信息”時

如果所設(shè)計的產(chǎn)品供給內(nèi)容的更新速度快,用戶活躍度高,并且此時內(nèi)容的時間信息準確性不那么重要反而更側(cè)重于內(nèi)容的時效性,那么通常會使用相對時間。部分信息流產(chǎn)品(比如新聞資訊類、社區(qū)類)會在列表頁使用相對時間,在詳情頁使用絕對時間,時間顆粒度也是依情況而定;并且會隨著時間推移,在某一時間節(jié)點前把相對時間轉(zhuǎn)換為絕對時間。


相關(guān)文章

首頁  電話  咨詢  頂部