姚廣燦

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

0 引言

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

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

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

2 數(shù)據(jù)可視化的UI設(shè)計標準

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

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

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

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

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

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

2.4 數(shù)據(jù)場景與體驗

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 結(jié)語

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