移動智能終端目標(biāo)導(dǎo)向視覺界面設(shè)計(jì)研究

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

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

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

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

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

但相對的，視覺設(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é)任是努力以易于理解和使用的方法來呈現(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)容和圖形界面。比如，如果兩周界面對象顏色相同，用戶會認(rèn)為二者有關(guān)或者相似。如果兩個(gè)對象顏色相反，用戶會認(rèn)為對象有某些類別差異。人類可以通過不同的視覺外觀區(qū)別對象，視覺界面設(shè)計(jì)利用這點(diǎn)特性創(chuàng)造出比單純使用文字更加豐富的含義。

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

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

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

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

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

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

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

(二)理清視覺層級

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

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

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

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

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

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

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

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

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

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

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

(六)精簡視覺工作量

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

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

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

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

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

雖然違背指導(dǎo)規(guī)則被視為可能會付出代價(jià)，但是并不一定就要拿規(guī)則來限定設(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)步的過程。

從整體框架設(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ì)和評估[M].清華大學(xué)出版社，2010.

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

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