如何做大屏資料視覺化設計？
文章結構及思維導圖：
一、基礎概念
1. 什麼是資料視覺化
把相對複雜、抽象的資料通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做資料視覺化，資料視覺化是為了更形象地表達資料內在的資訊和規律，促進資料資訊的傳播和應用。
在當前新技術支援下，資料視覺化除了“可視”，還可有可交流、可互動的特點。資料視覺化的本質是資料空間到圖形空間的對映，是抽象資料的具象表達。
資料視覺化作品《launchit》
作者：Shane Mielke
作者寫了本書，地圖上顯示了世界各地讀者的分佈情況及對應人數。
資料視覺化作品《world-drawn-by-travelers》
作者：TripHappy
國家之間相互連通的旅遊路線，顏色越相近的國家，表明兩國家的人們互動越頻繁。
2. 什麼是大屏資料視覺化
大屏資料視覺化是以大屏為主要展示載體的資料視覺化設計。
“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便於營造某些獨特氛圍、打造儀式感。電商雙11類大屏利用此特點打造了熱烈、狂歡的節日氛圍，原本看不見的資料視覺化後，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。
利用面積大、可展示資訊多的特點，通過關鍵資訊大屏共享的方式可方便團隊討論、決策，故大屏也常用來做資料分析監測使用。大屏資料視覺化目前主要有資訊展示、資料分析及監控預警三大類。
資料分析類：
圖片來源：必應
圖片作者：帆軟軟體有限公司
二、大屏資料視覺化設計原則：設計服務需求、先總覽後細節
1. 設計服務需求
大屏設計要避免為了展示而展示，排版佈局、圖表選用等應服務於業務，所以大屏設計是在充分了解業務需求的基礎上進行的。
那什麼是業務需求呢？
業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏資料視覺化的價值所在。
2. 先總覽後細節
大屏因為大，承載資料多，為了避免觀者迷失，大屏資訊呈現要有焦點、有主次。可以通過對比，先把核心資料拋給使用者，待使用者理解大屏主要內容與展示邏輯後，再逐級瀏覽二三級內容。部分細節資料可暫時隱藏，使用者需要時可通過滑鼠點選等互動方式喚起。
三、大屏視覺化設計流程
規範的流程是好結果的保證。找到一個可參考的流程，然後步步為營，就能避免很多不必要的返工，保證設計質量和專案進度。
1. 根據業務場景抽取關鍵指標
關鍵指標是一些概括性詞語，是對一組或者一系列資料的統稱。一般情況下，一個指標在大屏上獨佔一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。
以共享單車電子圍欄監控系統為例，這裡的關鍵指標有：企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。
確定關鍵指標後，根據業務需求擬定各個指標展示的優先順序（主、次、輔）。
2. 確立指標分析維度
“橫看成嶺側成峰”。同一個指標的資料，從不同維度分析就有不同結果。很多小夥伴做完視覺化設計，發現視覺化圖形並沒有準確表達自己的意圖，也沒能向觀者傳達出應有的資訊，視覺化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。
上圖向大家展示了資料分析常用的4個維度，我們在選定指標後，就需要跟專案組其他小夥伴討論：我們的各個指標主要想給大家展示什麼，更進一步的講，是我們想通過視覺化表達什麼樣的規律和資訊。
而上圖，可以引導我們從“聯絡、分佈、比較、構成”四個維度更有邏輯的思考這個問題。
- 聯絡：資料之間的相關性
- 分佈：指標裡的資料主要集中在什麼範圍、表現出怎樣的規律
- 比較：資料之間存在何種差異、差異主要體現在哪些方面
- 構成：指標裡的資料都由哪幾部分組成、每部分佔比如何
當然，上圖例舉的示例圖表都比較傳統，在大屏資料視覺化中常還有另一類地理資訊（常以2/3D地圖、地球呈現）出現。上圖雖未包含這類圖形，但它提供給我們的確定資料分析維度的思路和方法是相通的，可借鑑。
3. 選定視覺化圖表型別
當確定好分析維度後，事實上我們所能選用的圖表型別也就基本確定了。接下來我們只需要從少數幾個圖表裡，篩選出最能體現我們設計意圖的那個就好了。
選定圖表注意事項：易理解、可實現。
易理解就是視覺化設計要考慮大屏終端使用者，視覺化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對使用者不太友好的圖形。
可實現：
（1）我們需要了解現有資料的資訊、規模、特徵、聯絡等，然後評估資料是否能夠支撐相應的視覺化表現。
（2）我們設計的圖形圖表，要開發能夠實現。實際工作中，一些視覺化效果開發用程式碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難。同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用程式碼落地卻非常困難。
所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個專案總有周期與預算限制，不會無限期的修改迭代，所以設計師在這裡需要抓住重點，有取捨，不鑽牛角尖、死磕不放。
4. 瞭解物理大屏，確定設計稿尺寸
多數情況下設計稿解析度即被投大屏的訊號源電腦螢幕的解析度。有多個訊號源時，就會有多個設計稿，此時每個設計稿的尺寸即對應訊號源電腦螢幕的解析度。
一般情況下設計稿的解析度就是電腦的解析度，當有多個訊號源時，有時會通過顯示卡自定義電腦螢幕解析度，從而使電腦顯示解析度不等於其物理解析度，此時，對應設計稿的解析度也就變成了設定後的解析度。
此外，當被投電腦解析度長寬比與大屏物理長寬比不一致時（單訊號源），也會對被投電腦螢幕解析度做自定義調整，這種情況設計稿解析度也會發生變化。所以設計開始前瞭解物理大屏長寬比很重要。
5. 頁面佈局、劃分
尺寸確立後，接下來要對設計稿進行佈局和頁面的劃分。這裡的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、佔較大面積；其餘的指標按優先順序依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表型別相近的指標放一起，這樣能減少觀者認知上的負擔並提高資訊傳遞的效率。
6. 定義設計風格
很多小夥伴也許沒接觸過大屏設計工作，但大多數人都應該有APP或者Web風格定義的經驗。我們在定義一款APP或者Web頁面設計風格時常用的方法是什麼呢？情緒版！
大屏雖酷炫，但實際上也是執行在瀏覽器裡的Web頁面，所以大屏設計風格定義方法也同樣可以是用情緒版來做，這種方法也是目前比較科學高效的風格定義手段。
上圖提供了情緒版應用的腦圖，具體操作細節不做介紹，不太瞭解的小夥伴可以自己找找資料哈。
情緒版的一套流程下來，我們定義的風格基本是科學準確的，可以指導我們執行設計。如果是給甲方爸爸做大屏，這個流程也可以讓我們提出的方案更有說服力。
7. 視覺化設計
根據定義好的設計風格與選定的圖表型別進行合理的視覺化設計。目前來講大屏視覺化主要有：指標類資訊點和地理類資訊點兩大視覺化資料。
指標類資訊點視覺化效果相對簡單易實現，而地理類資訊點一般視覺化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。
地理類資訊一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可互動實時演算等特點，所以對於被投電腦、大屏拼接器等硬體裝置的效能會有要求，硬體配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。
8. 樣圖溝通確認
這裡的溝通分三個層面：設計師對內溝通、設計師對外溝通、設計師與大屏的“溝通”。
樣圖溝通環節，最初的樣圖不需要十分精緻，我們可以把它理解為一個“低保真”原型，然後通過不斷溝通修改，讓它逐步完善精緻起來，也就是小步快跑，避免那種一下子走到終點，然後又大修大改的情況。
因為我們在前幾步已經分別確定了頁面佈局、圖表型別、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然後根據樣圖效果嘗試確定五方面內容：
- 之前確立的佈局在放入設計內容後是否依然合適；
- 確立的圖表型別帶入資料後是否仍然客觀準確；
- 根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；
- 已有的樣式、資料內容、動效等在開發實現方面是否存在問題；
- 大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。
跟大屏“溝通”是比較重要也是個特殊的環節，這也是我覺得大屏設計跟其它設計不一樣的地方，大屏有它自己獨特的解析度、螢幕組成、色彩顯示以及執行、展示環境，這裡的很多問題只有設計稿投到大屏上才能夠被發現。所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反覆測試多次。
9. 頁面定稿、開發
事實上頁面開發階段並不是到了這一步才進行，這裡說的頁面開發僅指前端樣式的實現，實際上後臺資料準備工作在定義好分析指標後就已經開始進行了，而我們當前的工作是把資料接入到前端，然後用設計的樣式呈現出來。
切圖與標註
由於大屏實際就是一個web頁面，所以開發階段的切圖與標註是少不了的。
切圖：哪些元素需要切圖，怎麼切？
一般開發用程式碼寫不出的樣式或動效，都需要設計師切圖作支援：比如資料容器的邊框、小的動效、頁面整體大背景、部分圖示等。切圖按正常網頁設計標準切就可以了。
標註：
Web頁面用什麼外掛做標註這個大家都很熟悉，我就不多說了。需要注意的是，如果大屏頁面需要在不同比例的終端展示，那麼此時的標註與開發可以使用rem作為基本單位來實現，這樣實現的大屏頁面在後期會有更好的擴充套件性與適應性。
10. 整體細節調優與測試
這部分是指頁面開發完成後，將真實頁面投放到大屏進行的測試與優化。這裡主要有兩部分工作。
- 視覺方面的測試（有點像APP的UI走查）：關鍵視覺元素、字型字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。
- 效能與資料方面的測試：圖形圖表動畫是否流暢、資料載入、重新整理有無異常；頁面長時間展示是否存在奔潰、卡死等情況；後臺控制系統能否正常切換前端頁面顯示。
四、大屏設計的注意事項
1. 字型使用
字型優先使用系統預設字型，需要嵌入字型時考慮字型的可識別性、與當前設計風格是否融合、是否可免費商用。
如果頁面是雲端部署，需要嵌入字型包時，我們可以使用FontCreator這類的軟體把那些用不到的字元從字型包中刪掉，然後重新打包上傳，減小字型包大小，可以優化頁面載入體驗，避免在替換預設字型的過程中出現頁面文字跳動等現象。
（一般來講一套字型檔案包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字元，對於大屏這個明確的場景，我們可以刪掉其它使用不到的字元，僅保留中文、拼音和數字）
2. 顏色搭配
（1）色彩明度與飽和度差異顯著、對比鮮明， 儘量避免使用鄰近色配色
（2）使用深色暗色背景：深色暗色背景可減少拼縫帶來的不適感。由於背景面積大，使用暗色背景還能夠減少螢幕色差對整體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容、做出一些流光、粒子等酷炫的效果，
（3）漸變色慎重使用：大屏普遍色域有偏差，顯示偏色，因而使用漸變色需要根據大屏反饋確定是否調整，純色最佳。
3. 頁面佈局
主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，並儘量避免關鍵資料被拼縫分割。
五、Q&A
1. 設計稿投到大屏上顯示效果不佳怎麼辦？
大屏的解析度、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能開啟大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然後投上去檢視實際效果。
因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同型別的色彩搭配是否可以在目標大屏上良好呈現。如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。
2. 大屏設計定稿後，切圖切幾倍圖？
由於是將我們電腦螢幕投射到了大屏，大屏上的內容是執行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的解析度，正常切1倍圖就可以。
3. 1920*1080的設計稿，投到9000*4320的螢幕上，文字圖片會發虛麼？
看情況，視大屏系統硬體規格與觀看距離來定。這塊有四個概念需要跟大家交流下：大屏邏輯解析度（設計稿尺寸）——顯示卡輸出解析度——視訊矩陣切換器（DVI）支援解析度——大屏實際物理解析度。
一般後兩個是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易問題的是顯示卡輸出解析度，我們電腦螢幕解析度並不是最終顯示卡傳遞到DVI介面的解析度，傳遞到DVI介面的解析度是電腦顯示卡所能輸出的最大解析度（部分電腦可設定或自定義輸出解析度）。
輸出解析度等於DVI支援解析度時顯示效果最佳；輸出解析度低於DVI支援解析度，DVI會將訊號放大後傳遞到大屏，放大的過程中就有影象資訊丟失，雖然此過程中有各種演算法支援去保證影象儘可能清晰，但演算法再好，跟真實圖形還是有差距的。
此外，多訊號源投射效果優於單個訊號源投射。對於現場直播資料大屏，一般至少有兩個訊號源，一個投屏，另一個也投屏但是處於備用狀態。
離大屏的距離也影響觀感，一般離得近，顆粒感明顯，距離稍遠，會顯的較為清晰。
4. 設計稿完成開發後，發現在大屏上頁面有被拉伸或者壓縮的情況，怎麼補救？
一般來講，開發只需要對設計圖做還原即可。但特殊情況下，比如顯示器擴充套件不正確導致頁面被拉伸或壓縮，這時就需做處理：我們可以先得到被拉伸/壓縮的比例，然後對整體檢視做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。
另外，瞭解被投電腦硬體特點，有的電腦可以通過自定義解析度解決這部分問題。
5. 除自行開發視覺化大屏外，還可以通過哪些第三方服務來快速實現？
阿里雲DataV、騰訊雲圖、百度Sugar等。
6. 資料視覺化的圖表樣式可以在那些地方找到參考？
下圖第一列圖表類的二個視覺化庫是我們設計師可以開啟瀏覽檢視的，這裡面所有的圖表樣式都是基於程式碼實現的，可以作為我們設計圖表的參考，也可以讓開發拿程式碼去用，或者在這些圖表的基礎修改
工具類的需要有一定的程式碼基礎，裡面同樣有豐富的圖表，所以跟開發的溝通也很重要，因為他們可能會了解多一些更新的前沿的圖表形式是我們設計師不知道的，所以彼此多溝通交流是在太重要了。