論界面信息的可視化呈現(xiàn)

王立峰 張毅

摘要：本文是針對(duì)重慶市高等教育教學(xué)改革研究項(xiàng)目《數(shù)字媒體課程體系中的信息可視化應(yīng)用研究》的相關(guān)內(nèi)容所展開(kāi)的理論應(yīng)用研究。本文以數(shù)字媒體設(shè)計(jì)專業(yè)的核心課程界面設(shè)計(jì)為研究對(duì)象，以界面信息的可視化呈現(xiàn)為研究目標(biāo)，印證信息可視化對(duì)于界面信息表達(dá)與傳遞的重要作用。本文的研究不僅能夠提升界面作為信息媒介的有用性，還是對(duì)界面設(shè)計(jì)與信息可視化理論的深化和拓展。同時(shí)，本文的成果也是對(duì)本項(xiàng)目研究的深度與成果運(yùn)用的廣度的一種強(qiáng)化。

關(guān)鍵詞：信息；界面設(shè)計(jì)；可視化

Abstract：This thesis is related to the design and teaching in Chongqing Higher Education Reform Project "Application Research On Information Visualization In Digital Media Course System" against the deployment. This thesis focuses on the core curriculum user interface design of digital media design major， the visual presentation of the user interface information is the research target， Verify the important role of information visualization in the representation and transmission of user interface information. The research of this thesis can not only improve the usefulness of the user interface as an information medium， but also deepen and expand the theory of user interface design and information visualization. At the same time， The result of this thesis is also an intensification of the depth of the project research and the scope of the application of the results.

Key Word：Information User Interface Design Visualization

一、界面設(shè)計(jì)與信息可視化

界面設(shè)計(jì)（User Interface Design），是指對(duì)應(yīng)用程序或軟件的外觀形式、操作邏輯與人機(jī)交互所進(jìn)行的整體設(shè)計(jì)，其作用在于建立起人機(jī)之間信息傳遞與交換的媒介，因此，界面的本質(zhì)是一種媒介，是信息產(chǎn)品的功能載體，界面設(shè)計(jì)則是構(gòu)建這個(gè)媒介的手段方式。界面設(shè)計(jì)是計(jì)算機(jī)科學(xué)與設(shè)計(jì)學(xué)、心理學(xué)、認(rèn)知科學(xué)和人機(jī)工程學(xué)之間的交叉研究領(lǐng)域，是近年來(lái)全球設(shè)計(jì)界最為活躍的研究方向之一。信息可視化，簡(jiǎn)單來(lái)說(shuō)就是利用了人類眼睛所具有的勝過(guò)其他感官的敏銳度，將數(shù)據(jù)與信息視覺(jué)化，以信息圖的形式輕松實(shí)現(xiàn)信息表達(dá)與傳遞的目的。信息可視化是界面設(shè)計(jì)的重要手段之一，其目的在于更好表達(dá)信息，使人機(jī)之間的信息傳遞與交換變得簡(jiǎn)單而便捷，更好地實(shí)現(xiàn)界面作為傳播媒介的功能與作用。

信息可視化與界面設(shè)計(jì)的關(guān)系以及對(duì)于界面設(shè)計(jì)的重要性已然明確，然而面對(duì)類型眾多的各種界面信息，探論界面設(shè)計(jì)中信息的可視化呈現(xiàn)方法就顯得非常有必要了，因?yàn)檫@對(duì)于強(qiáng)化界面的媒介功能，提升其使用的有用性和有效性將發(fā)揮至關(guān)重要的作用。此外，該研究不僅是對(duì)界面設(shè)計(jì)學(xué)科理論的深化，更是關(guān)于信息可視化應(yīng)用研究的進(jìn)一步拓展。

二、界面信息的可視化呈現(xiàn)方法

研究界面信息的可視化方法呈現(xiàn)必須立足于與界面設(shè)計(jì)緊密相關(guān)的三個(gè)方面，第一，對(duì)應(yīng)用程序或軟件產(chǎn)品的全面分析；第二，對(duì)該產(chǎn)品目標(biāo)用戶的深入研究；第三，對(duì)該產(chǎn)品界面視覺(jué)設(shè)計(jì)的整體規(guī)劃。上述三個(gè)方面是界面信息表達(dá)與傳遞的基礎(chǔ)，更是研究界面信息的可視化呈現(xiàn)方法的理論導(dǎo)向。

（一）基于產(chǎn)品功能的界面信息可視化呈現(xiàn)

界面，依附于軟件或應(yīng)用程序產(chǎn)品而存在，是應(yīng)用程序或軟件的可視化外觀形態(tài)，其顯著特點(diǎn)之一是以圖形信息為主體的媒介傳播形式。在此基礎(chǔ)上，界面能夠通過(guò)對(duì)信息的輸入與輸出、采集與反饋，實(shí)現(xiàn)用戶與產(chǎn)品的之間的交互行為，這是界面的第二個(gè)重要特點(diǎn)。因此，結(jié)合界面的兩個(gè)重要特點(diǎn)，基于產(chǎn)品功能的界面信息可視化呈現(xiàn)主要體現(xiàn)在以下三個(gè)方面：

第一，產(chǎn)品功能的展現(xiàn)首先體現(xiàn)在產(chǎn)品界面信息清晰完善的結(jié)構(gòu)設(shè)計(jì)，這主要是通過(guò)運(yùn)用可視化信息結(jié)構(gòu)模型中的層級(jí)式結(jié)構(gòu)模型得以實(shí)現(xiàn)，層級(jí)式結(jié)構(gòu)模型能夠?qū)?fù)雜的產(chǎn)品信息轉(zhuǎn)換為組織關(guān)系明確、結(jié)構(gòu)層次清晰、導(dǎo)航方式高效的可視化信息結(jié)構(gòu)圖，形成產(chǎn)品初步的可視化外觀形態(tài)。

第二，產(chǎn)品功能的展現(xiàn)還體現(xiàn)在對(duì)于界面的交互行為的可視化設(shè)計(jì)中，交互行為的設(shè)計(jì)可通過(guò)使用可視化信息結(jié)構(gòu)模型中的導(dǎo)向式結(jié)構(gòu)模型和拓展式結(jié)構(gòu)模型形成流向明確的界面交互可視化行為路徑圖。

第三，綜合前期形成的可視化信息結(jié)構(gòu)圖和交互行為路徑圖，運(yùn)用可視化信息結(jié)構(gòu)模型中的分組式結(jié)構(gòu)模型可設(shè)計(jì)形成完整的可視化界面原型圖?？梢暬缑嬖蛨D進(jìn)一步明確了界面中每一個(gè)頁(yè)面的功能布局與交互關(guān)系，將體現(xiàn)產(chǎn)品功能的信息以可視化的形式進(jìn)行呈現(xiàn)，便于用戶更好地認(rèn)識(shí)產(chǎn)品，了解產(chǎn)品的特性與操作流程，同時(shí)可視化原型圖也為后期的設(shè)計(jì)工作奠定良好的構(gòu)架基礎(chǔ)。

（二）基于用戶研究的界面信息可視化呈現(xiàn)

用戶對(duì)于界面的需求受動(dòng)機(jī)、背景、特征、情境、行為、目標(biāo)、習(xí)慣、期望等因素的影響，而一款界面產(chǎn)品的成功與否和用戶的接受度有著非常密切的關(guān)系。因此，用戶研究成為了界面設(shè)計(jì)不可或缺的重要環(huán)節(jié)，從用戶的性別與年齡（生理與心理年齡）、用戶的職業(yè)與受教育程度、用戶的信息技術(shù)使用水平、用戶使用的界面產(chǎn)品以及用戶對(duì)使用的產(chǎn)品的個(gè)人情感、用戶對(duì)新界面產(chǎn)品的敏感度與學(xué)習(xí)能力等方面得到的研究數(shù)據(jù)都是界面設(shè)計(jì)必須考慮的重要因素。綜上所述，用戶研究的重要性主要體現(xiàn)在能夠形成更加準(zhǔn)確的產(chǎn)品定位與核心功能確認(rèn)，因此，基于用戶研究的界面信息可視化呈現(xiàn)主要體現(xiàn)在以下兩方面：

第一，滿足用戶需求。在對(duì)目標(biāo)用戶進(jìn)行充分研究的基礎(chǔ)上，運(yùn)用適合的信息圖形進(jìn)行表現(xiàn)，這些信息圖形包括界面主體圖形、圖標(biāo)、圖表與符號(hào)，滿足用戶對(duì)于界面的識(shí)別需求和功能需求。通常來(lái)說(shuō)，界面主體圖形擔(dān)任著傳遞產(chǎn)品特性、塑造產(chǎn)品形象的重要功能，是用戶識(shí)別產(chǎn)品最直觀的形象信息，因此在設(shè)計(jì)上通常要充分考慮目標(biāo)用戶的喜好；其次，圖標(biāo)、圖表和符號(hào)的設(shè)計(jì)首先必須滿足其在界面的功能需求，例如圖標(biāo)的操控功能，圖表的統(tǒng)計(jì)功能，符號(hào)的導(dǎo)向功能等，然后再結(jié)合主體圖形的形式風(fēng)格進(jìn)行外觀設(shè)計(jì)，充分滿足目標(biāo)用戶的審美需求。

第二，強(qiáng)化用戶體驗(yàn)。體驗(yàn)是指用戶在滿足需求的基礎(chǔ)所獲得的各種感受的集合，主要分為視覺(jué)體驗(yàn)、使用體驗(yàn)與情感體驗(yàn)三個(gè)層次。因此，要使用戶獲得高滿意度的視覺(jué)體驗(yàn)，首先必須減少用戶的視覺(jué)負(fù)累，根據(jù)目標(biāo)用戶的色彩喜好營(yíng)造一種舒適的視覺(jué)氛圍，強(qiáng)化用戶對(duì)產(chǎn)品的心理印象；其次是功能強(qiáng)大、視效美觀的符合目標(biāo)用戶習(xí)慣的功能性圖標(biāo)是提升用戶使用體驗(yàn)的重要手段；最后，高滿意度的視覺(jué)與使用體驗(yàn)是提升用戶好感、形成優(yōu)質(zhì)的情感體驗(yàn)的重要因素，除此之外，針對(duì)目標(biāo)用戶的界面整體外觀形式與風(fēng)格的塑造也是賦予用戶良好的情感體驗(yàn)的重要方式。

（三）基于視覺(jué)設(shè)計(jì)的界面信息可視化呈現(xiàn)

視覺(jué)設(shè)計(jì)是界面設(shè)計(jì)在結(jié)構(gòu)與交互設(shè)計(jì)之后所進(jìn)行的關(guān)于界面外觀的美化設(shè)計(jì)，其目的是打造美觀舒適的界面環(huán)境，提升用戶的使用愉悅感，從而建立一個(gè)良好的產(chǎn)品印象。因此，基于視覺(jué)表現(xiàn)的界面信息可視化呈現(xiàn)須符合有用性、有效性、整體性、審美性四個(gè)要求，同時(shí)在既定的界面整體視覺(jué)形象風(fēng)格的支配下進(jìn)行，這主要表現(xiàn)在以下兩個(gè)方面：

第一，基于可視化界面原型圖的版面信息編排與表現(xiàn)。可視化原型圖是界面版面信息編排的核心，起著重要的支配作用，所有的信息圖形都需要在原型圖的支配下各就其位、各司其職，形成條理清晰的版面區(qū)塊和圖形序列，提升界面信息傳遞的有效性。

第二，各種信息可視化設(shè)計(jì)類型將為界面信息的可視化呈現(xiàn)提供最有力的幫助。信息可視化設(shè)計(jì)的類型主要分為空間類、流程類、統(tǒng)計(jì)類、分解類、關(guān)系類、組別類、故事類等7種信息圖類型，結(jié)合不同的界面類型與視覺(jué)表現(xiàn)需求，均可以運(yùn)用到界面信息的可視化呈現(xiàn)中。例如導(dǎo)航類APP界面所需要的空間類信息圖中的地圖和交通線路圖，健康管理類應(yīng)用程序所需要的流程類和統(tǒng)計(jì)類信息圖，等等。綜上所述，各類信息圖是基于視覺(jué)表現(xiàn)的界面信息可視化呈現(xiàn)的主要手段方式。

三、結(jié)語(yǔ)

結(jié)語(yǔ)：關(guān)于界面信息的可視化呈現(xiàn)的研究是將界面設(shè)計(jì)與信息可視化結(jié)合研究的新方向之一，本文立足于界面信息表達(dá)與傳遞的目標(biāo)，對(duì)界面信息的可視化呈現(xiàn)進(jìn)行細(xì)分式研究，期望能夠?yàn)榻缑嬖O(shè)計(jì)及相關(guān)設(shè)計(jì)應(yīng)用提供更加詳盡有用的理論與方法指導(dǎo)。但限于篇幅原因，無(wú)法對(duì)此問(wèn)題進(jìn)行更多的闡述，但該研究作為本項(xiàng)目的一個(gè)階段性成果，除了本身的理論與應(yīng)用價(jià)值，對(duì)于界面設(shè)計(jì)與信息可視化設(shè)計(jì)的教學(xué)實(shí)踐也有著非常重要的作用。此外，本文的成果將為本項(xiàng)目之后的研究奠定一個(gè)堅(jiān)實(shí)的基礎(chǔ)。同時(shí)，寄望能夠拋磚引玉，共同提升該領(lǐng)域研究的高度。

參考文獻(xiàn)：

[1] Manuel Lima（著）杜明翰 陳楚君（譯）. 視覺(jué)繁美——信息可視化方法與案例解析 [M]. 機(jī)械工業(yè)出版社. 2013.

[2] 張毅. 王立峰.孫蕾. 信息可視化設(shè)計(jì) [M]. 重慶大學(xué)出版社. 2017.

作者簡(jiǎn)介：

王立峰：男，1988年1月生，重慶人，重慶藝術(shù)工程職業(yè)學(xué)院視覺(jué)與傳媒教師，助教；重慶師范大學(xué)本科學(xué)士，研究方向：視覺(jué)傳達(dá)藝術(shù)設(shè)計(jì)與新媒體設(shè)計(jì)

張毅：女，1979年9月生，四川宜賓人，重慶藝術(shù)工程職業(yè)學(xué)院視覺(jué)與傳媒學(xué)院教師，視覺(jué)傳達(dá)設(shè)計(jì)教研室主任，講師；四川美術(shù)學(xué)院碩士研究生，研究方向：視覺(jué)傳達(dá)藝術(shù)設(shè)計(jì)與新媒體設(shè)計(jì)

項(xiàng)目來(lái)源：重慶市高等教育教學(xué)改革研究項(xiàng)目《數(shù)字媒體課程體系中的信息可視化應(yīng)用研究》，立項(xiàng)號(hào)：173325