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

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

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

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

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

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

二、大屏設(shè)計(jì)需求采集

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

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

三、視覺(jué)設(shè)計(jì)原則

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

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

四、大屏硬件的分析和確認(rèn)

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

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

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

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

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

1. 圖標(biāo)類(lèi)型的選擇

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

不同展示內(nèi)容選用不同形式的圖表，但有時(shí)候?yàn)榱艘曈X(jué)效果豐富，不會(huì)在一個(gè)大屏里顯示相同的圖表展示方式，這時(shí)需要了解圖表特性與需求內(nèi)容將圖表差異化展示。并在項(xiàng)目積累到一定程度時(shí)整合圖表庫(kù)以便于下次項(xiàng)目快速設(shè)計(jì)避免重復(fù)工作。

2. 字形字號(hào)的選擇

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

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

3. 整體色系顏色等選擇

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

4. 基礎(chǔ)組件選擇

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

結(jié)合前端工程師的圖標(biāo)庫(kù)，進(jìn)行進(jìn)一步優(yōu)化。

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

六、大屏產(chǎn)品設(shè)計(jì)把控注意事項(xiàng)

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

1）屏幕投射效果不佳

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

2）等比例放大投射會(huì)發(fā)虛問(wèn)題

首先需要明白幾個(gè)概念：

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

當(dāng)顯卡輸出分辨率=DVI支持分辨率時(shí)顯示效果最佳，另外多個(gè)信號(hào)源投射優(yōu)于單個(gè)信號(hào)源投射 。

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

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

4）圖表類(lèi)樣式參考及實(shí)現(xiàn)

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

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

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

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