人機(jī)交互界面中的視覺(jué)化設(shè)計(jì)要素分析

李佳蔚　傅瀟　彭贇

摘 要：人機(jī)交互界面主要通過(guò)視覺(jué)化設(shè)計(jì)向用戶傳遞各種交互信息。本文分析了與人機(jī)交互界面視覺(jué)化設(shè)計(jì)工作相關(guān)的文字、圖像、色彩和動(dòng)態(tài)效果四個(gè)設(shè)計(jì)要素基本理論，為人機(jī)交互界面視覺(jué)化設(shè)計(jì)奠定理論基礎(chǔ)。

關(guān)鍵詞：人機(jī)交互；人機(jī)交互界面；視覺(jué)化設(shè)計(jì)；視覺(jué)化設(shè)計(jì)要素

人機(jī)交互界面主要通過(guò)視覺(jué)化設(shè)計(jì)向用戶傳遞各種交互信息。文字、圖像、色彩和動(dòng)態(tài)效果是構(gòu)成人機(jī)交互界面視覺(jué)化設(shè)計(jì)中最重要的基本構(gòu)成元素，這也就決定了視覺(jué)傳達(dá)設(shè)計(jì)的主要功能就是通過(guò)這四個(gè)要素，把設(shè)計(jì)者想要表達(dá)的東西傳遞給每一個(gè)接收到這個(gè)信息的接受者，以及由這些基本元素所表現(xiàn)的交互界面整體布局和風(fēng)格屬性，展示給用戶一個(gè)完整的交互界面視覺(jué)感官形象，它的主要功能就是起到傳播的作用。

1 文字元素

文字本身就是簡(jiǎn)單的視覺(jué)圖案再現(xiàn)，在視覺(jué)傳達(dá)中具有其他設(shè)計(jì)元素和設(shè)計(jì)方式所不能替代的設(shè)計(jì)效果，閱讀文字不但能獲取文字本身所傳遞的信息，也能通過(guò)文字的“相貌”感受文字內(nèi)容所帶來(lái)的意境?，F(xiàn)代的計(jì)算機(jī)文本信息量占據(jù)很大，其構(gòu)成方式一般直接使用間接文字表達(dá)。

文字作為人類用來(lái)記錄語(yǔ)言的符號(hào)系統(tǒng)，特點(diǎn)有：（1）以文字描述對(duì)象，不易產(chǎn)生信息表達(dá)歧義，能夠準(zhǔn)確清晰的傳遞信息。（2）文本類信息傳輸速度比較快，對(duì)硬件和網(wǎng)絡(luò)質(zhì)量要求比較低。是信息傳遞最直接也最準(zhǔn)確、詳細(xì)的方式，更是互聯(lián)網(wǎng)信息最主要的載體，所以文字在交互界面視覺(jué)化設(shè)計(jì)中占有很重要的位置。平面設(shè)計(jì)中文字往往也被視為一種圖形元素，用作版式的編排，區(qū)域的劃分，甚至布局構(gòu)成的調(diào)整，優(yōu)秀的文字設(shè)計(jì)能讓人過(guò)目不忘，除了傳遞信息，告知內(nèi)容外，還能提高軟件訴求，增強(qiáng)軟件交互界面視覺(jué)化效果，達(dá)到視覺(jué)審美的目的。是設(shè)計(jì)者在軟件交互界面視覺(jué)化設(shè)計(jì)中應(yīng)該最應(yīng)關(guān)注的問(wèn)題。

2 圖像元素

圖像是人對(duì)視覺(jué)感知的物質(zhì)再現(xiàn)，由照相機(jī)、鏡子等光學(xué)設(shè)備獲取，也可以人為通過(guò)手工繪畫創(chuàng)作。在人機(jī)交互界面中出現(xiàn)的圖像以數(shù)字形式儲(chǔ)存，通過(guò)數(shù)字采集技術(shù)和信號(hào)處理，由一些排列的像素組成并保存。圖像在人機(jī)交互界面中具有重要作用，避免了全文字界面的枯燥，甚至給人的視覺(jué)第一印象更優(yōu)于文字，是一種直觀的表現(xiàn)形式，具有靈活和富有創(chuàng)造力等特點(diǎn)。圖像分為靜態(tài)圖像和動(dòng)態(tài)圖像，靜態(tài)圖片如照片、圖片、繪畫作品等，動(dòng)態(tài)圖像如Gif動(dòng)畫、Flash動(dòng)畫、3D動(dòng)畫以及影片等。

（1）靜態(tài)圖像： 在人機(jī)交互界面中占主導(dǎo)地位，多用于按鈕、廣告、縮略圖和詳細(xì)信息細(xì)節(jié)說(shuō)明等。通常采用JPEG、PNG、GIF等格式。1）JPEG格式（Joint Photographic Exerts Group聯(lián)合圖片專家組），可以用不同的壓縮比例進(jìn)行壓縮，對(duì)圖片質(zhì)量影響不大，因此可以用最少的磁盤空間得到較好的圖像質(zhì)量，幾乎所有的手機(jī)系統(tǒng)都支持。2）PNG格式（Portable Network Graphics便攜式網(wǎng)絡(luò)圖片），是一種位圖文件（bitmap file）存儲(chǔ)格式，壓縮比高、生成文件容量小時(shí)它的優(yōu)點(diǎn)，這個(gè)特性很適合于在手機(jī)通信過(guò)程中生成和顯示圖像。3）GIF格式（Graphics Inter Change format圖形交換格式），在Internet上被廣泛應(yīng)用，文件較小，適合現(xiàn)今手機(jī)網(wǎng)絡(luò)環(huán)境傳輸和使用。

（2）動(dòng)態(tài)圖像：動(dòng)態(tài)圖像通常用于特效表現(xiàn)。在手機(jī)購(gòu)物軟件中，按鈕效果、動(dòng)畫裝飾效果、商品操作展示等都要用到動(dòng)態(tài)圖像，大致可分為Gif動(dòng)畫、Flash動(dòng)畫、3D動(dòng)畫以及影片。1）GIF動(dòng)畫，也叫動(dòng)畫圖片，通過(guò)對(duì)多個(gè)圖層的圖片，按時(shí)間長(zhǎng)短連續(xù)切換顯示，以達(dá)到動(dòng)畫的效果，圖片格式小，易于手機(jī)網(wǎng)絡(luò)環(huán)境使用，但制作的動(dòng)態(tài)效果也相對(duì)較簡(jiǎn)單。2）Flash動(dòng)畫，較Gif動(dòng)畫表現(xiàn)層次更為豐富，也是網(wǎng)絡(luò)上動(dòng)畫常見(jiàn)的表現(xiàn)形式，并且具有音效畫面結(jié)合表現(xiàn)的特點(diǎn)，在音畫作品中被廣泛使用。3）3D動(dòng)畫，使通過(guò)3Dmax等三維軟件制作的動(dòng)態(tài)圖片，又稱為三維動(dòng)畫，則更為專業(yè)，但由于文件很大，在手機(jī)購(gòu)物軟件中使用頻率較前兩種少很多。

3 色彩元素

色彩本身便是大自然的產(chǎn)物，從人類起源開(kāi)始人們就學(xué)著和大自然中的色彩打交道，無(wú)論是工作、學(xué)習(xí)還是生活，都累積了無(wú)數(shù)色彩常識(shí)。人們借助大自然的力量創(chuàng)造豐富多彩的物質(zhì)世界，美好的一切都被我們的眼睛所感知。對(duì)色彩元素的相關(guān)理論研究，也是設(shè)計(jì)者進(jìn)行交互界面視覺(jué)化設(shè)計(jì)最重視的。

（1）色彩的屬性。色彩被人們賦予了色相、明度、純度三屬性，色相指色彩的不同相貌，就像人的臉一樣，我們通過(guò)色彩的相貌來(lái)識(shí)別色彩；明度指色彩的明暗程度，根據(jù)色彩的明暗來(lái)調(diào)整色感的強(qiáng)弱；彩度則指色彩的鮮艷程度，彩度越高顏色就越鮮艷搶眼。在視覺(jué)傳達(dá)中，往往通過(guò)這些屬性來(lái)辨別色調(diào)、了解色彩所表達(dá)的情感。

（2）色彩的心理效應(yīng)。色彩的心理效應(yīng)來(lái)自色彩的物理光刺激對(duì)人的生理發(fā)生的直接影響，也就是人的第一視覺(jué)感覺(jué)。任何物體都有特定的色彩構(gòu)成，不同的色彩產(chǎn)生不同的視覺(jué)感受，這些視覺(jué)感受就算沒(méi)有身體接觸到，也能讓人產(chǎn)生不同的感官聯(lián)想，這也叫做“視觸覺(jué)”。1）直接心理效應(yīng)。生活中，藍(lán)色的天空、白色的云朵、綠色的植物、金色的太陽(yáng)……都給人們留下了深刻的色彩形象，這是最原始的心理效應(yīng)。人們從這些影響中總結(jié)出藍(lán)色表示廣闊、深遠(yuǎn)、透明；白色表示明亮、干凈、純潔；綠色表示生命、春天、成長(zhǎng)、希望；金色表示光明、溫暖、華麗……而這些直接心理效應(yīng)不會(huì)因?yàn)榈赜?、?guó)度、文化的不同而發(fā)生變化，反而影響范圍很廣，容易讓人產(chǎn)生共鳴。2）間接心理效應(yīng)。色彩往往不是單一出現(xiàn)在人們的視線中，它們會(huì)聚集在一起產(chǎn)生色彩混合和視錯(cuò)覺(jué)。心理學(xué)家從眾多實(shí)驗(yàn)中發(fā)現(xiàn)，色彩在色相、明度、純度變化的不同情況下產(chǎn)生綜合反映，對(duì)人的心理效應(yīng)也有所不同。例如，在色彩鮮艷、對(duì)比強(qiáng)烈的色彩環(huán)境中，人的脈搏會(huì)加快，情緒會(huì)變得興奮；相反，在色彩對(duì)比弱、色調(diào)平和的色彩環(huán)境中，人的脈搏會(huì)減緩，情緒會(huì)變得平靜。這些色彩所產(chǎn)生的間接心理效應(yīng)更多地被設(shè)計(jì)師所應(yīng)用到不同領(lǐng)域的設(shè)計(jì)中。

4 動(dòng)態(tài)效果

在用戶體驗(yàn)過(guò)程中，人機(jī)交互界面的動(dòng)態(tài)效果要解決以下兩個(gè)最基本的問(wèn)題：一是動(dòng)態(tài)的信息可控制性，用戶可以隨意的控制流動(dòng)的信息。二是相應(yīng)和運(yùn)行的時(shí)間不能超過(guò)用戶的心理期待。動(dòng)態(tài)效果表達(dá)沒(méi)能大規(guī)模使用的原因是動(dòng)態(tài)信息會(huì)在界面上產(chǎn)生強(qiáng)烈的“視覺(jué)刺激效應(yīng)”，產(chǎn)生突出的視覺(jué)焦點(diǎn)，虛化其他信息；過(guò)多的動(dòng)態(tài)效果會(huì)造成界面信息混亂無(wú)序，容易形成視覺(jué)疲勞，導(dǎo)致消費(fèi)者注意力不集中，信息獲取混亂和操作錯(cuò)誤率上升等問(wèn)題。

5 小結(jié)

本文主要分析了與人機(jī)交互界面視覺(jué)化設(shè)計(jì)工作相關(guān)的設(shè)計(jì)要素基本理論，分別分析文字、圖像、色彩和動(dòng)態(tài)效果理論，為人機(jī)交互界面視覺(jué)化設(shè)計(jì)奠定理論基礎(chǔ)。

參考文獻(xiàn)：

[1] 李四達(dá).交互設(shè)計(jì)概論[M].北京：清華大學(xué)出版社，2009.

[2] Ben Shneiderman（美）.用戶界面設(shè)計(jì)——有效的人機(jī)交互策略[M].張國(guó)印，等，譯.北京：電子工業(yè)出版社，2008.

[3] 方學(xué)兵.人機(jī)界面信息視覺(jué)化設(shè)計(jì)研究[D].合肥工業(yè)大學(xué)學(xué)位論文，2010.

[4] Alan Cooper（美）.交互設(shè)計(jì)之路——讓高科技產(chǎn)品回歸人性（第二版）[M].Chris Ding，等，譯.北京：電子工業(yè)出版社，2005.