淺析視覺界面設(shè)計(jì)原理

聶 伊 張敏言

（西安工程大學(xué)，陜西 西安 710048）

交互產(chǎn)品將行為和用戶聯(lián)系在一起發(fā)生在視覺上，通常是通過產(chǎn)品界面的表現(xiàn)來實(shí)現(xiàn)的。視覺界面設(shè)計(jì)者工作的重點(diǎn)在于設(shè)計(jì)在組織上的運(yùn)用，以及如何來利用視覺暗示和啟示將行為信息傳達(dá)給用戶。設(shè)計(jì)師必須掌握交互設(shè)計(jì)原則和界面習(xí)慣用法的基本知識(shí)，這些對(duì)于塑造產(chǎn)品的行為都很重要[1]。

1 設(shè)計(jì)視覺界面設(shè)計(jì)的要素

視覺界面設(shè)計(jì)可以對(duì)產(chǎn)品的吸引力和效力產(chǎn)生很大的影響。要?jiǎng)?chuàng)造出有效且吸引人的用戶界面，設(shè)計(jì)師必須掌握一些基本的視覺要素，如顏色、版面、形式和構(gòu)成，還必須了解如何運(yùn)用這些要素來有效地傳遞行為和信息。

1.1 文本

文本在任何用戶界面中都是及其重要的一個(gè)組成部分，文字可以傳遞大量細(xì)微信息，但是我們必須要小心仔細(xì)才能夠正確恰當(dāng)?shù)厥褂煤梦淖帧?/p>

人們主要通過文字的形狀來辨識(shí)文字，形狀差異越顯著，文字也就越容易辨識(shí)。在報(bào)紙、雜志等印刷品中，正文字體主要采用宋體。宋體是有襯線字體，特點(diǎn)是橫細(xì)豎粗，棱角分明。與之相對(duì)，顯示器上的字體一般都是黑體。黑體基本上沒有橫豎粗細(xì)的變化，也沒有襯線裝飾。與印刷品相比，顯示器的分辨率要低得多，如果在這種輸出媒介上使用宋體的話，文字的襯線反而會(huì)妨礙閱讀。不但沒有棱角分明的美感，還很容易導(dǎo)致眼睛疲勞。也就是說，顯示器的分辨率低，不足以顯示有襯線字體。因此顯示器上的字體一般都采用毛邊較少的黑體[2]。

辨識(shí)文字和閱讀文字有所不同，閱讀中我們有意識(shí)地掃描個(gè)別字詞，之后按照上下文來理解它們的含義。界面應(yīng)該盡量少用文本，從而減少閱讀量，這樣才能保證幾面導(dǎo)航的順利進(jìn)行。我們應(yīng)該避免只依賴文字進(jìn)行講解，因?yàn)殚喿x文字速度很慢，而且會(huì)破壞用戶對(duì)應(yīng)用的浸入式體驗(yàn)。使用太多的文字是一種“說而不秀”的方法，這與移動(dòng)應(yīng)用的優(yōu)勢(shì)相違背[1]。少用文字原則并不意味著用文字是錯(cuò)的，或者說文字總是越少越好。它指的是在你想吸引用戶進(jìn)一步體驗(yàn)的時(shí)候，應(yīng)該首先考慮減少文字，增加交互。

1.2 顏色

顏色作為界面視覺語(yǔ)言的一部分，向用戶傳達(dá)信息。對(duì)于多數(shù)應(yīng)用程序，顏色的使用要吝惜，并且應(yīng)該與視覺語(yǔ)言的其他元素結(jié)合，如符號(hào)、圖標(biāo)、文本，以及在界面上維持的控件關(guān)系。

當(dāng)顏色太多時(shí)，我們的大腦不得不花費(fèi)額外的時(shí)間記住每種顏色的意義，這樣便降低了我們的處理速度?；パa(bǔ)色在顏色處理中是指那些相反的顏色，當(dāng)這些顏色被高飽和并且放置在一起時(shí)，就會(huì)制造出視覺假象。并且非常難以正確辨別，也非常難以讓人聚精會(huì)神。高飽和的顏色看起來會(huì)顯得鮮艷，從而吸引過多的注意力。在較小的地方適當(dāng)?shù)剡\(yùn)用飽和始終的顏色可以有效地吸引用戶的注意力，但這種用法應(yīng)該保守使用。如果圖形顏色與背景顏色只是顏色不同，而在飽和度和亮度上沒有差別，則很難辨認(rèn)。圖形和背景除了色調(diào)不同外，飽和度和亮度也應(yīng)有區(qū)別。

1.3 圖標(biāo)

圖標(biāo)最大的特點(diǎn)就是可以通過使用不同顏色和形狀的圖像來幫助用戶直觀地了解信息的種類和操作內(nèi)容。與單純的文字界面相比，圖標(biāo)的另一個(gè)特點(diǎn)是可以使界面的整體效果張弛有度。

軟件中的圖標(biāo)有兩大用途：一是作為信息傳遞的標(biāo)志；二是作為指導(dǎo)用戶操作的控件。但是，圖形界面也存在缺點(diǎn)，只使用圖標(biāo)很難傳遞準(zhǔn)確的信息。即便是人們經(jīng)常使用的軟件的工具欄，其中有些圖標(biāo)按鈕也會(huì)使用戶感到困惑。而且，如果消息框中只使用圖標(biāo)也無法傳遞詳細(xì)的信息。因此，一般情況下，圖標(biāo)還需要文字信息的輔助。

2 設(shè)計(jì)視覺界面設(shè)計(jì)的原則

設(shè)計(jì)師需要關(guān)注如何用界面的視覺結(jié)構(gòu)匹配用戶的心理模型或者產(chǎn)品的行為，也必須關(guān)注如何將程序的狀態(tài)傳達(dá)給用戶（如文檔的編輯狀態(tài)），還要關(guān)注圍繞著用戶感知功能方面（布局、視覺層次及圖形背景問題等）的認(rèn)知性問題。

2.1 運(yùn)用視覺屬性將元素分組，創(chuàng)造出清晰的層次結(jié)構(gòu)

比如顏色、形狀和位置來區(qū)分層次結(jié)構(gòu)中的每個(gè)層次。最為重要的元素應(yīng)放在其他元素的上方或者向外突出一些。需要突出的元素最好用飽和顏色來渲染，次重要的元素用欠飽和顏色渲染。與背景的顏色及其值的對(duì)比也不要太強(qiáng)烈，尺寸要小一些或者向內(nèi)縮進(jìn)。不飽和及中性顏色則可以用在不重要的元素上。

2.2 圖像的運(yùn)用要適當(dāng)緊湊、一致，并且要適當(dāng)考慮使用環(huán)境

視覺元素也應(yīng)該是緊湊而通用的視覺語(yǔ)言的一部分，這意味著相似的元素應(yīng)該采用相同的視覺屬性，在一致的位置擺放信息和控件。不同頁(yè)面上提供的相同功能的控件和數(shù)據(jù)顯示應(yīng)該擺放在每一頁(yè)上的相同的位置，而且他們還應(yīng)該有相同的顏色、字體和陰影等。這樣的一致性能讓用戶很快地找到和識(shí)別它們。除了具備功能價(jià)值，圖標(biāo)在傳遞品牌屬性上還有重要的作用。無論采用什么樣的風(fēng)格，風(fēng)格都必須一致。

2.3 避免視覺噪聲和混亂

界面上的視覺噪聲一般是由過多的視覺元素造成的，這些多余的視覺元素將人們的注意力從那些直接傳達(dá)功能和行為主要對(duì)象上轉(zhuǎn)移到他處。這些視覺噪聲包括過分的裝飾、不必要元素、過度使用標(biāo)尺、視覺上厚重的用于隔離控件的元素或者過分的使用視覺屬性（包括顏色、紋理和對(duì)比）等?；靵y的界面試圖在一個(gè)有限的空間中提供過多的功能，結(jié)果會(huì)導(dǎo)致這些空間在視覺上相互干擾。視覺上過分裝飾、混亂或者過多的屏幕都會(huì)加重用戶的認(rèn)知負(fù)荷，產(chǎn)生信息焦慮的情緒，這將影響用戶的速度、理解能力和任務(wù)的完成。

2.4 保持簡(jiǎn)單，使用最小的視覺風(fēng)格

一般來說，界面應(yīng)該使用簡(jiǎn)單的幾何形狀和最小的輪廓。如果一個(gè)程序長(zhǎng)時(shí)間占據(jù)使用者的注意力，應(yīng)該考慮弱化視覺表現(xiàn)上的顏色和紋理。顏色的數(shù)量要嚴(yán)格限制，并且應(yīng)該以較為不飽和的顏色或者中性顏色為主，可以適當(dāng)加入一些高對(duì)比作為強(qiáng)調(diào)重要信息的顏色，那樣會(huì)讓控制組織得更緊湊。

用戶可能長(zhǎng)時(shí)間盯著相同的工具欄和菜單，會(huì)得到一些純粹因?yàn)槭煜ざa(chǎn)生的位置感。優(yōu)秀的視覺界面和任何優(yōu)秀的視覺設(shè)計(jì)一樣，在視覺上應(yīng)該是高效率的，它們有一個(gè)共同的特點(diǎn)，即讓最少的視覺和功能元素發(fā)揮最大效能。這樣，設(shè)計(jì)師可以自由地用更少的像素做更多的事情。

2.5 消除視覺附加工作

設(shè)計(jì)原則的主要目的之一就是優(yōu)化用戶的產(chǎn)品體驗(yàn)。對(duì)于生產(chǎn)工具和其他非娛樂導(dǎo)向的產(chǎn)品而言，這意味著將工作負(fù)荷降至最低。軟件經(jīng)常包括一些不必要的具有繁重工作量的交互，對(duì)于用戶來說，這些是附加工作[1]。

視覺附加工作是用戶不得不分析的視覺信息，比如在列表中找到某個(gè)條目、判斷從哪個(gè)位置開始閱讀屏幕，或者決定哪些元素是可以點(diǎn)擊的，哪些元素僅僅是裝飾性的。有時(shí)設(shè)計(jì)師過分依賴視覺隱喻，因此添加了各種附加工作，這些視覺隱喻能讓人們?nèi)菀桌斫獬绦蛟睾托袨橹g的關(guān)系，但了解了這些基本情況之后，隱喻的管理成了完全的附加工作。另外一種視覺附加工作的根源是過度使用了風(fēng)格化的圖形和界面元素，而實(shí)際上，視覺風(fēng)格的運(yùn)用首先是要支持清晰的信息通信和界面行為。

2.6 避免歧義

避免顯示有歧義的信息，并通過測(cè)試確認(rèn)所有用戶對(duì)信息的理解是一致的。當(dāng)無法消除歧義時(shí)，要么依靠標(biāo)準(zhǔn)或者慣例，要么告知用戶用你期望的方式去理解歧義之處[3]。

3 優(yōu)雅的視覺界面設(shè)計(jì)

視覺界面的設(shè)計(jì)對(duì)品牌形象、用戶體驗(yàn)及本能反應(yīng)等方面都有一定的支持作用。優(yōu)秀設(shè)計(jì)的經(jīng)典要素之一即形式簡(jiǎn)約：以簡(jiǎn)御繁。對(duì)于界面設(shè)計(jì)，就是用最少的操作與學(xué)習(xí)成本來完成任務(wù)。簡(jiǎn)約同樣適用于行為，在視覺設(shè)計(jì)中給與用戶簡(jiǎn)單的工具，即運(yùn)用最少的視覺區(qū)別來明確傳達(dá)想要表達(dá)的意思。

視覺界面設(shè)計(jì)師所關(guān)心的是尋找最適合的表現(xiàn)方式來傳達(dá)他們?cè)O(shè)計(jì)的交互產(chǎn)品的行為。設(shè)計(jì)師應(yīng)該用一種容易理解、有用、支持企業(yè)品牌和目標(biāo)的方式來表現(xiàn)產(chǎn)品的行為和信息。用戶界面的設(shè)計(jì)不應(yīng)該輕視美學(xué)方面的考慮，而是要在一定的功能框架下來最大化地考慮如何優(yōu)雅地向用戶展示應(yīng)用的視覺設(shè)計(jì)。

［1］Alan Cooper，Robert Reimann，David Cronin.About Face3 交互設(shè)計(jì)精髓[M].劉松濤，等，譯.北京：電子工業(yè)出版社，2014，9：115-118，170-172，218-239.

［2］古賀直樹.好設(shè)計(jì)不簡(jiǎn)單UI 設(shè)計(jì)師必須了解的那些事[M].張君艷，譯.北京：人民郵電出版社，2014，8：22-28.

［3］Jeff Johnson.認(rèn)知與設(shè)計(jì)：理解UI 設(shè)計(jì)準(zhǔn)則[M].2 版.張一寧，王軍鋒，譯.北京：人民郵電出版社，2014，8：11-12.