信息可視化設計在移動UI界面中的應用

◇朱 杰 李 嘉

隨著互聯網移動UI設計的不斷發展，信息可視化設計逐漸在App產品設計中被應用，其通過將各類表格數據、文字資訊、復雜理論進行可視化處理，讓用戶更加快速地閱讀和理解信息。目前，信息可視化已迅速成為在網絡上傳播信息的標準。

一、概念闡述

（一）信息可視化設計的定義

信息可視化的理念最早由斯圖爾特·卡德、喬治·羅伯遜和約克·麥金利提出。其是將非空間數據的信息對象的特征值抽取、轉換、映射、高度抽象與整合，用圖形、圖像、動畫等方式表示信息對象內容特征和語義的過程。可視化設計主要為方便人們對復雜信息的理解與認識，通過計算機交互設計為載體對抽象的內容及數字進行可視化的呈現。信息可視化設計可以對復雜的文字概念、繁復的數據、雜亂的內容進行系統化的梳理與排序，最后將內容進行優化設計，通過清晰的圖像將內容呈現給用戶，幫助用戶更好地理解內容。設計形式包括數據可視化設計、圖形可視化設計等，呈現的形式主要為數據圖標、大數據看板、時間軸、信息圖等。通常被應用在復雜的信息圖設計中，用以解析復雜的科學理論。

信息可視化設計通常被用在教科書插圖、歷史信息總結、博物館、報紙等內容的設計中，通過將海量的信息有規律地進行梳理、排序、風格化設計，達到對復雜概念的清晰傳達。將難以理解的科學概念及復雜內容拆解為容易記憶的圖形，將文字語言轉化為視覺語言，使枯燥無味的信息變得美觀生動。在互聯網信息爆炸的時代背景下，信息可視化設計可以幫助設計者在App產品設計中，篩選出符合目標用戶認知的重點信息，更好地對信息進行整理、排序、優化，從而有效地提升界面設計中的內容的傳達效率，讓用戶在使用產品的過程中，更加方便快捷地對信息進行深度的理解。

（二）移動UI設計的定義

UI（User Interface，用戶界面） 設計是指對軟件產品的人機交互、操作邏輯和界面美觀的整體設計。從字面上看由用戶與界面兩個部分組成，但實際上還包括用戶與界面之間的交互關系，所以可分為三個方向：用戶研究、交互設計、界面設計。互聯網場景中的移動端UI設計通常指手機、平板電腦等移動終端的App產品設計。UI是指人與信息交互的媒介，它是信息產品的功能載體和典型特質。移動UI設計以手機等終端為載體，將圖形、圖標、色彩、文字設計等內容以一定的規律進行排布，逐步形成移動端特殊的內容交互形態。

移動UI界面有五個主要的設計流程。一是確定目標用戶，在做設計時需要充分考慮用戶的需求，調整交互設計的側重點。通過對用戶的深度了解，分析用戶的行為特點及內在需求，形成用戶畫像。二是采集目標用戶行為習慣，對目標用戶進行精準的調研分析，挖掘用戶在產品使用過程中的交互習慣，得到最適合用戶的交互方式。三是提示和引導用戶，在軟件中引導用戶進行正確的軟件操作。四是融入一致性原則，將視覺元素、交互行為進行一致性的統一。五是遵循可用性原則，讓用戶在使用的過程中更好地理解產品的各項功能，達到最優的交互體驗。

二、信息可視化設計在移動UI界面中應用的意義

（一）提升信息的傳播效率

信息層級豐富、功能煩瑣、用戶理解難度高是眾多App產品的痛點問題。數十個功能模塊、數百個內容界面、繁雜的文字及數字信息成為信息傳播效率的阻礙，煩瑣的功能讓用戶的選擇較為困難。而信息可視化設計，通過簡單的圖形與文字信息即可快速地傳達重要信息，將原本需要大量文字內容闡述的信息視覺化，簡化界面內容增強信息的可讀性，讓用戶在看到可視化圖形時迅速地理解該內容傳遞的重要信息。

（二）增加信息可讀性

用戶在長期閱讀枯燥信息時，難以進入深度閱讀的心流狀態，人性本身對于色彩和圖像的感知大于對于文字的感知。將難以理解的概念進行視覺化表現，有利于增加信息的可讀性，讓枯燥的理論知識變成有趣的圖形和動畫，降低信息的理解難度，提升用戶的觀感體驗。比如用戶在閱讀復雜理論內容時，通過圖形表達的方式將文字圖形化，以豐富的色彩與富有沖擊力的圖像讓用戶有更好的閱讀體驗。在復雜的數據對比、數據分析中，多樣化的圖表可以迅速使用戶了解數據趨勢走向及數據變化。

（三）塑造風格化界面

通過信息的可視化設計，可以讓界面更具風格，在同類產品中提升辨識度。不同的色彩感知讓用戶產生不同的情緒感知，如熱烈的紅色與橙色、冷靜的藍色與綠色、歡快的黃色等在界面中的應用都在傳遞不一樣的情緒感知。讓用戶通過色彩的視覺感知體驗到內在的信息內容，從而對UI界面產生記憶點，這樣可以提升產品的品牌識別度與市場競爭力。

三、信息可視化設計在移動UI界面中應用的設計原則

信息可視化在設計的過程中需要以提升直觀的閱讀體驗與信息接受率為目標，充分考慮用戶的行為特點及心理特點，根據用戶的閱讀習慣把握界面設計中內容的可讀性，通過以人為本、高效識別、準確表達的設計原則進行設計。

（一）以人為本的設計原則

信息可視化設計應該遵循以人為本的設計原則，幫助人解決產品使用中遇到的核心問題，遵循人對信息接受的特征，調整信息可視化設計的策略與內容。每個個體對于同一事物的感知是不同的，同樣一個界面在不同用戶使用過程中的信息傳達效率也不同，只有不斷地針對產品的目標用戶進行測試和完善移動UI界面內容，才能確保其符合目標用戶的價值需求。通過圖形、色彩、文字等形式，建立以用戶為中心的視覺傳達機制，重復考慮用戶使用產品的日常習慣、行為特征和心理因素，實現多樣的閱讀視覺感知體驗，讓信息的可視化符合產品目標用戶訴求。

（二）高效識別的設計原則

信息可視化設計的高效識別原則體現在界面的極簡、版式內容層級的清晰上，主要為幫助用戶在使用產品進行閱讀過程中快速獲取重要信息、理解復雜的數據及理論信息，讓界面實現流暢的閱讀體驗。高效識別的基礎是信息量低、重點突出、版式舒適，設計者在移動UI界面設計中可通過消除無用信息與保留重要信息、信息篩選及優先級排序、重要信息的視覺強調等設計手法提升信息傳達的效率，用最簡潔的設計語言快速地對界面信息進行精準表達，更好地貼近用戶認知的移動UI界面。高效識別的設計原則能幫助設計者合理地進行信息篩選與組合，從而達到內容界面的信息簡約、層級清晰，給用戶更好的閱讀體驗。

（三）準確表達的設計原則

信息可視化設計的準確表達設計原則主要是為避免在界面設計中出現閱讀歧義，傳遞容易令人產生錯誤感知的信息。圖形的設計和圖片的使用應該與文字內容緊緊地聯系在一起，如果表達得不夠準確可能會造成用戶的理解偏差，從而產生背道而馳的效果。在icon的設計中，應該注意圖標設計的可讀性和指向性，將圖形創意與功能內容結合，理清圖形與內容之間的內在聯系，從而達到準確的信息傳達。

四、信息可視化設計在移動UI界面設計中的應用方法

（一）信息圖表化

信息的可視化設計中，最常用的可視化方式就是信息圖表化設計。不同的內容形式可以通過不同的圖表進行表達。按照形式特點，常把圖表分為關系流程圖、敘事插圖、樹型結構圖、時間分布類及空間解構類五種類型。信息圖表設計的本質是將數據等重要信息內容進行可視化呈現，使其變得更利于理解，通常在數據展示、案例對比、圖形解讀等場景下使用，使信息變得更加直觀易懂。在信息圖表的設計中，設計者應當遵循簡單至上的設計方法。在圖表設計中，詳細梳理文字、圖形內容在信息傳達中的必要性，去掉表達冗余的部分，保留最重要的信息內容，讓圖表設計簡單易懂。例如，在支付寶的基金板塊設計中，通過K線圖的設計表現基金在一段時期內的漲跌幅，在對比界面中通過柱狀圖進行基金的對比，在基金推薦中通過條形圖將基金的估值情況進行可視化呈現，從而讓用戶更快地對一支基金的重要信息進行準確把握。

（二）文字圖形化

在界面的可視化設計中，可通過文字圖形化的方式，將抽象的信息具體化呈現。通過將文字信息轉化為圖片、圖標、插畫等易于理解的表達形式，快速與用戶日常生活產生深入的連接，提升用戶對信息的理解能力。在UI界面設計時，多使用圖形的表達增強內容的觀感。在文字圖形化的設計過程中，應該遵守準確性的設計原則。圖形設計的目的是準確地表達主題內容，在文字的圖形化表達中，為避免產生歧義，需要保證圖形內容的準確性，減少對內容的理解偏差。在圖形的創意設計中應該圍繞主題的內容進行延展設計，設計的圖形應該具有較高的辨識度，反映出內容的具體特質，提升內容的識別度，將抽象的文字內容符號化、具體化。例如在墨跡天氣App產品中，表達天氣變化時使用晴天、多云、雨天等不同的圖標表現不同時段的天氣變化，表達不同天氣情況下的穿衣建議時，用插畫人物衣著和真實的人物穿搭照片進行可視化表現，表達不同的功能界面時通過多樣的功能圖標展示產品不同的功能用途。

（三）模塊色彩化

模塊色彩化是在UI界面的內容設計中，區分內容模塊和實現界面品牌化的最佳設計手法，通過顏色對功能模塊、內容模塊進行區分，提升界面視覺效果的同時，也可以起到提升閱讀體驗的效果。在文字圖形化的設計過程中，應該遵循精準匹配的設計方法。在顏色的選擇中，首先需要綜合考慮用戶人群特質、行業特質等因素，選擇目標用戶較為偏向的色彩搭配，其次需要考慮顏色在金剛區、首圖Banner等不同功能模塊場景下的應用，選擇色彩明度、色彩對比度適合的色彩進行搭配，最后為了配合活動界面的設計，在UI界面整體的色彩搭配上需要限制色彩，根據品牌色選用標準色。

（四）版式清晰化

版式設計是在UI界面中進行內容排版與色彩搭配的基礎，將視覺元素按照一定的規律有序組合，并處理好各元素之間繁簡、大小、疏密、曲直等關系，在設計中采用夸張、比喻、象征的手法來體現視覺效果，形成不同尋常的空間關系。好的版式設計在突出重點、提升界面美感和信息傳達上有重要作用。在版式設計中為讓內容清晰化呈現，首先需要對內容的重要性進行優先級排序，找到用戶關注的重點內容并通過版式放大、色塊強調、模塊設計等設計手法對內容的整體邏輯進行清晰的區分。其次在文字內容的處理上，通過將重點內容突出放大、調整色彩明度與純度、加粗強調等方式，可讓界面清晰準確地傳達有價值的信息。

五、結語

信息可視化設計在移動UI界面上的應用，可以在互聯網信息爆炸時代下，幫助產品精簡信息內容，降低用戶的閱讀成本，讓信息更加直觀有效地進行傳播。本文總結了信息可視化設計在移動UI界面中設計應用的四種設計方式，具體分析了提升UI界面信息傳遞有效性和準確性的可行性方案，為今后UI界面設計中應用信息可視化設計提供可行的設計策略和設計方案。設計師在進行UI界面設計時可通過時間軸、數據看板、圖表設計、信息圖設計等方式，改變界面的版式、色彩、內容等，增加界面的風格化表達，從而提升產品的記憶點和視覺沖擊力，增強用戶對產品界面的感知度。