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

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

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

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

設(shè)計(jì)需求了解

1. 需求分析

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

2. 視覺(jué)設(shè)計(jì)

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

關(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ù)字港口、智慧工程

3. 硬件了解

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

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

4. 圖表類(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ù)工作。

5. 字體字號(hào)選擇

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

由于甲方客戶(hù)多為政府機(jī)關(guān)，字體要求也會(huì)比較大一些，16px為正文字號(hào)，最小字號(hào)14px，在設(shè)計(jì)時(shí)對(duì)這些規(guī)范靈活應(yīng)用。

6. 顏色

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

在演示搭配時(shí)選擇“631”搭配原則，頁(yè)面中60%使用主色調(diào)，30%使用輔助色調(diào)，10%使用對(duì)比色調(diào)。

7. 基礎(chǔ)組件

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

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

設(shè)計(jì)注意事項(xiàng)

（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。

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

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