姚憶南

(上海工業(yè)自動化儀表研究院有限公司，上海 200233)

0 引言

數(shù)據(jù)可視化大屏就是借助視覺語言的表達方式，將枯燥、專業(yè)、不直觀易讀的數(shù)據(jù)內(nèi)容轉(zhuǎn)化為有趣、淺顯、直觀的內(nèi)容并傳達給大屏觀看者的一種手段。在當(dāng)前新技術(shù)支持下，數(shù)據(jù)可視化除了“可視”，還有可有可交流、可互動等特點[1-5]。該技術(shù)的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射，是一種抽象的具象表達。大屏設(shè)計要避免為了展示而展示，所有的排版布局、圖表應(yīng)用都應(yīng)該基于用戶的需求。為了避免觀看者迷失，信息呈現(xiàn)必須有焦點和主次。本文通過可視化圖表、視覺設(shè)計、色彩心理學(xué)[6]、字體規(guī)范和動態(tài)圖形等多方面的維度分析，深入剖析，結(jié)合工業(yè)大屏態(tài)勢感知的實際案例，提煉出一套相對規(guī)范和完整的大屏設(shè)計理論，幫助企業(yè)高層和觀看者快速、精準(zhǔn)了解企業(yè)數(shù)據(jù)可視化信息。

1 數(shù)據(jù)可視化UI設(shè)計的思路和過程

1.1 數(shù)據(jù)可視化數(shù)據(jù)的分析和圖表的選擇

對比、關(guān)系、分布和構(gòu)成是數(shù)據(jù)分析常用的4個維度。在開始界面設(shè)計之前必須明確給屏幕前的用戶展示什么，通過圖表需要表達什么樣的規(guī)律和信息。聯(lián)系即數(shù)據(jù)之間的相關(guān)性；分布即指標(biāo)中的數(shù)據(jù)主要集中在什么范圍，呈現(xiàn)出怎么樣的規(guī)律；比較即數(shù)據(jù)之間存在著何種差異性；構(gòu)成則是數(shù)據(jù)分為幾部分構(gòu)成，每部分的占比是多少。在E-Charts[2]等網(wǎng)站，可以找到常用的可視化圖表和各類實際案例的分析，并能找到適合的圖表類型進行分析。常見的數(shù)據(jù)可視化圖表類型有柱狀圖、折線圖、餅圖、條形圖、雷達圖和地圖等。每種圖表類型適用于不同的數(shù)據(jù)類型，不可隨意使用。圖1中列舉了數(shù)據(jù)可視化設(shè)計原則和常見的圖表類型。

圖1 數(shù)據(jù)可視化設(shè)計的原則和常用的圖表類型

一般柱狀圖、條形圖、折線圖和餅圖是比較常見的圖形。柱狀圖的圖形表現(xiàn)的傳遞形式最為直觀，可以反映數(shù)據(jù)類別之間的差異。條形圖即橫向柱狀圖，是屬于柱狀圖的一種分支類型，但兩者之間有一個重要的區(qū)別。當(dāng)數(shù)據(jù)分類多且名字字段較長的時候，應(yīng)該選擇條形圖。條形圖能夠橫向布局，方便展示較長的字段名稱。折線圖用于反映數(shù)據(jù)隨著時間變化而變化的趨勢。餅圖常用于比例關(guān)系，可以展示每一部分占比的百分比。由于人眼視線習(xí)慣于順時針方向轉(zhuǎn)動，因此設(shè)計過程中需要將對應(yīng)的百分比模塊從大到小順時針排列。當(dāng)餅圖數(shù)據(jù)類型過多或數(shù)據(jù)中有0的數(shù)值時，可以考慮將餅圖直接替換成柱狀圖[3]。

雷達圖和地圖相對使用頻率不是那么高。雷達圖可以用來表現(xiàn)一個周期數(shù)值的變化，常用于財務(wù)數(shù)據(jù)中。雷達圖數(shù)據(jù)類別最多6個，并且需要加上文字說明，以減輕閱讀負(fù)擔(dān)。地圖圖表類型適用于控件位置的數(shù)據(jù)集。常用的地圖類型有區(qū)域地圖，散點地圖，熱力地圖。如今的數(shù)據(jù)可視化項目，地圖圖表越來越多地應(yīng)用于智慧城市、信息安全等領(lǐng)域。這也是未來數(shù)據(jù)可視化的設(shè)計趨勢。

1.2 尺寸的適配

一般在設(shè)計可視化界面的前期，需要確定具體的屏幕分辨率和設(shè)計稿尺寸[4]。明確產(chǎn)品上線后的應(yīng)用場景。如產(chǎn)品僅應(yīng)用于企業(yè)內(nèi)部的工作人員，不作為大屏展示等更加早期的顯示器比例。如服務(wù)的企業(yè)客戶有后期在大屏幕上展示可視化效果的需求，則需要設(shè)計師與定制的大屏供應(yīng)商細(xì)致溝通，確認(rèn)大屏輸入有幾路信號源。時下流行的技術(shù)分為多個信號源輸入和單個信號源輸入。一般來說，單個信號源輸入的情況較少。單個信號源只能輸入展示1張線上界面，對于業(yè)務(wù)和數(shù)據(jù)量大的企業(yè)展示利用率低，且不實用，比例也多數(shù)為時下較常用的21∶9或32∶9。而多個信號源接入大屏則是時下最為普遍實用的實現(xiàn)方式。通過顯卡自定義計算機的分辨率，將大屏切割成若干個小屏，設(shè)計師也應(yīng)當(dāng)提醒大屏定制商用最常用的16∶9或16∶10比例的小屏拼接成大屏，從而確保最佳的視覺效果。

1.3 界面的布局和劃分

設(shè)計稿的尺寸確立后，需要設(shè)計師和產(chǎn)品經(jīng)理、前端工程師對接討論頁面上的控件布局和模塊設(shè)計劃分。通過前期需求文檔，抽取業(yè)務(wù)場景關(guān)鍵的指標(biāo)，明確主次關(guān)系，提取業(yè)務(wù)中用戶最關(guān)心、最核心數(shù)據(jù)進行展示，對于次要的數(shù)據(jù)源和控件可以適當(dāng)弱化設(shè)計[5]。以工業(yè)安全態(tài)勢感知的大屏界面為例，界面中最中心的區(qū)域放置工廠各個車間的3D可視化模型，以便用戶第一時間了解各個車間的信息安全情況。而其余的模塊和數(shù)據(jù)依次排布在中心區(qū)域的周圍，通過數(shù)據(jù)、圖標(biāo)和列表的形式展現(xiàn)，提高信息傳達的效率。

對于頁面的排版和劃分部分，利用網(wǎng)格將版面劃分成若干小塊。再將設(shè)計好的模塊和UI控件依次排入網(wǎng)格，從而保持頁面的統(tǒng)一性和一致性。這樣的排版更加符合規(guī)范和邏輯。

1.4 色彩的篩選和情緒板的建立

顏色的選擇在UI和可視化的設(shè)計中尤為重要。在設(shè)計前，需根據(jù)產(chǎn)品的市場定位、用戶人群和品牌文化建立合適的色彩情緒版。以色環(huán)上常見的赤橙黃綠青藍紫7種顏色為例，每一種顏色在色彩學(xué)中都代表不同的含義。赤紅色寓意著速度、激情，通常用于電商行業(yè)。橙黃色寓意著食物新鮮，在生鮮領(lǐng)域運用較為廣泛。紫色寓意著高貴、高冷，通常也運用在奢侈品領(lǐng)域。而藍色和青色則寓意著專業(yè)、科學(xué)，在科技領(lǐng)域運用最為廣泛。結(jié)合工業(yè)信息安全行業(yè)的特性，青藍色是最符合產(chǎn)品主題色的顏色。確定主色之后，需要確定輔助色和背景色。本文利用橙黃色和深藍灰作為輔助色和背景色[6]。

1.5 字體的選擇

字體是數(shù)據(jù)可視化設(shè)計中極為重要的一環(huán)。字體的好壞直接決定了界面的易讀性和用戶體驗。在選擇字體時優(yōu)先選擇系統(tǒng)默認(rèn)的字體，了解字體是否可以免費商用，在考慮識別性的同時也要考慮是否與當(dāng)前界面風(fēng)格兼容。根據(jù)國外權(quán)威化網(wǎng)站MIT和Uber等公司的研究，一般數(shù)據(jù)可視化常用的英文數(shù)字字體有Avenir next、Helvetic Neue、Segoe ui、Acens、Din和Digital-7等。中文字體則應(yīng)盡量選擇系統(tǒng)自帶或著默認(rèn)的字體，如Windows系統(tǒng)下默認(rèn)的中文字體為微軟雅黑，而Mac系統(tǒng)下默認(rèn)的字體為蘋方[7]。如果軟件界面是云端部署，設(shè)計過程中又需要用到其他字體，則需要前端開發(fā)人員嵌入第三方的字體包。部分字體包占用空間大，為了優(yōu)化頁面加載速度，可以使用fontcreator等軟件將對應(yīng)的字體包中不必要的字符刪除，從而減少字體包的大小(一個完整的字體包中一般包括了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音等多種字符，對于數(shù)據(jù)可視化界面和大屏的場景，僅保留中文和數(shù)字便可，其余都可刪除)。

1.6 動效設(shè)計

在如今的大數(shù)據(jù)時代，3D數(shù)據(jù)可視化的設(shè)計已經(jīng)越來越多地用于智慧城市、工業(yè)互聯(lián)網(wǎng)等政府項目中，而動效設(shè)計又是數(shù)據(jù)可視化設(shè)計中非常重要不可或缺的一部分[8]。動效的賦能可以讓數(shù)據(jù)變得活靈活現(xiàn)，第一時間抓住觀看者的眼球。在設(shè)計過程中，應(yīng)分析在哪些重要的模塊上賦予動畫效果。這是因為過分的動效又容易喧賓奪主，反而弱化了信息數(shù)據(jù)的傳遞。

動效設(shè)計在可視化項目中遇到的最大問題就是開發(fā)的落地實現(xiàn)。在項目時間允許的情況下，設(shè)計師會產(chǎn)出設(shè)計靜幀圖(包含標(biāo)注和切圖)、動畫交互文檔和視頻Demo。靜幀圖用來直接和需求方進行對接溝通，后續(xù)驗收時也可以根據(jù)靜態(tài)圖進行效果評定。將輸出的PSD源文件進行字體、字號、顏色、位置等基本參數(shù)的標(biāo)注和注釋。而對于部分開發(fā)人員實現(xiàn)起來較為復(fù)雜的效果，則需設(shè)計師將對應(yīng)的icon、圖片進行切片處理。同時，輸出的視頻Demo也會向需求方和開發(fā)者進行演示，使得最后上線的效果不會與設(shè)計時偏差太多。除了Demo之外，設(shè)計師還應(yīng)當(dāng)提供一份交互流程，如部分手勢交互、點擊前后的效果和跳轉(zhuǎn)，方便開發(fā)和用戶二次確認(rèn)。通過動效設(shè)計流程的梳理，降低用戶理解成本，提高工作效率。

動效設(shè)計的方法可以歸納為-方盒理論：“置身于三維空間下，信息的體量是無窮的，我們需要在設(shè)計數(shù)據(jù)展示模塊時尋找適合的載體，在龐大的信息體量和有限的用戶界面中間尋求平衡，為用戶創(chuàng)作傳遞他們最先看到的那一面，這即是為一切動效解決方案提供理論支撐點的六方盒理論。

1.7 界面控件和UI組件庫的輸出

在完成全部靜態(tài)頁面設(shè)計之后，必須將頁面中所有控件，圖標(biāo)等元素進行一一提取整理。這既是模塊化設(shè)計。在UI設(shè)計中，每一個文字，顏色，圖標(biāo)，圖片都是一個對應(yīng)的原子元素，這些元素以不同的方式拼湊在一起，就組成了不同了界面?？傮w來說，模塊化設(shè)計有一致性、高效率、便捷性等優(yōu)點。

統(tǒng)一一致性是界面設(shè)計中非常重要而且基礎(chǔ)的部分。比如界面中日期的選擇組件，整個產(chǎn)品中應(yīng)該只有一種形式存在，否則容易引起用戶的困擾。一些諸如列表、按鈕等元素可反復(fù)組合利用。如果在產(chǎn)品迭代過程中，用戶希望更改顏色或者樣式，也可以在對應(yīng)的模塊里進行統(tǒng)一調(diào)節(jié)修改，而不用一個個頁面進行單獨修改[8-9]。同樣，模塊化的設(shè)計控件也可以與設(shè)計圖一并交給前端開發(fā)，方便開發(fā)過程中反復(fù)查看色值大小等信息，提高工作效率。

2 實際案例的應(yīng)用和分析

研究者為某汽車企業(yè)設(shè)計的可視化界面，可用于超大屏或計算機端展示，使用人群為企業(yè)高層和計算機運維人員，在和企業(yè)需求方反復(fù)溝通之后進行模塊化的定制。通過3D建模的方式將企業(yè)的廠房布局在界面中心，在上方的彈窗并分別用綠黃紅三色代表低中高危三個維度的廠房信息安全情況。在界面的四周，經(jīng)過分析和篩選之后，分別選用了詞云圖、柱狀圖和列表對安全事件、風(fēng)險車間和高風(fēng)險資產(chǎn)進行展示?？紤]到頁面的時間維度為一天24 h，故在界面下方插入了統(tǒng)計趨勢圖，讓用戶更加直觀地看到一天中事件發(fā)生的高頻時間段。在靜態(tài)頁面完成之后，將頁面上的控件通過切片的方式導(dǎo)入After Effects，根據(jù)用戶的需求對相應(yīng)的元素進行動效設(shè)計，最終輸出設(shè)計圖。

3 結(jié)論

數(shù)據(jù)可視化是把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式，以人們更易理解的形式展示出來的一系列方法。數(shù)據(jù)可視化能夠更形象地表達數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進數(shù)據(jù)信息的傳播和應(yīng)用。大屏可視化的設(shè)計要避免為了展示而展示，在設(shè)計之初需通過反復(fù)的調(diào)研和溝通，明確B端用戶真正的業(yè)務(wù)需求，并通過數(shù)據(jù)分析篩選出最合適的圖表展示類型。在界面設(shè)計開發(fā)的過程中，遵循大而簡、簡而精的原則，將最重要的數(shù)據(jù)信息以動態(tài)的方式呈現(xiàn)給用戶，同時弱化不必要的元素，即設(shè)計的核心思想。