UI界面設(shè)計

《大屏可視化數(shù)據(jù)》該怎么設(shè)計？

6163

前言：數(shù)據(jù)可視化是什么？可視化數(shù)據(jù)有哪些主要特征？為什么要使用大屏展示可視化數(shù)據(jù)？數(shù)據(jù)可視化是綜合運(yùn)用計算機(jī)圖形學(xué)、圖像、人機(jī)交互等，將采集、清洗、轉(zhuǎn)換、處理過的符合標(biāo)準(zhǔn)和規(guī)范的數(shù)據(jù)映射為可識別的圖形、圖像、動畫甚至視頻，并允許用戶與數(shù)據(jù)可視化進(jìn)行交互和分析。使用數(shù)據(jù)可視化可以豐富內(nèi)容，引人注意，調(diào)動人的情緒、引發(fā)人的共鳴，傳遞文化和價值?？梢暬瘮?shù)據(jù)的最主要目三個特征：新穎而有趣、充實而高效、美感且悅。以大屏作為可視化數(shù)據(jù)的主要載體，其原因在于面積大、可展示信息多、便于關(guān)鍵信息的共享討論及決策，在觀感上給人留下震撼印象，便于營造氛圍、打造儀式感等，目前常用的場景有：數(shù)據(jù)展示、監(jiān)控預(yù)警、數(shù)據(jù)分析。

一、如何選擇信息圖示的分類？

數(shù)據(jù)可視化處理流程是：【數(shù)據(jù)采集】- 【數(shù)據(jù)清理】- 【數(shù)據(jù)分析】- 【可視化數(shù)據(jù)】。

1. 數(shù)據(jù)采集需要基于業(yè)務(wù)展示需求，即“你想要展示什么？”如：實時數(shù)據(jù)指標(biāo)、對比類型數(shù)據(jù)指標(biāo)、統(tǒng)計類型數(shù)據(jù)指標(biāo)等從相關(guān)的業(yè)務(wù)層面提取重要的數(shù)據(jù)，用于大屏數(shù)據(jù)的展示。

2. 數(shù)據(jù)清理則要對數(shù)據(jù)進(jìn)行歸類處理，明確數(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ù)”等，將強(qiáng)關(guān)聯(lián)性的數(shù)據(jù)進(jìn)行組合重構(gòu)，得到全新的數(shù)據(jù)信息關(guān)系；

4. 可視化數(shù)據(jù)，根據(jù)重構(gòu)后的數(shù)據(jù)信息關(guān)系，選擇對應(yīng)的可適用數(shù)表信息圖，如：條形圖、柱狀圖、雷達(dá)圖、折線圖、正態(tài)分布圖、散點(diǎn)圖、實時3d渲染地圖等；可參考下圖選擇對應(yīng)的數(shù)表信息。

注：下圖源于文章《Visual Business Intelligence》，作者Stephen Few

二、屏幕分辨率有哪些注意事項？

為了最優(yōu)化展示效果，首先需要了解物理大屏長款比，確定設(shè)計稿的尺寸；其次我們需要清楚大屏系統(tǒng)的內(nèi)在原理：【信號源】--->【大屏拼接器】--->【播放控制設(shè)備】,一般情況下設(shè)計稿的分辨率多為1920px*1080px（即電腦的分辨率）。同時，我們還需要理解以下四個概念：“大屏邏輯分辨率（設(shè)計稿尺寸）”、“顯卡輸出分辨率”、“視頻矩陣切換器（ DVI ）支持分辨率”、“大屏實際物理分辨率”。

最佳展示效果：

大屏邏輯分辨率（設(shè)計稿尺寸）長寬比 = 大屏實際物理分辨率長寬比

大屏邏輯分辨率（設(shè)計稿尺寸）長寬比 = 顯卡輸出分辨率長寬比

顯卡輸出分辨率 = 視頻矩陣切換器（ DVI ）支持分辨率 = 大屏實際物理分辨率

目前作為監(jiān)控大屏，由于監(jiān)控數(shù)量的龐大，常常被劃分為總屏和分屏?？偲炼嘤糜谡故臼录顟B(tài)趨勢、風(fēng)險預(yù)警、風(fēng)險處理進(jìn)展；分屏則多用于展示詳細(xì)的數(shù)據(jù)分析和風(fēng)險事件的處理。如何排布數(shù)據(jù)都需要緊密結(jié)合業(yè)務(wù)需求和用戶體驗。

三、數(shù)據(jù)的排版布局有哪些規(guī)律？

在確定了設(shè)計稿的尺寸后，需要對頁面布局和劃分，對于數(shù)據(jù)的排布劃分我們的重要原則：主次分明、條理清晰、注意留白。根據(jù)業(yè)務(wù)需求抽取關(guān)鍵性的指標(biāo)，按照重要程度可分為【主】、【次】、【輔】。

1. 主：主要指標(biāo)多位于屏幕正中央，可添加適當(dāng)?shù)膭有г鰪?qiáng)視覺效果；

2. 次：次要指標(biāo)多位于屏幕的兩次，較多表現(xiàn)為各類圖表；

3. 輔：輔助信息多為主要指標(biāo)的補(bǔ)充信息，常伴隨交互效果或動效下呈現(xiàn)，可展現(xiàn)亦可不展現(xiàn)；

在大屏的排版布局上，需要遵循四大原則（CRAP）：

1. 對比(Contrast)：完全不同的數(shù)據(jù)類型，選擇截然不同信息圖示。

2. 重復(fù)(Repetition)：相同類型或相似數(shù)據(jù)，選用盡可能相同的展示。

3. 對齊(Alignment)：利用對齊方式保證信息圖示之間的視覺聯(lián)系。

4. 親密性(Proximity)：相關(guān)的數(shù)據(jù)項組織在一起，視覺上呈現(xiàn)出一體化。

四、如何選擇配色方案？

可視化大屏的配色是視覺呈現(xiàn)的重要組成要素，配色常常與行業(yè)類型、業(yè)務(wù)形態(tài)、應(yīng)用場景、設(shè)計理念、營造氛圍等緊密相關(guān)。配色方案的選擇有以下幾點(diǎn)建議：

1. 色彩明度與飽和度差異顯著、對比鮮明，盡量避免使用鄰近色配色；

2. 仿造自然的配色；

3. 使用深色暗色作為背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現(xiàn)的影響；同時暗色背景更能聚焦視覺，也方便突出內(nèi)容；

4. 適當(dāng)使用漸變色，由于大屏普遍存在色域偏差，更建議多使用純色；

五、可視化數(shù)據(jù)的字體有哪些考慮？

可視化大屏的設(shè)計過程中，優(yōu)先使用系統(tǒng)默認(rèn)字體，如有特殊需要嵌入字體時，需考慮字體的可識別性、設(shè)計風(fēng)格融合度、是否可免費(fèi)商用（※※※）。

一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數(shù)字。減小字體包的大小，可以優(yōu)化頁面加載體驗，避免在替換默認(rèn)字體的過程中出現(xiàn)頁面文字跳動等現(xiàn)象。

推薦字體包括：AVENIR NEXT、HELVETICA NEUE、SEGOE UI、ACENS、DIN、DIGITAL-7等。

六、動效添加的作用？

由于可視化數(shù)據(jù)允許用戶與數(shù)據(jù)可視化進(jìn)行交互，在數(shù)據(jù)展示過程中，可以適當(dāng)添加動效、插入視頻，提升整體的視覺效果。由于大屏展示的許多數(shù)據(jù)都是實時變化的，為了減少數(shù)據(jù)變化刷新時的突然性，動效設(shè)計必不可少。在整個動效設(shè)計的過程中，除過場動畫、數(shù)據(jù)的變化外，動效還肩負(fù)起增添空間感、平衡畫面和整合信息的作用。

但是在增加動效的同時，需考慮服務(wù)器的承載量。避免在增加動效后喧賓奪主，因此對動效要做適當(dāng)?shù)娜∩帷?

七、可視化輔助工具有哪些？

在設(shè)計的過程中，我們可以大量參考相關(guān)平臺的可視化數(shù)據(jù)圖表樣式，大多數(shù)平臺的圖表樣式都是基于代碼實現(xiàn)的。在設(shè)計的階段詳細(xì)參考，有利于降低開發(fā)成本，有利于提升可視化數(shù)據(jù)大屏的可拓展性，便于后期的迭代管理。

可視化輔助工具可分為：【可視化工具庫】、【原生開發(fā)】、【第三方服務(wù)】

八、如何保證展示的品質(zhì)？

可視化數(shù)據(jù)的視覺設(shè)計是一個不斷迭代的過程，同時大屏的設(shè)計與常規(guī)的設(shè)計有較大的區(qū)別。與大屏【溝通】是比較重要也是個特殊的環(huán)節(jié)。大屏有它自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境，很多問題只有設(shè)計稿投到大屏上才能夠被發(fā)現(xiàn)，因此在樣圖溝通確認(rèn)、開發(fā)出 demo，都需要反復(fù)測試多次，不斷的迭代與精進(jìn)。

在完成視覺稿的設(shè)計之后，【如何提升整體視覺的還原度】成為我們設(shè)計與前端溝通的重要內(nèi)容。大屏的本質(zhì)實際是一個web頁面，切圖與標(biāo)注，成為還原度的重要組成因素。