◇朱 杰 李 嘉

隨著互聯(lián)網(wǎng)移動UI設(shè)計的不斷發(fā)展，信息可視化設(shè)計逐漸在App產(chǎn)品設(shè)計中被應(yīng)用，其通過將各類表格數(shù)據(jù)、文字資訊、復(fù)雜理論進(jìn)行可視化處理，讓用戶更加快速地閱讀和理解信息。目前，信息可視化已迅速成為在網(wǎng)絡(luò)上傳播信息的標(biāo)準(zhǔn)。

一、概念闡述

（一）信息可視化設(shè)計的定義

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

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

（二）移動UI設(shè)計的定義

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

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

二、信息可視化設(shè)計在移動UI界面中應(yīng)用的意義

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

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

（二）增加信息可讀性

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

（三）塑造風(fēng)格化界面

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

三、信息可視化設(shè)計在移動UI界面中應(yīng)用的設(shè)計原則

信息可視化在設(shè)計的過程中需要以提升直觀的閱讀體驗與信息接受率為目標(biāo)，充分考慮用戶的行為特點(diǎn)及心理特點(diǎn)，根據(jù)用戶的閱讀習(xí)慣把握界面設(shè)計中內(nèi)容的可讀性，通過以人為本、高效識別、準(zhǔn)確表達(dá)的設(shè)計原則進(jìn)行設(shè)計。

（一）以人為本的設(shè)計原則

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

（二）高效識別的設(shè)計原則

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

（三）準(zhǔn)確表達(dá)的設(shè)計原則

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

四、信息可視化設(shè)計在移動UI界面設(shè)計中的應(yīng)用方法

（一）信息圖表化

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

（二）文字圖形化

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

（三）模塊色彩化

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

（四）版式清晰化

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

五、結(jié)語

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