作者 :?UXBoy?

原文出處：https://www.uisdc.com/large-screen-data-visualization-design
可能是大屏數據可視化設計介紹最詳盡的一篇文章，幫你盡量躲開大屏數據可視化路上那些坑。

文章目錄

基礎概念

大屏數據可視化設計原則

大屏可視化設計流程

大屏設計的注意事項

Q&A

總結

基礎概念

1. 什么是數據可視化

把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規(guī)律，促進數據信息的傳播和應用。

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

△?數據可視化作品《 launchit 》，作者：Shane Mielke

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

△ 數據可視化作品《 world-drawn-by-travelers 》，作者：TripHappy

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

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

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

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

利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論和決策，故大屏也常用來做數據分析監(jiān)測使用。大屏數據可視化目前主要有信息展示、數據分析及監(jiān)控預警三大類。

數據分析類：

△ 圖片來源：必應，圖片作者：帆軟軟件有限公司

大屏數據可視化設計原則

大屏數據可視化設計原則：設計服務需求、先總覽后細節(jié)。

1. 設計服務需求

大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業(yè)務，所以大屏設計是在充分了解業(yè)務需求的基礎上進行的。那什么是業(yè)務需求呢？業(yè)務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

2. 先總覽后細節(jié)

大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次。可以通過對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節(jié)數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。

大屏可視化設計流程

規(guī)范的流程是好結果的保證。找到一個可參考的流程，然后步步為營，就能避免很多不必要的返工，保證設計質量和項目進度。

1. 根據業(yè)務場景抽取關鍵指標

關鍵指標是一些概括性詞語，是對一組或者一系列數據的統(tǒng)稱。一般情況下，一個指標在大屏上獨占一塊區(qū)域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。以共享單車電子圍欄監(jiān)控系統(tǒng)為例，這里的關鍵指標有：企業(yè)停車時長、企業(yè)違停量、熱點違停區(qū)域、車輛入欄率等。

確定關鍵指標后，根據業(yè)務需求擬定各個指標展示的優(yōu)先級（主、次、輔）。

2. 確立指標分析維度

「橫看成嶺側成峰」。同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發(fā)現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。

上圖向大家展示了數據分析常用的4個維度，我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規(guī)律和信息。而上圖，可以引導我們從「聯(lián)系、分布、比較、構成」四個維度更有邏輯的思考這個問題。

聯(lián)系：數據之間的相關性。

分布：指標里的數據主要集中在什么范圍、表現出怎樣的規(guī)律。

比較：數據之間存在何種差異、差異主要體現在哪些方面。

構成：指標里的數據都由哪幾部分組成、每部分占比如何。

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

3. 選定可視化圖表類型

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

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

易理解

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

可實現

我們需要了解現有數據的信息、規(guī)模、特征、聯(lián)系等，然后評估數據是否能夠支撐相應的可視化表現。

我們設計的圖形圖表，要開發(fā)能夠實現。實際工作中，一些可視化效果開發(fā)用代碼寫很容易實現，效果也不錯，但這些效果設計師用 Ps / Ai / Ae 這些工具模擬時會發(fā)現比較困難；同樣的，某些效果設計師用設計工具可以輕易實現，但開發(fā)要用代碼落地卻非常困難，所以大屏設計中跟開發(fā)常溝通非常重要，我們需要明確哪些地方設計師可以盡情發(fā)揮，哪些地方需要謹慎設計。一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、不死磕不放。

4. 了解物理大屏，確定設計稿尺寸

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

一般情況下設計稿的分辨率就是電腦的分辨率，當有多個信號源時，有時會通過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時，對應設計稿的分辨率也就變成了設置后的分辨率。此外，當被投電腦分辨率長寬比與大屏物理長寬比不一致時（單信號源），也會對被投電腦屏幕分辨率做自定義調整，這種情況設計稿分辨率也會發(fā)生變化。所以設計開始前了解物理大屏長寬比很重要。

5. 頁面布局、劃分

尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業(yè)務指標進行，核心業(yè)務指標安排在中間位置、占較大面積；其余的指標按優(yōu)先級依次在核心指標周圍展開。一般把有關聯(lián)的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

6. 定義設計風格

很多小伙伴也許沒接觸過大屏設計工作，但大多數人都應該有 APP 或者 Web 風格定義的經驗。我們在定義一款 APP 或者 Web 頁面設計風格時常用的方法是什么呢？情緒板。

大屏雖酷炫，但實際上也是運行在瀏覽器里的 Web 頁面，所以大屏設計風格定義方法也同樣可以用情緒板來做，這種方法也是目前比較科學高效的風格定義手段。

上圖提供了情緒板應用的腦圖，具體操作細節(jié)不做介紹，不太了解的小伙伴可以自己找找資料。

編者按：一篇好文幫你掃盲，運用情緒板搞定設計→《該怎么運用情緒板，才能讓設計作品更有說服力？》

情緒板的一套流程下來，我們定義的風格基本是科學準確的，可以指導我們執(zhí)行設計。如果是給甲方做大屏，這個流程也可以讓我們提出的方案更有說服力。

7. 可視化設計

根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來說大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發(fā)相對困難，需要設計師跟開發(fā)多溝通。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。

8. 樣圖溝通確認

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

樣圖溝通環(huán)節(jié)，最初的樣圖不需要十分精致，我們可以把它理解為一個「低保真」原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。

因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：

之前確立的布局在放入設計內容后是否依然合適；

確立的圖表類型帶入數據后是否仍然客觀準確；

根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；

已有的樣式、數據內容、動效等在開發(fā)實現方面是否存在問題；

大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。

跟大屏「溝通」是比較重要也是個特殊的環(huán)節(jié)，這也是我覺得大屏設計跟其它設計不一樣的地方，大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環(huán)境，這里的很多問題只有設計稿投到大屏上才能夠被發(fā)現，所以這一步在樣圖溝通確認環(huán)節(jié)非常重要，有時候需要開發(fā)出 demo，反復測試多次。

9. 頁面定稿、開發(fā)

事實上頁面開發(fā)階段并不是到了這一步才進行，這里說的頁面開發(fā)僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。

切圖與標注

由于大屏實際就是一個 web 頁面，所以開發(fā)階段的切圖與標注是少不了的。

切圖：哪些元素需要切圖，怎么切？

一般開發(fā)用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。

標注：Web頁面用什么插件做標注這個大家都很熟悉，我就不多說了。需要注意的是，如果大屏頁面需要在不同比例的終端展示，那么此時的標注與開發(fā)可以使用 rem 作為基本單位來實現，這樣實現的大屏頁面在后期會有更好的擴展性與適應性。

10. 整體細節(jié)調優(yōu)與測試

這部分是指頁面開發(fā)完成后，將真實頁面投放到大屏進行的測試與優(yōu)化。這里主要有兩部分工作。

視覺方面的測試（有點像 APP 的 UI走查）：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在崩潰、卡死等情況；后臺控制系統(tǒng)能否正常切換前端頁面顯示。

大屏設計的注意事項

1. 字體使用

字體優(yōu)先使用系統(tǒng)默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

如果頁面是云端部署，需要嵌入字體包時，我們可以使用 FontCreator 這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優(yōu)化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。（一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字）

2. 顏色搭配

色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色。

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

漸變色慎重使用：大屏普遍色域有偏差，顯示偏色，因而使用漸變色需要根據大屏反饋確定是否調整，純色最佳。

3. 頁面布局

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

Q&A

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

大屏的分辨率、比例、使用環(huán)境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統(tǒng)做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發(fā)現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現，如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環(huán)節(jié)及時測試也很重要。

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

由于是將我們電腦屏幕投射到了大屏，大屏上的內容是運行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的分辨率，正常切1倍圖就可以了。

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

看情況，視大屏系統(tǒng)硬件規(guī)格與觀看距離來定。這塊有四個概念需要跟大家交流一下。

大屏邏輯分辨率（設計稿尺寸）、顯卡輸出分辨率、視頻矩陣切換器（ DVI ）支持分辨率、大屏實際物理分辨率。

一般后兩個是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易出問題的是顯卡輸出分辨率，我們電腦屏幕分辨率并不是最終顯卡傳遞到 DVI 接口的分辨率，傳遞到 DVI 接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設置或自定義輸出分辨率）。輸出分辨率等于 DVI 支持分辨率時顯示效果最佳。輸出分辨率低于 DVI 支持分辨率，DVI 會將信號放大后傳遞到大屏，放大的過程中就有圖像信息丟失，雖然此過程中有各種算法支持去保證圖像盡可能清晰，但算法再好，跟真實圖形還是有差距的。此外，多信號源投射效果優(yōu)于單個信號源投射。對于現場直播數據大屏，一般至少有兩個信號源，一個投屏，另一個也投屏但是處于備用狀態(tài)。

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

4. 設計稿完成開發(fā)后，發(fā)現在大屏上頁面有被拉伸或者壓縮的情況，怎么補救？

一般來講，開發(fā)只需要對設計圖做還原即可。但特殊情況下，比如顯示器擴展不正確導致頁面被拉伸或壓縮，這時就需做處理：我們可以先得到被拉伸/壓縮的比例，然后對整體視圖做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外，了解被投電腦硬件特點，有的電腦可以通過自定義分辨率解決這部分問題。

5. 除自行開發(fā)可視化大屏外，還可以通過哪些第三方服務來快速實現？

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

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

圖表部分的二個庫是我們設計師可以打開瀏覽查看的，這里面所有的圖表樣式都是基于代碼實現的，可以作為我們設計圖表的參考，也可以讓開發(fā)拿代碼去用，或者在這些圖表的基礎上修改。

工具類的需要有一定的代碼基礎，里面同樣有豐富的圖表，所以跟開發(fā)的溝通也很重要，因為他們可能會了解多一些更新的前沿的圖表形式，是我們設計師不知道的，所以彼此多溝通交流實在太重要了。

總結

數據可視化是一門龐大系統(tǒng)的科學，本文所有討論僅針對大屏數據可視化這一特定領域，管中窺豹，如有遺漏或不足之處歡迎大家討論交流。

原文出處：https://www.uisdc.com/large-screen-data-visualization-design