大屏幕設(shè)計(jì)經(jīng)驗(yàn)分享

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

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

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

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

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

　　1. 需求分析
 

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

　　2. 視覺設(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大屏(無縫隙拼接市場(chǎng)占有率較高)、⑤ LCD、⑥ PDP(3mm拼接縫隙)需要清除了解大屏物理尺寸及視頻輸出分辨率，確定設(shè)計(jì)稿尺寸。

 

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

　　4. 圖表類型選擇
 

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

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

 

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

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

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

 

　　6. 顏色
 

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

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

 

　　7. 基礎(chǔ)組件
 

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

　　設(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ā)虛問題
 

　　首先需要明白幾個(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)行校正，再者可以通過視頻自定義分辨率解決問題。
 

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

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

 

　　總結(jié)
 

　　大屏的設(shè)計(jì)是一個(gè)新興的設(shè)計(jì)學(xué)科，它同于APP設(shè)計(jì)，都需要考慮使用場(chǎng)景，不同于網(wǎng)頁設(shè)計(jì)，需要結(jié)合它獨(dú)有的特征，定義設(shè)計(jì)流程及規(guī)范。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。