編輯導語：如今隨著科技的發(fā)展，數(shù)據(jù)可視化大屏逐漸深入我們的工作中去，數(shù)據(jù)本身就是一個比較直觀的方法，數(shù)據(jù)可視化更是直觀地體現(xiàn)出信息的復雜化以及多樣性；本文作者分享了關于數(shù)據(jù)可視化大屏的相關規(guī)范總結，我們一起來看一下。

一、大屏數(shù)據(jù)可視化概念

大屏數(shù)據(jù)可視化在百度百科上是這樣的：數(shù)據(jù)可視化，是關于數(shù)據(jù)視覺表現(xiàn)形式的科學技術研究；其中，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為，一種以某種概要形式抽提出來的信息，包括相應信息單位的各種屬性和變量，這是一個比較官方和專業(yè)的概念。

在實際的工作中，我們一般根據(jù)大屏的功能將其分為三個類型：

• 信息展示；
• 數(shù)據(jù)分析；
• 監(jiān)控預警；

充分的利用大屏篇幅大、單屏可展示信息多、展示信息多樣的特點，將復雜、抽象、專業(yè)的數(shù)據(jù)內(nèi)容，通過直觀、動態(tài)、通俗多樣更加直觀的方式展現(xiàn)出來，用更加易于理解的方式為用戶做出更好的決策提供依據(jù)。

二、大屏設計需求采集

明確的產(chǎn)品功能需求是做任何產(chǎn)品設計的第一步，作為產(chǎn)品經(jīng)理需要想清楚大屏展示的內(nèi)容動線，需要給觀者講述什么故事；由于視覺展示往往也起著決定性作用，所以在需求分析排布時設計師需要提前加入項目中了解項目需求，以展示問題解決問題為目標將業(yè)務模塊理出順序。

據(jù)此，首先分析大屏展示的類型，之后確認大屏需要展示的內(nèi)容。根據(jù)大屏展示類型和內(nèi)容確認各個數(shù)據(jù)展示的方式和圖形圖案及動態(tài)。

三、視覺設計原則

使用Eagle圖形收藏軟件，進行相關的內(nèi)容存儲，以便在確定需求之后快速查找靈感，綜合下邊的原則：

• 關鍵詞：FUI \ HUD \? SCI-FI。
• 設計網(wǎng)站：behance、dribbble、站酷、Tob.design、UI中國、花瓣、pinterest。
• 業(yè)務場景：智慧園區(qū)、智慧安防、智慧交通、智慧城市、智慧監(jiān)獄、智慧水利、智能客服、智慧倉儲、智慧醫(yī)藥、智慧零售、智慧工業(yè)、數(shù)字港口、智慧工程。

四、大屏硬件的分析和確認

硬件是數(shù)據(jù)大屏展示的最終載體，明確的硬件規(guī)格是設計展示方式的必要前提；在目前LED市場上，數(shù)據(jù)可視化最終落地平臺一般有：大屏、拼接屏、LED大屏、DLP大屏（無縫隙拼接市場占有率較高）、LCD、PDP（3mm拼接縫隙）需要清除了解大屏物理尺寸及視頻輸出分辨率，確定設計稿尺寸。

根據(jù)需求和硬件規(guī)格指標確定頁面展示的方式，一般展示方式由上中下、左中右、中間地圖四周包圍等方式。

作為B端產(chǎn)品展示大屏，在實際工作中很可能會遇到相同的需求內(nèi)容要求展示在不同比例的大屏；這時將設計稿的設計尺寸高度固定，寬度設置為自適應，用一個設計稿一次開發(fā)解決不同尺寸適配問題（當然不可能是全部）。

五、各種細節(jié)內(nèi)容選擇

確定好整體布局之后，要對各個數(shù)據(jù)展示的細節(jié)做出選擇：

1. 圖標類型的選擇

將抽象的需求用圖表的形式展示，一般圖表分：比較類、占比類、區(qū)間類、關聯(lián)類、趨勢類、時間類、地圖類。

不同展示內(nèi)容選用不同形式的圖表，但有時候為了視覺效果豐富，不會在一個大屏里顯示相同的圖表展示方式，這時需要了解圖表特性與需求內(nèi)容將圖表差異化展示。并在項目積累到一定程度時整合圖表庫以便于下次項目快速設計避免重復工作。

2. 字形字號的選擇

一般大屏設計與開發(fā)盡量選擇自帶字體微軟雅黑，數(shù)字字體選用din，特殊字體可將字體包給到開發(fā)嵌入程序中。

根據(jù)用戶的需求，字體的大小要根據(jù)實際情況規(guī)范靈活應用。

3. 整體色系顏色等選擇

顏色選用應以信息展示清晰為最基本要素，在主次清晰的情況下選擇視覺效果較舒適的顏色搭配，在此之前需要了解大屏的顯色模式，在不支持漸變色的情況下盡量避免漸變色的使用。

4. 基礎組件選擇

在前端調(diào)用一些現(xiàn)成圖表組件時候，添加一些背景組件能夠豐富畫面，增強頁面層次。

結合前端工程師的圖標庫，進行進一步優(yōu)化。

一般有：原型、方形、點位、彈出，格線等組件，在整體設計中，根據(jù)數(shù)據(jù)的不同進行選擇，也可以根據(jù)實際的場景形象話繪制圖表、地圖等。

六、大屏產(chǎn)品設計把控注意事項

在大屏實際展示中會出現(xiàn)以下情況，產(chǎn)品對下一步的設計和UI展示效果及開發(fā)過程進行跟蹤控制：

1）屏幕投射效果不佳

如果條件允許的情況下應當設計前先用已經(jīng)完成的不同風格的大屏設計在屏幕上投放，了解顏色差距，對比色臨近色漸變色在大屏上是否存在色差，如若效果不好應適當避免效果差的設計方式。

2）等比例放大投射會發(fā)虛問題

首先需要明白幾個概念：

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

當顯卡輸出分辨率=DVI支持分辨率時顯示效果最佳，另外多個信號源投射優(yōu)于單個信號源投射 。

3）大屏顯示被拉伸或壓縮

一般情況下，前端只需要對設計稿還原就好，可能由于視頻擴展器顯示不正確導致壓縮或拉伸，現(xiàn)在需要了解被壓縮的比例，對其進行校正，再者可以通過視頻自定義分辨率解決問題。

4）圖表類樣式參考及實現(xiàn)

• 圖表工具：echarts、hichcharts。
• 第三方開發(fā)工具：datav數(shù)據(jù)可視化、騰訊云圖、百度智能云。
• 原生開發(fā)：HTML5、JS、CSS、WebGL、unity。

5）跟蹤開發(fā)過程中數(shù)據(jù)展示刷新頻率及其用戶個性化自主設定，程序的輪詢機制等進行跟蹤把控。

本文由 @頑固不化小冰塊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載

題圖來自 unsplash，基于 CC0 協(xié)議