數(shù)據(jù)可視化是傳達(dá)信息的最好的方法之一,它可以直觀地呈現(xiàn)數(shù)據(jù),快速吸引用戶的注意力。但是如果設(shè)計(jì)師對(duì)圖表設(shè)計(jì)的理解有偏差,在界面呈現(xiàn)上可能會(huì)對(duì)用戶產(chǎn)生錯(cuò)誤的引導(dǎo),因此筆者結(jié)合自己的工作經(jīng)驗(yàn)對(duì)圖表設(shè)計(jì)進(jìn)行總結(jié),希望每位設(shè)計(jì)師都能成為優(yōu)秀的數(shù)據(jù)搬運(yùn)工。 下面我將從功能、交互和UI深挖圖表設(shè)計(jì)的各個(gè)知識(shí)點(diǎn),敲黑板劃重點(diǎn)咯~ 前言1.概念圖表泛指在屏幕中顯示的,可直觀展示統(tǒng)計(jì)信息屬性(時(shí)間性、數(shù)量性等),對(duì)知識(shí)挖掘和信息直觀生動(dòng)感受起關(guān)鍵作用的圖形結(jié)構(gòu),是一種很好的將對(duì)象屬性數(shù)據(jù)直觀、形象地“可視化”的手段。 如果說(shuō)表格可以承載數(shù)據(jù)的全面性,那么圖表可以完美展現(xiàn)數(shù)據(jù)的特點(diǎn)和變化,它對(duì)數(shù)據(jù)的解讀能力是表格無(wú)法做到的。 2.使用場(chǎng)景
輕量。眾所周知表格是可以承載數(shù)據(jù)的全面性,但將相同的數(shù)據(jù)用可視化展示時(shí),設(shè)計(jì)師總想將所有的信息堆砌在圖表上,顯得圖表非常笨重,因此增加了用戶的思考時(shí)間。在此建議明確你圖表類型的特點(diǎn),將主要信息呈現(xiàn)在圖表上或者分層展示圖表,比如數(shù)據(jù)鉆取功能。 直觀。設(shè)計(jì)師應(yīng)該將數(shù)據(jù)信息清晰而直觀地表達(dá)出來(lái),使用戶一眼就能洞察事實(shí),更快地發(fā)掘商業(yè)價(jià)值并作出決策。 美感。缺乏美感的數(shù)據(jù)可視化僅僅是數(shù)據(jù)展示。美感包括兩個(gè)部分,第一個(gè)部分是整體協(xié)調(diào)美,比如對(duì)圖表中的各個(gè)元素(標(biāo)題、網(wǎng)格、坐標(biāo)軸、縮略軸、圖例、提示信息、預(yù)警線和輔助線等)進(jìn)行合理的排版和使用協(xié)調(diào)的配色。第二部分是局部細(xì)節(jié)美,比如設(shè)計(jì)師根據(jù)流行趨勢(shì)給圖表加上漸變色。 功能我將用一種最復(fù)雜的圖表類型-雙軸圖當(dāng)作示范。 1.標(biāo)題。包括左對(duì)齊、居中對(duì)齊和右對(duì)齊。在選擇某種對(duì)齊方式前,請(qǐng)兼顧圖例的擺放位置。 2.柵格。包含點(diǎn)狀、線狀和斑馬線。
3.坐標(biāo)軸。坐標(biāo)軸包括X坐標(biāo)軸、Y坐標(biāo)軸和次坐標(biāo)軸。
4.縮略軸。包括滑面和滑柱。
5.圖例。離散型數(shù)據(jù)包括橫向排列和縱向排列,連續(xù)型數(shù)據(jù)包括連續(xù)圖例。
6.提示信息。包括查看單個(gè)數(shù)據(jù)點(diǎn)和多個(gè)數(shù)據(jù)點(diǎn)。
7.預(yù)警線。數(shù)據(jù)超過(guò)閾值就會(huì)報(bào)警,幫助用戶監(jiān)控?cái)?shù)據(jù)。 預(yù)警線建議用實(shí)線,并用警示的顏色引起用戶的注意,最好用郵件或短信通知用戶。 8.輔助線。用戶設(shè)置某值作為數(shù)據(jù)參考進(jìn)行比較,比如設(shè)置平均分為參考數(shù)值。 輔助線建議用虛線,僅起參考作用。 交互1.加載方式。加載動(dòng)畫建議使用和圖表相關(guān)的樣式。 2.排除異常值。允許用戶剔除高度異常點(diǎn),因?yàn)楫惓V禃?huì)影響用戶對(duì)整個(gè)圖表的分析。 3.數(shù)據(jù)鉆取。單擊某個(gè)數(shù)據(jù)可以看到該數(shù)據(jù)的詳細(xì)信息,變換分析的粒度。 4.適配
(1)顏色主題 深色背景。適合較少信息內(nèi)容。
淺色背景。適合較多信息內(nèi)容。
(2)配色方案。首先要確保顏色數(shù)量足夠滿足數(shù)據(jù)系列在圖表中的展示。
(3)顏色生成規(guī)則。一個(gè)變量統(tǒng)一用一種顏色,再按配色方案依次出每個(gè)變量的顏色。 使得同一圖表的色彩搭配和諧且具有美感。 (4)視覺(jué)缺陷。世界上有一部分人群有視覺(jué)缺陷,他們無(wú)法通過(guò)顏色來(lái)得到來(lái)精準(zhǔn)地區(qū)分圖表的維度和變量。作為設(shè)計(jì)師不能忽略這部分較為龐大的特殊群體。 設(shè)計(jì)師常用的PS和AI提供了模擬紅色盲和綠色盲的校樣設(shè)置,選擇“視圖—校樣設(shè)置—紅色盲型/綠色盲型”。 想要從根本上解決這個(gè)問(wèn)題,推薦一篇騰訊設(shè)計(jì)師的文章信息圖形中的顏色探討—面向色盲人士友好的設(shè)計(jì)解決方案。 2.布局視覺(jué)層級(jí)要符合邏輯層級(jí),利用信息深度引導(dǎo)用戶閱讀。每個(gè)元素要保持一致,保證布局的整體協(xié)調(diào)。 3.插畫符合主題和整體基調(diào),簡(jiǎn)單易懂,數(shù)據(jù)可視化具有一定的認(rèn)知門檻,有時(shí)候需要插畫來(lái)提高用戶的理解力。 4.留白信息過(guò)多容易造成視覺(jué)壓力,合理的留白可以增強(qiáng)用戶對(duì)信息的吸收能力。 5.字體避免有個(gè)性的襯線字體,字體要保證清晰可見。字體大小適中,太小影響閱讀,太大容易占用圖表控件。普通字體大概12px,標(biāo)題用14px。 工具1.使用大廠開放的圖表庫(kù)圖表庫(kù)的圖表類型豐富且統(tǒng)一,而且大大節(jié)省了開發(fā)時(shí)間,比如百度的Echart和阿里的G2。 2.在專業(yè)數(shù)據(jù)分析網(wǎng)站獲取靈感筆者剛開始學(xué)習(xí)數(shù)據(jù)可視化就是拿著數(shù)據(jù)表格不停地在競(jìng)品上摸索,作為一名用戶去感受這些圖表的交互體驗(yàn)。這里推薦一份數(shù)據(jù)可視化網(wǎng)站名單。 總結(jié)1.先懂?dāng)?shù)據(jù),再談可視化 為此我們要了解圖表類型的適用場(chǎng)景和局限,可以看33種經(jīng)典圖表類型總結(jié),輕松玩轉(zhuǎn)數(shù)據(jù)可視化。了解這些可以幫助大家通過(guò)UI設(shè)計(jì)更好地展現(xiàn)圖表的特點(diǎn)。比如展示各地區(qū)的人口密度,可以用柱狀圖來(lái)展示,但是我們發(fā)現(xiàn)用地圖會(huì)更加接近用戶的期望。 2.為了數(shù)據(jù),過(guò)度可視化 很多時(shí)候設(shè)計(jì)師在圖表上很難展現(xiàn)自己的設(shè)計(jì)功力,從而會(huì)給圖表增加過(guò)多的視覺(jué)效果,比如3D效果。 3.真實(shí)數(shù)據(jù),友好可視化 數(shù)據(jù)產(chǎn)品不要試圖去掩蓋問(wèn)題,而要反映真實(shí)數(shù)據(jù),暴露問(wèn)題,并且和用戶一同解決。比如對(duì)數(shù)據(jù)閾值進(jìn)行監(jiān)測(cè),預(yù)警線就是很友好的可視化方式。 參考資料(注:本文示例圖表圖片來(lái)自于BDP,我不是托~) 作者:安琪Angela |
|