八步驟教你如何製作數據視覺化大螢幕!

本文主要講述視覺化全過程,並對各環節的關鍵點做了說明。希望通過這篇文章能讓大家對視覺化的設計有一定的認識。

01 、什麼是數據視覺化

數據視覺化是數據內在價值的最終呈現手段,它利用各類圖表及圖形化的設計手段將復雜不直觀的數據有邏輯的展現出來,使用戶找到內在規律,發現問題,從而指導經營決策,挖掘數據背後的商業價值。

02 、數據視覺化的使用場景

首先介紹下使用場景:
視覺化應用非常廣如ToC、ToB等都會存在,之前所看到的各種圖表僅以為是單純的數據統計,其不然它也是一種視覺化的展示方式。現階段更多的理解數據視覺化是大螢幕展示。多螢幕拼接,展示諸多數據和圖表,效果一定是酷炫各種特效視覺於一身的才稱之為數據視覺化,其實這只是其中一種視覺化的表現方式。下面基於應用場景的不同,對視覺化區分介紹。
第一類使用場景:
此類以使用為主,主要在電腦上操作的pc端視覺化,用戶對它需長時間使用,例如企業數據報表分析,各類BI等。在此類場景下,簡潔簡單高效的傳達數據內容是非常必要的,更多的是數據分析師及業務部門在使用,他們需要長時間停留在螢幕及數據上做分析統計比對等工作,精準的傳達數據的同時也減少對眼睛的過度疲勞,利於用戶長時間舒適閱讀,所以這類場景下以簡潔為主。

FineBI

第二類使用場景:
這類是以觀看為主,並以快速傳達核心數據資訊的應用場景。此類場景多應用於指揮大廳、科技展館、數字展廳等,他的特點是多螢幕拼接,展示面積大、數據類型多,展現形式多元化,業內也稱之為數據視覺化大螢幕。

此應用場景也是問題疑問比較多的,會關係到效果定位、數據資訊傳達、表現方式、軟硬體結合等諸多情況。針對此應用場景展開分析,其他視覺化設計也是相通的。

FineReport

03 、大螢幕數據視覺化該這樣設計

1、精準把握業務需求
設計終歸是助力業務的,準確的理解業務需求是至關重要的,它將貫穿整個設計的始終,也是視覺化設計開始的必要前提。如何解決用戶的問題,完成既定目標,都需要設計師對需求有一個比較準確的理解。直接有效的方法就是”不懂就問”。
2、數據圖形化的選擇方法
需求及數據確立後,接下來是數據圖形化的選擇,不同的目標不同的數據對於圖表展示的選擇也是有講究的,如:部分佔總體的比例(佔比)更適合選用餅圖、用來反映時間變化趨勢的圖形化更適合曲線圖等等,總之不同的數據展示維度,選擇的圖表是有差異的。
同樣一組數據,存在多個圖表同可展示,怎樣選擇最恰當的圖表是至關重要的,合適有效的圖表有助於資訊有效的傳達。遇到具體的數據要根據數據的維度,和要表達的業務目標,選擇一種最佳的圖表呈現。

這是視覺化圖表選擇比較確切的一個方法,可以作為數據視覺化圖表的選擇依據,有助於準確快速的把數據圖形化。
首先根據業務目標結合數據維度確定大的關係(比較、分部、構成、聯繫),隨後選擇合適的圖表,填充數據設計排版即可。到這一步圖表基本成型,但是比較基礎,為了視覺效果和數據的傳達,也會在此基礎上進行優化設計。

04 、設計尺寸與大螢幕的拼接方式

視覺化大螢幕一般都是多螢幕拼接或者LED\LCD等材質螢幕。不同的螢幕像素是不相同的,顯示像素、物理像素都不同,包括硬體設備的不同導致輸出像素也不相同,例如同樣是3X2的拼接螢幕,輸出像素可以是X1*Y1也可以是X2*Y2 ,這就造成了很多潛在問題,設計之初螢幕硬體及拼接方式需要提前確定。

基本有兩個方法,簡單的說,方法一、拼接螢幕可以按照拼接後的橫縱像素總和設計(拼接螢幕像素超大可等比例縮放)。 LED/LCD螢幕設計也是同樣的原理。方法二、按照硬體輸出像素設計,硬體設備的輸出像素一定是和整個拼接螢幕成比例或者是吻合的。所以按照輸出像素設計是可以的。

05 、頁面設計及佈局思路

螢幕的拼接方式及螢幕材質確定後,就可以進行頁面的設計及數據的佈局,頁面的佈局主要是依據業務及數據的重要程度來佈局,視覺化中會把核心的數據或業務的要點放中間,一方面中間是視覺的中心,二來也是數據和業務最容易傳達給觀眾的核心位置。
最後插播一句,如果是拼接螢幕記得把數據避開拼接縫,頁面佈局時就要考慮螢幕拼接方式,盡量把數據有序的展示在螢幕內,合理避開拼接縫減少對用戶觀感的影響。
具體設計要根據項目確定使用的工具做調整,如web、u3d、ue4等等。項目用什麼開發工具很大程度決定了設計方法方式,各種工具自有不同的優劣勢,像web輕量化圖表控件多,效果相比u3d會弱很多。 u3d對三維支持好,粒子等效果有優勢。了解這些大致可知道設計思路。
字體:
選擇識別性高的,字體不要太細,同時要注意版權,不要選擇太圓潤的字體。
顏色:
顏色明度飽和度要高些,遠距離觀更利於資訊清晰傳達。顏色不要過於相近,大螢幕顏色相近更不易於數據間的區分,降低閱讀舒適感。大螢幕背景選擇深色系,內容選擇亮色系。
佈局示例(以1920*1080尺寸,佈局示例)

06 、設計風格的確定

通過對數據圖表的選擇,螢幕佈局及風格設計,一張初步作品已經完成。
此時最好結合業務目標及數據,設計內部先自檢:
現在的設計佈局是否合理
配色是否合理並能通過色彩傳達數據的意義
整體設計是否符合之初的業務目標
是否存在其他問題等等

接下來就是各個相關人員及領導確認階段。

07 、現場硬體設備校對

當風格頁確定後先別急於後面的頁面設計,如果有可能的話,此時最好拿設計圖去現場實地測試。確定現場硬體是否存在偏色問題、文字大小在合適的觀看距離是否清晰可見、現場燈光光照等是否對設計有影響、拼接縫和數據是否有穿插、硬體設備輸出是否和設計匹配等等。確認無誤後在開展後面的頁面設計工作。

08 、開發落地及再次現場校對(含性能)

開發工具不同(如web、u3e、ue4等等),對接方式也會有差異。相同相似之處有如標註規範,顏色,字體字號等等。對於一些三維​​場景需要提供三維文件,如obj、FBX等。
主要提供:設計規範(標註)、切圖、三維文件(示項目需求並不一定設計提供),特殊動效可提供範例。
補充一點,拼接螢幕到8K左右甚至更高,輸出像素不必達到8K,稍微加點效果,會卡到懷疑人生。一般會降低到4k左右,對硬體要求下降的同時也能保證整體效果和流暢度。
開發結束後,要拿到演示文件去現場測試,測試輸出是否有問題,有無拉伸問題,測試有無卡頓現象,拼接縫與內容有無穿插,如有控制端(控制螢幕)需聯調測試。確定整體無誤後,才是設計的最後交接棒。

關注數據君的臉書:

我是「數據分析那些事」。常年分享數據分析實用文章,不定期分享好用的職場技能工具。按讚我的臉書,期待您與我的互動!

現在FineReport個人版完全免費!現在註冊還可以擁有大量模板和行業案例呦~~點選下方連結獲取免費版FineReport軟體&啟用碼:https://www.finereport.com/tw/products/frlogin

Written by

這是一個專注於數據分析職場的內容部落格,聚焦一批數據分析愛好者,在這裡,我會分享數據分析相關知識點推送、(工具/書籍)等推薦、職場心得、熱點資訊剖析以及資源大盤點,希望同樣熱愛數據的我們一同進步! 臉書會有更多互動喔:https://www.facebook.com/shujvfenxi/

這是一個專注於數據分析職場的內容部落格,聚焦一批數據分析愛好者,在這裡,我會分享數據分析相關知識點推送、(工具/書籍)等推薦、職場心得、熱點資訊剖析以及資源大盤點,希望同樣熱愛數據的我們一同進步! 臉書會有更多互動喔:https://www.facebook.com/shujvfenxi/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store