孫迪 浙江機(jī)電職業(yè)技術(shù)學(xué)院

為了讓產(chǎn)品功能需要與競(jìng)爭(zhēng)者完全相同的產(chǎn)品有所區(qū)別，制造商引入了用以增強(qiáng)產(chǎn)品對(duì)用戶吸引力的設(shè)計(jì)。有意識(shí)地引入設(shè)計(jì)，標(biāo)志著現(xiàn)代產(chǎn)品開(kāi)發(fā)三原則的形成：功用性、可行性、合意性(desirability)。三者中任何一個(gè)要素的弱化都無(wú)法使產(chǎn)品經(jīng)受時(shí)間的考驗(yàn)。在移動(dòng)智能終端上的應(yīng)用程序是用戶自主選擇下載，天生具備了功用性，而可行性關(guān)系到開(kāi)發(fā)團(tuán)隊(duì)能否支撐生意的問(wèn)題，無(wú)法第一時(shí)間反饋到用戶面前，暫時(shí)缺少時(shí)效性。唯獨(dú)合意性是最能直觀反映該程序使用滿意度的要素，也是三要素中最能直觀反映產(chǎn)品用戶體驗(yàn)的要素。

恰恰是這個(gè)最直接，最感性的要素，往往導(dǎo)致了設(shè)計(jì)上出現(xiàn)的偏差。這主要表現(xiàn)在交互設(shè)計(jì)中，交互設(shè)計(jì)不僅僅是審美選擇，更要建立在對(duì)用戶和認(rèn)知原則的了解上，從而更好地理解用戶目標(biāo)、需求和動(dòng)機(jī)，即目標(biāo)導(dǎo)向設(shè)計(jì)。本文重點(diǎn)討論在目標(biāo)導(dǎo)向設(shè)計(jì)中的視覺(jué)界面設(shè)計(jì)策略。

一、視覺(jué)藝術(shù)與視覺(jué)設(shè)計(jì)的區(qū)別

美術(shù)從業(yè)者和視覺(jué)設(shè)計(jì)從業(yè)者有著共同的視覺(jué)媒介。二者雖然都非常了解這個(gè)媒介，但是工作目的不同：美術(shù)從業(yè)者是圍繞情感或者思維關(guān)切的主題，是向社會(huì)總體表達(dá)自我的方式，藝術(shù)家受到的限制很少，他們的產(chǎn)品價(jià)值與產(chǎn)品的非凡獨(dú)特成正比。

但相對(duì)的，視覺(jué)設(shè)計(jì)從業(yè)者的目標(biāo)是創(chuàng)作具有特殊用途的人工制品，以供人們使用為目的。藝術(shù)家的首要關(guān)切是表達(dá)自我，而設(shè)計(jì)師的重點(diǎn)則是清晰溝通。設(shè)計(jì)關(guān)注的是發(fā)現(xiàn)最適于傳達(dá)某些具體信息的呈現(xiàn)方式。按照目標(biāo)導(dǎo)向的方式，設(shè)計(jì)師的責(zé)任是努力以易于理解和使用的方法來(lái)呈現(xiàn)行為和信息，支撐組織的品牌目標(biāo)及人物角色的目的。

當(dāng)前的所謂交互設(shè)計(jì)師大多出身自高等藝術(shù)院校，擁有較強(qiáng)的圖形塑造能力和審美感知能力。如果讓其設(shè)計(jì)一個(gè)令人賞心悅目的圖案或者畫作顯然不再話下，但是交互設(shè)計(jì)顯然不是繪畫藝術(shù)，它的核心指向與藝術(shù)創(chuàng)作大相徑庭。它更多的是理性的看待圖案，從客戶的需求出發(fā)，關(guān)注如何處理和安排可視元素，傳達(dá)信息和行為。這些屬性應(yīng)用于各種元素的方式讓用戶理解內(nèi)容和圖形界面。比如，如果兩周界面對(duì)象顏色相同，用戶會(huì)認(rèn)為二者有關(guān)或者相似。如果兩個(gè)對(duì)象顏色相反，用戶會(huì)認(rèn)為對(duì)象有某些類別差異。人類可以通過(guò)不同的視覺(jué)外觀區(qū)別對(duì)象，視覺(jué)界面設(shè)計(jì)利用這點(diǎn)特性創(chuàng)造出比單純使用文字更加豐富的含義。

但是，視覺(jué)界面設(shè)計(jì)永遠(yuǎn)不能排除對(duì)美學(xué)的關(guān)注。只是把這些關(guān)注放到目標(biāo)導(dǎo)向的框架里，盡管視覺(jué)交流總是牽涉某些主觀判斷，但是需要努力縮小品位差異。清晰的闡述用戶體驗(yàn)?zāi)繕?biāo)和商業(yè)目標(biāo)，對(duì)于設(shè)計(jì)界面中用以支撐品牌身份、用戶體驗(yàn)和情感響應(yīng)的部分來(lái)說(shuō)是重要基礎(chǔ)。

二、視覺(jué)界面設(shè)計(jì)原則

在移動(dòng)智能終端的屏幕上，每一個(gè)角落里都充滿了信息，人類的大腦此時(shí)是一臺(tái)計(jì)算機(jī)，每時(shí)每刻都要處理目光所及之處的高密度視覺(jué)信息。我們通過(guò)觀察可視模式，將所見(jiàn)事務(wù)的重點(diǎn)和流入眼睛的海量信息加以發(fā)現(xiàn)和整理。為了最有效地向用戶傳達(dá)應(yīng)用程序的行為，視覺(jué)界面設(shè)計(jì)師必須抓住人類與生俱來(lái)的視覺(jué)處理能力——一種潛意識(shí)的眼腦協(xié)同處理視覺(jué)信息的能力加以利用。

在如何安置這些信息以至于不讓它們看起來(lái)讓人摸不著頭腦或者不知所措的過(guò)程中，設(shè)計(jì)者的所總結(jié)的經(jīng)驗(yàn)值得我們關(guān)注。某些重要的原則有助于我們將視覺(jué)界面設(shè)計(jì)得更加吸引人的同時(shí)更加易用。

(一)傳達(dá)風(fēng)格，傳遞品牌

交互系統(tǒng)日益成為用戶感知品牌的主要途徑。在開(kāi)始著手界面設(shè)計(jì)之前，有必要理解品牌承諾。只有理解對(duì)應(yīng)的品牌承諾，才能將設(shè)計(jì)風(fēng)格加以統(tǒng)一的呈現(xiàn)。而當(dāng)一種風(fēng)格被無(wú)數(shù)字的不斷重復(fù)呈現(xiàn)則意味著品牌開(kāi)始呈倍數(shù)傳遞。

蘋果公司內(nèi)部開(kāi)發(fā)的應(yīng)用程序很好的說(shuō)明了這一點(diǎn)。從最早期的擬物化設(shè)計(jì)風(fēng)格到現(xiàn)在的扁平化設(shè)計(jì)均采用統(tǒng)一的風(fēng)格樣式。使得用戶在任何一個(gè)地方看到類似的風(fēng)格就能意識(shí)到自己已經(jīng)在蘋果公司的品牌傳播語(yǔ)境下。而微軟的Windows Phone早期卻缺失了部分這種對(duì)統(tǒng)一性的保護(hù)，使得應(yīng)用程序界面顯得平庸而五特點(diǎn)，隨著其最先開(kāi)啟偏平化設(shè)計(jì)之風(fēng)，微軟的產(chǎn)品識(shí)別度很快提高并且引領(lǐng)了當(dāng)前設(shè)計(jì)潮流的發(fā)展。

(二)理清視覺(jué)層級(jí)

在面對(duì)一組視覺(jué)元素時(shí)，用戶最感興趣的并不是某一個(gè)精致漂亮的圖標(biāo)，很可能是下意識(shí)地問(wèn)自己“這里什么最重要”，然后便是疑惑眾多元素之間的關(guān)聯(lián)。用戶界面必須創(chuàng)建合理的層級(jí)和關(guān)系才能回答上述兩個(gè)問(wèn)題。根據(jù)場(chǎng)景確定哪些控件和數(shù)據(jù)是用戶需要立刻理解的，哪些相對(duì)次要或者只是偶爾用到。上述這些排列邏輯便是視覺(jué)層級(jí)。

區(qū)分層級(jí)級(jí)別的是基本視覺(jué)元素，重要的元素所占比例自然需要偏大；色調(diào)、飽和度相對(duì)于背景需要被強(qiáng)化；所在的位置也要靠上或者縮進(jìn)和懸垂。相反，不太重要的元素則需要降低飽和度、色調(diào)等。

只是這樣的原則往往會(huì)形成新的誤區(qū)，會(huì)變成一種標(biāo)準(zhǔn)的公式。一旦被標(biāo)準(zhǔn)化似乎可以意味著提高效率。其實(shí)相反，越是標(biāo)準(zhǔn)的公式越容易將設(shè)計(jì)變得糟糕和效率低下。應(yīng)該克制地調(diào)整這些屬性，在視覺(jué)界面設(shè)計(jì)中，建立清晰的視覺(jué)層級(jí)是非常困難的，需要不斷保持整體樣式，優(yōu)化信息密度，尊重特定屏幕的需求。盡管用戶幾乎從未留意良好的視覺(jué)層級(jí)，但糟糕的視覺(jué)層級(jí)立馬就能跳出來(lái)影響用戶體驗(yàn)。

在傳達(dá)元素間關(guān)系時(shí)必須要找到哪些元素岑子相似的功能，哪些元素的使用率更高。經(jīng)常同時(shí)使用的元素可以放在一起減少重復(fù)操作，其他還可以根據(jù)相似的功能組織雖然空間上沒(méi)有聯(lián)系但是在視覺(jué)上具有可組織性的元素。在空間上對(duì)元素進(jìn)行組織可以有效的告知用戶這些任務(wù)、數(shù)據(jù)和工具存在的關(guān)聯(lián)性，同時(shí)也暗示了順序關(guān)系的存在。

(三)提供清晰的視覺(jué)結(jié)構(gòu)

在進(jìn)行交互設(shè)計(jì)時(shí)可以將用戶界面看作視覺(jué)元素和行為元素的有機(jī)組合。這些元素往往按照分組來(lái)操作，這些分組被網(wǎng)格所構(gòu)建，他們被按照間距和其他視覺(jué)屬性進(jìn)行分組。為了傳遞出清晰的視覺(jué)結(jié)構(gòu)，視覺(jué)元素往往被進(jìn)行對(duì)齊操作，它是設(shè)計(jì)者幫助用戶有組織而系統(tǒng)地體驗(yàn)產(chǎn)品的一個(gè)重要途徑。分組后的元素需要水平和垂直對(duì)齊。一般來(lái)說(shuō)，屏幕上的每個(gè)元素都要盡可能和其他元素對(duì)齊。即使有些時(shí)候需要作出不對(duì)齊元素的決定，實(shí)現(xiàn)某些特點(diǎn)的差異化效果，設(shè)計(jì)師就必須在一些元素的輔助視覺(jué)系統(tǒng)上做的合理的布局。

因?yàn)樾枰峁┣逦囊曈X(jué)結(jié)構(gòu)，所以網(wǎng)格系統(tǒng)是設(shè)計(jì)者最有效的設(shè)計(jì)工具之一。它為布局提供了統(tǒng)一且一致的結(jié)構(gòu)，對(duì)于設(shè)計(jì)視覺(jué)層次較多和功能上較為復(fù)雜的界面特別重要。它可以給視覺(jué)界面帶來(lái)較高的可讀性。一套有規(guī)則的的網(wǎng)絡(luò)系統(tǒng)可以令用戶始終找到各視覺(jué)元素所在的位置，一致的間距和定位可以輔助人們內(nèi)在的視覺(jué)處理機(jī)制。它還可以極大增強(qiáng)美學(xué)吸引力。井井有條的網(wǎng)格系統(tǒng)能形成一種和諧的秩序感，用戶對(duì)于這種清晰有條的布局自然會(huì)賞心悅目，提高優(yōu)質(zhì)體驗(yàn)度。對(duì)于設(shè)計(jì)者來(lái)說(shuō)，模塊化的網(wǎng)格布局可以減少創(chuàng)造高質(zhì)量的視覺(jué)界面所需的工作量。設(shè)計(jì)迭代修改是必不可少的，由于模塊網(wǎng)格的布局使得元素的重新設(shè)計(jì)變成了替換，方便后期的修改和擴(kuò)展，也能在調(diào)整中產(chǎn)生最合適的布局決策。

(四)創(chuàng)建合理的邏輯路徑

視覺(jué)引導(dǎo)很重要的一點(diǎn)便是構(gòu)建高效的邏輯路徑，讓用戶沿著這邏輯路徑與界面互動(dòng)。這條邏輯路徑的設(shè)計(jì)首先來(lái)源于前期的交互邏輯設(shè)計(jì)，視覺(jué)界面設(shè)計(jì)師在遵循交互邏輯設(shè)計(jì)時(shí)從視覺(jué)機(jī)制出發(fā)，結(jié)合人眼從上到下和世界普遍范圍內(nèi)的從左到右的閱讀順序開(kāi)發(fā)的邏輯路徑可以為屏幕區(qū)域提供視覺(jué)入口點(diǎn)。

(五)易懂的圖標(biāo)

圖標(biāo)往往具備很強(qiáng)的標(biāo)識(shí)指代性和藝術(shù)審美性。從認(rèn)知角度來(lái)說(shuō)，圖標(biāo)是一個(gè)復(fù)雜的主題。將其簡(jiǎn)要為兩點(diǎn)便是準(zhǔn)確傳達(dá)功能性和對(duì)象關(guān)聯(lián)性。圖標(biāo)的視覺(jué)語(yǔ)言代表抽象概念，選擇習(xí)慣用法是比較保險(xiǎn)的做法。獨(dú)特的符號(hào)可以讓用戶快速的找到屏幕上的目標(biāo)，而圖標(biāo)的圖形設(shè)計(jì)就必須和對(duì)象本身產(chǎn)生關(guān)聯(lián)。

(六)精簡(jiǎn)視覺(jué)工作量

界面上的視覺(jué)噪音一般是由過(guò)多的視覺(jué)元素造成的，這些多余的視覺(jué)元素將人們的注意力從那些傳達(dá)能共性和信息的主要對(duì)象上轉(zhuǎn)移到他處。目前視覺(jué)噪音主要表現(xiàn)在過(guò)多的顏色對(duì)比、文理及沒(méi)有必要的裝飾上，另外就是一些無(wú)謂的三維渲染。混亂的界面試圖在一個(gè)有限的空間中提供過(guò)多的功能，結(jié)果會(huì)導(dǎo)致這些控件在視覺(jué)上互相干擾。視覺(jué)上過(guò)分裝飾、混亂或者擁擠的屏幕都會(huì)加重用戶的認(rèn)知負(fù)荷。

一般來(lái)說(shuō)，視覺(jué)界面應(yīng)該盡可能簡(jiǎn)單，讓人能夠清晰的感受到各自的對(duì)象所指和互相間的邏輯關(guān)系。它們必須是高效率的，讓最少的功能和視覺(jué)元素發(fā)揮最大的效能。當(dāng)前流行的扁平化設(shè)計(jì)風(fēng)格或許就是一個(gè)針對(duì)精簡(jiǎn)視覺(jué)量的設(shè)計(jì)趨勢(shì)。

三、設(shè)計(jì)原則遵守的必要性

視覺(jué)設(shè)計(jì)師喜歡關(guān)注最新潮的風(fēng)格和設(shè)計(jì)，自然也喜歡嘗試打破原有的規(guī)則。標(biāo)準(zhǔn)的確立經(jīng)過(guò)了諸多的實(shí)踐是經(jīng)得起考驗(yàn)的，如果肆意的因?yàn)橐曈X(jué)上的美觀而打破規(guī)則我們會(huì)發(fā)現(xiàn)用戶體驗(yàn)呈直線下降，原因也非常簡(jiǎn)單：脫離了用戶已經(jīng)養(yǎng)成的習(xí)慣設(shè)計(jì)。

如果出現(xiàn)了一個(gè)充分的理由去改變規(guī)則，但是我們又如何定義何謂“充分的理由”，因?yàn)檫@種理由無(wú)法簡(jiǎn)化至可量化的程度。只有當(dāng)一個(gè)習(xí)慣用法被目標(biāo)用戶群反復(fù)測(cè)試后發(fā)現(xiàn)這樣操作會(huì)較之前更好時(shí)“打破規(guī)則”或許才會(huì)被提出。

雖然違背指導(dǎo)規(guī)則被視為可能會(huì)付出代價(jià)，但是并不一定就要拿規(guī)則來(lái)限定設(shè)計(jì)師。設(shè)計(jì)師在“違規(guī)”時(shí)可以從錯(cuò)誤中學(xué)習(xí)經(jīng)驗(yàn)，當(dāng)個(gè)體企圖改進(jìn)方案時(shí)是一種內(nèi)在且未經(jīng)檢查的緩慢而微小進(jìn)步的過(guò)程。

從整體框架設(shè)計(jì)到每一處細(xì)節(jié)設(shè)計(jì)，如果我們都能夠遵守目標(biāo)導(dǎo)向設(shè)計(jì)原則，運(yùn)用其思想便能增加用戶的粘性度，從每一處細(xì)節(jié)出發(fā)幫助用戶達(dá)成目標(biāo)、完成任務(wù)。

[1]Jess James Garrett.以用戶為中心的Web 設(shè)計(jì)[M].機(jī)械工業(yè)出版社，2007.

[2]Jeff Johnson.認(rèn)知與設(shè)計(jì)：理解 UI 設(shè)計(jì)準(zhǔn)則[M].人民郵電出版社，2011.

[3]董建明，傅利民，饒培倫等.人機(jī)交互：以用戶為中心的設(shè)計(jì)和評(píng)估[M].清華大學(xué)出版社，2010.

[4]Robert Hoekman.Jr.瞬間之美：Web界面設(shè)計(jì)如何讓用戶心動(dòng)[M].人民郵電出版社，2009.

[5]Donald Arthur Norman.設(shè)計(jì)心理學(xué)[M].中信出版社，2010.