基于數(shù)據(jù)可視化的智能終端UI設(shè)計(jì)

姚廣燦

（浙江橫店影視職業(yè)學(xué)院，浙江 東陽(yáng) 322118）

0 引言

數(shù)據(jù)可視化，是關(guān)于數(shù)據(jù)視覺(jué)表現(xiàn)形式的科學(xué)技術(shù)研究。智能終端UI設(shè)計(jì)逐漸傾向于數(shù)據(jù)可視化，如何將海量數(shù)據(jù)通過(guò)可視化圖形語(yǔ)言向用戶(hù)闡明，并增強(qiáng)數(shù)據(jù)可視化的體驗(yàn)感受效果，值得UI設(shè)計(jì)師深思。

1 數(shù)據(jù)可視化概述

數(shù)據(jù)可視化原理是綜合運(yùn)用UI（User Interface）技術(shù)，將采集或模擬的數(shù)據(jù)映射為可視化的圖像、圖形、三維動(dòng)畫(huà)或視頻，并允許用戶(hù)對(duì)數(shù)據(jù)進(jìn)行交互分析的技術(shù)。智能終端UI設(shè)計(jì)中，數(shù)據(jù)可視化是極為重要的設(shè)計(jì)內(nèi)容，主要是針對(duì)數(shù)據(jù)呈現(xiàn)方式的設(shè)計(jì)，包括靜態(tài)背景圖、動(dòng)態(tài)數(shù)據(jù)演示、圖標(biāo)顯示功能等。如果UI設(shè)計(jì)界面呈現(xiàn)出的數(shù)據(jù)可視化結(jié)果滿(mǎn)足用戶(hù)需求，那么用戶(hù)的使用體驗(yàn)也會(huì)隨之增強(qiáng)。反之，當(dāng)數(shù)據(jù)可視化結(jié)果直觀性較差時(shí)，即便給出了數(shù)據(jù)結(jié)果用戶(hù)也很難快速理解數(shù)據(jù)含義。所以，數(shù)據(jù)可視化是基于應(yīng)用層面的數(shù)據(jù)結(jié)果呈現(xiàn)，UI設(shè)計(jì)符合用戶(hù)需求且具有較強(qiáng)的直觀性時(shí)，方能滿(mǎn)足基本設(shè)計(jì)要求，呈現(xiàn)體驗(yàn)度較高數(shù)據(jù)可視化結(jié)果。

2 數(shù)據(jù)可視化的UI設(shè)計(jì)標(biāo)準(zhǔn)

2.1 數(shù)據(jù)采集與識(shí)別

智能終端UI界面中呈現(xiàn)出的數(shù)據(jù)結(jié)果是一種基礎(chǔ)數(shù)據(jù)的動(dòng)態(tài)演化過(guò)程，在此之前需要完成對(duì)基礎(chǔ)數(shù)據(jù)的采集和識(shí)別。一方面，數(shù)據(jù)采集方法可以采用業(yè)內(nèi)歸納、模擬計(jì)算、取樣調(diào)查等方式，以此來(lái)整理基礎(chǔ)數(shù)據(jù)創(chuàng)造可視化語(yǔ)言的直觀表達(dá)方向。另一方面，數(shù)據(jù)識(shí)別是為基礎(chǔ)數(shù)據(jù)貼上標(biāo)簽，讓抽象的數(shù)據(jù)內(nèi)容具有可視化的形象感知條件。也就是將不易理解的數(shù)據(jù)單位轉(zhuǎn)化為符合大眾認(rèn)知的圖形標(biāo)志，從而增強(qiáng)UI界面中數(shù)據(jù)結(jié)果的識(shí)別度和易讀性。

2.2 數(shù)據(jù)優(yōu)化與處理

設(shè)計(jì)智能終端的UI界面時(shí)，原始數(shù)據(jù)并不一定能夠直接使用，主要是采集到的基礎(chǔ)數(shù)據(jù)可能存在明顯誤差和噪音。此時(shí)，需要根據(jù)智能終端UI界面的應(yīng)用方向來(lái)確定容錯(cuò)率，將數(shù)據(jù)誤差值縮減到用戶(hù)可接受范圍之列。以菜鳥(niǎo)驛站App的智能終端界面為例，縮放地圖可以呈現(xiàn)出感官距離數(shù)據(jù)，但是縮放比例本身就是存在誤差的地理信息數(shù)據(jù)。然而用戶(hù)并不介意貨物與自己的空間距離長(zhǎng)遠(yuǎn)，反而更介意快件何時(shí)才能配送到站。所以，基于功能導(dǎo)向的時(shí)間數(shù)據(jù)比路程數(shù)據(jù)要求更高，也非常有必要對(duì)配送時(shí)間數(shù)據(jù)反復(fù)精確。當(dāng)時(shí)間數(shù)據(jù)從“日”精確到“小時(shí)”，需要在智能終端上提示用戶(hù)剩余配送時(shí)間，其數(shù)據(jù)處理的可視化要求也就基本達(dá)到了用戶(hù)預(yù)期的精確度。當(dāng)數(shù)據(jù)瑕疵被抹除之后，數(shù)據(jù)特征的應(yīng)用功能更為明顯，用戶(hù)理解起來(lái)更為便捷且直觀，也就增強(qiáng)了數(shù)據(jù)可視化結(jié)果的呈現(xiàn)效果。

2.3 數(shù)據(jù)異同與風(fēng)格

用戶(hù)對(duì)數(shù)據(jù)的敏感度取決于UI界面是否帶來(lái)了強(qiáng)烈的差異化區(qū)分，但是在過(guò)度差異化的設(shè)計(jì)中又很難形成統(tǒng)一風(fēng)格。所以，UI設(shè)計(jì)的數(shù)據(jù)表現(xiàn)力實(shí)際上是在同一種設(shè)計(jì)風(fēng)格下，盡量對(duì)數(shù)據(jù)可視化結(jié)果差異化和同族化的處理。一方面，同族化的要求是確定圖標(biāo)或數(shù)據(jù)表現(xiàn)形式風(fēng)格統(tǒng)一。圖標(biāo)類(lèi)型雖然有獨(dú)特功能，但是在數(shù)據(jù)表現(xiàn)力上還是應(yīng)以同一風(fēng)格為設(shè)計(jì)前提。而數(shù)據(jù)表現(xiàn)形式則要求至少單位一致、數(shù)字規(guī)格一致、數(shù)據(jù)換算結(jié)構(gòu)一致、數(shù)據(jù)位置和出現(xiàn)概率相對(duì)一致。當(dāng)表現(xiàn)形式統(tǒng)一，且數(shù)據(jù)圖標(biāo)風(fēng)格趨近，則達(dá)到了數(shù)據(jù)可視化的同族風(fēng)格設(shè)計(jì)要求。另一方面，數(shù)據(jù)差異化的表現(xiàn)形式，主要是從標(biāo)記方式或色彩結(jié)構(gòu)上尋找UI設(shè)計(jì)靈感。這主要是因?yàn)閿?shù)據(jù)的直觀表達(dá)中必須具有一定的規(guī)律性，否則用戶(hù)也很難區(qū)分?jǐn)?shù)據(jù)圖標(biāo)所代表的隱含意義。所以，為了增強(qiáng)用戶(hù)對(duì)可視化數(shù)據(jù)的直觀理解，有必要在統(tǒng)一風(fēng)格的形象設(shè)計(jì)上打造差異化的呈現(xiàn)規(guī)律，從而在數(shù)據(jù)異同中美化UI設(shè)計(jì)的呈現(xiàn)效果。

2.4 數(shù)據(jù)場(chǎng)景與體驗(yàn)

用戶(hù)從可視化數(shù)據(jù)中提取到的信息屬于假設(shè)數(shù)據(jù)場(chǎng)景，現(xiàn)實(shí)數(shù)據(jù)所代表的實(shí)物并不能在智能終端設(shè)備上完整呈現(xiàn)。所以，數(shù)據(jù)可視化的UI設(shè)計(jì)中，數(shù)據(jù)場(chǎng)景具有描述和闡釋的雙重作用。數(shù)據(jù)真實(shí)度越高，其呈現(xiàn)效果越需要場(chǎng)景化設(shè)計(jì)來(lái)體現(xiàn)。如果場(chǎng)景描述脫離現(xiàn)實(shí)，那么用戶(hù)的感知體驗(yàn)則會(huì)大幅下降。反之，當(dāng)數(shù)據(jù)場(chǎng)景與現(xiàn)實(shí)場(chǎng)景高度契合，即便是數(shù)據(jù)真實(shí)度存疑，用戶(hù)體驗(yàn)效果也是極佳的。所以，在數(shù)據(jù)假設(shè)場(chǎng)景中，用戶(hù)體驗(yàn)主要是來(lái)自UI設(shè)計(jì)的視覺(jué)指向性，而并非數(shù)據(jù)真實(shí)度。如果數(shù)據(jù)可視化的呈現(xiàn)效果不理想，不斷優(yōu)化數(shù)據(jù)呈現(xiàn)界面的場(chǎng)景化處理，從而增強(qiáng)用戶(hù)體驗(yàn)度。

3 數(shù)據(jù)可視化的智能終端UI設(shè)計(jì)流程

3.1 定義目標(biāo)并完成數(shù)據(jù)展示

后臺(tái)界面首先是要有明確的目標(biāo)，圍繞用戶(hù)需求展開(kāi)設(shè)計(jì)。運(yùn)營(yíng)型和分析型后臺(tái)界面也都是依據(jù)功能導(dǎo)向建立的數(shù)據(jù)可視化操作，而后便可對(duì)數(shù)據(jù)前臺(tái)呈現(xiàn)效果進(jìn)行設(shè)計(jì)加工。后臺(tái)界面中的數(shù)據(jù)展示相對(duì)更為復(fù)雜，尤其數(shù)據(jù)類(lèi)型較多時(shí)，無(wú)論是靜態(tài)數(shù)據(jù)還是動(dòng)態(tài)數(shù)據(jù)，都需要依據(jù)數(shù)據(jù)變化結(jié)果呈現(xiàn)在前臺(tái)，展示出數(shù)據(jù)的指向性作用。

3.2 統(tǒng)一格式并完成結(jié)構(gòu)性布局

后臺(tái)界面所呈現(xiàn)的數(shù)據(jù)信息需注重細(xì)節(jié)處理，這主要是規(guī)范命名、日期格式以及數(shù)值單位等數(shù)據(jù)化處理的基礎(chǔ)條件。當(dāng)格式統(tǒng)一之后，UI設(shè)計(jì)框架也就基本定型，可以保證前臺(tái)數(shù)據(jù)的一致性。數(shù)據(jù)操作欄中的命名方式相同，指向性也就非常明確，用戶(hù)操作將更為便利。之后便可以定義UI界面的結(jié)構(gòu)性布局，包括數(shù)據(jù)出現(xiàn)的順序和優(yōu)先級(jí)。

通常可以使用“隱形”線劃分框架結(jié)構(gòu)，對(duì)齊網(wǎng)格之后再填入設(shè)計(jì)元素也就形成了基本骨架。網(wǎng)格可以使得智能終端應(yīng)用界面條理清晰，數(shù)據(jù)呈現(xiàn)的視覺(jué)效果也會(huì)更為規(guī)整。尤其在數(shù)據(jù)信息量較大時(shí)，相對(duì)更為緊湊的空間布局，可以讓用戶(hù)清晰識(shí)別出數(shù)據(jù)特征，這也是前臺(tái)應(yīng)用操作的引導(dǎo)功能之一。

3.3 優(yōu)化組件并設(shè)計(jì)留白

定義網(wǎng)格的作用是劃清界限，但是多組件情況下承載的數(shù)據(jù)信息量會(huì)逐漸增加，圖表所牽涉的數(shù)據(jù)類(lèi)型也會(huì)隨之增加。如果排列方式可以?xún)?yōu)中選優(yōu)，則盡量以統(tǒng)一的組件格式進(jìn)行完整設(shè)計(jì)。通?？梢允褂媒y(tǒng)一規(guī)格的虛擬卡片，定義數(shù)據(jù)操作和響應(yīng)時(shí)間，必要時(shí)可以增加拓展名，從而優(yōu)化空間布局中組件結(jié)構(gòu)的視效完整度。

優(yōu)化組件之后還要為界面空間留白，而留白區(qū)域越大，用戶(hù)視覺(jué)負(fù)擔(dān)越小。這是用戶(hù)在使用智能終端設(shè)備時(shí)的一個(gè)操作習(xí)慣，即便是數(shù)據(jù)特征較為明顯的操作界面里，也不能讓用戶(hù)感覺(jué)數(shù)據(jù)滿(mǎn)格且空間狹小。這就涉及排版的用途，如果用戶(hù)對(duì)數(shù)據(jù)結(jié)果非常在意，數(shù)字必須大于空間留白；如果用戶(hù)對(duì)于數(shù)據(jù)反饋結(jié)果的動(dòng)態(tài)演示更為注重，那么動(dòng)態(tài)圖的畫(huà)面可以盡量延伸，最后以滑動(dòng)橫排數(shù)據(jù)呈現(xiàn)所有結(jié)果即可。所以，空間留白的設(shè)計(jì)方案，也是依據(jù)用戶(hù)對(duì)數(shù)據(jù)觀感需求來(lái)設(shè)計(jì)的，需要設(shè)計(jì)師依據(jù)智能終端的應(yīng)用功能來(lái)調(diào)整排版結(jié)構(gòu)。

3.4 完整呈現(xiàn)數(shù)據(jù)信息并完成個(gè)性化設(shè)計(jì)

應(yīng)用界面的功能性主要是為了快速獲得數(shù)據(jù)信息，但如果涉及滾動(dòng)的連續(xù)數(shù)據(jù)，在一定程度上會(huì)拖慢用戶(hù)的使用效率。一般在金融類(lèi)的UI設(shè)計(jì)中頻繁出現(xiàn)大屏滾動(dòng)式的數(shù)據(jù)信息，但是這種數(shù)據(jù)的演示性較強(qiáng)，對(duì)用戶(hù)辨別數(shù)據(jù)走勢(shì)具有一定的輔助作用。除此之外，設(shè)計(jì)其他應(yīng)用界面并不需要采取隱藏?cái)?shù)據(jù)信息的方式來(lái)構(gòu)圖，如果因此而弱化了用戶(hù)使用效率也會(huì)得不償失。

以往設(shè)計(jì)中能夠發(fā)現(xiàn)，用戶(hù)更希望直觀看到與其個(gè)人需求息息相關(guān)的數(shù)據(jù)信息內(nèi)容。但是這并不代表自定義數(shù)據(jù)類(lèi)型就是個(gè)性化的設(shè)計(jì)，這種功能僅對(duì)小眾用戶(hù)簡(jiǎn)易操作具有直觀引導(dǎo)作用。絕大多數(shù)的應(yīng)用界面，是以對(duì)用戶(hù)的ID識(shí)別來(lái)判斷用戶(hù)需求的，也以大數(shù)據(jù)識(shí)別來(lái)區(qū)分用戶(hù)角色類(lèi)型，從而提供相應(yīng)的數(shù)據(jù)信息內(nèi)容。所以，在系統(tǒng)結(jié)構(gòu)的配置布局中，自定義選項(xiàng)不宜過(guò)多，前期可以直接提供全視域的數(shù)據(jù)信息，后期可以由用戶(hù)自行刪減輔助數(shù)據(jù)信息，以此來(lái)改變用戶(hù)的數(shù)據(jù)體驗(yàn)方式，增強(qiáng)應(yīng)用界面的實(shí)用性功能。

3.5 融合數(shù)據(jù)列表并簡(jiǎn)化視覺(jué)負(fù)擔(dān)

少數(shù)智能終端應(yīng)用界面的數(shù)據(jù)類(lèi)型很多，此時(shí)用戶(hù)很可能會(huì)對(duì)過(guò)于復(fù)雜的數(shù)據(jù)內(nèi)容產(chǎn)生視覺(jué)干擾。這也可以理解為是一種面對(duì)復(fù)雜數(shù)據(jù)所產(chǎn)生的視覺(jué)負(fù)擔(dān)，如果不能簡(jiǎn)化數(shù)據(jù)結(jié)果，就需要進(jìn)一步簡(jiǎn)化數(shù)據(jù)表現(xiàn)方式。一方面，簡(jiǎn)化數(shù)據(jù)結(jié)果的方式主要是融合數(shù)據(jù)列表。將較為復(fù)雜的數(shù)據(jù)單位全部替換為百分比數(shù)據(jù)，通過(guò)后天驗(yàn)算生成簡(jiǎn)化后的數(shù)據(jù)結(jié)果，讓用戶(hù)一目了然的觀察到最想要看到的數(shù)據(jù)。另一方面，簡(jiǎn)化數(shù)據(jù)表現(xiàn)方式，可以通過(guò)增強(qiáng)應(yīng)用界面的空間利用率，或者是隱藏部分輔助性較弱的觀察數(shù)據(jù)信息。在便于用戶(hù)使用操作的前提下，將簡(jiǎn)化視覺(jué)負(fù)擔(dān)作為突出數(shù)據(jù)呈現(xiàn)效果的主要設(shè)計(jì)方案。所以，數(shù)據(jù)可視化界面應(yīng)總攬全局，重點(diǎn)體現(xiàn)關(guān)鍵數(shù)據(jù)信息，剔除掉絕大多數(shù)無(wú)用信息之后再增強(qiáng)數(shù)據(jù)的直觀性。

4 基于數(shù)據(jù)可視化的智能終端UI設(shè)計(jì)優(yōu)化策略

4.1 充分體現(xiàn)圖形可視化的重要數(shù)據(jù)

數(shù)據(jù)信息本身也有主次之分，如果用戶(hù)在應(yīng)用界面上先看到次要數(shù)據(jù)，而后才看到主要數(shù)據(jù)，那么對(duì)應(yīng)用界面的數(shù)據(jù)理解和體驗(yàn)效果則會(huì)大幅下降。在某款風(fēng)電項(xiàng)目的應(yīng)用界面中，為了將數(shù)據(jù)語(yǔ)言表達(dá)得更為清晰，便使用了圖形表現(xiàn)方式來(lái)呈現(xiàn)數(shù)據(jù)結(jié)果。設(shè)計(jì)師依據(jù)讀者對(duì)數(shù)據(jù)文字的理解方式，用風(fēng)車(chē)表示風(fēng)電機(jī)組的容量，用樹(shù)葉和插座表示節(jié)能的概念，用房屋和燈泡表示電能到戶(hù)的數(shù)量級(jí)別，用戶(hù)可以直截了當(dāng)理解圖形含義，即便沒(méi)有文字引導(dǎo)，也可以產(chǎn)生清晰的數(shù)字表示意圖認(rèn)知。所以，在UI設(shè)計(jì)后期，還要觀察用戶(hù)的觀感反饋，盡量用簡(jiǎn)約的圖形方式來(lái)進(jìn)行數(shù)據(jù)可視化表達(dá)，增強(qiáng)用戶(hù)理解效果。

4.2 用圖形數(shù)據(jù)化的感知語(yǔ)言重組指標(biāo)

煩瑣數(shù)據(jù)雖然更為詳細(xì)，但是并不會(huì)增強(qiáng)用戶(hù)的可視化體驗(yàn)效果。所以，數(shù)據(jù)圖形需要在后期對(duì)部分指標(biāo)進(jìn)行調(diào)整，通過(guò)重組指標(biāo)的方式來(lái)強(qiáng)化圖形語(yǔ)言的表達(dá)力。設(shè)計(jì)師可以通過(guò)不同的表現(xiàn)控件去展現(xiàn)，從而更好地體現(xiàn)可視化效果語(yǔ)言。諸如，墨跡天氣App的應(yīng)用界面中，線性圖示結(jié)構(gòu)可以反映出15日內(nèi)的氣溫變化，再用常見(jiàn)的天氣符號(hào)和溫度數(shù)據(jù)表示即可。但是這種數(shù)據(jù)結(jié)果對(duì)理性用戶(hù)的引導(dǎo)力較強(qiáng)，感性用戶(hù)更希望看到一種對(duì)于溫度的直觀感受圖示。所以，墨跡天氣的制作團(tuán)隊(duì)，用卡通人物的著裝來(lái)表示溫度，棉衣代表低溫，短袖代表高溫。背景圖中，將代表春夏秋冬的四季圖片配合溫度數(shù)據(jù)進(jìn)行調(diào)整，同時(shí)用光線的明暗度來(lái)表示白天和夜晚的時(shí)間變化。那么這種具有指向性的感知數(shù)據(jù)表達(dá)力更強(qiáng)，所以用戶(hù)體驗(yàn)效果也會(huì)隨之增加，增強(qiáng)了數(shù)據(jù)可視化的表達(dá)力。

4.3 動(dòng)態(tài)演示圖表中的數(shù)據(jù)變化規(guī)律

靜態(tài)圖示能夠呈現(xiàn)短期內(nèi)不會(huì)變化的數(shù)據(jù)信息，但是很難體現(xiàn)出隨時(shí)變化的數(shù)據(jù)內(nèi)容。所以，UI設(shè)計(jì)中動(dòng)態(tài)演示數(shù)據(jù)結(jié)果必不可少。比如，Keep App的跑步距離數(shù)據(jù)，便是用路程前進(jìn)線來(lái)表示當(dāng)然跑步的距離和時(shí)間，并以此推算出用戶(hù)消耗的卡路里。值得注意的是動(dòng)態(tài)演示結(jié)果中，路程、時(shí)間、配速、卡路里消耗等數(shù)據(jù)信息，都是在用戶(hù)行進(jìn)過(guò)程中產(chǎn)生的動(dòng)態(tài)數(shù)據(jù)，且隨時(shí)暫停也可以觀察到停頓后當(dāng)時(shí)的數(shù)據(jù)結(jié)果，故而用戶(hù)感受更為真實(shí)。所以，這種動(dòng)態(tài)演示數(shù)據(jù)結(jié)果的功能必不可少，需要用動(dòng)態(tài)演示圖表中的數(shù)據(jù)變化規(guī)律來(lái)體現(xiàn)可視化，并增強(qiáng)用戶(hù)的直觀感受。

5 結(jié)語(yǔ)

綜上所述，數(shù)據(jù)可視化的UI設(shè)計(jì)標(biāo)準(zhǔn)主要包括，數(shù)據(jù)采集與識(shí)別、數(shù)據(jù)優(yōu)化與處理、數(shù)據(jù)異同與風(fēng)格及數(shù)據(jù)場(chǎng)景與體驗(yàn)。在具體的設(shè)計(jì)流程中，首先需要定義目標(biāo)并完成數(shù)據(jù)展示，其次需要統(tǒng)一格式并完成結(jié)構(gòu)性布局，再次需要優(yōu)化組件并設(shè)計(jì)留白，最后需要完整呈現(xiàn)數(shù)據(jù)信息并完成個(gè)性化設(shè)計(jì)，此外還要融合數(shù)據(jù)列表并簡(jiǎn)化視覺(jué)負(fù)擔(dān)。完成總體設(shè)計(jì)之后需要進(jìn)一步優(yōu)化，建議UI設(shè)計(jì)師綜合考量應(yīng)用界面數(shù)據(jù)可視化的視覺(jué)表現(xiàn)力，充分體現(xiàn)圖形可視化的重要數(shù)據(jù)，用圖形數(shù)據(jù)化的感知語(yǔ)言重組指標(biāo)，動(dòng)態(tài)演示圖表中的數(shù)據(jù)變化規(guī)律。