數(shù)據(jù)可視化大屏UI設計的研究和分析

姚憶南

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

0 引言

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

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

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

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

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

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

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

1.2 尺寸的適配

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

1.3 界面的布局和劃分

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

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

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

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

1.5 字體的選擇

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

1.6 動效設計

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

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

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

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

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

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

2 實際案例的應用和分析

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

3 結論

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