歡迎訪問

云南鼎浩信息技術有限公司官方網站,云南網站建設誠信品牌!

鼎浩網絡,云南鼎浩信息技術有限公司

鼎浩客服熱線

DING HAO COLUMN 鼎浩專欄

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服務
  • 1

視覺設計如何造就優秀的用戶體驗(UX)?

來源:站長之家     2018年08月17日56:09
字號:T|T


唐納德·諾曼(Donald Norman)在《情感化設計:我們為什么會喜歡(或討厭)日常事物》(Emotional Design: Why we Love (or Hate) Everyday Things)一書中描述了一個他發現的研究“系統美學的好壞,會影響后續使用對美觀和可用性的感受,但是實際上可用性沒有這樣的影響”,換言之,視覺設計對整個體驗的影響與可用性一樣。

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

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

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

何為吸引?

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

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

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

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

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

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

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

例如:曾經有一段時間漫畫字體成為了一種優選字體,還有就是動畫啟動頁成為了精心設計的網站的一種象征

。在用戶體驗設計中的視覺設計

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

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

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


在某些方面,視覺設計可以看做是平面設計和用戶體驗設計的結合(graphic design and user experience design)。事先聲明隨著這些領域的不斷發展,客觀來說,平面設計通常是指靜態的圖片或視覺效果的設計。

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

視覺設計實際上可以極大的改變用戶看屏幕的方式(一語雙關),用戶甚至會期望從外觀上吸引人的屏幕里獲得:更好的功能性、更實用、更人性化。

相關性谷歌的產品總監盧克?弗羅布萊夫斯基(Luke Wroblewski),曾經花費數年時間探索視覺設計和用戶操作之間的相關性。

在他 2008 年“論視覺層級”(Communicating with Visual Hierarchy)的報告中,盧克闡釋了視覺設計在用戶體驗中的作用。他認為“視覺層級”2(Visual Hierarchy)(即如何安置和突顯屏幕上的項目)幫助我們:

傳達消息;

指示操作;

組織信息。


緊接著盧克分享了許多技巧和建議,意圖在于激勵設計師們去思考他們應該在哪以及怎樣顯示信息。一個具備吸引力的視覺層級,同時也是可用的那個。

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

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

某個用戶指出:

一方面研究表明,UI的樣式是真的會影響到體驗嗎?通常,人們會通過封面判斷書籍。另一方面提醒我們,如果視覺設計很重要,那么你如何解釋微軟(Microsoft)糟糕產品的驚人成功?我已經使用Outlook將近 20 年了,并且在我看來Outlook從來沒有兩次相同的界面(不,我不是一個傻子)并且它一直有很高的市場份額!

這是什么意思?

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

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

:”…視覺設計影響整體用戶體驗的一個或多個方面,在幫助用戶實現目標的過程中,它可能不一定是最重要的部分,但是必將與用戶的感知有關。”

當然,他補充到

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

合理的假設一個視覺上有吸引力的網站,得到同等的好處就像是一個著裝得體的人在一次會面中。收益是不用懷疑的,當用戶來到一個沒有吸引力的網站,如果他們有一個好的體驗,他們仍然會高興。

然而,如果那是一個卡頓并沒有吸引力的網站,用戶可能會盡快離開。當一個網站有吸引力的時候(無論是以經典的方式還是現在流行的方式),用戶本質上更相信它,并且準備給第二次機會。

這對用戶體驗設計師意味著什么

對于用戶體驗設計師來說,有兩個主要的點。

首先,不要僅僅依靠視覺設計來挽救一個糟糕的體驗。最有吸引力的視覺效果,并不會修復對用戶來說是錯誤的或結構不完善的特性或功能。

其次,不要忽視視覺設計。我們都有競爭,視覺設計可以成為鼓勵用戶重視一個應用程序,而不是另一個同樣可用的應用程序至關重要的競爭優勢。

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

對于想入門的用戶體驗設計師來說,這是最好的選擇:

保持一致(Stay consistent),不一致甚至會把最漂亮的設計變成丑陋的爛攤子,這是一個感覺引導視覺的領域。如果用戶對網站感到困惑,那么這種感覺將會使網站在他們眼中顯得丑陋。

測試視覺概念和紙張原型(Test visual concepts as well as paper?prototypes),正如杰瑞(Jerry)在Creative Bloq上告訴我們的那樣:“當人們上網時,他們說他們正在‘看’一個網站,而不是‘與之互動’,盡管后者更準確。”我們對視覺效果有強烈的反應,良好的品牌形象會影響我們對交互的信任和反應。

不要被潮流左右(Don’t get distracted by?trends),黑色的小禮服在過去的 100 年里一直流行是有原因的。它很簡單,它很干凈,它很經典。同樣的,一個簡單、干凈、經典的視覺設計會隨著時間的推移以趨勢無法預料的方式保持下去,例如:扁平化設計的某些方面很有可能會繼續存在。總的來說,在之后的幾年里很有可能會有很多應用程序看起來“那么的2015”。

名詞解釋:

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


客服中心
點擊進行在線咨詢

QQ咨詢 咨詢QQ:79929313 咨詢QQ:88139574 咨詢QQ:122790803

咨詢熱線:0871-63399840

客服熱線:0871-63523332

客服中心 客服中心
台湾麻将牌 700444708089823286119049905243672794774228939865963545755045717401232915346429477696974204249958944 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();