什么是數(shù)據(jù)可視化

數(shù)據(jù)可視化是數(shù)據(jù)內在價值的最終呈現(xiàn)手段，它利用各類圖表及圖形化的設計手段將復雜不直觀的數(shù)據(jù)有邏輯地展現(xiàn)出來，使用戶找到內在規(guī)律，發(fā)現(xiàn)問題，從而指導經(jīng)營決策，挖掘數(shù)據(jù)背后的商業(yè)價值。

數(shù)據(jù)可視化的使用場景

1. 首先介紹下使用場景：

可視化應用非常廣如 ToC、ToB、ToG 等都會存在，之前所看到的各種圖表僅以為是單純的數(shù)據(jù)統(tǒng)計，其實不然，它也是一種可視化的展示方式?，F(xiàn)階段更多地理解數(shù)據(jù)可視化是大屏展示。多屏幕拼接，展示諸多數(shù)據(jù)和圖表，效果一定是酷炫各種特效視覺于一身的才稱之為數(shù)據(jù)可視化，其實這只是其中一種可視化的表現(xiàn)方式。下面基于應用場景的不同，對可視化區(qū)分介紹。

2. 第一類使用場景：

此類以使用為主，主要在電腦上操作的 pc 端可視化，用戶對它需長時間使用，例如企業(yè)數(shù)據(jù)報表分析，各類 BI 等。在此類場景下，簡潔簡單高效的傳達數(shù)據(jù)內容是非常必要的，更多的是數(shù)據(jù)分析師及業(yè)務部門在使用，他們需要長時間停留在屏幕及數(shù)據(jù)上做分析統(tǒng)計比對等工作，精準地傳達數(shù)據(jù)的同時也減少對眼睛的過度疲勞，利于用戶長時間舒適閱讀，所以這類場景下以簡潔為主。

3. 第二類使用場景：

這類是以觀看為主，并可以快速傳達核心數(shù)據(jù)信息的應用場景。此類場景多應用于指揮大廳、科技展館、數(shù)字展廳等，他的特點是多屏幕拼接，展示面積大、數(shù)據(jù)類型多，展現(xiàn)形式多元化，業(yè)內也稱之為數(shù)據(jù)可視化大屏?？傊渲饕褪呛诵臄?shù)據(jù)通過視覺及動畫的表現(xiàn)手法直觀地輸出給用戶，增加用戶的記憶達到過目不忘的效果，同時這對于數(shù)據(jù)信息的視覺傳達要求比較高。此應用場景也是問題疑問比較多的，會關系到效果定位、數(shù)據(jù)信息傳達、表現(xiàn)方式、軟硬件結合等諸多情況。針對此應用場景展開分析，其他可視化設計也是相通的。

[[321135]]

大屏數(shù)據(jù)可視化該這樣設計

1. 精準把握業(yè)務需求

設計終歸是助力業(yè)務的，準確地理解業(yè)務需求是至關重要的，它將貫穿整個設計的始終，也是可視化設計開始的必要前提。如何解決用戶的問題，完成既定目標，都需要設計師對需求有一個比較準確的理解。直接有效的方法就是「不懂就問」。

2. 數(shù)據(jù)圖形化的選擇方法

需求及數(shù)據(jù)確立后，接下來是數(shù)據(jù)圖形化的選擇，不同的目標不同的數(shù)據(jù)對于圖表展示的選擇也是有講究的，如：部分占總體的比例(占比)更適合選用餅圖、用來反映時間變化趨勢的圖形化更適合曲線圖等等，總之不同的數(shù)據(jù)展示維度，選擇的圖表是有差異的。同樣一組數(shù)據(jù)，存在多個圖表可展示，怎樣選擇最恰當?shù)膱D表是至關重要的，合適有效的圖表有助于信息有效的傳達。遇到具體的數(shù)據(jù)要根據(jù)數(shù)據(jù)的維度，和要表達的業(yè)務目標，選擇一種最佳的圖表呈現(xiàn)。

△ 圖片來源于網(wǎng)絡

這是可視化圖表選擇比較確切的一個方法，可以作為數(shù)據(jù)可視化圖表的選擇依據(jù)，有助于準確快速地把數(shù)據(jù)圖形化。

首先根據(jù)業(yè)務目標結合數(shù)據(jù)維度確定大的關系(比較、分部、構成、聯(lián)系)，隨后選擇合適的圖表，填充數(shù)據(jù)設計排版即可。到這一步圖表基本成型，但是比較基礎，為了視覺效果和數(shù)據(jù)的傳達，也會在此基礎上進行優(yōu)化設計。

3. 優(yōu)化設計之前要注意幾點：

• 切忌設計時不要過度裝飾圖表，喧賓奪主造成數(shù)據(jù)不直觀，對觀者獲取數(shù)據(jù)產(chǎn)生障礙。
• 圖形化要友好，不能一味地追求視覺效果，造成圖形識別度降低、友好度下降。
• 圖形化后一定要利于理解。所有的設計一定是為業(yè)務服務的，數(shù)據(jù)圖形化后更不利于業(yè)務信息傳達，那就失去了圖形化設計的意義
• 開發(fā)可實現(xiàn)，設計師常遇到，酷炸炫的效果讓開發(fā)落地非常困難，務必要多溝通，懂取舍。設計之初就要考慮全面。

設計尺寸與大屏的拼接方式

可視化大屏一般都是多屏拼接或者 LED\LCD 等材質屏幕。不同的屏幕像素是不相同的，顯示像素、物理像素都不同，包括硬件設備的不同導致輸出像素也不相同，例如同樣是 3×2 的拼接屏，輸出像素可以是 X1*Y1 也可以是 X2*Y2，這就造成了很多潛在問題，設計之初屏幕硬件及拼接方式需要提前確定。基本有兩個方法，簡單的說，方法一、拼接屏可以按照拼接后的橫縱像素總和設計(拼接屏像素超大可等比例縮放)。LED/LCD 屏幕設計也是同樣的原理。方法二、按照硬件輸出像素設計，硬件設備的輸出像素一定是和整個拼接屏成比例或者是吻合的。所以按照輸出像素設計是可以的。

[[321136]]

頁面設計及布局思路

屏幕的拼接方式及屏幕材質確定后，就可以進行頁面的設計及數(shù)據(jù)的布局，頁面的布局主要是依據(jù)業(yè)務及數(shù)據(jù)的重要程度來布局，可視化中會把核心的數(shù)據(jù)或業(yè)務的要點放中間，一方面中間是視覺的中心，二來也是數(shù)據(jù)和業(yè)務最容易傳達給觀眾的核心位置。其他的數(shù)據(jù)放兩側排列，排列數(shù)據(jù)一定要考慮數(shù)據(jù)的關聯(lián)性及聯(lián)動性，應該有意識的把他們放一起或就近，讓他們有關聯(lián)性，當一組數(shù)據(jù)變化時聯(lián)動效果更凸顯，容易傳達數(shù)據(jù)的價值。

最后插播一句，如果是拼接屏記得把數(shù)據(jù)避開拼接縫，頁面布局時就要考慮屏幕拼接方式，盡量把數(shù)據(jù)有序地展示在屏幕內，合理避開拼接縫減少對用戶觀感的影響。

具體設計要根據(jù)項目確定使用的工具做調整，如 web、u3d、ue4 等等。項目用什么開發(fā)工具很大程度決定了設計方法方式，各種工具自有不同的優(yōu)劣勢，像 web 輕量化圖表控件多，效果相比 u3d 會弱很多。u3d 對三維支持好，粒子等效果有優(yōu)勢。了解這些大致可知道設計思路。

1. 字體：

• 選擇識別性高的，字體不要太細，同時要注意版權，不要選擇太圓潤的字體。

2. 顏色：

• 顏色明度飽和度要高些，遠距離觀看更利于信息清晰傳達。顏色不要過于相近，大屏顏色相近更不易于數(shù)據(jù)間的區(qū)分，降低閱讀舒適感。大屏背景選擇深色系，內容選擇亮色系。保持內容與背景有一定的對比關系，便于業(yè)務信息傳達。(同時深色系也省電)

布局示例(以1920*1080尺寸，布局示例)

設計風格的確定

風格的確定也是至關重要的，首先要確定應用場景是怎樣的(室內、室外、光照如何、燈光照射如何、硬件如何等等)，要充分考慮，以及目標用戶是誰，給誰用等等。都會對風格有不小的影響，設計是相通的，可用 UI 的方式來定義可視化設計風格，AB 測試、情緒版等等。差異比較大的一點是應用場景的環(huán)境。

通過對數(shù)據(jù)圖表的選擇，屏幕布局及風格設計，一張初步作品已經(jīng)完成。

此時最好結合業(yè)務目標及數(shù)據(jù)，設計內部先自檢：

• 現(xiàn)在的設計布局是否合理
• 配色是否合理并能通過色彩傳達數(shù)據(jù)的意義
• 整體設計是否符合之初的業(yè)務目標
• 是否存在其他問題等等

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

現(xiàn)場硬件設備校對

當風格頁確定后先別急于后面的頁面設計，如果有可能的話，此時最好拿設計圖去現(xiàn)場實地測試(補充一句，設計開始前最好是能到現(xiàn)場測試硬件顯示，顏色等，應最大程度的減少隱藏問題)。確定現(xiàn)場硬件是否存在偏色問題、文字大小在合適的觀看距離是否清晰可見、現(xiàn)場燈光光照等是否對設計有影響、拼接縫和數(shù)據(jù)是否有穿插、硬件設備輸出是否和設計匹配等等。確認無誤后再開展后面的頁面設計工作。

[[321137]]

開發(fā)落地及再次現(xiàn)場校對(含性能)

開發(fā)工具不同(如 web、u3d、ue4 等等)，對接方式也會有差異。相同相似之處有如標注規(guī)范，顏色，字體字號等等。對于一些三維場景需要提供三維文件，如 obj、FBX 等。

主要提供：設計規(guī)范(標注)、切圖、三維文件(項目需求并不一定設計提供)，特殊動效可提供范例。

補充一點，拼接屏到 8K 左右甚至更高，輸出像素不必達到 8K，稍微加點效果，會卡到懷疑人生。一般會降低到 4k 左右，對硬件要求下降的同時也能保證整體效果和流暢度。

開發(fā)結束后，要拿到演示文件去現(xiàn)場測試，測試輸出是否有問題，有無拉伸問題，測試有無卡頓現(xiàn)象，拼接縫與內容有無穿插，如有控制端(控制屏)需聯(lián)調測試。確定整體無誤后，才是設計的最后交接棒。