視覺設(shè)計(jì)如何造就優(yōu)秀的用戶體驗(yàn)(UX)?

1 評論 8487 瀏覽 30 收藏 13 分鐘

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

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

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

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

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

何為吸引?

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

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

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

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

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

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

我們將觀點(diǎn)同理到用戶體驗(yàn)設(shè)計(jì)中,或許因?yàn)槲覀儗⒛承┙换セ蛘呔W(wǎng)站元素與可用性聯(lián)系了起來,讓我們感覺很有吸引力。同時(shí),有很多網(wǎng)絡(luò)趨勢和視覺資源現(xiàn)在看起來很吸引人,但是幾個(gè)月或幾年過后就沒那么大影響力了。

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

在用戶體驗(yàn)設(shè)計(jì)中的視覺設(shè)計(jì)

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

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

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

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

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

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

相關(guān)性

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

  • 傳達(dá)消息;
  • 指示操作;
  • 組織信息。

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

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

在StackExchange中(Over at StackExchange),討論還在繼續(xù)。

某個(gè)用戶指出:

一方面研究表明,UI的樣式是真的會影響到體驗(yàn)嗎?通常,人們會通過封面判斷書籍。

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

這是什么意思?

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

一個(gè)StackExchange用戶似乎要取得平衡:

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

當(dāng)然,他補(bǔ)充到:

“做好的或壞的視覺設(shè)計(jì)真能影響UX?我認(rèn)為你將會同意答案是對的,但它以什么方式?這是一個(gè)很難回答的問題?!?/p>

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

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

這對用戶體驗(yàn)設(shè)計(jì)師意味著什么

對于用戶體驗(yàn)設(shè)計(jì)師來說,有兩個(gè)主要的點(diǎn)。

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

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

來自UXPin的杰瑞·曹(Jerry?Cao)在Creative?BloqFast?Company的文章,都為視覺設(shè)計(jì)提供了規(guī)則列表幫助。

對于想入門的用戶體驗(yàn)設(shè)計(jì)師來說,這是最好的選擇:

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

名詞解釋:

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

 

原文作者:Marli Mesibov

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

譯文作者:兔子翻譯組

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

題圖作者提供

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!