2022-3-7 純純
“時(shí)間”作為人機(jī)交互界面中經(jīng)常出現(xiàn)的元素,本質(zhì)上都是為了去傳遞時(shí)間維度的信息。但是我們平時(shí)在使用一些互聯(lián)網(wǎng)產(chǎn)品時(shí)會(huì)發(fā)現(xiàn),關(guān)于“時(shí)間”的顯示狀態(tài)或形式在不同場(chǎng)景、不同頁面里往往是不太一樣的,這是出于怎樣的考慮呢?今天我們就來聊一聊,如何在產(chǎn)品設(shè)計(jì)中把握“時(shí)間”顯示的訣竅,讓其在頁面中發(fā)揮最大的作用。
按照“時(shí)間”元素在頁面中的出現(xiàn)場(chǎng)景和所起到的作用,可以大致歸為以下幾類:
時(shí)間作為描述整個(gè)事件的重要組成部分,缺失后會(huì)對(duì)原本所要傳達(dá)的內(nèi)容產(chǎn)生嚴(yán)重的影響,進(jìn)而影響用戶的使用預(yù)期和結(jié)果,比方說用戶可能不能以一個(gè)較低的價(jià)格完成商品購買,或錯(cuò)過了產(chǎn)品發(fā)布會(huì)的時(shí)間。
指用戶本人作為行為主體或行為的接收對(duì)象,在某一動(dòng)作發(fā)生后為其所打上的時(shí)間標(biāo)記,比方說“我”購買商品下單的時(shí)間或收到一封郵件的時(shí)間。
用戶在使用產(chǎn)品進(jìn)行內(nèi)容消費(fèi)時(shí),時(shí)間作為該條內(nèi)容的附屬信息,起到補(bǔ)充說明的作用,比方說一條短視頻或新聞的發(fā)布時(shí)間。
在上面的案例中,我們會(huì)發(fā)現(xiàn)“時(shí)間”在對(duì)應(yīng)場(chǎng)景里所發(fā)揮的作用不同,用戶在使用產(chǎn)品時(shí)往往對(duì)時(shí)間存在不一樣的關(guān)注程度。因此我們?cè)谧鲰撁嬖O(shè)計(jì)時(shí),要根據(jù)具體場(chǎng)景和用戶訴求判斷“時(shí)間”元素的重要性和優(yōu)先級(jí),通常情況下:時(shí)間作為事件的關(guān)鍵構(gòu)成要素>行為的時(shí)間標(biāo)記>內(nèi)容的附屬信息,之后再思考用什么樣的設(shè)計(jì)形式去展示來達(dá)到我們的目標(biāo)。
“時(shí)間”的呈現(xiàn)方式和運(yùn)用技巧
在討論“時(shí)間”元素的設(shè)計(jì)之前,我們先共識(shí)一些有關(guān)時(shí)間的理解和概念。時(shí)間可以劃分為“時(shí)間點(diǎn)”和“時(shí)間段”兩個(gè)維度,類似我們高中物理時(shí)學(xué)過的“時(shí)刻”和”時(shí)間間隔“的概念。
拿開會(huì)舉例子:“下午 4:30 會(huì)議開始”、“下午 6:00 會(huì)議結(jié)束”描述的是事件開始、結(jié)束的時(shí)間點(diǎn),而“整個(gè)會(huì)議持續(xù) 1.5 小時(shí)”、“會(huì)議時(shí)間為下午 4:30-6:00”描述的是事件過程的時(shí)間段;但是,我們?cè)跁?huì)議開始時(shí)也可以這樣講“會(huì)議將在 1.5 小時(shí)后結(jié)束”。
通過上面的例子我們可以發(fā)下,同樣是描述一件事情,運(yùn)用不同的時(shí)間點(diǎn)、時(shí)間段的方式去表達(dá),意思一樣但卻傳遞出不一樣的情感,并且兩者存在如下的“換算”關(guān)系:
1)時(shí)間段加上定語會(huì)變成時(shí)間點(diǎn)(但同樣是時(shí)間點(diǎn),“下午 6:00”是絕對(duì)時(shí)間,而“1.5 小時(shí)后”是相對(duì)時(shí)間,剛好對(duì)應(yīng)到我們?cè)O(shè)計(jì)時(shí)兩種時(shí)間戳類型);
2)兩個(gè)時(shí)間點(diǎn)之間則表示時(shí)間段。
所以,我們?cè)谄綍r(shí)表達(dá)或設(shè)計(jì)時(shí),要先想清楚用“時(shí)間”是想側(cè)重表達(dá)某一事件、動(dòng)作發(fā)生的即刻時(shí)間節(jié)點(diǎn)?還是想描述其所持續(xù)的時(shí)間過程?之后我們?cè)籴槍?duì)不同語境去選取合適的文案和呈現(xiàn)方式。
時(shí)間的呈現(xiàn)方式離不開:時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度。其中,時(shí)間顆粒度指的是描述時(shí)間的最小單位,往往顆粒度越細(xì),給用戶傳達(dá)的確定感越強(qiáng)(如轉(zhuǎn)賬時(shí)間是 12 日 15:15:20),對(duì)用戶的激勵(lì)作用越明顯(如距搶購結(jié)束僅剩 00 時(shí) 01 分 23.6 秒)。
1. 絕對(duì)時(shí)間戳
絕對(duì)時(shí)間可理解為事物發(fā)生時(shí)的確切時(shí)間,由具體日期(年、月、日)和時(shí)間(時(shí)、分、秒)組成。使用絕對(duì)時(shí)間戳的優(yōu)勢(shì)是信息傳達(dá)精準(zhǔn),顯得正式,給人確定感和安全感,同時(shí)排布規(guī)整,便于形成認(rèn)知習(xí)慣;但缺點(diǎn)是內(nèi)容顯示過長(zhǎng)不利于閱讀,并且占用空間較大。
在時(shí)間顯示格式的選擇上,為了避免混淆,推薦使用文字格式或“-”分隔符來分隔日期,而“/”分隔符在不同國家有不同的展示順序習(xí)慣,容易造成誤解,盡量少用。
時(shí)間顆粒度的選擇依情況而定,一般場(chǎng)景總結(jié)如下:
2. 相對(duì)時(shí)間戳
相對(duì)時(shí)間在產(chǎn)品設(shè)計(jì)領(lǐng)域通常是指內(nèi)容生產(chǎn)、到達(dá)、或狀態(tài)發(fā)生改變時(shí),距當(dāng)前時(shí)間點(diǎn)的時(shí)間差值,多用于 push 通知、信息流產(chǎn)品,側(cè)重強(qiáng)調(diào)內(nèi)容的時(shí)效性;而“倒計(jì)時(shí)”也算相對(duì)時(shí)間的一種,側(cè)重營造時(shí)間的緊迫感。使用相對(duì)時(shí)間戳的優(yōu)勢(shì)是用戶辨識(shí)、理解成本低,不用通過計(jì)算來判斷時(shí)間過去或還剩下多久;缺點(diǎn)是不夠精確、正式,并很難衡量?jī)蓚€(gè)時(shí)間點(diǎn)的臨近性。
在使用相對(duì)時(shí)間時(shí),要注意格式友好。時(shí)間單位可隨著時(shí)間的推移自動(dòng)改變;數(shù)字不要過多,盡量取整;并且可設(shè)置其與絕對(duì)時(shí)間轉(zhuǎn)換的臨界點(diǎn)。
在設(shè)計(jì)界面中的“時(shí)間”元素時(shí),要遵循場(chǎng)景貼合、便于閱讀理解的總體原則;之后根據(jù)場(chǎng)景和目標(biāo),再選取合適的“時(shí)間”呈現(xiàn)方式(包括時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度)。
當(dāng)時(shí)間作為“A.事件的關(guān)鍵構(gòu)成要素”時(shí)
一般情況下使用絕對(duì)時(shí)間,并且要看是為了強(qiáng)調(diào)某一關(guān)鍵時(shí)間節(jié)點(diǎn),還是側(cè)重表達(dá)整個(gè)持續(xù)過程。此外,選用關(guān)聯(lián)場(chǎng)景的文案或者運(yùn)用倒計(jì)時(shí)(相對(duì)時(shí)間)的形式,可一定程度上促進(jìn)用戶更加集中注意力,提升對(duì)信息的關(guān)注度,并達(dá)到特殊的激勵(lì)作用和轉(zhuǎn)化效果。
當(dāng)時(shí)間作為“B.行為的時(shí)間標(biāo)記”時(shí)
該場(chǎng)景通常是為了追求確定感,通過提供精準(zhǔn)的時(shí)間和日期便于用戶定位到過去或?qū)淼哪硞€(gè)時(shí)間點(diǎn)(段)去查找、回顧相應(yīng)內(nèi)容,因此大多數(shù)采用絕對(duì)時(shí)間,時(shí)間顆粒度依具體情況而定。
當(dāng)時(shí)間作為“C.內(nèi)容的附屬信息”時(shí)
如果所設(shè)計(jì)的產(chǎn)品供給內(nèi)容的更新速度快,用戶活躍度高,并且此時(shí)內(nèi)容的時(shí)間信息準(zhǔn)確性不那么重要反而更側(cè)重于內(nèi)容的時(shí)效性,那么通常會(huì)使用相對(duì)時(shí)間。部分信息流產(chǎn)品(比如新聞資訊類、社區(qū)類)會(huì)在列表頁使用相對(duì)時(shí)間,在詳情頁使用絕對(duì)時(shí)間,時(shí)間顆粒度也是依情況而定;并且會(huì)隨著時(shí)間推移,在某一時(shí)間節(jié)點(diǎn)前把相對(duì)時(shí)間轉(zhuǎn)換為絕對(duì)時(shí)間。
文章來源:優(yōu)設(shè) (VMIC UED)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com