本文將透過 6 條有效的情感化設計原則及案例來講解如何建立有吸引力、令人愉快的 Web/App 介面,以獲得更好的多使用者體驗。
如今,隨著情感化設計的興起,越來越多的多使用者體驗設計師意識到情感化設計的重要性,並開始為了達到更好的多使用者體驗來創造情感化設計方案。
著名的尼爾森諾曼集團的聯合創始人唐納德·阿瑟諾曼在他的著名著作 “情感化設計”(《Emotional Design》)中首次引入了 “情感化設計” 這個詞,並強調了情感化設計對獲得更好的 Web/App 多使用者體驗的巨大影響。
然而,您如何將情感融入到您的 Web 或者 App 介面設計中,並以此吸引能多的多使用者呢?您是否在尋找一些實用的情感化設計原則及案例來幫助您建立一個吸引人的、令人愉快的 Web/App 介面呢?下文將列出 6 條有效的情感化設計原則及案例供您參考。
在 Web/App 介面設計中,什麼是情感化設計?
在 Web/App 介面設計中,情感化設計通常指多使用者體驗設計師使用的一種設計方法,即透過創造性的介面元素,比如色彩、動畫、版面佈局等等來傳遞積極的情緒(比如快樂、舒適、愉悅等等)。
此外,有時為了喚起多使用者的正確情緒反應,一些設計師甚至創造性地將一些負面情緒(如悲傷、遺憾和痛苦等)放在多使用者的 Web/App 介面設計中,以獲取多使用者更好的多使用者體驗和產品銷售。
簡而言之,優秀的情感化 Web/App 介面設計不僅能迅速吸引多使用者的注意力,還能讓他們對您的產品產生好感。
下例中使用的所有的介面元素,特別是照片和文字,都在傳遞一種安全的感覺,並鼓勵多使用者放心並毫不猶豫地購買這項安全軟體。
如何透過情感化的介面設計創造更好的多使用者體驗?
正如我們在上面介紹的,Web/App 介面的每個元素或細節都可能是情感的潛在來源。那麼,如何才能更有創意、更有效地使用這些常用的介面元素來建立一個引人注目的、情緒化的 Web/App 應用呢?下文列出 6 條有效的情感化設計原則及案例供您參考:
1. 使用視覺元素來喚起多使用者的特定情緒
視覺元素可以透過設計來喚起情感。下面是一些您可以嘗試喚起多使用者情緒的視覺元素:
(1)使用色彩來吸引多使用者並喚起情感
色彩是介面設計中最重要的視覺元素之一,它在吸引和留存多使用者方面扮演著至關重要的角色– 即使是第一次預覽。它也是設計師表達情感的有效元素。例如,一般來說,紅色和黃色通常表示快樂、熱情、青春、輕鬆等等。在您的設計中使用這些顏色或配色方案時,您可以很容易地喚起相應的情感,讓多使用者感到快樂和輕鬆。
藍色、綠色和黑色常常帶來一種平和、舒適和自由的感覺。當您在介面中使用這些顏色或配色方案時,您可以幫助多使用者無意識地變得更有耐心和理性。簡而言之,在您的設計中使用顏色來喚起不同的多使用者情緒,並提供不同的情感體驗。
下例中,中國餐館網站選擇了紅色和黃色,這是東方最典型的顏色,所以作為網站的主題顏色。這種配色方案不僅使整個設計更加美觀、引人注目,而且讓顧客對東方文化有了更多的瞭解。而且,您也忍不住想去嘗試所有的菜式。
下例中,這個 404 錯誤頁面使用了一個藍色和白色的配色方案來無形地傳達一種舒適和平靜的感覺。這樣的設計策略可以有效地減少多使用者在突然收到煩人的 404 錯誤訊息時的挫敗感。
(2)用清晰、直觀和層級化的排版和字型使多使用者感到舒適
一款有更直觀、更有層次、更清晰的排版和字型的 Web/App 應用往往對多使用者更具吸引力,併為多使用者提供更多的愉悅體驗。這樣的介面使得多使用者可以更容易地、快速地找到所需的資訊。
(3)用對比和分組來創造吸引人的介面
您也可以新增對比和分組的視覺元素,使介面更加舒適和愉悅。例如,您可以輕鬆地新增一些照片、動畫和其他視覺化元素,以及變化的顏色、位置、大小、任務、層級等,從而創造一個具有清晰層次結構並引人注目的 Web/App 介面。這個方法對於改善多使用者體驗非常有效。
正如下圖網站案例所示,您可以透過以上方法,很容易地運用影像,標籤,按鈕和更多的元件來建立一個簡潔並吸引人的介面。
簡而言之,巧妙地設計每一個視覺元素,從而有意識地與您的 Web/App 應用多使用者建立情感聯絡。