移動智能終端目標導向視覺界面設計研究

孫迪 浙江機電職業技術學院

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

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

一、視覺藝術與視覺設計的區別

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

但相對的，視覺設計從業者的目標是創作具有特殊用途的人工制品，以供人們使用為目的。藝術家的首要關切是表達自我，而設計師的重點則是清晰溝通。設計關注的是發現最適于傳達某些具體信息的呈現方式。按照目標導向的方式，設計師的責任是努力以易于理解和使用的方法來呈現行為和信息，支撐組織的品牌目標及人物角色的目的。

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

但是，視覺界面設計永遠不能排除對美學的關注。只是把這些關注放到目標導向的框架里，盡管視覺交流總是牽涉某些主觀判斷，但是需要努力縮小品位差異。清晰的闡述用戶體驗目標和商業目標，對于設計界面中用以支撐品牌身份、用戶體驗和情感響應的部分來說是重要基礎。

二、視覺界面設計原則

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

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

(一)傳達風格，傳遞品牌

交互系統日益成為用戶感知品牌的主要途徑。在開始著手界面設計之前，有必要理解品牌承諾。只有理解對應的品牌承諾，才能將設計風格加以統一的呈現。而當一種風格被無數字的不斷重復呈現則意味著品牌開始呈倍數傳遞。

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

(二)理清視覺層級

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

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

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

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

(三)提供清晰的視覺結構

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

因為需要提供清晰的視覺結構，所以網格系統是設計者最有效的設計工具之一。它為布局提供了統一且一致的結構，對于設計視覺層次較多和功能上較為復雜的界面特別重要。它可以給視覺界面帶來較高的可讀性。一套有規則的的網絡系統可以令用戶始終找到各視覺元素所在的位置，一致的間距和定位可以輔助人們內在的視覺處理機制。它還可以極大增強美學吸引力。井井有條的網格系統能形成一種和諧的秩序感，用戶對于這種清晰有條的布局自然會賞心悅目，提高優質體驗度。對于設計者來說，模塊化的網格布局可以減少創造高質量的視覺界面所需的工作量。設計迭代修改是必不可少的，由于模塊網格的布局使得元素的重新設計變成了替換，方便后期的修改和擴展，也能在調整中產生最合適的布局決策。

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

視覺引導很重要的一點便是構建高效的邏輯路徑，讓用戶沿著這邏輯路徑與界面互動。這條邏輯路徑的設計首先來源于前期的交互邏輯設計，視覺界面設計師在遵循交互邏輯設計時從視覺機制出發，結合人眼從上到下和世界普遍范圍內的從左到右的閱讀順序開發的邏輯路徑可以為屏幕區域提供視覺入口點。

(五)易懂的圖標

圖標往往具備很強的標識指代性和藝術審美性。從認知角度來說，圖標是一個復雜的主題。將其簡要為兩點便是準確傳達功能性和對象關聯性。圖標的視覺語言代表抽象概念，選擇習慣用法是比較保險的做法。獨特的符號可以讓用戶快速的找到屏幕上的目標，而圖標的圖形設計就必須和對象本身產生關聯。

(六)精簡視覺工作量

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

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

三、設計原則遵守的必要性

視覺設計師喜歡關注最新潮的風格和設計，自然也喜歡嘗試打破原有的規則。標準的確立經過了諸多的實踐是經得起考驗的，如果肆意的因為視覺上的美觀而打破規則我們會發現用戶體驗呈直線下降，原因也非常簡單：脫離了用戶已經養成的習慣設計。

如果出現了一個充分的理由去改變規則，但是我們又如何定義何謂“充分的理由”，因為這種理由無法簡化至可量化的程度。只有當一個習慣用法被目標用戶群反復測試后發現這樣操作會較之前更好時“打破規則”或許才會被提出。

雖然違背指導規則被視為可能會付出代價，但是并不一定就要拿規則來限定設計師。設計師在“違規”時可以從錯誤中學習經驗，當個體企圖改進方案時是一種內在且未經檢查的緩慢而微小進步的過程。

從整體框架設計到每一處細節設計，如果我們都能夠遵守目標導向設計原則，運用其思想便能增加用戶的粘性度，從每一處細節出發幫助用戶達成目標、完成任務。

[1]Jess James Garrett.以用戶為中心的Web 設計[M].機械工業出版社，2007.

[2]Jeff Johnson.認知與設計：理解 UI 設計準則[M].人民郵電出版社，2011.

[3]董建明，傅利民，饒培倫等.人機交互：以用戶為中心的設計和評估[M].清華大學出版社，2010.

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

[5]Donald Arthur Norman.設計心理學[M].中信出版社，2010.