背景

“時間”作為人機交互界面中經常出現的元素，本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯網產品時會發現，關于“時間”的顯示狀態或形式在不同場景、不同頁面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來聊一聊，如何在產品設計中把握“時間”顯示的訣竅，讓其在頁面中發揮最大的作用。

“時間”元素的分類

按照“時間”元素在頁面中的出現場景和所起到的作用，可以大致歸為以下幾類：

A. 事件的關鍵構成要素

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

B. 行為的時間標記

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

C. 內容的附屬信息

用戶在使用產品進行內容消費時，時間作為該條內容的附屬信息，起到補充說明的作用，比方說一條短視頻或新聞的發布時間。

在上面的案例中，我們會發現“時間”在對應場景里所發揮的作用不同，用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時，要根據具體場景和用戶訴求判斷“時間”元素的重要性和優先級，通常情況下：時間作為事件的關鍵構成要素＞行為的時間標記＞內容的附屬信息，之后再思考用什么樣的設計形式去展示來達到我們的目標。

“時間”的呈現方式和運用技巧

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

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

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

1）時間段加上定語會變成時間點（但同樣是時間點，“下午 6:00”是絕對時間，而“1.5 小時后”是相對時間，剛好對應到我們設計時兩種時間戳類型）；

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

所以，我們在平時表達或設計時，要先想清楚用“時間”是想側重表達某一事件、動作發生的即刻時間節點？還是想描述其所持續的時間過程？之后我們再針對不同語境去選取合適的文案和呈現方式。

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

1. 絕對時間戳

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

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

時間顆粒度的選擇依情況而定，一般場景總結如下：

2. 相對時間戳

相對時間在產品設計領域通常是指內容生產、到達、或狀態發生改變時，距當前時間點的時間差值，多用于 push 通知、信息流產品，側重強調內容的時效性；而“倒計時”也算相對時間的一種，側重營造時間的緊迫感。使用相對時間戳的優勢是用戶辨識、理解成本低，不用通過計算來判斷時間過去或還剩下多久；缺點是不夠精確、正式，并很難衡量兩個時間點的臨近性。

在使用相對時間時，要注意格式友好。時間單位可隨著時間的推移自動改變；數字不要過多，盡量取整；并且可設置其與絕對時間轉換的臨界點。

總結

在設計界面中的“時間”元素時，要遵循場景貼合、便于閱讀理解的總體原則；之后根據場景和目標，再選取合適的“時間”呈現方式（包括時間戳類型、時間顯示格式、時間顆粒度）。

當時間作為“A.事件的關鍵構成要素”時

一般情況下使用絕對時間，并且要看是為了強調某一關鍵時間節點，還是側重表達整個持續過程。此外，選用關聯場景的文案或者運用倒計時（相對時間）的形式，可一定程度上促進用戶更加集中注意力，提升對信息的關注度，并達到特殊的激勵作用和轉化效果。

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

該場景通常是為了追求確定感，通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點（段）去查找、回顧相應內容，因此大多數采用絕對時間，時間顆粒度依具體情況而定。

當時間作為“C.內容的附屬信息”時

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

文章來源：優設   作者：VMIC UED



分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.0391cbd.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務