網(wǎng)頁(yè)交互界面設(shè)計(jì)的信息可視化和情感化

徐慧

摘要：交互設(shè)計(jì)是了解目標(biāo)用戶對(duì)產(chǎn)品的期望，分析用戶對(duì)產(chǎn)品的使用行為，通過(guò)一種有效的方式使用戶和產(chǎn)品之間產(chǎn)生愉悅的溝通，這樣的交互行為會(huì)使用戶對(duì)產(chǎn)品產(chǎn)生信任和依賴，文章主要研究的是如何通過(guò)網(wǎng)頁(yè)界面的可視化和情感化表現(xiàn)，讓信息以一種有趣、人性化和情感化的方式展現(xiàn)出來(lái)，避免了網(wǎng)頁(yè)界面中交互設(shè)計(jì)建設(shè)在傳播當(dāng)中的隔閡與晦澀，使網(wǎng)頁(yè)信息的傳播更加容易接受和表達(dá)清楚。

關(guān)鍵詞：交互設(shè)計(jì)；網(wǎng)頁(yè)界面；行為；可視化；情感化

如今互聯(lián)網(wǎng)已經(jīng)成為現(xiàn)代人們獲取信息與交流的平臺(tái)，也是企業(yè)宣傳產(chǎn)品形象的重要途徑。大量的信息通過(guò)互聯(lián)網(wǎng)傳播著，如何使信息更加明確化，集中化，有條理化，傳播的更加快捷方便，儼然成為人們關(guān)注的主題。而網(wǎng)頁(yè)設(shè)計(jì)已擺脫了傳統(tǒng)的平面設(shè)計(jì)理念?！敖缑妗背１辉O(shè)計(jì)師認(rèn)為是交互設(shè)計(jì)的主要設(shè)計(jì)對(duì)象，而引起了設(shè)計(jì)界的廣泛重視。交互設(shè)計(jì)的出現(xiàn)，帶來(lái)了設(shè)計(jì)界對(duì)于什么是設(shè)計(jì)、如何設(shè)計(jì)等問(wèn)題的深入思考。

一、網(wǎng)頁(yè)交互界面信息可視化表現(xiàn)

（1）界面可視化的模塊。位置、外形、方向、色彩、紋理、灰度等級(jí)、尺寸、色相、亮度和飽和度，眾多的模塊組成不同的表現(xiàn)形式。但可視化模塊的種類的選取是很重要的，我們針對(duì)不同的信息形式與信息源都會(huì)選取不同的模塊形式以表現(xiàn)信息，使信息的傳達(dá)更精確，也更完美。

（2）圖案符號(hào)化。網(wǎng)頁(yè)信息可視化傳輸?shù)倪^(guò)程是通過(guò)各種不同的圖案符號(hào)來(lái)傳達(dá)的。圖形符號(hào)是直觀傳達(dá)表象的方式，他在用戶心智模型中主要通過(guò)隱喻或者符號(hào)化的方式作用于人的心理，比如隱喻方式，用戶對(duì)網(wǎng)頁(yè)界面中的前期心理建設(shè)使得用戶可以很快的對(duì)界面布局特征做相關(guān)的定位。而符號(hào)化的方式則是通過(guò)對(duì)符號(hào)的理解而產(chǎn)生，這樣的方式就為設(shè)計(jì)師提供了契機(jī)，設(shè)計(jì)師可以保持或者稍加修改讓用戶產(chǎn)生熟悉感。

（3）界面交互潛意識(shí)與認(rèn)知。據(jù)有關(guān)研究，人類認(rèn)識(shí)世界的方式中有60%是通過(guò)眼睛來(lái)完成的。不同的符號(hào)、圖形、色彩等都是通過(guò)視覺(jué)來(lái)完成的，而且不同的群體的認(rèn)識(shí)水平都不一樣。在這一方面還需要研究，這樣才能更好地將這些符號(hào)、圖形、色彩結(jié)合在一起，使信息的表達(dá)更有效。

二、網(wǎng)頁(yè)交互界面信息情感化

由于用戶的文化背景、審美能力、生活習(xí)慣等的不同，所以對(duì)網(wǎng)頁(yè)界面的設(shè)計(jì)要求也不盡相同，所以設(shè)定網(wǎng)站的目標(biāo)人群，從了解用戶的文化背景、心理需求著手，以便設(shè)計(jì)出的網(wǎng)頁(yè)界面能夠真正融入到用戶的生活和使用環(huán)境中。

《情感化設(shè)計(jì)》一書中唐納德·A·諾曼教授的論述，將情感化設(shè)計(jì)劃分為本能層次、行為層次、反思層次三個(gè)層次。本能層次是用戶對(duì)外界刺激通過(guò)自身的第一直覺(jué)做出判斷得出的反應(yīng)，來(lái)自于人的本能水平。行為層次重點(diǎn)在于：在互聯(lián)網(wǎng)時(shí)代眾多紛繁復(fù)雜的操作程序中，如何運(yùn)用簡(jiǎn)單有趣的設(shè)計(jì)構(gòu)思和語(yǔ)言為用戶設(shè)計(jì)出最方便易用的合理的結(jié)構(gòu)布局和清晰明了的操作導(dǎo)向，使用戶在操作過(guò)程中得到情感上的體驗(yàn)。反思層次是意識(shí)、思考、情感和認(rèn)知的最高水平。反思層次是用戶在接觸事物后由內(nèi)心產(chǎn)生的更深層次的感知、情感、文化背景、個(gè)人見(jiàn)解等種種交織在一起的造成的影響。

三、網(wǎng)頁(yè)交互界面設(shè)計(jì)中的情感化設(shè)計(jì)方式

（1）別出心裁的創(chuàng)意。創(chuàng)意是設(shè)計(jì)的靈魂?！霸O(shè)計(jì)的基本概念是‘人為了實(shí)現(xiàn)意圖的創(chuàng)造性活動(dòng)，它有兩個(gè)基本要素：一是人的目的性，二是活動(dòng)的創(chuàng)造性?！比藗冏畛踉O(shè)計(jì)出一些東西，往往只是為了方便自己的生活，注重實(shí)用性，但是日子一長(zhǎng)，人們往往會(huì)覺(jué)得這些用品變得枯燥乏味，于是開(kāi)始探尋一條新的設(shè)計(jì)之路，將感性的情感和抽象的創(chuàng)意思維融入設(shè)計(jì)中去，于是便有了與眾不同的設(shè)計(jì)理念。

（2）打動(dòng)人心的色彩。網(wǎng)頁(yè)界面中色彩要素的設(shè)計(jì)主要包含網(wǎng)頁(yè)的主色調(diào)、文字的顏色、圖片的色調(diào)等。用戶瀏覽網(wǎng)頁(yè)的時(shí)候，留下的第一印象就是網(wǎng)頁(yè)的色彩設(shè)計(jì)。好的設(shè)計(jì)能讓人眼前一亮，例如豆瓣社區(qū)的主色調(diào)是薄荷綠，logo上的“douban”是由肉粉、綠色和藍(lán)色構(gòu)成的，之后只要見(jiàn)到這種色彩搭配就能自然而然地聯(lián)想到豆瓣這個(gè)網(wǎng)站，這些顏色的搭配也很容易讓人聯(lián)想到初夏般小清新的感覺(jué)，與豆瓣社區(qū)的小清新風(fēng)格產(chǎn)生了共鳴，這也是網(wǎng)頁(yè)應(yīng)用界面中色彩的情感化設(shè)計(jì)反思層面的成功之處。字體顏色的設(shè)計(jì)一定要和網(wǎng)頁(yè)的風(fēng)格相吻合，而不是相互分離，甚至相互沖突。圖片可以聲情并茂的向用戶傳遞信息，加入圖片的網(wǎng)頁(yè)內(nèi)容會(huì)變得更加豐富。一般來(lái)說(shuō)，圖片的色調(diào)應(yīng)和整個(gè)界面的風(fēng)格相和諧，在圖片的選擇和編排的同時(shí)，應(yīng)避免太過(guò)復(fù)雜花哨，產(chǎn)生喧賓奪主的作用。

（3）合理統(tǒng)一的布局。網(wǎng)頁(yè)界面的布局是指在一個(gè)有限的網(wǎng)頁(yè)應(yīng)用界面上，將圖形、文字、色彩等多種元素進(jìn)行有機(jī)地組合、合理的編排，構(gòu)成整個(gè)畫面的和諧統(tǒng)一，均衡調(diào)和。以人為本的情感化設(shè)計(jì)也正是網(wǎng)頁(yè)界面布局中應(yīng)重視的內(nèi)容，合理的布局，以易操作性為主導(dǎo)思想，使用戶在使用過(guò)程中覺(jué)得便捷、高效，并能產(chǎn)生情感依賴。

（4）方便易用的功能。設(shè)計(jì)的最初目的是使生產(chǎn)生活工具變得簡(jiǎn)便易用，所以在網(wǎng)頁(yè)應(yīng)用界面的設(shè)計(jì)中，設(shè)計(jì)師應(yīng)以易操作性為設(shè)計(jì)的前提，方便易用的功能能幫助用戶更快地接受這個(gè)應(yīng)用，更好地進(jìn)行操作。

（5）和諧統(tǒng)一的交互。如何讓網(wǎng)頁(yè)易用、有效、并且可以讓人產(chǎn)生愉悅心情、完成用戶的需求和情感表達(dá)，是檢驗(yàn)網(wǎng)頁(yè)交互界面設(shè)計(jì)是否成功的一項(xiàng)重要環(huán)節(jié)。

綜上，網(wǎng)頁(yè)交互界面設(shè)計(jì)是一個(gè)綜合性的設(shè)計(jì)，在滿足基本的功能性的同時(shí)也逐漸向情感化設(shè)計(jì)層面轉(zhuǎn)型。網(wǎng)頁(yè)的交互功能能夠提高用戶傳播信息的積極性。通過(guò)網(wǎng)頁(yè)信息的可視化布局和情感化設(shè)計(jì)，網(wǎng)站獲得了點(diǎn)擊率和口碑，用戶獲得了更多的資訊和樂(lè)趣，這將是雙方受益的虛擬大家庭。

（作者單位：內(nèi)江職業(yè)技術(shù)學(xué)院）