最近關于大屏的項目做的比較多，目前手頭項目結束，有時間將內容整理分享，基于目前手上的某省監(jiān)獄項目做可視化大屏規(guī)范分享希望能對大家有所幫助。

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

數(shù)據(jù)可視化，是關于數(shù)據(jù)視覺表現(xiàn)形式的科學技術研究。其中，這種數(shù)據(jù)的視覺表現(xiàn)形式被定義為，一種以某種概要形式抽提出來的信息，包括相應信息單位的各種屬性和變量。

上述文字來自百度百科，做了許多大屏之后，可總結大屏分為信息展示、數(shù)據(jù)分析、監(jiān)控預警三大類。利用屏幕大可展示信息多的特點，將復雜、抽象的內容通過可視化更加直觀的方式，以易于理解的形式幫助人們更好決策。

設計需求了解

1. 需求分析

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

2. 視覺設計

平時利用Eagle這款圖片收藏軟件很好的幫助我在需要靈感素材時快速上手。

關鍵詞：FUI \ HUD \? SCI-FI

設計網站：behance、dribbble、站酷、Tob.design、UI中國、花瓣、pinterest

業(yè)務場景：智慧園區(qū)、智慧安防、智慧交通、智慧城市、智慧監(jiān)獄、智慧水利、智能客服、智慧倉儲、智慧醫(yī)藥、智慧零售、智慧工業(yè)、數(shù)字港口、智慧工程

3. 硬件了解

數(shù)據(jù)可視化最終落地平臺一般有① 大屏、② 拼接屏、③ LED大屏、④ DLP大屏（無縫隙拼接市場占有率較高）、⑤ LCD、⑥ PDP（3mm拼接縫隙）需要清除了解大屏物理尺寸及視頻輸出分辨率，確定設計稿尺寸。

根據(jù)需求內容及硬件尺寸確定頁面布局方式，以下布局為常用布局方式，在實際工作中可能會遇到相同的需求內容會展示在不同比例的大屏硬件中，這時將設計稿的設計尺寸高度固定，地圖寬度自適應，用一個設計稿一次開發(fā)解決不同尺寸適配問題。

4. 圖表類型選擇

將抽象的需求用圖表的形式展示，一般圖表分① 比較類 ② 占比類? ③區(qū)間類 ④關聯(lián)類 ⑤ 趨勢類 ⑥ 時間類 ⑦ 地圖類。

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

5. 字體字號選擇

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

由于甲方客戶多為政府機關，字體要求也會比較大一些，16px為正文字號，最小字號14px，在設計時對這些規(guī)范靈活應用。

6. 顏色

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

在演示搭配時選擇“631”搭配原則，頁面中60%使用主色調，30%使用輔助色調，10%使用對比色調。

7. 基礎組件

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

以下是幾種組件的展示樣式供大家參考，這里也感謝組內小伙伴@梁祝。

設計注意事項

（1）屏幕投射效果不佳

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

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

首先需要明白幾個概念：①大屏邏輯分辨率（設計分辨率）② 顯卡輸出分辨率 ③ 視頻矩陣切換器（DVI）支持分辨率 ④ 大屏實際物理分辨率 。

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

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

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

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

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

本文由@宋佳 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

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