參考工具

• 阿里云DataV https://data.aliyun.com/visual/datav
• 百度Sugar https://cloud.baidu.com/product/sugar.html
• 騰訊云圖 https://cloud.tencent.com/product/yuntu
• FineReport http://www.finereport.com/
• 大屏數(shù)據(jù)可視化 https://yyhsong.github.io/iDataV/
• https://github.com/yyhsong/iDataV

可視化工具

• https://rawgraphs.io/
• https://www.chartjs.org/
• https://d3js.org/
• https://www.fusioncharts.com/
• http://philogb.github.io/jit/
• https://www.zingchart.com/
• http://www.flotcharts.org/
• https://gephi.org/
• https://infogram.com/
• https://www.icharts.net/

圖表插件

• https://echarts.baidu.com/
• http://antv.alipay.com
• https://www.highcharts.com.cn/

數(shù)據(jù)可視化

• 數(shù)據(jù)可視化是把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更加易于理解的形式展現(xiàn)出來的一系列手段。
• 數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用杨伙。
• 數(shù)據(jù)可視化除了可視稽犁，還可以有交流工秩、互動的特點(diǎn)沉颂。
• 數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射纯露，是抽象數(shù)據(jù)的具象表達(dá)促脉。

數(shù)據(jù)可視化的本質(zhì)

大屏數(shù)據(jù)可視化

大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)辰斋，大屏易于在觀感上給人留下震撼印象策州，便于營造某些獨(dú)特氛圍，打造儀式感宫仗。原本看不見的數(shù)據(jù)可視化后够挂，便能調(diào)動人的情緒，引發(fā)人的共鳴藕夫，傳遞企業(yè)文件和價值孽糖。

利用面積大可展示信息多的特點(diǎn)，通過關(guān)鍵信息大屏共享的方式可方便團(tuán)隊(duì)討論和決策毅贮，所以大屏也常用來做數(shù)據(jù)分析檢測使用办悟。大屏數(shù)據(jù)可視化目前主要有信息展示、數(shù)據(jù)分析滩褥、監(jiān)控預(yù)警三類病蛉。

大屏終端

常見大屏類型包括16:9屏、超寬屏瑰煎、折疊屏铺然、三面屏、T字屏...

拼接大屏

大屏幾乎都是拼接屏酒甸，UI設(shè)計(jì)時不用考慮屏幕縫隙影響內(nèi)容的呈現(xiàn)魄健，內(nèi)容不會丟失，但有可能影響視覺的表現(xiàn)烘挫。所以設(shè)計(jì)時可建立縫隙位置的參考線避免類似情況發(fā)生【骷瑁現(xiàn)在企業(yè)常用的無縫隙柬甥、1.7mm縫隙饮六、3.5mm縫隙三種拼接大屏，縫隙越小價格越貴苛蒲。

顯示特點(diǎn)

• 面積巨大：字體不能設(shè)計(jì)很小
• 深色背景：緊張感強(qiáng)卤橄，讓視覺更好聚焦。

屏幕尺寸

• 屏幕尺寸與視覺稿設(shè)計(jì)比例要匹配臂外，屏幕分辨率與可視化界面清晰度相關(guān)窟扑，PPI值越高畫面細(xì)節(jié)越豐富。
• 拼接的每塊小屏一般是16:9的高清屏漏健，設(shè)計(jì)尺寸可以把上下高度設(shè)定為1080px嚎货，長度按照拼接屏的數(shù)量比例得出長度的設(shè)計(jì)尺寸。

例如：尺寸 (10500mm + 24000mm + 10500mm) x 6000mm蔫浆，像素點(diǎn)6144x1024殖属，PPI為45。

屏幕尺寸

例如：3x5大屏

3x5大屏

屏幕分辨率

為了最優(yōu)化展示效果瓦盛，首先需要了解物理大屏長寬比洗显，確定設(shè)計(jì)稿尺寸外潜，其次需要清楚大屏系統(tǒng)的內(nèi)在原理：信號源 - 大屏接收器 - 播放控制設(shè)備。

大屏系統(tǒng)內(nèi)在原理

一般情況下設(shè)計(jì)稿的分辨率多為1920 x 1080挠唆，同時需要要理解四個概念：

• 大屏邏輯分辨率 = 設(shè)計(jì)稿尺寸
• 顯卡輸出分辨率
• 視頻矩陣切換器（DVI）支持分辨率
• 大屏實(shí)際物理分辨率

最佳展示效果

• 大屏邏輯分辨率（設(shè)計(jì)稿尺寸）長寬比 = 大屏實(shí)際物理分辨率長寬比
• 大屏邏輯分辨率（設(shè)計(jì)稿尺寸）長寬比 = 顯卡輸出分辨率長寬比
• 顯卡輸出分辨率 = 視頻矩陣切換器（DVI）支持分辨率 = 大屏實(shí)際物理分辨率

設(shè)計(jì)原則

數(shù)據(jù)墨水比例原則
定義表現(xiàn)數(shù)據(jù)的墨水在打印圖表的總墨水的占比处窥，在合理的基礎(chǔ)上，使數(shù)據(jù)墨水比例最大化并去除非數(shù)據(jù)墨水和多余的數(shù)據(jù)墨水玄组。 --- 設(shè)計(jì)師愛德華 R 塔夫特 《量化信息的視覺表現(xiàn)》

數(shù)據(jù)墨水比例原則表達(dá)的核心思想使簡潔滔驾，圖表要簡潔，數(shù)據(jù)要簡潔俄讹。大屏可視化是針對客戶場景嵌灰，理解數(shù)據(jù)復(fù)雜性的基礎(chǔ)上，通過可視化手段颅悉，形成高度提煉的故事沽瞭。

數(shù)據(jù)可視化通俗說就是用圖表講故事，人們關(guān)心的從來不是數(shù)據(jù)剩瓶，數(shù)據(jù)不是重點(diǎn)驹溃，它只是達(dá)到目的的手段，人們關(guān)心的數(shù)據(jù)背后的意義延曙。

在一部完成作品所體現(xiàn)的全部創(chuàng)作努力中豌鹤，作家75%以上的勞動都用在了故事設(shè)計(jì)上。 ---《故事》

調(diào)研

• 展示主題
• 數(shù)據(jù)權(quán)威和準(zhǔn)確性

設(shè)計(jì)關(guān)鍵詞：科技枝缔、動態(tài)布疙、可交互

設(shè)計(jì)流程

設(shè)計(jì)流程

指標(biāo)設(shè)計(jì)

關(guān)鍵指標(biāo)是一些概括性詞語，是對一組或一系列數(shù)據(jù)的統(tǒng)稱愿卸。一般而言一個指標(biāo)在大屏上獨(dú)占一塊區(qū)域灵临，通過關(guān)鍵指標(biāo)定義，就直到大屏上大概會顯示哪些以及大屏?xí)环譃閹讐K趴荸。確定關(guān)鍵指標(biāo)后儒溉，根據(jù)業(yè)務(wù)需求擬定出各個指標(biāo)展示的優(yōu)先級（主、次发钝、輔）顿涣。

指標(biāo)布局

大屏一定是以展示數(shù)據(jù)為核心，任何炫酷表現(xiàn)都要建立在不影響數(shù)據(jù)的有效展示上酝豪。一個大屏一定會有明確的主題涛碑，推薦實(shí)用多維度拆解北極星指標(biāo)法。

1. 首先確定一個北極星指標(biāo)孵淘，即主題蒲障。
2. 多維度拆解北極星指標(biāo)，從時間 、地理晌涕、計(jì)劃滋捶、占比等維度拆解主題。

視覺

• 緊張：數(shù)據(jù)的實(shí)時余黎、動效的變化
• 科技：新穎的圖表重窟、新穎的動效
• 豐富：數(shù)據(jù)豐富，層次感強(qiáng)惧财，圖標(biāo)類型豐富巡扇，強(qiáng)烈的空間感。
• 權(quán)威：安全元素

表現(xiàn)

• 地圖
• 排行
• 餅圖
• 列表
• 數(shù)字
• 趨勢

數(shù)據(jù)

• 拆分維度垮衷，將需求拆分到最小維度厅翔。
• 確定優(yōu)先，選擇最佳數(shù)據(jù)來說明觀念搀突。
• 合并維度刀闷，對維度元素進(jìn)行歸類
• 最佳表現(xiàn)，確定那種表現(xiàn)形式來提現(xiàn)數(shù)據(jù)

設(shè)計(jì)

• 模塊設(shè)計(jì)仰迁，考慮模塊縱橫柵格布局設(shè)計(jì)甸昏。
• 維度表現(xiàn)，具體維度用什么表現(xiàn)確定徐许。
• 動效設(shè)計(jì)施蜜，時間把握和情感控制。
• 數(shù)量控制雌隅，對是實(shí)施數(shù)據(jù)得可控性進(jìn)行展現(xiàn)上得控制翻默。

功能性結(jié)構(gòu)層次

布局排版

確定設(shè)計(jì)稿尺寸后需要對頁面布局和劃分，對于數(shù)據(jù)的排布劃分原則：主次分明恰起、條理清晰修械、注意留白。根據(jù)業(yè)務(wù)需求抽取關(guān)鍵性的指標(biāo)村缸，按照重要程度可分為主祠肥、次、輔梯皿。

• 主：主要指標(biāo)多位于屏幕正中央，可添加適當(dāng)動效增強(qiáng)視覺效果县恕。
• 次：次要指標(biāo)多位于屏幕兩邊东羹，較多變現(xiàn)為各類圖表。
• 輔：輔助信息多為主要指標(biāo)的補(bǔ)充信息忠烛，常伴隨交互效果或動態(tài)下呈現(xiàn)，可展示亦可不展示。

主次輔

布局的目的是為了讓業(yè)務(wù)指標(biāo)和數(shù)據(jù)合理地展現(xiàn)凰萨，展現(xiàn)全局業(yè)務(wù)一般分為主要指標(biāo)和次要指標(biāo)兩個層次，主要指標(biāo)反映核心業(yè)務(wù)斟薇，次要指標(biāo)用于進(jìn)一步闡述分析。推薦主次分布版式恕酸，讓信息一目了然堪滨，也可以實(shí)用平均分布，或二者結(jié)合蕊温。

例如：監(jiān)控大屏由于監(jiān)控?cái)?shù)量龐大袱箱，常常被劃分為總屏和分屏，總屏多用于展示事件狀態(tài)趨勢义矛、風(fēng)險預(yù)警发笔、風(fēng)險處理進(jìn)度。分屏則多用于展示詳細(xì)的數(shù)據(jù)分析和風(fēng)險事件的處理凉翻。如何排布數(shù)據(jù)需要緊密結(jié)合業(yè)務(wù)需求和用戶體驗(yàn)了讨。

布局排版

大屏排版布局上需要遵循四大原則（CRAP）

• 對比（Contrast）：完全不同的數(shù)據(jù)類型，選擇間然不同的信息圖示制轰。
• 重復(fù)（Repetition）：相同類型或相似數(shù)據(jù)量蕊，選用盡可能相同的信息圖示。
• 對齊（Alignment）：利用對齊方式保證信息圖示之間的視覺聯(lián)系
• 親密性（Proximity）：相關(guān)的數(shù)據(jù)項(xiàng)組織在一起艇挨，視覺上呈現(xiàn)出一體化残炮。

四大原則

配色方案

可視化大屏的配色是視覺呈現(xiàn)的重要組成要素，配色常與行業(yè)類型缩滨、業(yè)務(wù)形態(tài)势就、應(yīng)用場景、設(shè)計(jì)理念脉漏、營造氛圍等密切相關(guān)苞冯。

色彩搭配的原則

• 色彩明度與飽和度差異顯著對比鮮明，避免使用鄰近色配色侧巨。
• 仿造自然配色舅锄，避免色域強(qiáng)對比配色方案。
• 暗色背景聚焦視覺司忱，減少拼縫的不適感皇忿。避免大面積的淺色背景。
  使用深色調(diào)作為背景可減少拼縫帶來的不適感坦仍，由于背景面積大鳍烁，使用暗色背景能減少色差對整體表現(xiàn)得影響，同時暗色背景更能聚焦視覺繁扎，也方便突出內(nèi)容幔荒。
  深色調(diào)&一致性糊闽，深色調(diào)緊張感強(qiáng)，讓視覺更好地聚焦爹梁，大屏暗色調(diào)看上去更柔和舒服不刺眼右犹，也比較會省電。
• 大屏存在色域差建于一多使用純色姚垃，避免大量使用漸變色念链。
  適當(dāng)使用漸變色，由于大屏普遍存在色域偏差莉炉，更建議多使用純色钓账。

例如：整體背景深色系，以深藍(lán)色為主絮宁，推薦為單個元素搭配透明色梆暮，透明度設(shè)置在10%上下。

配色

例如：

• 標(biāo)題：#00FF26
• 背景：#0FEBFF
• 點(diǎn)綴：#53EFC0
• 點(diǎn)綴：#FD6760

點(diǎn)綴：適當(dāng)給元素標(biāo)題绍昂、數(shù)字添加諸如邊框啦粹、圖畫等在內(nèi)得點(diǎn)綴效果，能幫助提升整體的美觀度窘游。

字體設(shè)計(jì)

可視化數(shù)據(jù)的字體有哪些考慮呢唠椭？

• 優(yōu)先使用默認(rèn)字體
• 字體的可識別性強(qiáng)
• 設(shè)計(jì)風(fēng)格的融合度
• 是否可以免費(fèi)商用

規(guī)范設(shè)計(jì)：字體規(guī)范、色彩使用忍饰、界面元素贪嫂、圖形圖標(biāo)、界面全覽

字體不小于12號艾蓝，可用于圖表標(biāo)注力崇，數(shù)據(jù)信息建議14號以上。字體不一定只用一種赢织，可實(shí)用科技感強(qiáng)的字體亮靴。

• 數(shù)字字體：字號大于40pt時可使用Acens字體。
• 數(shù)字字體：字號小于40pt可使用Din字體
• 英文字體：使用Helvetica Neue于置，適用于界面中所有英文字符茧吊。
• 中文字體：使用微軟雅黑，適用于界面所有中中文字符八毯。

信息圖示

數(shù)據(jù)可視化處理的流程是：數(shù)據(jù)采集 - 數(shù)據(jù)清理 - 數(shù)據(jù)分析 - 可視化數(shù)據(jù)

• 數(shù)據(jù)采集
  需要基于業(yè)務(wù)展示需求搓侄，也就是“展示什么”。比如實(shí)時數(shù)據(jù)指標(biāo)宪彩、對比類型數(shù)據(jù)指標(biāo)休讳、統(tǒng)計(jì)類型數(shù)據(jù)指標(biāo)等，從相關(guān)業(yè)務(wù)層面提取的重要數(shù)據(jù)尿孔，用于大屏數(shù)據(jù)展示。
• 數(shù)據(jù)清理
  對數(shù)據(jù)進(jìn)行歸類處理，明確數(shù)據(jù)之間的關(guān)系活合，存在比較型雏婶、構(gòu)成型、聯(lián)系型白指、分布型留晚。
• 數(shù)據(jù)分析
  根據(jù)歸類處理后的數(shù)據(jù)，并結(jié)合從維度的劃分：一維數(shù)據(jù)告嘲、二維數(shù)據(jù)错维、三維數(shù)據(jù)、多維數(shù)據(jù)橄唬、時態(tài)數(shù)據(jù)赋焕、層次數(shù)據(jù)等，將強(qiáng)關(guān)聯(lián)性的數(shù)據(jù)進(jìn)行組合重構(gòu)仰楚，得到全新的數(shù)據(jù)信息關(guān)系隆判。
• 可視化數(shù)據(jù)
  根據(jù)重構(gòu)后的數(shù)據(jù)信息關(guān)系，選擇對應(yīng)的可適用數(shù)表信息圖僧界，比如條形圖侨嘀、柱狀圖、雷達(dá)圖捂襟、折線圖咬腕、正態(tài)分布圖、散點(diǎn)圖葬荷、實(shí)時3D渲染地圖等涨共。

信息展示

信息圖

http://www.reibang.com/p/d8fccd0c55d6

• 折線圖

折線圖用于表示數(shù)據(jù)的變化和趨勢，坐標(biāo)軸的不同對折線的變化幅度有很大影響闯狱。折線上下大概占2/3的位置數(shù)據(jù)表現(xiàn)清晰合理煞赢。

折線圖線條粗細(xì)合理，過細(xì)的折線會降低數(shù)據(jù)表現(xiàn)哄孤，過粗的折線會損失折線中的數(shù)據(jù)波動細(xì)節(jié)照筑，視覺上較難精確找到折現(xiàn)點(diǎn)的相應(yīng)數(shù)值。推薦使用兩個像素的線瘦陈，看起來會比較合適凝危。