人機交互界面中的視覺化設計要素分析

李佳蔚　傅瀟　彭贇

摘 要：人機交互界面主要通過視覺化設計向用戶傳遞各種交互信息。本文分析了與人機交互界面視覺化設計工作相關的文字、圖像、色彩和動態效果四個設計要素基本理論，為人機交互界面視覺化設計奠定理論基礎。

關鍵詞：人機交互；人機交互界面；視覺化設計；視覺化設計要素

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

1 文字元素

文字本身就是簡單的視覺圖案再現，在視覺傳達中具有其他設計元素和設計方式所不能替代的設計效果，閱讀文字不但能獲取文字本身所傳遞的信息，也能通過文字的“相貌”感受文字內容所帶來的意境。現代的計算機文本信息量占據很大，其構成方式一般直接使用間接文字表達。

文字作為人類用來記錄語言的符號系統，特點有：（1）以文字描述對象，不易產生信息表達歧義，能夠準確清晰的傳遞信息。（2）文本類信息傳輸速度比較快，對硬件和網絡質量要求比較低。是信息傳遞最直接也最準確、詳細的方式，更是互聯網信息最主要的載體，所以文字在交互界面視覺化設計中占有很重要的位置。平面設計中文字往往也被視為一種圖形元素，用作版式的編排，區域的劃分，甚至布局構成的調整，優秀的文字設計能讓人過目不忘，除了傳遞信息，告知內容外，還能提高軟件訴求，增強軟件交互界面視覺化效果，達到視覺審美的目的。是設計者在軟件交互界面視覺化設計中應該最應關注的問題。

2 圖像元素

圖像是人對視覺感知的物質再現，由照相機、鏡子等光學設備獲取，也可以人為通過手工繪畫創作。在人機交互界面中出現的圖像以數字形式儲存，通過數字采集技術和信號處理，由一些排列的像素組成并保存。圖像在人機交互界面中具有重要作用，避免了全文字界面的枯燥，甚至給人的視覺第一印象更優于文字，是一種直觀的表現形式，具有靈活和富有創造力等特點。圖像分為靜態圖像和動態圖像，靜態圖片如照片、圖片、繪畫作品等，動態圖像如Gif動畫、Flash動畫、3D動畫以及影片等。

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

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

3 色彩元素

色彩本身便是大自然的產物，從人類起源開始人們就學著和大自然中的色彩打交道，無論是工作、學習還是生活，都累積了無數色彩常識。人們借助大自然的力量創造豐富多彩的物質世界，美好的一切都被我們的眼睛所感知。對色彩元素的相關理論研究，也是設計者進行交互界面視覺化設計最重視的。

（1）色彩的屬性。色彩被人們賦予了色相、明度、純度三屬性，色相指色彩的不同相貌，就像人的臉一樣，我們通過色彩的相貌來識別色彩；明度指色彩的明暗程度，根據色彩的明暗來調整色感的強弱；彩度則指色彩的鮮艷程度，彩度越高顏色就越鮮艷搶眼。在視覺傳達中，往往通過這些屬性來辨別色調、了解色彩所表達的情感。

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

4 動態效果

在用戶體驗過程中，人機交互界面的動態效果要解決以下兩個最基本的問題：一是動態的信息可控制性，用戶可以隨意的控制流動的信息。二是相應和運行的時間不能超過用戶的心理期待。動態效果表達沒能大規模使用的原因是動態信息會在界面上產生強烈的“視覺刺激效應”，產生突出的視覺焦點，虛化其他信息；過多的動態效果會造成界面信息混亂無序，容易形成視覺疲勞，導致消費者注意力不集中，信息獲取混亂和操作錯誤率上升等問題。

5 小結

本文主要分析了與人機交互界面視覺化設計工作相關的設計要素基本理論，分別分析文字、圖像、色彩和動態效果理論，為人機交互界面視覺化設計奠定理論基礎。

參考文獻：

[1] 李四達.交互設計概論[M].北京：清華大學出版社，2009.

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

[3] 方學兵.人機界面信息視覺化設計研究[D].合肥工業大學學位論文，2010.

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