基于數據可視化的智能終端UI設計

姚廣燦

（浙江橫店影視職業學院，浙江 東陽 322118）

0 引言

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

1 數據可視化概述

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

2 數據可視化的UI設計標準

2.1 數據采集與識別

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

2.2 數據優化與處理

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

2.3 數據異同與風格

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

2.4 數據場景與體驗

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

3 數據可視化的智能終端UI設計流程

3.1 定義目標并完成數據展示

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

3.2 統一格式并完成結構性布局

后臺界面所呈現的數據信息需注重細節處理，這主要是規范命名、日期格式以及數值單位等數據化處理的基礎條件。當格式統一之后，UI設計框架也就基本定型，可以保證前臺數據的一致性。數據操作欄中的命名方式相同，指向性也就非常明確，用戶操作將更為便利。之后便可以定義UI界面的結構性布局，包括數據出現的順序和優先級。

通常可以使用“隱形”線劃分框架結構，對齊網格之后再填入設計元素也就形成了基本骨架。網格可以使得智能終端應用界面條理清晰，數據呈現的視覺效果也會更為規整。尤其在數據信息量較大時，相對更為緊湊的空間布局，可以讓用戶清晰識別出數據特征，這也是前臺應用操作的引導功能之一。

3.3 優化組件并設計留白

定義網格的作用是劃清界限，但是多組件情況下承載的數據信息量會逐漸增加，圖表所牽涉的數據類型也會隨之增加。如果排列方式可以優中選優，則盡量以統一的組件格式進行完整設計。通常可以使用統一規格的虛擬卡片，定義數據操作和響應時間，必要時可以增加拓展名，從而優化空間布局中組件結構的視效完整度。

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

3.4 完整呈現數據信息并完成個性化設計

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

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

3.5 融合數據列表并簡化視覺負擔

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

4 基于數據可視化的智能終端UI設計優化策略

4.1 充分體現圖形可視化的重要數據

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

4.2 用圖形數據化的感知語言重組指標

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

4.3 動態演示圖表中的數據變化規律

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

5 結語

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