交互界面設(shè)計(jì)方法淺析

劉文華

（南京藝術(shù)學(xué)院工業(yè)設(shè)計(jì)學(xué)院，江蘇 南京 210013）

交互界面設(shè)計(jì)方法淺析

劉文華

（南京藝術(shù)學(xué)院工業(yè)設(shè)計(jì)學(xué)院，江蘇 南京 210013）

大數(shù)據(jù)信息時(shí)代的到來使電子設(shè)備大量融入人們的生活當(dāng)中，而對(duì)電子設(shè)備的軟件界面設(shè)計(jì)水平并沒有跟上其增長的速度，水平參差不齊，并且出現(xiàn)同質(zhì)化等問題。文章通過對(duì)交互界面現(xiàn)存問題歸納總結(jié)出三大類，并分別根據(jù)筆者經(jīng)驗(yàn)提出參考方法。

交互界面設(shè)計(jì)；視覺設(shè)計(jì)；方法

人類社會(huì)由大工業(yè)社會(huì)向信息社會(huì)發(fā)展已成為必然，交互設(shè)計(jì)正是在此大背景下逐步發(fā)展并走向成熟。人們對(duì)交互設(shè)計(jì)相對(duì)陌生，但其設(shè)計(jì)產(chǎn)品已和我們的日常生活密不可分，例如現(xiàn)代人每天都要打交道的Windows操作系統(tǒng)的交互界面設(shè)計(jì)、神通廣大的手機(jī)APP應(yīng)用設(shè)計(jì)、銀行取款機(jī)的交互設(shè)計(jì)等。

視覺界面設(shè)計(jì)需要設(shè)計(jì)師掌握基本的視覺要素的運(yùn)用，并且必須了解如何運(yùn)用這些要素來有效地傳遞行為和信息，創(chuàng)建來自于情感和內(nèi)心的反應(yīng)。雖然在視覺表達(dá)上總存在有設(shè)計(jì)師的個(gè)人主觀成分，但在產(chǎn)品視覺界面設(shè)計(jì)中還是應(yīng)將設(shè)計(jì)師的個(gè)人愛好降低到最小化，一切以良好的用戶體驗(yàn)和為企業(yè)創(chuàng)造效益為主要目標(biāo)。

視覺界面設(shè)計(jì)具體體現(xiàn)在三個(gè)主要方面，即界面的層次與邏輯關(guān)系、版式與網(wǎng)格以及顏色和文字。

一、邏輯關(guān)系與層次

從界面設(shè)計(jì)角度，在設(shè)計(jì)過程中，要理解產(chǎn)品需要向用戶傳達(dá)什么，也要明白用戶認(rèn)為產(chǎn)品應(yīng)該傳達(dá)什么，這是交互設(shè)計(jì)中的兩個(gè)最關(guān)鍵問題。這就需要產(chǎn)品的程序要有邏輯性讓用戶清晰地了解以上兩個(gè)問題，而這種邏輯性正是通過視覺界面來表現(xiàn)出來的，使產(chǎn)品具有邏輯性能讓用戶感受到清晰且友好的體驗(yàn)。而使產(chǎn)品具備邏輯性就需要產(chǎn)品有明確的視覺層次關(guān)系，運(yùn)用科學(xué)的視覺規(guī)律將元素分組是達(dá)到清晰的視覺層次結(jié)構(gòu)的好方法。

首先，要確定的是產(chǎn)品的定位是什么，及產(chǎn)品是為用戶提供什么服務(wù)的，這就決定了這類產(chǎn)品的主視覺是什么類型的，例如，若產(chǎn)品是一款為兒童設(shè)計(jì)的游戲，那么整個(gè)界面就可以多一些色彩以及較卡通的文字等元素。但兒童類游戲風(fēng)格相較活潑并不意味著雜亂無章，要進(jìn)行合理的視覺元素的分組，使得產(chǎn)品富有邏輯性。在分組中，要將功能類似的按鍵分為一組，并且在用戶行為上連續(xù)在一起的按鍵盡量擺放的位置相近，以免造成用戶多余的行為動(dòng)作。

二、版式與網(wǎng)格

交互界面中網(wǎng)格的建立就好比一棟建筑在建造前期需要搭建的鋼筋結(jié)構(gòu)一樣，網(wǎng)格的設(shè)置直接影響著網(wǎng)頁的版式，一個(gè)合理的網(wǎng)格能夠清晰、準(zhǔn)確的表達(dá)網(wǎng)頁中的信息。

網(wǎng)格的建立不但在平面設(shè)計(jì)上還在交互界面設(shè)計(jì)上都為設(shè)計(jì)師在排版中提供很大的便利，并且在完成一款交互產(chǎn)品時(shí)會(huì)涉及到對(duì)多個(gè)界面進(jìn)行統(tǒng)一設(shè)計(jì)，這時(shí)網(wǎng)格就起著大大提高效率的并賦予用戶良好體驗(yàn)的作用，所以網(wǎng)格已經(jīng)成為設(shè)計(jì)師在編排界面時(shí)最重要的工具。

三、顏色和文字

顏色的屬性很大程度上影響著界面的主視覺，明快的色彩給人以活潑的感覺，也有較強(qiáng)的顏色傾向，對(duì)于使用用戶是普遍大眾的界面，就不太適合使用色彩傾向較明確的顏色，若用戶群體相對(duì)較明確，可以針對(duì)用戶群體來設(shè)定顏色的傾向。

在界面設(shè)計(jì)中色彩氛圍對(duì)用戶的感受、行為起很大的影響作用，色彩氛圍指的是由多個(gè)色彩營造出的一種氛圍，多個(gè)色彩共同組成的整體色彩氛圍給人以特別感受，一般在一個(gè)界面中，需要有一個(gè)主要的基本色彩。通常情況下，一個(gè)頁面中面積較大色彩的數(shù)量不易過多，避免干擾用戶對(duì)功能上的理解及使用。

字體作為傳播信息和文化的重要載體，在選擇頁面中起著關(guān)鍵性作用，當(dāng)文字以段落的形式出現(xiàn)時(shí)，它在視覺上所呈現(xiàn)出來的是一個(gè)灰色的色塊，仔細(xì)發(fā)現(xiàn)，色塊中黑色的是文字，白色的是文字間以及文字里的白色空隙，當(dāng)黑色與白色區(qū)域在灰色色塊中呈現(xiàn)均勻分布時(shí)，視覺上會(huì)呈現(xiàn)一種平衡感和穩(wěn)定感，人們?cè)陂喿x文字時(shí)會(huì)感到舒適。當(dāng)前網(wǎng)頁中多數(shù)使用微軟雅黑等無襯線字體，該字體使白色區(qū)域更加均勻，看起來更加規(guī)整。

總之，用戶界面設(shè)計(jì)中涉及到的視覺問題基本涵蓋在以上這三個(gè)方面，界面的視覺設(shè)計(jì)是在界面交互設(shè)計(jì)的基礎(chǔ)上進(jìn)行的，是在美學(xué)、符號(hào)學(xué)以及格式塔心理學(xué)的宏觀引導(dǎo)下，通過一定的視覺設(shè)計(jì)方法與原則對(duì)界面具體的視覺要素與內(nèi)容進(jìn)行設(shè)計(jì)的過程。與此同時(shí)，視覺設(shè)計(jì)活動(dòng)還受到用戶目標(biāo)的影響。

界面設(shè)計(jì)涉及到實(shí)用美學(xué)的理論。用戶對(duì)應(yīng)用界面美的體驗(yàn)是全方位和多維度的，正如約翰·杜威(John Dewey)將審美經(jīng)驗(yàn)視作一種整體性、完整性和豐富性的體驗(yàn)過程。要真正做到合理有效的交互界面設(shè)計(jì)需要交互界面設(shè)計(jì)師有著對(duì)“美”的敏銳的感受力、觀察力以及豐富的交互設(shè)計(jì)知識(shí)、用戶體驗(yàn)知識(shí)，時(shí)刻以帶給用戶良好的體驗(yàn)為出發(fā)點(diǎn)進(jìn)行設(shè)計(jì)。

[1]羅仕鑒,朱上上,孫守遷.人機(jī)界面設(shè)計(jì)[M].北京:機(jī)械工業(yè)出版社, 2002.

[2]唐榮錫,汪嘉業(yè),彭群生,汪國昭.計(jì)算機(jī)圖形學(xué)教程[M].北京:科學(xué)出版社,2005.

[3]梁景紅.個(gè)性化網(wǎng)頁設(shè)計(jì)與鑒賞[M].西安:西安電子科技大學(xué)出版社,2003.

[4]王堅(jiān),董士海,戴國忠.人機(jī)交互和多通道用戶界面[M].北京:科學(xué)出版社,1999.

[5]張海藩.軟件工程導(dǎo)輪[M].北京:清華大學(xué)出版社,2003.

TP391.9

A

1005-5312（2015）08-0077-01