關(guān)于數(shù)據(jù)大屏可視化的設(shè)計(jì)流程與發(fā)展趨勢的分析研究

張開智 萬向 陳亞民

摘? ?要：數(shù)據(jù)可視化領(lǐng)域的起源，可以追溯到20世紀(jì)50年代計(jì)算機(jī)圖形學(xué)的早期。當(dāng)時，人們利用計(jì)算機(jī)創(chuàng)建出了首批圖形圖表。數(shù)據(jù)可視化的概念一直處于不斷演變之中，其邊界在不斷地?cái)U(kuò)大，慢慢延伸出了當(dāng)下流行的數(shù)據(jù)大屏可視化。本文將描述數(shù)據(jù)大屏可視化設(shè)計(jì)流程，包括大屏物理特性、業(yè)務(wù)指標(biāo)梳理及數(shù)據(jù)收集、確立指標(biāo)分析維度及展示圖形、分析展示圖形可實(shí)現(xiàn)程度、頁面布局劃分形成原型稿、大屏設(shè)計(jì)制作、設(shè)計(jì)開發(fā)配置及測試、上屏演示和客戶確認(rèn);研究和分析數(shù)據(jù)指標(biāo)風(fēng)險(xiǎn)預(yù)測、智能業(yè)務(wù)分析、日常巡檢監(jiān)測分析、企業(yè)品牌文化宣傳、大屏動態(tài)藝術(shù)設(shè)計(jì)5個發(fā)展趨勢。

關(guān)鍵詞：數(shù)據(jù)可視化? 大屏可視化? 監(jiān)測分析

中圖分類號：TP311? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識碼：A? ? ? ? ? ? ? ? ? ? ? ?文章編號：1674-098X（2019）09（c）-0130-04

如今人人都知道數(shù)據(jù)的重要性，企業(yè)運(yùn)營中也會產(chǎn)生大量生產(chǎn)數(shù)據(jù)，但大量的數(shù)據(jù)難以整合和加以理解分析使用，使其食之無味棄之可惜。從生物學(xué)原理來說，大腦傳輸?shù)男畔?0%是圖像，65%的人都是視覺學(xué)習(xí)者，人對圖像的記憶力比對文字的記憶力高6萬倍。

數(shù)據(jù)可視化是通過可視的方式，將相對復(fù)雜、抽象的數(shù)據(jù)讓人們更易理解的一系列展示手段，更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。在當(dāng)前軟、硬件支持下，大屏作為數(shù)據(jù)可視化主要展示載體，“大面積、炫酷動效、豐富色彩”，大屏在觀感上給人留下震撼印象，便于營造獨(dú)特氛圍，打造儀式感，調(diào)動參觀者情緒、引發(fā)共鳴、傳遞企業(yè)文化和價值。數(shù)據(jù)可視化也擁有“可視、可交流、可互動”的特點(diǎn)，使用戶更容易對監(jiān)測數(shù)據(jù)及時分析預(yù)警，在企業(yè)生產(chǎn)運(yùn)營過程中起到了保駕護(hù)航的作用。

1? 數(shù)據(jù)大屏設(shè)計(jì)流程

1.1 大屏物理特性

大屏通過拼接技術(shù)將一個或者多個投影機(jī)的圖片顯示在一個屏幕上。根據(jù)用戶體驗(yàn)以及觀看視角分析，多個大屏之間也是有主次之分，可提前規(guī)劃好主要、次要、輔助內(nèi)容的布局，如圖1所示。

規(guī)劃好大屏布局后，需明確大屏分辨率，以便接下來設(shè)計(jì)工作的開展。分辨率是屏幕圖像的精密度，指顯示器所能顯示像素的多少。小屏幕橫向及縱向拼接數(shù)量決定了大屏整體物理分辨率。點(diǎn)對點(diǎn)投放時精度達(dá)到最高，這樣出來的設(shè)計(jì)圖不容易失真。

1.2 業(yè)務(wù)指標(biāo)梳理及數(shù)據(jù)收集

根據(jù)客戶需求和預(yù)期成效，業(yè)務(wù)人員開展故事線和業(yè)務(wù)指標(biāo)梳理，一般需對所有業(yè)務(wù)指標(biāo)進(jìn)行“主次輔”定義分類。由于大屏承載數(shù)據(jù)多，為避免觀者迷失，大屏信息呈現(xiàn)應(yīng)有焦點(diǎn)與主次之分?？赏ㄟ^對比，先把核心數(shù)據(jù)拋給用戶，待用戶理解大屏主要內(nèi)容與展示邏輯后，再逐級瀏覽二級、三級內(nèi)容。收集整理業(yè)務(wù)指標(biāo)數(shù)據(jù)，對數(shù)據(jù)收集困難或質(zhì)量不合格的業(yè)務(wù)指標(biāo)進(jìn)行替換或增加備選指標(biāo)。

1.3 確立指標(biāo)分析維度及展示圖形

大屏設(shè)計(jì)應(yīng)避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，應(yīng)充分了解業(yè)務(wù)需求后開展大屏設(shè)計(jì)?！皺M看成嶺側(cè)成峰”，同一個指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。很多時候做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒有準(zhǔn)確表達(dá)業(yè)務(wù)意圖，也沒能向觀者傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。選定圖表應(yīng)遵循易理解、可實(shí)現(xiàn)原則。也可根據(jù)客戶需求隨機(jī)應(yīng)變，增加一些新穎的圖形、圖表供客戶選擇，如圖4所示。

1.4 分析展示圖形可實(shí)現(xiàn)程度

項(xiàng)目開展過程中，一切不能實(shí)現(xiàn)的想法皆是空談，應(yīng)結(jié)合項(xiàng)目周期與成本預(yù)算，抓住重點(diǎn)、有取舍、不鉆牛角尖。設(shè)計(jì)人員應(yīng)常與開發(fā)人員溝通，一些可視化效果通過代碼開發(fā)更容易實(shí)現(xiàn)，比如設(shè)計(jì)師用Ps/Ai/Ae這些工具模擬時會發(fā)現(xiàn)比較困難，相反有些設(shè)計(jì)容易但開發(fā)比較困難，應(yīng)規(guī)避英雄主義，設(shè)計(jì)人員和開發(fā)人員互相配合實(shí)現(xiàn)展示效果。同時也需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計(jì)，減少不必要的風(fēng)險(xiǎn)。

1.5 頁面布局劃分形成原型稿

其實(shí)到這一步，大屏的初步原型圖已做到心中有數(shù)，根據(jù)整理好的業(yè)務(wù)指標(biāo)來布局展示圖表，體現(xiàn)主次之分、關(guān)聯(lián)關(guān)系、提高傳遞效率，然后進(jìn)行匯報(bào)交流和客戶確認(rèn)即可。匯報(bào)主要確認(rèn)業(yè)務(wù)指標(biāo)是否合理，數(shù)據(jù)是否可收集可使用，記錄客戶對業(yè)務(wù)指標(biāo)的修改意見，并深層次理解客戶想要的風(fēng)格樣式，為下一步設(shè)計(jì)工作開展奠定基礎(chǔ)，如圖3所示。

1.6 大屏設(shè)計(jì)制作

由于生活經(jīng)歷、藝術(shù)素養(yǎng)、情感傾向、審美觀念的不同，形成受到時代、社會、民族等歷史條件的差異化風(fēng)格樣式。從理論上說，風(fēng)格的差異應(yīng)該是無限的，若客戶沒有明確風(fēng)格樣式，可使用我們定義Web頁面設(shè)計(jì)風(fēng)格時常用的方法，對業(yè)務(wù)指標(biāo)進(jìn)行情緒化設(shè)計(jì)，這種方法也是目前比較科學(xué)高效的風(fēng)格定義手段，同時更具有說服力。在顏色使用方面則選取對比鮮明突出的色彩，背景則一般為暗色調(diào)，這樣會使整個大屏不容易視覺疲勞刺眼，同時內(nèi)容鮮明突出容易分辨觀看。

根據(jù)定義好的設(shè)計(jì)風(fēng)格與選定的業(yè)務(wù)指標(biāo)圖表類型進(jìn)行合理的可視化設(shè)計(jì)，同時可以把設(shè)計(jì)過程分為幾步來走，與客戶不斷溝通和修改完善，逐步實(shí)現(xiàn)完善精致。修改過程中宜多輪迭代、小步快跑，避免大修大改的情況。

1.7 設(shè)計(jì)開發(fā)、配置及測試

大屏可視同一個不規(guī)則的web頁面，所以開發(fā)階段需開展切圖與標(biāo)注，一般按照設(shè)計(jì)圖1 ： 1切圖，標(biāo)注可采用插件工具進(jìn)行制作。在開發(fā)配置過程中，設(shè)計(jì)人員應(yīng)給予配合，避免效果與設(shè)計(jì)稿不一致。如有條件允許可進(jìn)行上屏測試，比如視覺方面的測試：關(guān)鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預(yù)期顯示、有無變形、錯位等情況;性能與數(shù)據(jù)方面的測試：圖形圖表動畫是否流暢、數(shù)據(jù)加載、刷新有無異常;頁面長時間展示是否存在奔潰、卡死等情況;后臺控制系統(tǒng)能否正常切換前端頁面顯示，其他突發(fā)問題根據(jù)實(shí)際情況進(jìn)行微調(diào)。

1.8 上屏演示和客戶確認(rèn)

到這個環(huán)節(jié)基本就是項(xiàng)目結(jié)尾了，上屏演示給客戶并記錄客戶意見，進(jìn)行最后收尾修改以及日常運(yùn)維保障即可。

2? 數(shù)據(jù)大屏可視化未來發(fā)展趨勢

2.1 趨勢一 數(shù)據(jù)指標(biāo)的風(fēng)險(xiǎn)預(yù)測

數(shù)據(jù)可視化將不可見的數(shù)據(jù)現(xiàn)象、錯綜復(fù)雜、看起來無法解釋和關(guān)聯(lián)的數(shù)據(jù)，轉(zhuǎn)化為可見的圖形符號，建立起聯(lián)系和關(guān)聯(lián)，進(jìn)而發(fā)現(xiàn)規(guī)律和特征，以獲取更有商業(yè)價值的洞見和價值。隨著數(shù)據(jù)建模算法技術(shù)成熟，可根據(jù)歷史數(shù)據(jù)來預(yù)測未來，根據(jù)預(yù)測數(shù)據(jù)分析推測出下階段發(fā)生事件，提前做好規(guī)劃部署，真正實(shí)現(xiàn)數(shù)據(jù)自我解釋、讓數(shù)據(jù)說話的目的，如圖4所示。

2.2 趨勢二? 智能業(yè)務(wù)分析

借助AI人工智能、機(jī)器學(xué)習(xí)法，可視化平臺不斷自我學(xué)習(xí)和記錄使用者的操作習(xí)慣，平臺智能分析能夠根據(jù)整體數(shù)據(jù)集和搜索條件自動為用戶推薦最佳分析方案，洞悉隱藏在數(shù)據(jù)中的全部信息，供用戶思考并做出進(jìn)一步的探索。平臺將做到提前準(zhǔn)備用戶所想、用戶所做的事情，讓數(shù)據(jù)能真正的智能分析。如：根據(jù)用戶的搜索條件與用戶分析操作習(xí)慣，平臺智能分析自動將與搜索指標(biāo)相關(guān)的一系列數(shù)據(jù)自動分析整理，便于用戶參考使用。

2.3 趨勢三? 日常巡檢監(jiān)測分析

隨著數(shù)據(jù)采集設(shè)備的發(fā)展，多種采集設(shè)備可互相協(xié)作，滿足現(xiàn)場日常巡檢數(shù)據(jù)實(shí)時采集，通過數(shù)據(jù)可視化的展示手段，進(jìn)行現(xiàn)場實(shí)際場景建模監(jiān)測。以滿足電力設(shè)施、機(jī)房、地下管廊等主要設(shè)備的日常監(jiān)測，有效提高巡檢效率及準(zhǔn)確率，降低意外事件發(fā)生次數(shù)，如圖5。

2.4 趨勢四 企業(yè)品牌文化宣傳

大屏可視化不僅是單純的監(jiān)測分析數(shù)據(jù)，也可向內(nèi)外參觀者展示企業(yè)產(chǎn)品、品牌和文化。針對不同大屏的展示需求，通過展示主線的靈活定制，從不同角度介紹融入企業(yè)品牌文化，清晰傳播公司的品牌形象和價值內(nèi)涵，全面展現(xiàn)公司的發(fā)展理念、運(yùn)營能力和管理水平。

2.5 趨勢五 大屏動態(tài)藝術(shù)設(shè)計(jì)

隨著時代進(jìn)步和動態(tài)藝術(shù)的風(fēng)靡，影視特效、動畫CG、視頻廣告、UI動畫等越來越多萌發(fā)更多的動態(tài)創(chuàng)造力。在大屏內(nèi)容圖像圖表上做合理的動效設(shè)計(jì)，讓單調(diào)無味的靜態(tài)圖變?yōu)閭鞑ツ芰^強(qiáng)的動態(tài)圖表，讓整個大屏效果煥然一新且充滿科技感。畢竟靜態(tài)的圖文內(nèi)容已經(jīng)不再是絕對的主流，相反動態(tài)設(shè)計(jì)的先天優(yōu)勢更能契合發(fā)展時代下人們的感官訴求。

3? 結(jié)語

數(shù)據(jù)可視化本質(zhì)是圍繞如何將相對復(fù)雜、抽象的數(shù)據(jù)，以可視化、易理解的方式給用戶帶來更優(yōu)的體驗(yàn)、表達(dá)和分析預(yù)警。通過建立公司數(shù)據(jù)可視化大屏，建立數(shù)據(jù)與用戶之間的輔助決策樞紐，令用戶感到輕松愉悅;通過不斷打磨數(shù)據(jù)可視細(xì)節(jié)，豐富真實(shí)表達(dá)出數(shù)據(jù)理念，實(shí)現(xiàn)精準(zhǔn)定位問題和風(fēng)險(xiǎn)，最終實(shí)現(xiàn)數(shù)據(jù)與商業(yè)之間的完美結(jié)合。

參考文獻(xiàn)

[1] 胡蓉.大屏數(shù)據(jù)可視化設(shè)計(jì)基礎(chǔ)[J].項(xiàng)目管理技術(shù)，2019（3）.

[2] 淘寶設(shè)計(jì).動態(tài)設(shè)計(jì)的起源、延續(xù)與趨勢[J].設(shè)計(jì)趨勢，2019（5）.

[3] UXBoy.大屏數(shù)據(jù)可視化設(shè)計(jì)指南[J].項(xiàng)目管理技術(shù)，2018（12）.

[4] 百度.數(shù)據(jù)大屏可視化.行業(yè)新聞，2019年5月10日.