情感設計不止一個 IP 形象
感謝 海鹽社 的小夥伴 @角馬、@橙子的橙子對這篇分享的幫助,希望可以對看文的大家能有一些幫助。
前言
情感化設計的概念雖然早已被人們熟知,但是普遍對它的理解還留於表面,一提到情感華設計,大家首先想到的就是 IP 卡通形象,但其實情感化設計包含在產品的方方面面,卡通形象只是最直接的視覺層的表現,其實互動設計和整體的使用者體驗同樣也可以進行情感的表達。接下來我們會從情感設計的定義出發,詳細的分析情感設計對於產品的意義和作用,並且在最後會提出一些簡單易懂注意事項幫助大家來優化情感設計。
目錄
1.情感設計的定義
2.本能設計
3.行為設計
4.反思設計
5.注意事項
6.總結
在唐納德·諾曼(Donald Arthur Norman)博士中的《情感化設計》一書中將人的情感化分為三種:本能設計、行為設計、反思設計。
本能設計——人是視覺動物,對外形的觀察和理解是出於本能的。如果視覺設計越符合本能水平的思維,就越容易讓人接受。
行為設計——我們需要更多的去關注行為設計,特別對於功能性的產品來說,要講究效用,重要的是其效能。
反思設計——有用的產品可以滿足我們長期時間內的情感滿足。長期的關係可以滿足生理上、心理上、情感上和精神上的多種需求。
諾曼說過美觀的物品更好用,人在本能上就是更喜歡的視覺美觀的設計。舉個例子,大家在路上都會不自覺多看兩眼漂亮的小姐姐,並不是我們瞭解或認識那個小姐姐,而是出於自己對美的事物的本能反應。
接下倆我們結合本能設計的概念從視覺開始說起,接下來我們會講到我們常用到的視覺形象 IP 、色彩、版式佈局以及多種視覺元素的組合的情況。
a.萌娘&萌寵
卡通形象 IP 是我們常用到的一種情感表達方式,這裡我們可以理解為“吉祥物”。我們可以通過擬人的設計來和使用者建立情感的聯絡,並且通過對卡通形象的肢體表情設計來對使用者傳達情感。這種情況在二次元的 app 中極為常見,例如嗶哩嗶哩:
嗶哩嗶哩通過萌孃的形象來向用戶傳達情感,首先形象的設計符合二次元使用者的審美,並且通過擬人化的表情設計用情感的方式來傳遞當前的資訊狀態,例如上圖中的稍後再看的模組中,即使在資料錯誤或者狀態的情況下也能緩解了使用者焦慮的情緒,有效的挽留當前使用者,給予安慰。
b.色彩
色彩本身就帶有一定的情緒屬性,能夠一定程度上影響人的情緒。例如我們日常工作,會議室一般都是冷色調的裝修,而很少看到暖色調的裝修,原因很簡單,冷色調更容易讓人安靜,從而能更加容易投入工作會議之中,而暖色調則會讓人容易感到焦躁,無法靜下心來參加會議,從而影響工作。
當然這只是色彩屬性的一般部分,眾所周知,紅色系更能刺激人的慾望,例如購買慾、食慾...而藍色系則象徵著理智、嚴謹... 我們以紅色系為例,結合線上的一些 app 的圖示為進行講解:
淘寶、京東、淘票票等電商平臺都是以橙紅色系為主,首先橙紅色系本身具有強烈的情緒屬性,代表著熱情、奔放,能夠激發人的點選慾望,同樣詳情頁中購買按鈕也使用橙紅色系作為背景,例如淘寶的收藏購買:
淘寶產品詳情頁中的購買按鈕採用橙紅色系,通過色彩本身熱烈具有張性的性格刺激人的點選慾望,進而刺激使用者的購買慾,提高產品的點選收藏購買率。
c.版式佈局
版式佈局在情緒化設計中是一個比較忽略的點,看似平淡無奇,但是假設我們的佈局版式雜亂無章,直接會導致使用者對資訊理解有誤,達不到預期的操作目標,直接就會產生極大的負面情緒,直接放棄操作,導致使用者流失。
反觀好的版式佈局設計能夠讓使用者快速的把握頁面內資訊的主次,正確、直觀的傳達資訊,提供優秀的使用者體驗,從而讓使用者心情舒暢,極大的鼓舞使用者的操作,我們以豆瓣為例:
豆瓣將同類資訊進行了分類組織,使得介面主次分明,資訊井然有序,使用者可以根據自己的需求迅速瀏覽資訊,快速完成任務。
雖然這樣做不會讓使用者直接產生愉悅的情緒,但是通過幫助使用者順利完成當前操作,可以間接的維護使用者情緒,使使用者情緒可以保持當前愉悅的心情,避免了使用者因為介面的雜亂無章而放棄當前操作。
d.組合視覺元素
我們除了使用單一的視覺單元意外,還可以通過多個視覺元素的組合和對比來營造一個舒適、統一且令人身心愉悅的介面。我們可以通過配圖、色彩、字型、位置、對齊等多種元素進行組合,通過多個元素的關係營造出適合當前的頁面氣氛的設計。
我們以 Farfetch 電商平臺為例,Farfetch 作為一個高品質電商平臺核心定位的使用者自然是高階使用者,這裡與普通大眾電商平臺所要營造的氣氛也是有較大的區別,如下圖:
Farfetch 的主要消費群體是社會中收入較高的階層,所以在介面氣氛的營造上就好比小百貨城和高階專賣店的區別,差異肯定是巨大的。如下圖:
從整體頁面來看,Farfetch 的設計十分簡潔並具有很強的形式感,減少了不必要的資訊干擾。例如我們經常其他平臺的看到折扣資訊或活動資訊等等。
Farfetch 在設計上首先的將資訊進行了組織處理,並且選用了居中的版式設計,資訊自上而下一目瞭然;在色彩上,Farfetch 選用了黑白灰的主色調,避開了主流的電商紅,營造出極強的品質感;而在配圖上,則選用了高品質的產品展示圖片,避開其他資訊的干擾,例如折扣標籤和模特展示;字型上十分考究,通過字重來區分資訊的重要性,並選用特定的英文字型展示品牌。綜合上述,Farfetch 通過多方面來營造高階、典雅、品質的購物氣氛,符合其核心使用者的心智模型並給予核心消費群體舒適、愉悅的購物情感需求。
行為設計——我們需要更多的去關注行為設計,特別對於功能性的產品來說,要講究效用,重要的是其效能。
簡單點理解就是滿足使用者的功能需求和互動體驗。
a.一個介面只能有一個主要功能
任何複雜的東西都會給使用者帶來困擾,一個產品只能有一個定位,一個核心功能(只放一個按鈕,使用者直接點就可以了,符合don't make me think原則)。
例如蘋果手機在 Iphone X 之前的系列都只有一個 home 鍵,這樣使用者的可以不假思索的點選。如下圖所示:
我們再以 ofo 為例:
ofo 產品的主要目的就是為使用者提供一鍵掃碼快速用車的服務。我們可以看到整個頁面最醒目的就是“掃碼用車”的黃色按鈕,使用者無需思考直接掃碼用車,直接、高效,滿足了使用者最直接的需求,符合行為設計的需求。
b.簡單便捷的互動打造優質使用者體驗
簡單便捷的互動能夠滿足使用者的需求,並且能夠體現其功能性和實用性;流暢的互動動效還能激發使用者的愉悅之情,提升使用者體驗。一個好的互動設計首先要滿足使用者知道做什麼、怎麼做,做完了有什麼反饋,而且操作主動權必須要在使用者手裡,不要試圖綁架使用者。我們以FΛNTΛSY TEAM 的設計為例:
設計來自於 FΛNTΛSY TEAM
FΛNTΛSY TEAM 設計的互動動效十分流暢,視覺舒適,從椅子的選擇到購買都能夠進行實時的反饋,並且使用者始終掌握著主動權。整個業務的操作流程,在滿足使用者的需求又能充分使用者的操作效率,極大的提升了頁面的使用者體驗,保證了使用者的心情的的舒暢、愉悅。
反思設計——有用的產品可以滿足我們長期時間內的情感滿足。長期的關係可以滿足生理上、心理上、情感上和精神上的多種需求。
這就像一段感情,產品需要和使用者談戀愛,不斷的去投入維護這段感情。接下來我們看一下通過哪幾種手段才能維護好這段感情。
a.有趣的創意
創意似乎永遠是個加分項,有趣的創意能賦予整個頁面獨有的個性和靈氣,讓使用者切身感受到對方是一個“真實且有情感”的人,而不是一個冰冷的工具。我們以 WALKUP 為例:
WALKUP 區別其他 app 的計步功能的創意點在於,它將你的“步數”轉化成環球旅行的距離,每當你步數達到一定的距離,你就會解鎖一個景點,而不是單純的步數或者卡路里的資料,從而使 WALKUP 顯得更加豐滿。WALKUP 創意的表達促使使用者願意投入更多的精力和情感到產品中,建立一段長期穩定的關係。
b.獨具魅力的主題的設計
不同的主題表達了不同情感,作為設計師我們要時刻觀察當下環境變化,當然同時針對不同的社會群體的設計風格也會有所不同。我們這裡以節日為例,在每年的重大傳統節日期間,各大平臺都會為其設計相應的主題設計。例如每年春節的淘寶的主題設計:
淘寶對春節進行了專門的主題設計,從傳統節日風俗中提取元素進行設計。主題設計可以體現出產品富有文化內涵,並滿足了使用者對於節日氣氛的訴求。讓使用者覺得這個產品文化底蘊厚實,值得深交。
c.幽默的展現形式
幽默風趣的展現形式,能夠迅速的引起使用者的注意,激發情感共鳴,留住使用者,提升使用者的參與度。我們以鬥魚的興趣群為例:
例如鬥魚將興趣群的功能名稱是“車隊”,通過這種詼諧幽默的方式表明了該功能的使用者群體是一群志同道合的老司機,讓使用者忍不住上車。
d.暖心的文案
溫暖,貼心的文案設計能夠為冰冷的頁面注入感情的元素,通過精心設計的文案也可以快速實現與使用者的情感交流,引起情感共鳴,加深使用者對產品的認可與喜愛。我們經常用到的使用場景有訊息提醒、報錯、運營活動等等。這裡我們以微信支付的運營活動為例:
微信支付通過生活消費的點滴來引發使用者情感的觸點,引起情緒的共鳴。例如上圖,微信支付的醫藥費,會讓人聯想起自己生病的時候,會感受到悲傷情緒,而主文案部分則是提醒使用者“多運動,關注健康”,在悲傷的情緒對比下這句文案顯得格外有“溫度”。讓使用者感到這是一個十分具有人情味的產品,是一個能夠長久陪伴的夥伴。
a.首先我們要明白情感設計是把握和激發使用者的情感,而不是設計師的情感抒發!
b.情感設計具有時效性,例如主題設計,隨著時間的流逝,節氣環境也會發生變化沒我們要實時更新相應的情感設計
c.情感設計要以實際功能和業務為基礎,因為即使設計樣式再暖心,但功能無用,也會瞬間被使用者拋棄的。
d.情感設計要注意意境的把握,例如幽默或者創意的展現形式,並不能適應所有的場景之下,我們需要考慮到使用者當下的使用環境,否則及其容易引發使用者的不滿。
情感設計並不止一個 IP 形象那麼簡單,而是體現在產品裡的方方面面。設計上從簡單的色彩、佈局到複雜的多種組合元素都是情感化表達;行為設計上我們要考慮到產品的功能效率和介面的互動邏輯是否能夠滿足使用者的需求;最後是反思設計,我們需要和使用者談一場馬拉松式的愛情,可以通過有趣的創意、幽默的展現形式和暖心的文案等方式來加強與使用者的聯絡。
參考連結
深入瞭解情感設計
https://zhuanlan.zhihu.com/p/20323441
介面情感化設計
https://zhuanlan.zhihu.com/p/43085292
情感化設計