（轉）超全面設計指南：如何作大屏數據可視化設計？

 

數據可視化是一門龐大系統的科學，本文全部討論僅針對大屏數據可視化這一特定領域。管中窺豹，若有遺漏或不足之處歡迎你們討論交流。

文章結構及思惟導圖：

1、基礎概念

1. 什麼是數據可視化

把相對複雜、抽象的數據經過可視的方式以人們更易理解的形式展現出來的一系列手段叫作數據可視化，數據可視化是爲了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。

在當前新技術支持下，數據可視化除了「可視」，還可有可交流、可互動的特色。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。

數據可視化做品《launchit》

做者：Shane Mielke

做者寫了本書，地圖上顯示了世界各地讀者的分佈狀況及對應人數。

數據可視化做品《world-drawn-by-travelers》

做者：TripHappy

國家之間相互連通的旅遊路線，顏色越相近的國家，代表兩國家的人們互動越頻繁。

2. 什麼是大屏數據可視化

大屏數據可視化是以大屏爲主要展現載體的數據可視化設計。

「大面積、炫酷動效、豐富色彩」，大屏易在觀感上給人留下震撼印象，便於營造某些獨特氛圍、打造儀式感。電商雙11類大屏利用此特色打造了熱烈、狂歡的節日氛圍，本來看不見的數據可視化後，便能調動人的情緒、引起人的共鳴，傳遞企業文化和價值。

利用面積大、可展現信息多的特色，經過關鍵信息大屏共享的方式可方便團隊討論、決策，故大屏也經常使用來作數據分析監測使用。大屏數據可視化目前主要有信息展現、數據分析及監控預警三大類。

數據分析類：

圖片來源：必應

圖片做者：帆軟軟件有限公司

2、大屏數據可視化設計原則：設計服務需求、先總覽後細節

1. 設計服務需求

大屏設計要避免爲了展現而展現，排版佈局、圖表選用等應服務於業務，因此大屏設計是在充分了解業務需求的基礎上進行的。

那什麼是業務需求呢？

業務需求就是要解決的問題或達成的目標。設計師經過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

2. 先總覽後細節

大屏由於大，承載數據多，爲了不觀者迷失，大屏信息呈現要有焦點、有主次。能夠經過對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展現邏輯後，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶須要時可經過鼠標點擊等交互方式喚起。

3、大屏可視化設計流程

規範的流程是好結果的保證。找到一個可參考的流程，而後步步爲營，就能避免不少沒必要要的返工，保證設計質量和項目進度。

1. 根據業務場景抽取關鍵指標

關鍵指標是一些歸納性詞語，是對一組或者一系列數據的統稱。通常狀況下，一個指標在大屏上獨佔一塊區域，因此經過關鍵指標定義，咱們就知道大屏上大概會顯示哪些內容以及大屏會被分爲幾塊。

以共享單車電子圍欄監控系統爲例，這裏的關鍵指標有：企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。

肯定關鍵指標後，根據業務需求擬定各個指標展現的優先級（主、次、輔）。

2. 確立指標分析維度

「橫當作嶺側成峯」。同一個指標的數據，從不一樣維度分析就有不一樣結果。不少小夥伴作完可視化設計，發現可視化圖形並無準確表達本身的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種狀況很大程度就是由於分析的維度沒有找準或定義的比較混亂。

上圖向你們展現了數據分析經常使用的4個維度，咱們在選定指標後，就須要跟項目組其餘小夥伴討論：咱們的各個指標主要想給你們展現什麼，更進一步的講，是咱們想經過可視化表達什麼樣的規律和信息。

而上圖，能夠引導咱們從「聯繫、分佈、比較、構成」四個維度更有邏輯的思考這個問題。

1. 聯繫：數據之間的相關性
2. 分佈：指標裏的數據主要集中在什麼範圍、表現出怎樣的規律
3. 比較：數據之間存在何種差別、差別主要體如今哪些方面
4. 構成：指標裏的數據都由哪幾部分組成、每部分佔好比何

固然，上圖例舉的示例圖表都比較傳統，在大屏數據可視化中常還有另外一類地理信息（常以2/3D地圖、地球呈現）出現。上圖雖未包含這類圖形，但它提供給咱們的肯定數據分析維度的思路和方法是相通的，可借鑑。

3. 選定可視化圖表類型

當肯定好分析維度後，事實上咱們所能選用的圖表類型也就基本肯定了。接下來咱們只須要從少數幾個圖表裏，篩選出最能體現咱們設計意圖的那個就行了。

選定圖表注意事項：易理解、可實現。

易理解就是可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不須要思考和過分理解，於是選定圖表時要理性，避免爲了視覺上的效果而選擇一些對用戶不太友好的圖形。

可實現：

（1）咱們須要瞭解現有數據的信息、規模、特徵、聯繫等，而後評估數據是否可以支撐相應的可視化表現。

（2）咱們設計的圖形圖表，要開發可以實現。實際工做中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難。一樣的，某些效果設計師用設計工具能夠輕易實現，但開發要用代碼落地卻很是困難。

因此大屏設計中跟開發常溝通很是重要，咱們須要明確哪些地方設計師能夠盡情發揮，哪些地方須要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，因此設計師在這裏須要抓住重點，有取捨，不鑽牛角尖、死磕不放。

4. 瞭解物理大屏，肯定設計稿尺寸

多數狀況下設計稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時，就會有多個設計稿，此時每一個設計稿的尺寸即對應信號源電腦屏幕的分辨率。

通常狀況下設計稿的分辨率就是電腦的分辨率，當有多個信號源時，有時會經過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等於其物理分辨率，此時，對應設計稿的分辨率也就變成了設置後的分辨率。

此外，當被投電腦分辨率長寬比與大屏物理長寬比不一致時（單信號源），也會對被投電腦屏幕分辨率作自定義調整，這種狀況設計稿分辨率也會發生變化。因此設計開始前瞭解物理大屏長寬比很重要。

5. 頁面佈局、劃分

尺寸確立後，接下來要對設計稿進行佈局和頁面的劃分。這裏的劃分，主要根據咱們以前定好的業務指標進行，核心業務指標安排在中間位置、佔較大面積；其他的指標按優先級依次在覈心指標周圍展開。通常把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一塊兒，這樣能減小觀者認知上的負擔並提升信息傳遞的效率。

6. 定義設計風格

不少小夥伴也許沒接觸過大屏設計工做，但大多數人都應該有APP或者Web風格定義的經驗。咱們在定義一款APP或者Web頁面設計風格時經常使用的方法是什麼呢？情緒版！

大屏雖酷炫，但實際上也是運行在瀏覽器裏的Web頁面，因此大屏設計風格定義方法也一樣能夠是用情緒版來作，這種方法也是目前比較科學高效的風格定義手段。

上圖提供了情緒版應用的腦圖，具體操做細節不作介紹，不太瞭解的小夥伴能夠本身找找資料哈。

情緒版的一套流程下來，咱們定義的風格基本是科學準確的，能夠指導咱們執行設計。若是是給甲方爸爸作大屏，這個流程也可讓咱們提出的方案更有說服力。

7. 可視化設計

根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來說大屏可視化主要有：指標類信息點和地理類信息點兩大可視化數據。

指標類信息點可視化效果相對簡單易實現，而地理類信息點通常可視化效果酷炫，可是開發相對困難，須要設計師跟開發多溝通的。

地理類信息通常具備很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特色，因此對於被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的狀況下可能出現卡頓甚至崩潰的狀況，因此這點也是須要提早溝通評估的。

8. 樣圖溝通確認

這裏的溝通分三個層面：設計師對內溝通、設計師對外溝通、設計師與大屏的「溝通」。

樣圖溝通環節，最初的樣圖不須要十分精緻，咱們能夠把它理解爲一個「低保真」原型，而後經過不斷溝通修改，讓它逐步完善精緻起來，也就是小步快跑，避免那種一會兒走到終點，而後又大修大改的狀況。

由於咱們在前幾步已經分別肯定了頁面佈局、圖表類型、頁面風格特色，因此這一步咱們須要用盡量簡單的方法 ，把以前幾步的成果在頁面上快速體現出來，而後根據樣圖效果嘗試肯定五方面內容：

1. 以前確立的佈局在放入設計內容後是否依然合適；
2. 確立的圖表類型帶入數據後是否仍然客觀準確；
3. 根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感覺；
4. 已有的樣式、數據內容、動效等在開發實現方面是否存在問題；
5. 大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。

跟大屏「溝通」是比較重要也是個特殊的環節，這也是我以爲大屏設計跟其它設計不同的地方，大屏有它本身獨特的分辨率、屏幕組成、色彩顯示以及運行、展現環境，這裏的不少問題只有設計稿投到大屏上纔可以被發現。因此這一步在樣圖溝通確認環節很是重要，有時候須要開發出demo，反覆測試屢次。

9. 頁面定稿、開發

事實上頁面開發階段並非到了這一步才進行，這裏說的頁面開發僅指前端樣式的實現，實際上後臺數據準備工做在定義好分析指標後就已經開始進行了，而咱們當前的工做是把數據接入到前端，而後用設計的樣式呈現出來。

切圖與標註

因爲大屏實際就是一個web頁面，因此開發階段的切圖與標註是少不了的。

切圖：哪些元素須要切圖，怎麼切？

通常開發用代碼寫不出的樣式或動效，都須要設計師切圖做支持：好比數據容器的邊框、小的動效、頁面總體大背景、部分圖標等。切圖按正常網頁設計標準切就能夠了。

標註：

Web頁面用什麼插件作標註這個你們都很熟悉，我就很少說了。須要注意的是，若是大屏頁面須要在不一樣比例的終端展現，那麼此時的標註與開發可使用rem做爲基本單位來實現，這樣實現的大屏頁面在後期會有更好的擴展性與適應性。

10. 總體細節調優與測試

這部分是指頁面開發完成後，將真實頁面投放到大屏進行的測試與優化。這裏主要有兩部分工做。

1. 視覺方面的測試（有點像APP的UI走查）：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等狀況。
2. 性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展現是否存在奔潰、卡死等狀況；後臺控制系統可否正常切換前端頁面顯示。

4、大屏設計的注意事項

1. 字體使用

字體優先使用系統默認字體，須要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

若是頁面是雲端部署，須要嵌入字體包時，咱們可使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，而後從新打包上傳，減少字體包大小，能夠優化頁面加載體驗，避免在替換默認字體的過程當中出現頁面文字跳動等現象。

（通常來說一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對於大屏這個明確的場景，咱們能夠刪掉其它使用不到的字符，僅保留中文、拼音和數字）

2. 顏色搭配

（1）色彩明度與飽和度差別顯著、對比鮮明， 儘可能避免使用鄰近色配色

（2）使用深色暗色背景：深色暗色背景可減小拼縫帶來的不適感。因爲背景面積大，使用暗色背景還可以減小屏幕色差對總體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容、作出一些流光、粒子等酷炫的效果，

（3）漸變色慎重使用：大屏廣泛色域有誤差，顯示偏色，於是使用漸變色須要根據大屏反饋肯定是否調整，純色最佳。

3. 頁面佈局

主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，並儘可能避免關鍵數據被拼縫分割。

5、Q&A

1. 設計稿投到大屏上顯示效果不佳怎麼辦？

大屏的分辨率、比例、使用環境、投射方式等均會對設計形成影響。理想狀況下，咱們應該在設計開始前，就能打開大屏系統作一些簡單測試。咱們能夠從網上收集不一樣設計師不一樣風格的大屏設計做品，而後投上去查看實際效果。

由於大多數時候大屏都會存在色彩誤差，這時經過測試咱們就能發現漸變色、鄰近色等不一樣類型的色彩搭配是否能夠在目標大屏上良好呈現。若是不能夠，那咱們設計進行時就不要使用顯示效果不佳的色彩搭配。另外一方面，樣圖溝通環節及時測試也很重要。

2. 大屏設計定稿後，切圖切幾倍圖？

因爲是將咱們電腦屏幕投射到了大屏，大屏上的內容是運行在咱們電腦瀏覽器上的頁面。因此切圖根據咱們電腦的分辨率，正常切1倍圖就能夠。

3. 1920*1080的設計稿，投到9000*4320的屏幕上，文字圖片會發虛麼？

看狀況，視大屏系統硬件規格與觀看距離來定。這塊有四個概念須要跟你們交流下：大屏邏輯分辨率（設計稿尺寸）——顯卡輸出分辨率——視頻矩陣切換器（DVI）支持分辨率——大屏實際物理分辨率。

通常後兩個是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，通常恰好配套大屏。容易問題的是顯卡輸出分辨率，咱們電腦屏幕分辨率並非最終顯卡傳遞到DVI接口的分辨率，傳遞到DVI接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設置或自定義輸出分辨率）。

輸出分辨率等於DVI支持分辨率時顯示效果最佳；輸出分辨率低於DVI支持分辨率，DVI會將信號放大後傳遞到大屏，放大的過程當中就有圖像信息丟失，雖然此過程當中有各類算法支持去保證圖像儘量清晰，但算法再好，跟真實圖形仍是有差距的。

此外，多信號源投射效果優於單個信號源投射。對於現場直播數據大屏，通常至少有兩個信號源，一個投屏，另外一個也投屏可是處於備用狀態。

離大屏的距離也影響觀感，通常離得近，顆粒感明顯，距離稍遠，會顯的較爲清晰。

4. 設計稿完成開發後，發如今大屏上頁面有被拉伸或者壓縮的狀況，怎麼補救？

通常來說，開發只須要對設計圖作還原便可。但特殊狀況下，好比顯示器擴展不正確致使頁面被拉伸或壓縮，這時就需作處理：咱們能夠先獲得被拉伸/壓縮的比例，而後對總體視圖作壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就能夠獲得必定程度上的矯正。

另外，瞭解被投電腦硬件特色，有的電腦能夠經過自定義分辨率解決這部分問題。

5. 除自行開發可視化大屏外，還能夠經過哪些第三方服務來快速實現？

阿里雲DataV、騰訊雲圖、百度Sugar等。

6. 數據可視化的圖表樣式能夠在那些地方找到參考？

下圖第一列圖表類的二個可視化庫是咱們設計師能夠打開瀏覽查看的，這裏面全部的圖表樣式都是基於代碼實現的，能夠做爲咱們設計圖表的參考，也可讓開發拿代碼去用，或者在這些圖表的基礎修改

工具類的須要有必定的代碼基礎，裏面一樣有豐富的圖表，因此跟開發的溝通也很重要，由於他們可能會了解多一些更新的前沿的圖表形式是咱們設計師不知道的，因此彼此多溝通交流是在過重要了。

 

http://wemedia.ifeng.com/94531536/wemedia.shtml