這篇文章中，我們來看看為什么人們更喜歡有吸引力的界面，它會說明我們作為人類，以及用戶體驗的從業(yè)者如何利用這些知識來創(chuàng)造更好的用戶體驗。

唐納德·諾曼（Donald Norman）在《情感化設(shè)計：我們?yōu)槭裁磿矚g（或討厭）日常事物》（Emotional Design: Why we Love (or Hate) Everyday Things）一書中描述了一個他發(fā)現(xiàn)的研究“系統(tǒng)美學(xué)的好壞，會影響后續(xù)使用對美觀和可用性的感受，但是實際上可用性沒有這樣的影響”，換言之，視覺設(shè)計對整個體驗的影響與可用性一樣。

視覺設(shè)計可能比用戶體驗更重要這個想法，聽起來好像不對，但是它不應(yīng)該讓我們感到詫異，人類被他們覺得美的事物所吸引。

有研究表明：大人和小孩都更容易相信他們覺得有吸引力的人（more likely to trust someone）。相同的理論對應(yīng)用程序和網(wǎng)站來說似乎同樣如此：人們更容易暫時相信吸引人的應(yīng)用所說的話。

在這篇文章中，我們就來看看為什么人們更喜歡有吸引力的界面。它會說明我們作為人類，以及用戶體驗的從業(yè)者如何利用這些知識來創(chuàng)造更好的用戶體驗。

何為吸引？

在討論UX中的美學(xué)之前，我們需要回答一個問題。什么意味著，這個事物存在客觀的吸引力？

從字面上看，這是劃時代的問題，哲學(xué)家們可以追溯到畢達哥拉斯曾經(jīng)問過什么是美，畢達哥拉斯的追隨者認為“美是表現(xiàn)和諧，像數(shù)學(xué)上的黃金分割一樣”。從此許多數(shù)學(xué)家、哲學(xué)家開始試圖量化美。

另一方面，伏爾泰認為，美是不可被界定的，這也許會引發(fā)“情人眼里出西施”這種說法。經(jīng)驗主義者遵循這種觀念，把美類比于快樂，就像人看到美好的事物所表現(xiàn)出的樣子

有一些科學(xué)家認為：能讓我們賞心悅目的是那些最有益于我們健康的事物。因此，疾病使得人們看起來“沒有魅力”，像漿果之類對我們有益的東西，同樣給我們視覺上的愉悅感。這個理論有很大的漏洞（想象下美麗的毒性青蛙），但理論本身也許有一定的優(yōu)點。

另外，一些人爭論說美來源于社會和文化的傾向。事實上在美國，絕大多數(shù)孩子在很小的時候就看迪士尼電影，他們加深了女巫和惡人都長相丑陋，然而英雄和女主角都長相俊美的想法，然而遠不止這些。

如今，由于受我們周圍媒體日益的影響，大量的時尚產(chǎn)品，美容美發(fā)趨勢（facial hair trends），甚至體型都被認為是有吸引力的；十年后，那些相同的趨勢看起來可能會讓人感到尷尬或不屑。隨著文化傾向的變更，文化對美的定義也會跟著變化。

我們將觀點同理到用戶體驗設(shè)計中，或許因為我們將某些交互或者網(wǎng)站元素與可用性聯(lián)系了起來，讓我們感覺很有吸引力。同時，有很多網(wǎng)絡(luò)趨勢和視覺資源現(xiàn)在看起來很吸引人，但是幾個月或幾年過后就沒那么大影響力了。

例如：曾經(jīng)有一段時間漫畫字體成為了一種優(yōu)選字體，還有就是動畫啟動頁成為了精心設(shè)計的網(wǎng)站的一種象征。

在用戶體驗設(shè)計中的視覺設(shè)計

基于沒有一個人的審美觀是“完美的”的認知，我們現(xiàn)在可以深入研究視覺設(shè)計在用戶體驗設(shè)計中的所起的作用。畢竟，它不僅僅是使東西變得好看。

usability.gov上將視覺設(shè)計定義（usability.gov defines visual design）為“戰(zhàn)略性的實現(xiàn)圖片、顏色、字體和其他元素”，目的是用來增強設(shè)計或交互，并吸引用戶。

視覺設(shè)計不同于交互設(shè)計，交互設(shè)計側(cè)重于完成任務(wù)所需的功能性。視覺設(shè)計則是吸引用戶，通過大小、顏色和留白的使用來引導(dǎo)用戶注意到正確的功能和排列頁面中事物的優(yōu)先順序，甚至是通過使用視覺線索增加品牌信任。

在某些方面，視覺設(shè)計可以看做是平面設(shè)計和用戶體驗設(shè)計的結(jié)合（graphic design and user experience design）。事先聲明隨著這些領(lǐng)域的不斷發(fā)展，客觀來說，平面設(shè)計通常是指靜態(tài)的圖片或視覺效果的設(shè)計。

用戶體驗設(shè)計包含了交互設(shè)計和用戶界面設(shè)計，所以注重交互。視覺設(shè)計正好位于中間，包含了以改善交互和可用性為目的而設(shè)計靜態(tài)的圖片和視覺效果。

視覺設(shè)計實際上可以極大的改變用戶看屏幕的方式（一語雙關(guān)），用戶甚至?xí)谕麖耐庥^上吸引人的屏幕里獲得：更好的功能性、更實用、更人性化。

相關(guān)性

谷歌的產(chǎn)品總監(jiān)盧克?弗羅布萊夫斯基（Luke Wroblewski），曾經(jīng)花費數(shù)年時間探索視覺設(shè)計和用戶操作之間的相關(guān)性。在他2008年“論視覺層級”（Communicating with Visual Hierarchy）的報告中，盧克闡釋了視覺設(shè)計在用戶體驗中的作用。他認為“視覺層級”²（Visual Hierarchy）（即如何安置和突顯屏幕上的項目）幫助我們：

• 傳達消息；
• 指示操作；
• 組織信息。

緊接著盧克分享了許多技巧和建議，意圖在于激勵設(shè)計師們?nèi)ニ伎妓麄儜?yīng)該在哪以及怎樣顯示信息。一個具備吸引力的視覺層級，同時也是可用的那個。

然而七年至今，視覺設(shè)計在用戶體驗工作中的重要性仍然很少被提及。

在StackExchange中（Over at StackExchange），討論還在繼續(xù)。

某個用戶指出：

一方面研究表明，UI的樣式是真的會影響到體驗嗎？通常，人們會通過封面判斷書籍。

另一方面提醒我們，如果視覺設(shè)計很重要，那么你如何解釋微軟（Microsoft）糟糕產(chǎn)品的驚人成功？我已經(jīng)使用Outlook將近20年了，并且在我看來Outlook從來沒有兩次相同的界面（不，我不是一個傻子）并且它一直有很高的市場份額！

這是什么意思？

在旁觀者眼里是漂亮的，有些用戶覺得微軟（Microsoft）很漂亮，或者視覺設(shè)計畢竟是一件好事，并不是一個碰運氣的事兒，正如Lucke Wroblewski所定義。

一個StackExchange用戶似乎要取得平衡：

”…視覺設(shè)計影響整體用戶體驗的一個或多個方面，在幫助用戶實現(xiàn)目標(biāo)的過程中，它可能不一定是最重要的部分，但是必將與用戶的感知有關(guān)。”

當(dāng)然，他補充到：

“做好的或壞的視覺設(shè)計真能影響UX？我認為你將會同意答案是對的，但它以什么方式？這是一個很難回答的問題。”

合理的假設(shè)一個視覺上有吸引力的網(wǎng)站，得到同等的好處就像是一個著裝得體的人在一次會面中。收益是不用懷疑的，當(dāng)用戶來到一個沒有吸引力的網(wǎng)站，如果他們有一個好的體驗，他們?nèi)匀粫吲d。

然而，如果那是一個卡頓并沒有吸引力的網(wǎng)站，用戶可能會盡快離開。當(dāng)一個網(wǎng)站有吸引力的時候（無論是以經(jīng)典的方式還是現(xiàn)在流行的方式），用戶本質(zhì)上更相信它，并且準(zhǔn)備給第二次機會。

這對用戶體驗設(shè)計師意味著什么

對于用戶體驗設(shè)計師來說，有兩個主要的點。

首先，不要僅僅依靠視覺設(shè)計來挽救一個糟糕的體驗。最有吸引力的視覺效果，并不會修復(fù)對用戶來說是錯誤的或結(jié)構(gòu)不完善的特性或功能。

其次，不要忽視視覺設(shè)計。我們都有競爭，視覺設(shè)計可以成為鼓勵用戶重視一個應(yīng)用程序，而不是另一個同樣可用的應(yīng)用程序至關(guān)重要的競爭優(yōu)勢。

來自UXPin的杰瑞·曹（Jerry?Cao）在Creative?Bloq和Fast?Company的文章，都為視覺設(shè)計提供了規(guī)則列表幫助。

對于想入門的用戶體驗設(shè)計師來說，這是最好的選擇：

1. 保持一致（Stay consistent），不一致甚至?xí)炎钇恋脑O(shè)計變成丑陋的爛攤子，這是一個感覺引導(dǎo)視覺的領(lǐng)域。如果用戶對網(wǎng)站感到困惑，那么這種感覺將會使網(wǎng)站在他們眼中顯得丑陋。
2. 測試視覺概念和紙張原型（Test visual concepts as well as paper prototypes），正如杰瑞（Jerry）在Creative?Bloq上告訴我們的那樣：“當(dāng)人們上網(wǎng)時，他們說他們正在‘看’一個網(wǎng)站，而不是‘與之互動’，盡管后者更準(zhǔn)確?！蔽覀儗σ曈X效果有強烈的反應(yīng)，良好的品牌形象會影響我們對交互的信任和反應(yīng)。
3. 不要被潮流左右（Don’t get distracted by trends），黑色的小禮服在過去的100年里一直流行是有原因的。它很簡單，它很干凈，它很經(jīng)典。同樣的，一個簡單、干凈、經(jīng)典的視覺設(shè)計會隨著時間的推移以趨勢無法預(yù)料的方式保持下去，例如：扁平化設(shè)計的某些方面很有可能會繼續(xù)存在?？偟膩碚f，在之后的幾年里很有可能會有很多應(yīng)用程序看起來“那么的2015”。

名詞解釋：

1、視覺層級（Visual Hierarchy）：在二維平面上利用顏色的變化、符號的大小、線劃的粗細對視覺的不同刺激而產(chǎn)生的遠近不同層面的視覺效果。[百度百科]

原文作者：Marli Mesibov

原文地址：http://www.uxbooth.com/articles/how-visual-design-makes-for-great-ux/

譯文作者：兔子翻譯組

本文由 @兔子翻譯組 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供