初學(xué)者如何快速上手?jǐn)?shù)據(jù)可視化設(shè)計?
本文主要講述可視化全過程,并對各環(huán)節(jié)的關(guān)鍵點做了說明,希望通過這篇文章能讓大家對可視化設(shè)計有一定的認(rèn)識。
什么是數(shù)據(jù)可視化
數(shù)據(jù)可視化是數(shù)據(jù)內(nèi)在價值的最終呈現(xiàn)手段,它利用各類圖表及圖形化的設(shè)計手段,將復(fù)雜不直觀的數(shù)據(jù)有邏輯的展現(xiàn)出來,使用戶找到內(nèi)在規(guī)律,發(fā)現(xiàn)問題,從而指導(dǎo)經(jīng)營決策,挖掘數(shù)據(jù)背后的商業(yè)價值。
數(shù)據(jù)可視化的使用場景
首先介紹下使用場景:
可視化應(yīng)用非常廣如ToC、ToB、ToG等都會存在,之前所看到的各種圖表僅以為是單純的數(shù)據(jù)統(tǒng)計,其不然它也是一種可視化的展示方式?,F(xiàn)階段更多的理解數(shù)據(jù)可視化是大屏展示,多屏幕拼接,展示諸多數(shù)據(jù)和圖表,效果一定是酷炫各種特效視覺于一身的才稱之為數(shù)據(jù)可視化,其實這只是其中一種可視化的表現(xiàn)方式。
下面基于應(yīng)用場景的不同,對可視化區(qū)分介紹。
第一類使用場景:
此類以使用為主,主要在電腦上操作的pc端可視化,用戶對它需長時間使用,例如企業(yè)數(shù)據(jù)報表分析,各類BI等。在此類場景下,簡潔簡單高效的傳達(dá)數(shù)據(jù)內(nèi)容是非常必要的,更多的是數(shù)據(jù)分析師及業(yè)務(wù)部門在使用,他們需要長時間停留在屏幕及數(shù)據(jù)上做分析統(tǒng)計比對等工作,精準(zhǔn)的傳達(dá)數(shù)據(jù)的同時也減少對眼睛的過度疲勞,利于用戶長時間舒適閱讀,所以這類場景下以簡潔為主。
(圖片來源于網(wǎng)絡(luò))
第二類使用場景:
這類是以觀看為主,并以快速傳達(dá)核心數(shù)據(jù)信息的應(yīng)用場景。此類場景多應(yīng)用于指揮大廳、科技展館、數(shù)字展廳等,他的特點是多屏幕拼接,展示面積大、數(shù)據(jù)類型多,展現(xiàn)形式多元化,業(yè)內(nèi)也稱之為數(shù)據(jù)可視化大屏。
總之其主要就是核心數(shù)據(jù)通過視覺及動畫的表現(xiàn)手法直觀的輸出給用戶,增加用戶的記憶達(dá)到過目不忘的效果,同時這對于數(shù)據(jù)信息的視覺傳達(dá)要求比較高。此應(yīng)用場景也是問題疑問比較多的,會關(guān)系到效果定位、數(shù)據(jù)信息傳達(dá)、表現(xiàn)方式、軟硬件結(jié)合等諸多情況。針對此應(yīng)用場景展開分析,其他可視化設(shè)計也是相通的。
大屏數(shù)據(jù)可視化該這樣設(shè)計
(1)精準(zhǔn)把握業(yè)務(wù)需求
設(shè)計終歸是助力業(yè)務(wù)的,準(zhǔn)確的理解業(yè)務(wù)需求是至關(guān)重要的,它將貫穿整個設(shè)計的始終,也是可視化設(shè)計開始的必要前提。如何解決用戶的問題,完成既定目標(biāo),都需要設(shè)計師對需求有一個比較準(zhǔn)確的理解。直接有效的方法就是“不懂就問”。
(2)數(shù)據(jù)圖形化的選擇方法
需求及數(shù)據(jù)確立后,接下來是數(shù)據(jù)圖形化的選擇,不同的目標(biāo)不同的數(shù)據(jù)對于圖表展示的選擇也是有講究的,如:部分占總體的比例(占比)更適合選用餅圖、用來反映時間變化趨勢的圖形化更適合曲線圖等等,總之不同的數(shù)據(jù)展示維度,選擇的圖表是有差異的。
同樣一組數(shù)據(jù),存在多個圖表同可展示,怎樣選擇最恰當(dāng)?shù)膱D表是至關(guān)重要的,合適有效的圖表有助于信息有效的傳達(dá)。遇到具體的數(shù)據(jù)要根據(jù)數(shù)據(jù)的維度,和要表達(dá)的業(yè)務(wù)目標(biāo),選擇一種最佳的圖表呈現(xiàn)。
(圖片來源于網(wǎng)絡(luò))
這是可視化圖表選擇比較確切的一個方法,可以作為數(shù)據(jù)可視化圖表的選擇依據(jù),有助于準(zhǔn)確快速的把數(shù)據(jù)圖形化。
首先根據(jù)業(yè)務(wù)目標(biāo)結(jié)合數(shù)據(jù)維度確定大的關(guān)系(比較、分部、構(gòu)成、聯(lián)系),隨后選擇合適的圖表,填充數(shù)據(jù)設(shè)計排版即可。到這一步圖表基本成型,但是比較基礎(chǔ),為了視覺效果和數(shù)據(jù)的傳達(dá),也會在此基礎(chǔ)上進(jìn)行優(yōu)化設(shè)計。
優(yōu)化設(shè)計之前要注意幾點:
- 切忌設(shè)計時不要過度裝飾圖表,喧賓奪主造成數(shù)據(jù)不直觀,對觀者獲取數(shù)據(jù)產(chǎn)生障礙。
- 圖形化要友好,不能一味的追求視覺效果,造成圖形識別度降低、友好度下降。
- 圖形化后一定要利于理解。所有的設(shè)計一定是為業(yè)務(wù)服務(wù)的,數(shù)據(jù)圖形化后更不利于業(yè)務(wù)信息傳達(dá),那就失去了圖形化設(shè)計的意義
- 開發(fā)可實現(xiàn),設(shè)計師常遇到,酷炸炫的效果讓開發(fā)落地非常困難,務(wù)必要多溝通,懂取舍。設(shè)計之初就要考慮全面。
設(shè)計尺寸與大屏的拼接方式
可視化大屏一般都是多屏拼接或者LEDLCD等材質(zhì)屏幕。不同的屏幕像素是不相同的,顯示像素、物理像素都不同,包括硬件設(shè)備的不同導(dǎo)致輸出像素也不相同,例如同樣是3X2的拼接屏,輸出像素可以是X1*Y1也可以是X2*Y2,這就造成了很多潛在問題,設(shè)計之初屏幕硬件及拼接方式需要提前確定。
基本有兩個方法,簡單的說:
- 方法一、拼接屏可以按照拼接后的橫縱像素總和設(shè)計(拼接屏像素超大可等比例縮放)。LED/LCD屏幕設(shè)計也是同樣的原理。
- 方法二、按照硬件輸出像素設(shè)計,硬件設(shè)備的輸出像素一定是和整個拼接屏成比例或者是吻合的。所以按照輸出像素設(shè)計是可以的。
頁面設(shè)計及布局思路
屏幕的拼接方式及屏幕材質(zhì)確定后,就可以進(jìn)行頁面的設(shè)計及數(shù)據(jù)的布局,頁面的布局主要是依據(jù)業(yè)務(wù)及數(shù)據(jù)的重要程度來布局,可視化中會把核心的數(shù)據(jù)或業(yè)務(wù)的要點放中間。
一方面中間是視覺的中心,二來也是數(shù)據(jù)和業(yè)務(wù)最容易傳達(dá)給觀眾的核心位置。其他的數(shù)據(jù)放兩側(cè)排列,排列數(shù)據(jù)一定要考慮數(shù)據(jù)的關(guān)聯(lián)性及聯(lián)動性,應(yīng)該有意識的把他們放一起或就近,讓他們有關(guān)聯(lián)系,當(dāng)一組數(shù)據(jù)變化時聯(lián)動效果更凸顯,容易傳達(dá)數(shù)據(jù)的價值。
最后插播一句,如果是拼接屏記得把數(shù)據(jù)避開拼接縫,頁面布局時就要考慮屏幕拼接方式,盡量把數(shù)據(jù)有序的展示在屏幕內(nèi),合理避開拼接縫減少對用戶觀感的影響。
具體設(shè)計要根據(jù)項目確定使用的工具做調(diào)整,如web、u3d、ue4等等。項目用什么開發(fā)工具很大程度決定了設(shè)計方法方式,各種工具自有不同的優(yōu)劣勢,像web輕量化圖表控件多,效果相比u3d會弱很多。u3d對三維支持好,粒子等效果有優(yōu)勢。了解這些大致可知道設(shè)計思路。
字體:
選擇識別性高的,字體不要太細(xì),同時要注意版權(quán),不要選擇太圓潤的字體。
顏色:
顏色明度飽和度要高些,遠(yuǎn)距離觀更利于信息清晰傳達(dá)。顏色不要過于相近,大屏顏色相近更不易于數(shù)據(jù)間的區(qū)分,降低閱讀舒適感。大屏背景選擇深色系,內(nèi)容選擇亮色系。保持內(nèi)容與背景有一定的對比關(guān)系,便于業(yè)務(wù)信息傳達(dá)。(同時深色系也省電)
布局示例(以1920*1080尺寸,布局示例)
設(shè)計風(fēng)格的確定
風(fēng)格的確定也是至關(guān)重要的,首先要確定應(yīng)用場景是怎樣的(室內(nèi)、室外、光照如何、燈光照射如何、硬件如何等等),要充分考慮,以及目標(biāo)用戶是誰,給誰用等等。都會對風(fēng)格有不小的影響,設(shè)計是相通的,可用UI的方式來定義可視化設(shè)計風(fēng)格,AB測試、情緒版等等,差異比較大的一點是應(yīng)用場景的環(huán)境。
通過對數(shù)據(jù)圖表的選擇,屏幕布局及風(fēng)格設(shè)計,一張初步作品已經(jīng)完成。
此時最好結(jié)合業(yè)務(wù)目標(biāo)及數(shù)據(jù),設(shè)計內(nèi)部先自檢:
- 現(xiàn)在的設(shè)計布局是否合理
- 配色是否合理并能通過色彩傳達(dá)數(shù)據(jù)的意義
- 整體設(shè)計是否符合之初的業(yè)務(wù)目標(biāo)
- 是否存在其他問題等等
接下來就是各個相關(guān)人員及領(lǐng)導(dǎo)確認(rèn)階段。
現(xiàn)場硬件設(shè)備校對
當(dāng)風(fēng)格頁確定后先別急于后面的頁面設(shè)計,如果有可能的話,此時最好拿設(shè)計圖去現(xiàn)場實地測試(補充一句,設(shè)計開始前最好是能到現(xiàn)場測試硬件顯示,顏色等,應(yīng)最大程度的減少隱藏問題)。確定現(xiàn)場硬件是否存在偏色問題、文字大小在合適的觀看距離是否清晰可見、現(xiàn)場燈光光照等是否對設(shè)計有影響、拼接縫和數(shù)據(jù)是否有穿插、硬件設(shè)備輸出是否和設(shè)計匹配等等。確認(rèn)無誤后在開展后面的頁面設(shè)計工作。
開發(fā)落地及再次現(xiàn)場校對(含性能)
開發(fā)工具不同(如web、u3e、ue4等等),對接方式也會有差異。相同相似之處有如標(biāo)注規(guī)范,顏色,字體字號等等。對于一些三維場景需要提供三維文件,如obj、FBX等。
主要提供:設(shè)計規(guī)范(標(biāo)注)、切圖、三維文件(示項目需求并不一定設(shè)計提供),特殊動效可提供范例。
補充一點,拼接屏到8K左右甚至更高,輸出像素不必達(dá)到8K,稍微加點效果,會卡到懷疑人生。一般會降低到4k左右,對硬件要求下降的同時也能保證整體效果和流暢度。
開發(fā)結(jié)束后,要拿到演示文件去現(xiàn)場測試,測試輸出是否有問題,有無拉伸問題,測試有無卡頓現(xiàn)象,拼接縫與內(nèi)容有無穿插,如有控制端(控制屏)需聯(lián)調(diào)測試。確定整體無誤后,才是設(shè)計的最后交接棒。
本文@聶永真 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議
感謝大佬的分享。
SovitChart是一個免費的在線數(shù)據(jù)可視化平臺工具,基于Echarts開源API研發(fā)的數(shù)據(jù)圖表可視化界面開發(fā)工具,內(nèi)置了各行業(yè)豐富的組件模板,無需編碼只需通過鼠標(biāo)拖拽控件就能設(shè)計出精美的圖表可視化web頁面,同時可以方便的與后端數(shù)據(jù)進(jìn)行綁定,實現(xiàn)數(shù)據(jù)驅(qū)動頁面的變化,實現(xiàn)炫酷的圖表展示。