定義
數(shù)據(jù)可視化是數(shù)據(jù)內(nèi)在價值的最終呈現(xiàn)手段缕减，它利用各類圖表及圖形化的設(shè)計手段將復(fù)雜不直觀的數(shù)據(jù)有邏輯地展現(xiàn)出來笼痛，使用戶找到內(nèi)在規(guī)律、發(fā)現(xiàn)問題夭问、從而指導(dǎo)經(jīng)營處理決策泽西，挖掘數(shù)據(jù)背后的商業(yè)價值曹铃。
在當(dāng)前新技術(shù)支持下缰趋，數(shù)據(jù)可視化除了｛可視｝，還有可交流陕见、可互動的特點
本質(zhì)
數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射秘血，是抽象數(shù)據(jù)的具象表達(dá)，數(shù)據(jù)可視化將分析技術(shù)與圖形技術(shù)結(jié)合评甜，清晰有效地將分析結(jié)果信息進(jìn)行解讀和傳達(dá)灰粮。
場景
覆蓋Toc、Tob忍坷、Tog粘舟。可視化的表現(xiàn)方式包括各種單色圖表的數(shù)據(jù)統(tǒng)計佩研，也包括了現(xiàn)階段的大屏柑肴，多屏拼接的多數(shù)據(jù)圖表炫酷特效展示。
1.第一類使用場景
以使用為主旬薯，tob類系統(tǒng)類PC頁面晰骑，業(yè)務(wù)部門及數(shù)據(jù)分析部門長時間停留在屏幕及數(shù)據(jù)上做分析統(tǒng)計對比的工作。例如绊序，企業(yè)數(shù)據(jù)報表分析硕舆，各類BI等秽荞。追求簡單簡潔高效的傳達(dá)數(shù)據(jù)內(nèi)容，
2.第二類使用場景
以看為主抚官，并可以快速傳達(dá)核心數(shù)據(jù)信息的應(yīng)用場景扬跋。多應(yīng)用于指揮大廳，科技展廳凌节，數(shù)字展廳胁住。多屏幕拼接，展示面積大刊咳，數(shù)據(jù)類型多彪见，展現(xiàn)形式多元化，業(yè)內(nèi)稱之為數(shù)據(jù)可視化大屏娱挨。
核心數(shù)據(jù)通過視覺及動畫的表現(xiàn)手法直觀地輸出給用戶余指，對于數(shù)據(jù)信息的視覺傳達(dá)要求比較高。原本看不見的數(shù)據(jù)可視化后跷坝，便能調(diào)動人的情緒酵镜、引發(fā)人的共鳴，傳遞企業(yè)文化和價值柴钻。
大屏數(shù)據(jù)可視化目前主要有信息展示淮韭、數(shù)據(jù)分析及監(jiān)控預(yù)警三大類。
難點：效果定位贴届、數(shù)據(jù)信息傳達(dá)靠粪、表現(xiàn)方式、軟硬結(jié)合等諸多情況毫蚓。
如何設(shè)計
原則：設(shè)計服務(wù)需求占键，先總覽后細(xì)節(jié)。
1.設(shè)計服務(wù)需求元潘，助力業(yè)務(wù)畔乙。大屏設(shè)計要避免為了展示而展示，排版布局翩概、圖表選擇等應(yīng)在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的牲距。什么是業(yè)務(wù)需求，就是要解決的問題或達(dá)成的目標(biāo)钥庇。設(shè)計師通過設(shè)計的手段幫助相關(guān)人員達(dá)成這個目標(biāo)牍鞠，是大屏數(shù)據(jù)可視化的價值所在。
2.先總覽后細(xì)節(jié)
大屏數(shù)據(jù)多上沐，為了避免用戶關(guān)注點迷失皮服，大屏信息呈現(xiàn)要有焦點竖独、有主次篓冲，通過對比摇天，先把核心數(shù)據(jù)拋給用戶宰掉，待用戶理解大屏主要內(nèi)容與展示邏輯后，再逐級瀏覽二三級內(nèi)容择同。部分?jǐn)?shù)據(jù)可暫時性隱藏两入，用戶需要時可通過鼠標(biāo)點擊等交互方式喚起。
步驟：理解需求-選擇圖表類型-確定尺寸（場景）-頁面布局敲才、劃分（整體裹纳，部分，細(xì)節(jié)紧武，動態(tài)）-定義設(shè)計風(fēng)格-可視化設(shè)計-設(shè)計自檢-現(xiàn)場硬件設(shè)備校對-定稿開發(fā)落地-再次現(xiàn)場校對
1.精準(zhǔn)把握業(yè)務(wù)需求剃氧，根據(jù)業(yè)務(wù)場景抽取關(guān)鍵指標(biāo)
關(guān)鍵指標(biāo)是一些概括性詞語，是對一組或者一系列數(shù)據(jù)的統(tǒng)稱阻星。一般情況下朋鞍，一個指標(biāo)在大屏上獨占一塊區(qū)域，所以通過關(guān)鍵指標(biāo)定義妥箕，我們可以知道大屏上大概會顯示哪些內(nèi)容以及大屏?xí)环殖蓭讐K滥酥。確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個指標(biāo)展示的優(yōu)先級（主畦幢、次坎吻、輔）
主：主要指標(biāo)位于屏幕中央多為動效豐富的地圖或翻牌器
次：次要指標(biāo)位于屏幕兩側(cè)多為各類圖表
輔：主要指標(biāo)的補充信息，可不顯示或顯示于副屏或鼠標(biāo)經(jīng)過顯示宇葱。
2.確立指標(biāo)分析維度瘦真，選定可視化圖表類型
在選定指標(biāo)后，就需要跟項目組的其他伙伴討論：我們的各個指標(biāo)主要想給大家展示什么被碗，更進(jìn)一步講某宪，是我們想通過可視化表達(dá)什么樣的規(guī)律和信息。上圖的是數(shù)據(jù)分析中常用的四個類別
聯(lián)系：數(shù)據(jù)之間的相關(guān)性锐朴。
分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍兴喂、表現(xiàn)出怎樣的規(guī)律。
比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面衣迷。
構(gòu)成：指標(biāo)里的數(shù)據(jù)都由那幾部分組成畏鼓、每部分占比如何。
對照以上圖形維度巡揍，制定可視化圖形。突出關(guān)鍵信息菌瘪，根據(jù)可視化展示目標(biāo)吼肥，將重要信息添加輔助線或更改顏色等手段，進(jìn)行信息的凸顯麻车，將用戶但注意力引向關(guān)鍵信息缀皱，幫助用戶理解數(shù)據(jù)意義。比如CPU監(jiān)控案例动猬，可視化的目標(biāo)就是檢測CPU的使用情況啤斗，特別是異常使用情況。所以途中將100%最高臨界線使用特殊的顏色和線形標(biāo)示出來赁咙，異常的使用段用顏色幫助用戶識別钮莲。
注意：
a.切記設(shè)計時不要過度裝飾圖表，喧賓奪主造成數(shù)據(jù)不直觀彼水，對觀者獲取數(shù)據(jù)產(chǎn)生障礙崔拥。
b.圖形化要友好，不能一味地追求視覺效果凤覆，造成圖形識別度降低链瓦、友好度下降。
d.開發(fā)可實現(xiàn)略号。我們需要了解現(xiàn)有數(shù)據(jù)的信息刑峡、規(guī)模洋闽、特征、聯(lián)系等突梦，然后評估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)诫舅。我們設(shè)計的圖形圖標(biāo)，要開發(fā)能夠?qū)崿F(xiàn)阳似，大屏設(shè)計中跟開發(fā)溝通非常重要骚勘，設(shè)計師明確哪些地方可以發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計撮奏。一個項目總有周期與預(yù)算限制俏讹，不會無限期的修改疊加，需要抓住重點畜吊，有取舍泽疆。
3.設(shè)計尺寸與大屏的拼接方式
注意大屏邏輯分辨率（設(shè)計稿尺寸）、顯卡輸出分辨率礼预、視頻矩陣切換器(DVI)支持分辨率眠砾、大屏實際物理分辨率。容易出問題的是顯卡輸出分辨率托酸，信號源的分辨率并不是最終顯卡傳遞到DVI借口的分辨率褒颈，傳遞到DVI接口的分辨率是電腦顯卡所能輸出的最大分辨率。輸出分辨率等于DVI支持分辨率時顯示效果最佳励堡。此外谷丸，多信號源投射效果優(yōu)于單個信號源投射，對于現(xiàn)場直播數(shù)據(jù)大屏应结，一般至少有兩個信號源刨疼，一個投屏，另一個也投屏但處于備用狀態(tài)摊趾。
方法一：拼接屏按照拼接后的橫向像素總和設(shè)計（超過4k等比縮放）,LCD和LED同理币狠。
方法二：按照硬件輸出（信號源）像素設(shè)計，信號源的輸出像素一定是和整個拼接屏成比例或者吻合的砾层。當(dāng)有多個信號源時，有時會通過顯卡自定義電腦屏幕分辨率贱案。此外當(dāng)信號源電腦分辨率的長寬比和大屏物理長寬比不一致時（單信號源）肛炮，也會對被投電腦分辨率做自定義調(diào)整止吐。
注意：拼接屏記得把數(shù)據(jù)避開拼接縫
4.頁面設(shè)計及布局思路-主次分明、條理清晰侨糟、注意留白
頁面的布局主要是依據(jù)業(yè)務(wù)及數(shù)據(jù)的重要程度來布局碍扔，可視化中會把核心指標(biāo)或業(yè)務(wù)的要點放在中間，中間是視覺的中心秕重。其余指標(biāo)按優(yōu)先級依次在核心指標(biāo)周圍兩側(cè)展開不同，大小比例上進(jìn)行調(diào)整。排列數(shù)據(jù)要考慮數(shù)據(jù)的關(guān)聯(lián)性及聯(lián)動性溶耘，應(yīng)該有意識的把他們放在一起或就近二拐，讓他們有關(guān)聯(lián)性，當(dāng)一組數(shù)據(jù)變化時聯(lián)動效果更凸顯凳兵，減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率百新。明確信息層級及視覺流向的引導(dǎo)，使用戶在獲取重要信息的同時達(dá)到視覺平衡庐扫。
在頁面布局時考慮到屏幕拼接方式饭望，盡量把數(shù)據(jù)有序地展示在屏幕內(nèi)，合理避開拼接縫減少對用戶觀感的影響形庭。
布局示例(1920*1080)
5.設(shè)計風(fēng)格的確定
首先要確定應(yīng)用場景時怎樣的（室內(nèi)铅辞、室外、光照萨醒、燈光斟珊、硬件等），考慮目標(biāo)用戶身份（給誰用）验靡。大屏實際上也是運行在瀏覽器里面的Web頁面倍宾，可以用UI 的方式來定義可視化設(shè)計風(fēng)格，AB測試胜嗓、情緒版（這種方法也是目前比較科學(xué)高效的風(fēng)格定義手段）高职。
情緒版步驟：原生關(guān)鍵詞通過腦暴衍生關(guān)鍵詞或者直接搜索得到相關(guān)圖片。分類整理得到情緒版辞州，進(jìn)而提取設(shè)計風(fēng)格怔锌，包括質(zhì)感+構(gòu)成+字體+色彩+圖形。
a.字體
文字和數(shù)字是數(shù)據(jù)信息傳達(dá)的重要組成部分变过，為了更加清晰準(zhǔn)確的傳達(dá)信息埃元，增加可讀性，從字體選擇媚狰，字體大小岛杀，字體間距都有特定要求。
1.字體選擇
a.辨識度
UI設(shè)計中使用無襯線字體是UI界的共識崭孤，但是對于數(shù)據(jù)可視化來說类嗤，字體大小的跨度可以非常大糊肠，在無襯線字體中需要選擇辨識度更高的字體，大的寬度比值更有辨識度遗锣。推薦優(yōu)先使用系統(tǒng)默認(rèn)字體货裹，需要嵌入字體時考慮識別度要高，字體不能太細(xì)精偿，不能太圓潤弧圆，考慮是否免費商用。
中文：微軟雅黑
b.更靈活的字體
支持盡可能多的使用場景笔咽，低分辨率小屏和超大屏的終端顯示上運行良好
c.字間距
寬松的字母間距（字母間的間距應(yīng)小于字偶間距）和合適的中文字間距
2.字體大小
設(shè)置小字體的極限值搔预，以保證在最小顯示時不影響對文字的辨認(rèn)和閱讀。
3.中西文間隔
中西文混排時拓轻，注意中文和西文間的間隔斯撮。適當(dāng)留有間隔，可以幫助用戶更快速的掃視文字內(nèi)容扶叉。
4.如果頁面云端部署勿锅，需要嵌入字體包時，我們可以使用Fontcreator這類軟件把那些用不到的字符（外文枣氧，符號等字符溢十，僅保留中文、拼音达吞、數(shù)字）從字體包中刪掉张弛，然后重新打包上傳，減小字體包大小酪劫，可以優(yōu)化頁面加載體驗吞鸭，避免在替換默認(rèn)字體的過程中出現(xiàn)頁面文字跳動等現(xiàn)象。
b.顏色
配色方案要充分考慮特殊人群對數(shù)據(jù)圖的可讀性覆糟。
1.背景色定義
背景色的選擇與可視化展示的設(shè)備有關(guān)享钞，分為深色、淺色诀蓉、彩色嫩与。
a.大屏背景普遍選擇深色系寝姿，內(nèi)容選擇需要以深色背景為基礎(chǔ)交排，保持內(nèi)容與背景有一定的對比關(guān)系划滋，色調(diào)與明度變化需要有跨度。深色背景可減少拼縫帶來的不適感埃篓，減少屏幕拖影处坪，暗色背景更能聚焦視覺，方便突出內(nèi)容架专，遠(yuǎn)距離觀看也會比較清晰直觀同窘。
b.中小屏背景色
選擇比較廣，淺色部脚、彩色想邦、深色都可以做出很好設(shè)計。相比淺色更適合展示大量的數(shù)據(jù)信息委刘，因為淺色底上數(shù)據(jù)圖表的識別度比較高丧没。而深色、彩色背景更適合渲染簡單數(shù)據(jù)锡移，用于烘托氣氛呕童。
2.圖表色定義
在圖表的顏色運用上，色彩是最直接的信息表達(dá)的方式淆珊，往往比圖形或者文字更加直觀的傳遞信息夺饲，不同顏色的組合也能體現(xiàn)數(shù)據(jù)的邏輯關(guān)系。顏色的表示方法中施符，相比RGB\CMYK往声，可視化中，顏色作為用于數(shù)據(jù)編碼的視覺通道,HSV的顏色表示方式更符合人類感知方式戳吝，更適合展示數(shù)據(jù)浩销。
a.色彩辨識度
確保色彩容易辨識和區(qū)分，對于使用單一色相配色骨坑，明度差異需要全局考慮撼嗓，名都跨度一定要夠大才能更清晰展示數(shù)據(jù)。明度跨度可以通過灰度模式下配色的辨識度來判斷欢唾。
b.色彩跨度
多色相配色在數(shù)據(jù)可視化相當(dāng)常見且警，多色相配色使用戶容易將數(shù)據(jù)與圖像聯(lián)系起來。
當(dāng)需要的顏色較少時礁遣，避免使用相近的色相：同類色和相近色斑芜。盡量選擇對比色或互補色，不同屬性數(shù)據(jù)展示更清晰祟霍。例：美國大選的紅藍(lán)對比色杏头，清晰將選票結(jié)果展示在地圖上
當(dāng)圖標(biāo)需要的顏色較多時盈包，建議最多不超過12種色相。因為通常情況下人在不連續(xù)區(qū)域內(nèi)可以分辨6-12種色相醇王，過多的顏色對傳達(dá)數(shù)據(jù)是沒有作用的呢燥，反而會讓看者迷惑。
如何讓多種顏色看來和諧的取色方法
o 色相提取法：選擇同一飽和度和明度的不同色調(diào)作為可視化圖表的配色寓娩，看起來協(xié)調(diào)統(tǒng)一叛氨。
o 漸變色相色法：不同明度和色相的取色。比如淡紫到深黃的過度棘伴，與淡黃到深紫的過度寞埠，感覺是一樣的配色，但實際兩種配色感覺相差很大焊夸。
淡黃到深紫的過度更自然仁连。所以仿用自然的配色方式會讓圖表更加自然。
取色時阱穗，可以在ps做制作出色相變化的色帶并疊加明度漸變的色帶饭冬，獲得明度和色相均變化的色帶。選擇節(jié)點取色
注意漸變色慎用：大屏普遍色域有偏差颇象，顯示偏色伍伤，因此使用漸變色需要根據(jù)大屏反饋確定是否調(diào)整，純色最佳遣钳。
c.動效
越來越多的可視化展示的數(shù)據(jù)都是實時的扰魂，動效肩負(fù)著承載更多信息和豐富畫面效果的作用
信息承載：可視化項目中，如果非常多的數(shù)據(jù)信息需要展示在一個大屏幕上蕴茴，遇到這種情況劝评，需要對信息進(jìn)行合并整理或通過動畫的方式，在有限的屏幕空間里承載更多信息倦淀，使信息更加聚合蒋畜。
畫面效果：增加細(xì)節(jié)及空間感，背景動效使畫面更加豐富撞叽，考慮單個圖表的出場動畫姻成。設(shè)計上原則是恰當(dāng)?shù)恼故緮?shù)據(jù)。動畫盡量簡單愿棋，復(fù)雜的動畫會導(dǎo)致用戶對數(shù)據(jù)的理解出錯科展。動畫要使用戶可預(yù)期，可使用多次重復(fù)動畫糠雨，讓用戶看到動畫從哪里開始到哪里停止才睹。
6.可視化設(shè)計
根據(jù)定義好的設(shè)計風(fēng)格與選定的圖表類型進(jìn)行合理的可視化設(shè)計。目前常用的有指標(biāo)類信息點和地理類的信息點兩大可視化數(shù)據(jù)。指標(biāo)類信息點可視化效果相對簡單容易實現(xiàn)琅攘，地理類信息一般具有很強的空間感垮庐、豐富的粒子、流光等動效坞琴、高精度的模型和材質(zhì)以及可交互實時演算等特點哨查。對于被投電腦、大屏拼接器等硬件設(shè)備的性能會有要求置济，配置不夠可能出現(xiàn)卡頓甚至崩潰情況解恰，需要提前溝通評估。
注意：極限處理
數(shù)據(jù)是多種多樣不可預(yù)知的，在可視化時需要處理各種極限問題煎饼，才能使數(shù)據(jù)清晰表達(dá)讹挎。
a.數(shù)據(jù)展示細(xì)節(jié)處理
b.選擇合適的圖表新式
例如，在展示數(shù)據(jù)占比的圖表選擇上掷匠，過多分項使得類似面積顯示變得難以區(qū)分滥崩，不能很好顯示份額』蔽恚可以換用橫向柱狀圖來清晰表達(dá)主題夭委。
7.樣圖溝通確認(rèn)
樣圖溝通環(huán)節(jié)崇摄，最初的樣圖不需要十分精致，我們可以把它理解為一個｛低保真｝原型慌烧，然后通過不斷溝通修改逐抑，讓它逐步完善精致起來，也就是小步快跑屹蚊。避免那種一下子走到終點厕氨，然后又大修大改的情況。之前確定了頁面布局汹粤、圖表類型命斧、風(fēng)格特點，這一步我們盡可能用簡單方法嘱兼，把之前幾步的成果在頁面上快速體現(xiàn)出來国葬，先進(jìn)行設(shè)計內(nèi)部自檢，嘗試確認(rèn)：
a.之前的布局讓在現(xiàn)在的設(shè)計中是否合理：信息層級對比與傳達(dá)
b.確立的圖標(biāo)類型帶入數(shù)據(jù)后是否依然客觀準(zhǔn)確
c.配色是否合理并能通過色彩傳達(dá)數(shù)據(jù)的意義芹壕，結(jié)構(gòu)汇四，質(zhì)感打造出的頁面風(fēng)格是否基本傳達(dá)出前期的氛圍和感受
d.已有的樣式、數(shù)據(jù)內(nèi)容踢涌、動效等在開發(fā)實現(xiàn)方面是否存在問題
e.是否存在其他問題等
demo確定后通孽，可以拿設(shè)計圖去現(xiàn)場測試（硬件，色準(zhǔn)睁壁，文字大小在合適的觀看距離是否清晰可見背苦、現(xiàn)場燈光光照等是否對設(shè)計有影響、拼接縫和數(shù)據(jù)是否有穿插堡僻、硬件設(shè)備輸出是否和設(shè)計匹配）
9.頁面定稿糠惫，落地開發(fā)
這里的頁面開發(fā)僅指前端樣式實現(xiàn)，后臺數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就開始進(jìn)行了钉疫，設(shè)計師當(dāng)前的工作是把數(shù)據(jù)接入到前端硼讽，然后用設(shè)計的樣式呈現(xiàn)出來。
主要提供：設(shè)計規(guī)范牲阁，標(biāo)注規(guī)范固阁，顏色，字體字號城菊，切圖（開發(fā)用代碼寫不出的樣式或者動效备燃，比如數(shù)據(jù)容器的邊框、小動效凌唬、頁面整體大背景并齐、部分圖表·。切圖按正常網(wǎng)頁設(shè)計標(biāo)準(zhǔn)切），對于三維場景需要提供三維文件况褪，如obj撕贞、fbx等，特殊動效的范例测垛。
需要注意捏膨，如果大屏頁面需要在不同比例的終端展示，那么此時的標(biāo)注于開發(fā)可以使用rem作為基本單位食侮，這樣實現(xiàn)的大屏頁面在后期會有更好的擴(kuò)展性和適應(yīng)性号涯。
10.整體細(xì)節(jié)調(diào)優(yōu)和測試
這部分指的是頁面開發(fā)完成后，將真實頁面投放到大屏進(jìn)行測試與優(yōu)化锯七。包含兩方面
視覺UI走查：關(guān)鍵視覺元素链快、字體字號、頁面動效起胰、圖形圖表等是否按預(yù)期顯示久又、有無變形、錯位等情況效五。
性能與數(shù)據(jù)方面的測試：圖形圖表動畫是否流暢、數(shù)據(jù)加載炉峰、刷新有無異常畏妖；頁面長時間展示是否存在崩潰、卡死情況疼阔；后臺控制系統(tǒng)能否正常切換前端頁面顯示戒劫。
