前言：數據可視化是什么？可視化數據有哪些主要特征？為什么要使用大屏展示可視化數據？數據可視化是綜合運用計算機圖形學、圖像、人機交互等，將采集、清洗、轉換、處理過的符合標准和規范的數據映射為可識別的圖形、圖像、動畫甚至視頻，並允許用戶與數據可視化進行交互和分析。使用數據可視化可以豐富內容，引人注意，調動人的情緒、引發人的共鳴，傳遞文化和價值。可視化數據的最主要目三個特征：新穎而有趣、充實而高效、美感且悅。以大屏作為可視化數據的主要載體，其原因在於面積大、可展示信息多、便於關鍵信息的共享討論及決策，在觀感上給人留下震撼印象，便於營造氛圍、打造儀式感等，目前常用的場景有：數據展示、監控預警、數據分析。
一、 如何選擇信息圖示的分類？
數據可視化處理流程是：【數據采集】- 【數據清理】- 【數據分析】- 【可視化數據】。
1. 數據采集需要基於業務展示需求，即“你想要展示什么？”如：實時數據指標、對比類型數據指標、統計類型數據指標等從相關的業務層面提取重要的數據，用於大屏數據的展示。
2. 數據清理則要對數據進行歸類處理，明確數據之間的關系，存在“比較型”、“構成型”、“聯系型”、“分布型”。
3. 數據分析根據歸類處理后的數據，並結合從維度的划分：“一維數據”、“二維數據”、“三維數據”、“多維數據”、“時態數據”、“層次數據”等，將強關聯性的數據進行組合重構，得到全新的數據信息關系；
4. 可視化數據，根據重構后的數據信息關系，選擇對應的可適用數表信息圖，如：條形圖、柱狀圖、雷達圖、折線圖、正態分布圖、散點圖、實時3d渲染地圖等；可參考下圖選擇對應的數表信息。
注：下圖源於文章《Visual Business Intelligence》，作者Stephen Few
二、 屏幕分辨率有哪些注意事項？
為了最優化展示效果，首先需要了解物理大屏長款比，確定設計稿的尺寸；其次我們需要清楚大屏系統的內在原理：【信號源】--->【大屏拼接器】--->【播放控制設備】,一般情況下設計稿的分辨率多為1920px*1080px（即電腦的分辨率）。同時，我們還需要理解以下四個概念：“大屏邏輯分辨率（設計稿尺寸）”、“顯卡輸出分辨率”、“視頻矩陣切換器（ DVI ）支持分辨率”、“大屏實際物理分辨率”。
最佳展示效果：
大屏邏輯分辨率（設計稿尺寸）長寬比 = 大屏實際物理分辨率長寬比
大屏邏輯分辨率（設計稿尺寸）長寬比 = 顯卡輸出分辨率長寬比
顯卡輸出分辨率 = 視頻矩陣切換器（ DVI ）支持分辨率 = 大屏實際物理分辨率
目前作為監控大屏，由於監控數量的龐大，常常被划分為總屏和分屏。總屏多用於展示事件狀態趨勢、風險預警、風險處理進展；分屏則多用於展示詳細的數據分析和風險事件的處理。如何排布數據都需要緊密結合業務需求和用戶體驗。
三、 數據的排版布局有哪些規律？
在確定了設計稿的尺寸后，需要對頁面布局和划分，對於數據的排布划分我們的重要原則：主次分明、條理清晰、注意留白。根據業務需求抽取關鍵性的指標，按照重要程度可分為【主】、【次】、【輔】。
1. 主：主要指標多位於屏幕正中央，可添加適當的動效增強視覺效果；
2. 次：次要指標多位於屏幕的兩次，較多表現為各類圖表；
3. 輔：輔助信息多為主要指標的補充信息，常伴隨交互效果或動效下呈現，可展現亦可不展現；
在大屏的排版布局上，需要遵循四大原則（CRAP）：
1. 對比(Contrast)：完全不同的數據類型，選擇截然不同信息圖示。
2. 重復(Repetition)：相同類型或相似數據，選用盡可能相同的展示。
3. 對齊(Alignment)：利用對齊方式保證信息圖示之間的視覺聯系。
4. 親密性(Proximity)：相關的數據項組織在一起，視覺上呈現出一體化。
四、 如何選擇配色方案？
可視化大屏的配色是視覺呈現的重要組成要素，配色常常與行業類型、業務形態、應用場景、設計理念、營造氛圍等緊密相關。配色方案的選擇有以下幾點建議：
1. 色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色；
2. 仿造自然的配色；
3. 使用深色暗色作為背景可減少拼縫帶來的不適感。由於背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容；
4. 適當使用漸變色，由於大屏普遍存在色域偏差，更建議多使用純色；
五、 可視化數據的字體有哪些考慮？
可視化大屏的設計過程中，優先使用系統默認字體，如有特殊需要嵌入字體時，需考慮字體的可識別性、設計風格融合度、是否可免費商用（※※※）。
一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對於大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字。減小字體包的大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。
推薦字體包括：AVENIR NEXT、HELVETICA NEUE、SEGOE UI、ACENS、DIN、DIGITAL-7等。
六、 動效添加的作用？
由於可視化數據允許用戶與數據可視化進行交互，在數據展示過程中，可以適當添加動效、插入視頻，提升整體的視覺效果。由於大屏展示的許多數據都是實時變化的，為了減少數據變化刷新時的突然性，動效設計必不可少。在整個動效設計的過程中，除過場動畫、數據的變化外，動效還肩負起增添空間感、平衡畫面和整合信息的作用。
但是在增加動效的同時，需考慮服務器的承載量。避免在增加動效后喧賓奪主，因此對動效要做適當的取舍。
七、 可視化輔助工具有哪些？
在設計的過程中，我們可以大量參考相關平台的可視化數據圖表樣式，大多數平台的圖表樣式都是基於代碼實現的。在設計的階段詳細參考，有利於降低開發成本，有利於提升可視化數據大屏的可拓展性，便於后期的迭代管理。
可視化輔助工具可分為：【可視化工具庫】、【原生開發】、【第三方服務】
八、 如何保證展示的品質？
可視化數據的視覺設計是一個不斷迭代的過程，同時大屏的設計與常規的設計有較大的區別。與大屏【溝通】是比較重要也是個特殊的環節。大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，很多問題只有設計稿投到大屏上才能夠被發現，因此在樣圖溝通確認、開發出 demo，都需要反復測試多次，不斷的迭代與精進。
在完成視覺稿的設計之后，【如何提升整體視覺的還原度】成為我們設計與前端溝通的重要內容。大屏的本質實際是一個web頁面，切圖與標注，成為還原度的重要組成因素。
作者：慕斯小姐姐
原文鏈接：https://www.zcool.com.cn/article/ZOTM1NDA4.html