前言：數(shù)據(jù)可視化是什么？可視化數(shù)據(jù)有哪些主要特征？為什么要使用大屏展示可視化數(shù)據(jù)？數(shù)據(jù)可視化是綜合運用計算機圖形學、圖像、人機交互等，將采集、清洗、轉(zhuǎn)換、處理過的符合標準和規(guī)范的數(shù)據(jù)映射為可識別的圖形、圖像、動畫甚至視頻，并允許用戶與數(shù)據(jù)可視化進行交互和分析。使用數(shù)據(jù)可視化可以豐富內(nèi)容，引人注意，調(diào)動人的情緒、引發(fā)人的共鳴，傳遞文化和價值。可視化數(shù)據(jù)的最主要目三個特征：新穎而有趣、充實而高效、美感且悅。以大屏作為可視化數(shù)據(jù)的主要載體，其原因在于面積大、可展示信息多、便于關(guān)鍵信息的共享討論及決策，在觀感上給人留下震撼印象，便于營造氛圍、打造儀式感等，目前常用的場景有：數(shù)據(jù)展示、監(jiān)控預警、數(shù)據(jù)分析。

一、 如何選擇信息圖示的分類？

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

1. 數(shù)據(jù)采集需要基于業(yè)務展示需求，即“你想要展示什么？”如：實時數(shù)據(jù)指標、對比類型數(shù)據(jù)指標、統(tǒng)計類型數(shù)據(jù)指標等從相關(guān)的業(yè)務層面提取重要的數(shù)據(jù)，用于大屏數(shù)據(jù)的展示。

2. 數(shù)據(jù)清理則要對數(shù)據(jù)進行歸類處理，明確數(shù)據(jù)之間的關(guān)系，存在“比較型”、“構(gòu)成型”、“聯(lián)系型”、“分布型”。

3. 數(shù)據(jù)分析根據(jù)歸類處理后的數(shù)據(jù)，并結(jié)合從維度的劃分：“一維數(shù)據(jù)”、“二維數(shù)據(jù)”、“三維數(shù)據(jù)”、“多維數(shù)據(jù)”、“時態(tài)數(shù)據(jù)”、“層次數(shù)據(jù)”等，將強關(guān)聯(lián)性的數(shù)據(jù)進行組合重構(gòu)，得到全新的數(shù)據(jù)信息關(guān)系；

4. 可視化數(shù)據(jù)，根據(jù)重構(gòu)后的數(shù)據(jù)信息關(guān)系，選擇對應的可適用數(shù)表信息圖，如：條形圖、柱狀圖、雷達圖、折線圖、正態(tài)分布圖、散點圖、實時3d渲染地圖等；可參考下圖選擇對應的數(shù)表信息。

注：下圖源于文章《Visual Business Intelligence》，作者Stephen Few

二、 屏幕分辨率有哪些注意事項？

為了最優(yōu)化展示效果，首先需要了解物理大屏長款比，確定設計稿的尺寸；其次我們需要清楚大屏系統(tǒng)的內(nèi)在原理：【信號源】--->【大屏拼接器】--->【播放控制設備】,一般情況下設計稿的分辨率多為1920px*1080px（即電腦的分辨率）。同時，我們還需要理解以下四個概念：“大屏邏輯分辨率（設計稿尺寸）”、“顯卡輸出分辨率”、“視頻矩陣切換器（ DVI ）支持分辨率”、“大屏實際物理分辨率”。

最佳展示效果：

大屏邏輯分辨率（設計稿尺寸）長寬比 = 大屏實際物理分辨率長寬比

大屏邏輯分辨率（設計稿尺寸）長寬比 = 顯卡輸出分辨率長寬比

顯卡輸出分辨率 = 視頻矩陣切換器（ DVI ）支持分辨率 = 大屏實際物理分辨率

目前作為監(jiān)控大屏，由于監(jiān)控數(shù)量的龐大，常常被劃分為總屏和分屏?？偲炼嘤糜谡故臼录顟B(tài)趨勢、風險預警、風險處理進展；分屏則多用于展示詳細的數(shù)據(jù)分析和風險事件的處理。如何排布數(shù)據(jù)都需要緊密結(jié)合業(yè)務需求和用戶體驗。

三、 數(shù)據(jù)的排版布局有哪些規(guī)律？

在確定了設計稿的尺寸后，需要對頁面布局和劃分，對于數(shù)據(jù)的排布劃分我們的重要原則：主次分明、條理清晰、注意留白。根據(jù)業(yè)務需求抽取關(guān)鍵性的指標，按照重要程度可分為【主】、【次】、【輔】。

1. 主：主要指標多位于屏幕正中央，可添加適當?shù)膭有г鰪娨曈X效果；

2. 次：次要指標多位于屏幕的兩次，較多表現(xiàn)為各類圖表；

3. 輔：輔助信息多為主要指標的補充信息，常伴隨交互效果或動效下呈現(xiàn)，可展現(xiàn)亦可不展現(xiàn)；

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

1. 對比(Contrast)：完全不同的數(shù)據(jù)類型，選擇截然不同信息圖示。

2. 重復(Repetition)：相同類型或相似數(shù)據(jù)，選用盡可能相同的展示。

3. 對齊(Alignment)：利用對齊方式保證信息圖示之間的視覺聯(lián)系。

4. 親密性(Proximity)：相關(guān)的數(shù)據(jù)項組織在一起，視覺上呈現(xiàn)出一體化。

四、 如何選擇配色方案？

可視化大屏的配色是視覺呈現(xiàn)的重要組成要素，配色常常與行業(yè)類型、業(yè)務形態(tài)、應用場景、設計理念、營造氛圍等緊密相關(guān)。配色方案的選擇有以下幾點建議：

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

2. 仿造自然的配色；

3. 使用深色暗色作為背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現(xiàn)的影響；同時暗色背景更能聚焦視覺，也方便突出內(nèi)容；

4. 適當使用漸變色，由于大屏普遍存在色域偏差，更建議多使用純色；

五、 可視化數(shù)據(jù)的字體有哪些考慮？

可視化大屏的設計過程中，優(yōu)先使用系統(tǒng)默認字體，如有特殊需要嵌入字體時，需考慮字體的可識別性、設計風格融合度、是否可免費商用（※※※）。

一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數(shù)字。減小字體包的大小，可以優(yōu)化頁面加載體驗，避免在替換默認字體的過程中出現(xiàn)頁面文字跳動等現(xiàn)象。

推薦字體包括：AVENIR NEXT、HELVETICA NEUE、SEGOE UI、ACENS、DIN、DIGITAL-7等。

六、 動效添加的作用？

由于可視化數(shù)據(jù)允許用戶與數(shù)據(jù)可視化進行交互，在數(shù)據(jù)展示過程中，可以適當添加動效、插入視頻，提升整體的視覺效果。由于大屏展示的許多數(shù)據(jù)都是實時變化的，為了減少數(shù)據(jù)變化刷新時的突然性，動效設計必不可少。在整個動效設計的過程中，除過場動畫、數(shù)據(jù)的變化外，動效還肩負起增添空間感、平衡畫面和整合信息的作用。

但是在增加動效的同時，需考慮服務器的承載量。避免在增加動效后喧賓奪主，因此對動效要做適當?shù)娜∩帷?

七、 可視化輔助工具有哪些？

在設計的過程中，我們可以大量參考相關(guān)平臺的可視化數(shù)據(jù)圖表樣式，大多數(shù)平臺的圖表樣式都是基于代碼實現(xiàn)的。在設計的階段詳細參考，有利于降低開發(fā)成本，有利于提升可視化數(shù)據(jù)大屏的可拓展性，便于后期的迭代管理。

可視化輔助工具可分為：【可視化工具庫】、【原生開發(fā)】、【第三方服務】

八、 如何保證展示的品質(zhì)？

可視化數(shù)據(jù)的視覺設計是一個不斷迭代的過程，同時大屏的設計與常規(guī)的設計有較大的區(qū)別。與大屏【溝通】是比較重要也是個特殊的環(huán)節(jié)。大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環(huán)境，很多問題只有設計稿投到大屏上才能夠被發(fā)現(xiàn)，因此在樣圖溝通確認、開發(fā)出 demo，都需要反復測試多次，不斷的迭代與精進。

在完成視覺稿的設計之后，【如何提升整體視覺的還原度】成為我們設計與前端溝通的重要內(nèi)容。大屏的本質(zhì)實際是一個web頁面，切圖與標注，成為還原度的重要組成因素。

作者：慕斯小姐姐

原文鏈接：https://www.zcool.com.cn/article/ZOTM1NDA4.html