細(xì)節(jié)見真章!設(shè)計(jì)時(shí)間軸我學(xué)會(huì)的四件事

0 評(píng)論 17614 瀏覽 9 收藏 8 分鐘

編者按:設(shè)計(jì)時(shí)間軸好象不是什么特別難的事兒。評(píng)判一個(gè)飛檐漂 亮不漂亮很簡單,但是要設(shè)計(jì)一幢大廈,就需要從每一片磚瓦開始了解,這也是設(shè)計(jì)與工程學(xué)相通的地方。設(shè)計(jì)時(shí)間軸也仿佛是信手拈來的事兒,可是有的時(shí)候要做 好細(xì)節(jié)還真是會(huì)抓瞎。看看設(shè)計(jì)師Garron Engstrom在設(shè)計(jì)稅務(wù)系統(tǒng)的時(shí)間軸的過程中,學(xué)得的四條經(jīng)驗(yàn)吧。好象都是廢話?品品看吧~

你不得不承認(rèn),時(shí)間軸已經(jīng)無處不在了。最典型的就是社交媒體了,像Facebook和人人網(wǎng)這樣的SNS社區(qū)會(huì)將你的生活以時(shí)間軸的形式呈現(xiàn)出來, 微博和Twitter也自不必說,同樣以時(shí)間軸來排列信息,而移動(dòng)APP Path更是以時(shí)間軸而出名。時(shí)間軸不僅幫助用戶梳理信息,更是用戶交互的基礎(chǔ)規(guī)則。

時(shí)間軸能處理的信息僅僅止于此么?我想不是。我想將時(shí)間軸運(yùn)用在稅務(wù)系統(tǒng)中。那么如何通過時(shí)間軸將稅務(wù)系統(tǒng)中令人困惑的數(shù)據(jù)信息呈現(xiàn)出來呢?如何讓人覺得放心,讓用戶能夠輕松訪問重要的財(cái)務(wù)信息呢?

我不知道。

我希望我說的是“對(duì),我知道!就這么處理!”但是這么說確實(shí)為時(shí)過早。在我最近所參與設(shè)計(jì)的稅務(wù)系統(tǒng)時(shí)間軸當(dāng)中,我向用戶提供了稅務(wù)歷史查詢的功 能。對(duì)于普通用戶而言,他們?cè)谏缃痪W(wǎng)絡(luò)的時(shí)間軸上的交互經(jīng)驗(yàn)會(huì)比較容易遷移過來??紤]到整個(gè)系統(tǒng)是剛剛投入使用,這種設(shè)計(jì)成功與否還有待觀察。不過,不論 如何,在設(shè)計(jì)工程中我還是學(xué)會(huì)了四件事情:

1、時(shí)間軸的設(shè)計(jì)并不需要那么旗幟鮮明

細(xì)節(jié)見真章!設(shè)計(jì)時(shí)間軸我學(xué)會(huì)的四件事

最令我驚奇的發(fā)現(xiàn)就是,在很多時(shí)候時(shí)間軸的設(shè)計(jì)并不需要設(shè)計(jì)地那么鮮明,沒有必要讓用戶意識(shí)到這是一個(gè)時(shí)間軸。最傳統(tǒng)最典型的時(shí)間軸是一條連續(xù)的水 平線,代表不同時(shí)間/事件的點(diǎn)分布其上。我所設(shè)計(jì)的時(shí)間軸并非是水平的,而是垂直的,上面分布著不同的事件,每個(gè)事件可以被折疊和展開。唯一可以讓你聯(lián)想 到時(shí)間軸的是每個(gè)事件的斷點(diǎn)上所標(biāo)注的時(shí)間。好在這種設(shè)計(jì)并沒有打破用戶對(duì)于時(shí)間軸的認(rèn)知。

2、時(shí)間軸上的每個(gè)點(diǎn)都必須對(duì)應(yīng)一個(gè)事件

細(xì)節(jié)見真章!設(shè)計(jì)時(shí)間軸我學(xué)會(huì)的四件事

這是顯而易見的。在我們上歷史課的時(shí)候就應(yīng)該了解這個(gè)概念了,時(shí)間軸上每一個(gè)點(diǎn)必然代表一個(gè)重要的歷史事件。但是當(dāng)我們開始通過時(shí)間軸來呈現(xiàn)數(shù)據(jù)的 時(shí)候,我們就需要考慮時(shí)間軸上的每個(gè)數(shù)據(jù)所代表的含義和事件了。所以,當(dāng)你要呈現(xiàn)一個(gè)退稅金額的數(shù)據(jù)的時(shí)候,與其關(guān)注于稅金,不如重點(diǎn)呈現(xiàn)用戶提交的金 額、時(shí)間和對(duì)應(yīng)的操作。延伸開來的話,你不僅要呈現(xiàn)的是完整的事件(時(shí)間、金額、操作),還可以將用戶最關(guān)心的數(shù)據(jù)系統(tǒng)地展現(xiàn)出來,包括相關(guān)的支持性文 檔、訂單詳情、申請(qǐng)狀態(tài)等等。(當(dāng)然,你可以不用呈現(xiàn)全部完整信息,但是至少應(yīng)該存在,讓用戶知道。)

3、不要一次展示出所有的東西

細(xì)節(jié)見真章!設(shè)計(jì)時(shí)間軸我學(xué)會(huì)的四件事

信息理當(dāng)是逐步披露出來的。這也就是為什么我為每個(gè)稅務(wù)事件加入折疊的功能。這一設(shè)計(jì)幫我完成了兩件事情:

  • 告訴用戶他們最關(guān)心的事情又不會(huì)信息過載
  • 告訴用戶在其他的地方同樣可以展開折疊看到更多的信息

4、讓用戶盡可能多地呈現(xiàn)數(shù)據(jù)(與3并不沖突)

在用戶呈現(xiàn)信息的時(shí)候,是多展示好還是少展示合適?多展示一點(diǎn)吧。

細(xì)節(jié)見真章!設(shè)計(jì)時(shí)間軸我學(xué)會(huì)的四件事

上圖就是我們的稅務(wù)系統(tǒng)的時(shí)間軸。

稅務(wù)系統(tǒng)是幫助用戶管理數(shù)據(jù)的,使用時(shí)間軸可以讓用戶更系統(tǒng)地查看、管理他們的稅務(wù)信息。在之前,我們的系統(tǒng)曾經(jīng)碰到過這一狀況:用戶第一年使用我 們的系統(tǒng),第二年可能是轉(zhuǎn)投其他的稅務(wù)管理系統(tǒng),而第三年又重新使用回我們的稅務(wù)系統(tǒng)。這樣一來,在時(shí)間軸的展示上,會(huì)空缺出一整年的數(shù)據(jù)。在這種情況 下,我們會(huì)給用戶一個(gè)入口,讓他們可以延期提交上一年的數(shù)據(jù),這樣就可以幫助他們更加系統(tǒng)地管理數(shù)據(jù)了,也可以借此贏得更多忠實(shí)用戶。

除此之外,我們還需要考慮第一次使用我們的系統(tǒng)的用戶。的確,當(dāng)他們剛剛加入的時(shí)候,沒有任何數(shù)據(jù)可以填充時(shí)間軸,這個(gè)時(shí)候,我們做了兩件事:

  • 引導(dǎo)用戶使用時(shí)間軸,并且告訴他們?nèi)绾卧L問/管理前一年的數(shù)據(jù)
  • 如果他們不小心生成了額外的賬戶,告訴他們?nèi)绾翁幚砗鸵?guī)避這一點(diǎn)

時(shí)間軸是雙向的,我們不僅可以讓用戶管理未來的數(shù)據(jù),也應(yīng)該引導(dǎo)他們管理過去的信息。

結(jié)語

以上就是我在這次的設(shè)計(jì)改版中所學(xué)到的經(jīng)驗(yàn),隨著報(bào)稅季的到來,我們的稅務(wù)系統(tǒng)迎來的更多的用戶,時(shí)間軸的設(shè)計(jì)也需要根據(jù)用戶的需求逐漸地添加更多的功能。比如我們剛剛添加了時(shí)間軸刷新功能,截至目前,反饋信息都很棒!

 

原文來自:優(yōu)設(shè)

原文地址:Medium

優(yōu)設(shè)網(wǎng)翻譯:@陳子木

 

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!