前言:數(shù)據(jù)可視化是什么?可視化數(shù)據(jù)有哪些主要特征?為什么要使用大屏展示可視化數(shù)據(jù)?數(shù)據(jù)可視化是綜合運用計算機圖形學、圖像、人機交互等,將采集、清洗、轉(zhuǎn)換、處理過的符合標準和規(guī)范的數(shù)據(jù)映射為可識別的圖形、圖像、動畫甚至視頻,并允許用戶與數(shù)據(jù)可視化進行交互和分析。使用數(shù)據(jù)可視化可以豐富內(nèi)容,引人注意,調(diào)動人的情緒、引發(fā)人的共鳴,傳遞文化和價值。可視化數(shù)據(jù)的最主要目三個特征:新穎而有趣、充實而高效、美感且悅。以大屏作為可視化數(shù)據(jù)的主要載體,其原因在于面積大、可展示信息多、便于關(guān)鍵信息的共享討論及決策,在觀感上給人留下震撼印象,便于營造氛圍、打造儀式感等,目前常用的場景有:數(shù)據(jù)展示、監(jiān)控預警、數(shù)據(jù)分析。
一、 如何選擇信息圖示的分類?
數(shù)據(jù)可視化處理流程是:【數(shù)據(jù)采集】- 【數(shù)據(jù)清理】- 【數(shù)據(jù)分析】- 【可視化數(shù)據(jù)】。
1. 數(shù)據(jù)采集需要基于業(yè)務展示需求,即“你想要展示什么?”如:實時數(shù)據(jù)指標、對比類型數(shù)據(jù)指標、統(tǒng)計類型數(shù)據(jù)指標等從相關(guān)的業(yè)務層面提取重要的數(shù)據(jù),用于大屏數(shù)據(jù)的展示。
2. 數(shù)據(jù)清理則要對數(shù)據(jù)進行歸類處理,明確數(shù)據(jù)之間的關(guān)系,存在“比較型”、“構(gòu)成型”、“聯(lián)系型”、“分布型”。
3. 數(shù)據(jù)分析根據(jù)歸類處理后的數(shù)據(jù),并結(jié)合從維度的劃分:“一維數(shù)據(jù)”、“二維數(shù)據(jù)”、“三維數(shù)據(jù)”、“多維數(shù)據(jù)”、“時態(tài)數(shù)據(jù)”、“層次數(shù)據(jù)”等,將強關(guān)聯(lián)性的數(shù)據(jù)進行組合重構(gòu),得到全新的數(shù)據(jù)信息關(guān)系;
4. 可視化數(shù)據(jù),根據(jù)重構(gòu)后的數(shù)據(jù)信息關(guān)系,選擇對應的可適用數(shù)表信息圖,如:條形圖、柱狀圖、雷達圖、折線圖、正態(tài)分布圖、散點圖、實時3d渲染地圖等;可參考下圖選擇對應的數(shù)表信息。
注:下圖源于文章《Visual Business Intelligence》,作者Stephen Few
二、 屏幕分辨率有哪些注意事項?
為了最優(yōu)化展示效果,首先需要了解物理大屏長款比,確定設計稿的尺寸;其次我們需要清楚大屏系統(tǒng)的內(nèi)在原理:【信號源】--->【大屏拼接器】--->【播放控制設備】,一般情況下設計稿的分辨率多為1920px*1080px(即電腦的分辨率)。同時,我們還需要理解以下四個概念:“大屏邏輯分辨率(設計稿尺寸)”、“顯卡輸出分辨率”、“視頻矩陣切換器( DVI )支持分辨率”、“大屏實際物理分辨率”。
最佳展示效果:
大屏邏輯分辨率(設計稿尺寸)長寬比 = 大屏實際物理分辨率長寬比
大屏邏輯分辨率(設計稿尺寸)長寬比 = 顯卡輸出分辨率長寬比
顯卡輸出分辨率 = 視頻矩陣切換器( DVI )支持分辨率 = 大屏實際物理分辨率
目前作為監(jiān)控大屏,由于監(jiān)控數(shù)量的龐大,常常被劃分為總屏和分屏??偲炼嘤糜谡故臼录顟B(tài)趨勢、風險預警、風險處理進展;分屏則多用于展示詳細的數(shù)據(jù)分析和風險事件的處理。如何排布數(shù)據(jù)都需要緊密結(jié)合業(yè)務需求和用戶體驗。
三、 數(shù)據(jù)的排版布局有哪些規(guī)律?
在確定了設計稿的尺寸后,需要對頁面布局和劃分,對于數(shù)據(jù)的排布劃分我們的重要原則:主次分明、條理清晰、注意留白。根據(jù)業(yè)務需求抽取關(guān)鍵性的指標,按照重要程度可分為【主】、【次】、【輔】。
1. 主:主要指標多位于屏幕正中央,可添加適當?shù)膭有г鰪娨曈X效果;
2. 次:次要指標多位于屏幕的兩次,較多表現(xiàn)為各類圖表;
3. 輔:輔助信息多為主要指標的補充信息,常伴隨交互效果或動效下呈現(xiàn),可展現(xiàn)亦可不展現(xiàn);
在大屏的排版布局上,需要遵循四大原則(CRAP):
1. 對比(Contrast):完全不同的數(shù)據(jù)類型,選擇截然不同信息圖示。
2. 重復(Repetition):相同類型或相似數(shù)據(jù),選用盡可能相同的展示。
3. 對齊(Alignment):利用對齊方式保證信息圖示之間的視覺聯(lián)系。
4. 親密性(Proximity):相關(guān)的數(shù)據(jù)項組織在一起,視覺上呈現(xiàn)出一體化。
四、 如何選擇配色方案?
可視化大屏的配色是視覺呈現(xiàn)的重要組成要素,配色常常與行業(yè)類型、業(yè)務形態(tài)、應用場景、設計理念、營造氛圍等緊密相關(guān)。配色方案的選擇有以下幾點建議:
1. 色彩明度與飽和度差異顯著、對比鮮明, 盡量避免使用鄰近色配色;
2. 仿造自然的配色;
3. 使用深色暗色作為背景可減少拼縫帶來的不適感。由于背景面積大,使用暗色背景還能夠減少屏幕色差對整體表現(xiàn)的影響;同時暗色背景更能聚焦視覺,也方便突出內(nèi)容;
4. 適當使用漸變色,由于大屏普遍存在色域偏差,更建議多使用純色;
五、 可視化數(shù)據(jù)的字體有哪些考慮?
可視化大屏的設計過程中,優(yōu)先使用系統(tǒng)默認字體,如有特殊需要嵌入字體時,需考慮字體的可識別性、設計風格融合度、是否可免費商用(※※※)。
一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符,對于大屏這個明確的場景,我們可以刪掉其它使用不到的字符,僅保留中文、拼音和數(shù)字。減小字體包的大小,可以優(yōu)化頁面加載體驗,避免在替換默認字體的過程中出現(xiàn)頁面文字跳動等現(xiàn)象。
推薦字體包括:AVENIR NEXT、HELVETICA NEUE、SEGOE UI、ACENS、DIN、DIGITAL-7等。
六、 動效添加的作用?
由于可視化數(shù)據(jù)允許用戶與數(shù)據(jù)可視化進行交互,在數(shù)據(jù)展示過程中,可以適當添加動效、插入視頻,提升整體的視覺效果。由于大屏展示的許多數(shù)據(jù)都是實時變化的,為了減少數(shù)據(jù)變化刷新時的突然性,動效設計必不可少。在整個動效設計的過程中,除過場動畫、數(shù)據(jù)的變化外,動效還肩負起增添空間感、平衡畫面和整合信息的作用。
但是在增加動效的同時,需考慮服務器的承載量。避免在增加動效后喧賓奪主,因此對動效要做適當?shù)娜∩帷?
七、 可視化輔助工具有哪些?
在設計的過程中,我們可以大量參考相關(guān)平臺的可視化數(shù)據(jù)圖表樣式,大多數(shù)平臺的圖表樣式都是基于代碼實現(xiàn)的。在設計的階段詳細參考,有利于降低開發(fā)成本,有利于提升可視化數(shù)據(jù)大屏的可拓展性,便于后期的迭代管理。
可視化輔助工具可分為:【可視化工具庫】、【原生開發(fā)】、【第三方服務】
八、 如何保證展示的品質(zhì)?
可視化數(shù)據(jù)的視覺設計是一個不斷迭代的過程,同時大屏的設計與常規(guī)的設計有較大的區(qū)別。與大屏【溝通】是比較重要也是個特殊的環(huán)節(jié)。大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環(huán)境,很多問題只有設計稿投到大屏上才能夠被發(fā)現(xiàn),因此在樣圖溝通確認、開發(fā)出 demo,都需要反復測試多次,不斷的迭代與精進。
在完成視覺稿的設計之后,【如何提升整體視覺的還原度】成為我們設計與前端溝通的重要內(nèi)容。大屏的本質(zhì)實際是一個web頁面,切圖與標注,成為還原度的重要組成因素。
作者:慕斯小姐姐
原文鏈接:https://www.zcool.com.cn/article/ZOTM1NDA4.html
全站高品質(zhì)素材免費下載!