姚憶南

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

0 引言

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

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

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

對(duì)比、關(guān)系、分布和構(gòu)成是數(shù)據(jù)分析常用的4個(gè)維度。在開始界面設(shè)計(jì)之前必須明確給屏幕前的用戶展示什么，通過(guò)圖表需要表達(dá)什么樣的規(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ìn)行分析。常見的數(shù)據(jù)可視化圖表類型有柱狀圖、折線圖、餅圖、條形圖、雷達(dá)圖和地圖等。每種圖表類型適用于不同的數(shù)據(jù)類型，不可隨意使用。圖1中列舉了數(shù)據(jù)可視化設(shè)計(jì)原則和常見的圖表類型。

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

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

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

1.2 尺寸的適配

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

1.3 界面的布局和劃分

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

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

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

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

1.5 字體的選擇

字體是數(shù)據(jù)可視化設(shè)計(jì)中極為重要的一環(huán)。字體的好壞直接決定了界面的易讀性和用戶體驗(yàn)。在選擇字體時(shí)優(yōu)先選擇系統(tǒng)默認(rèn)的字體，了解字體是否可以免費(fèi)商用，在考慮識(shí)別性的同時(shí)也要考慮是否與當(dāng)前界面風(fēng)格兼容。根據(jù)國(guó)外權(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è)計(jì)過(guò)程中又需要用到其他字體，則需要前端開發(fā)人員嵌入第三方的字體包。部分字體包占用空間大，為了優(yōu)化頁(yè)面加載速度，可以使用fontcreator等軟件將對(duì)應(yīng)的字體包中不必要的字符刪除，從而減少字體包的大小(一個(gè)完整的字體包中一般包括了阿拉伯文、符號(hào)、拉丁文、日文、西里爾文、希臘文、拼音等多種字符，對(duì)于數(shù)據(jù)可視化界面和大屏的場(chǎng)景，僅保留中文和數(shù)字便可，其余都可刪除)。

1.6 動(dòng)效設(shè)計(jì)

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

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

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

1.7 界面控件和UI組件庫(kù)的輸出

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

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

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

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

3 結(jié)論

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