3個層面分析:情感化設計怎么做?

11 評論 33254 瀏覽 153 收藏 26 分鐘

這篇文章跟大家分享了情感化設計的思路和方法,并結合豐富的例子,讓大家更直觀的感受情感化設計,以及情感化設計的妙用。

時至今日,大家都已經深切的明白情感化設計的重要性和必要性。但毫不客氣的說,情感化設計依然是很難的一個環節,即使掌握了情感化設計的理論基礎和設計思想,卻時常還是感覺不知道從何下手,就需要結合大量的案例來具體領會。情感化設計的理論基礎已附在文末《情感的藝術—諾曼·情感化設計》

一、案例分享:諾曼《情感化設計》的三層理論模型

下面以諾曼《情感化設計》的三層理論模型為依據,分別介紹每一層級上的設計案例。

1. 本能層

(1) 俏皮的設計

可口可樂的營銷案例:字可能看不清,左圖寫著“你算老幾”,當喝完可樂就會看見答案“我的知己”

(2) 情景化設計

這是蘋果的天氣設計,很多天氣類軟件都有類似的設計:展現的情景跟當前的天氣狀況是實時對應的,白天云朵會飄,晚上甚至能看見星星。

(3) 彩蛋給人驚喜

Chrome瀏覽器搜索“滅霸”,點擊右上角的“超能手套”,網頁開始消失。真的有一種滅霸打個響指的感覺。如果聲音外放,還能聽見音效。

(4) 小變化給人新意

下圖分別來自B站、微博和即刻。在點贊后會發生一些與眾不同的變化,給人帶來新意。

B站會出現B站小電視、微博再給林志玲點贊后會出現vow的表情、即刻更是喂貓前后分別用小魚和魚骨代替。不同情境下點贊,還會出現不同的動態效果。

(5) 別出心裁的設計讓人眼前一亮

一加用小人托起卡針,雖然好像并沒什么作用,但能感覺到設計師用心了,用心的產品總能讓人放心。

一加

(6) 安全感

readme、Bilibili在輸入密碼的時候,會遮住眼睛,我試著感受下潛臺詞:我不看,你放心輸入吧。

readme

Bilibili

(7) doodle情感化設計

doodle先特指在logo上進行的一些創意表達,Google在這方面玩得最早也最多。

(8) 擬人化

Bilibili極力地在打造二次元形象,甚至能感覺到兩位小姐姐的身高、體重、性格、心情,在Bilibili中就像有兩位小姐姐一直在陪伴著。

Bilibili

夸克瀏覽器語音助手界面,兩只眼睛忽閃忽閃的,可愛極了,像一只小精靈。

夸克

(9) 小游戲

Google瀏覽器在斷網的時候會出現小恐龍游戲,也是很有趣。

Google瀏覽器

(10) 微動畫

以google pay為例,它為每一筆交易獎勵一張刮刮卡,這個微動畫增強了感知。

google pay

2. 行為層

(1) 充分考慮用戶使用場景

Word模式網絡小說,這簡直是摸魚神器啊,我是不會告訴你這是鳳凰網書城的。強烈建議知乎加上,這樣我摸魚寫文章的時候,就不用先在Word寫好再復制過來了,類似的操作還有網易云閱讀。

還有酷我音樂的這個“節奏燈光”把我逗笑了,它會根據節奏或者人聲來控制閃光的頻率,配合DJ食用效果更佳:“如果我是DJ你會愛我嗎?”

酷我音樂

(2) 貼心關懷

騰訊視頻在夜深的時候,頂部會出現提示:夜深了,并帶上時間。雖然并沒有什么卵用,我還是會繼續看,但那一秒真的被觸動到了。

騰訊視頻

我知道美團外賣只是想促進轉化,但這樣恰逢時宜的提示,就不至于讓人非常反感。

美團外賣通知

網易云音樂居然知道我生日,還讓我挺意外的,不知道哪里泄露了隱私。不過先不管這么多,聽聽推薦的生日歌還是挺有感覺的。

網頁云音樂生日提醒

(3) 進度提示

很多產品的成功頁都會有個流程展示,流程的展示能給用戶以確定的預期,從而消除因不確定而帶來的焦慮感。

這里再舉個Zenly的例子:在加載聯系人的過程中,會不斷地出現新的文案并配合不同的表情。本來枯燥的等待過程,變得有趣起來,不然我可沒有耐心等待那么長時間。

(4) 文案

Medium提醒我登錄的文案與眾不同:先是給我道歉:“抱歉打斷你了”,非常有禮貌,不過確實是打斷我了,因為我當時正打開一篇新的文章。

緊接著灰色小字寫著:“我們發現您以前在Medium閱讀過,這里有個個性化的體驗等著您,只需點擊幾步即可,現在去創建屬于你自己的Medium嗎?”

文案寫得好才不至于那么令人反感,如果是很生硬的登錄提示,當時我就直接點關閉了。

Medium

還有各種各樣風騷賣萌的文案:

夸克:網頁大師乘坐著404航班去追尋詩和遠方了。

Colorful Pro:梧桐更兼細雨,到黃昏,點點滴滴。

webflow:嗯哼……那個藍色的按鈕一定很重要……

(5) 反饋

這里先舉個QQ音樂、網易云音樂和蝦米音樂在無音樂版權情況下的反饋:

  • QQ音樂:我們的目標是星辰大海,哪里不滿意的告訴我,我買!——土豪有錢任性
  • 網易云音樂:這事不賴我,合作方要求的,我替你找合作方說理去!
  • 蝦米音樂:這事咱低調處理,沒版權我也沒辦法,給您道歉了。

傳達出來的態度完全不一樣。

這三個反饋都是截止到2019.7.10的最新版,上一版是這樣:

  • QQ音樂:一如既往的壕氣十足;
  • 網易云音樂:大哥饒命,我們一直在努力;
  • 蝦米音樂:我們一直在努力,可否先看個MV先。

其實我更喜歡網易上一版的文案,語氣弱一些并用了個可憐的表情,弱勢的語氣更能獲得諒解。

還有各種各樣反饋的例子:微信轉賬如果兩筆金額一致,會出現確認框,避免誤操作。

微信轉賬

iPhone充電,如果充電口存在液體,會出現安全提示。

iPhone充電提示

QQ音樂會員到期提示,用了我最愛的偶像周杰倫,并改編了周杰倫的歌詞作為文案,讓我感覺很親切,雖然依舊是變成花樣騙我錢,但這次并沒有那么抗拒。

QQ音樂會員到期提示

3. 反思層

(1) 情懷

張小龍的七星級產品—QQ郵箱,在登錄的時候總會隨機的出現一句話。

有時候是許巍的《藍蓮花》、有時候會是兩歲小孩的一幅畫、有時候是一句名言……但下面這句話有點風騷,我不敢翻譯:“Across the Great Wall we can reach every corner in the world.”

QQ郵箱

(2) 回味

扇貝是我天天用的一款軟件,它每天都會帶來一幅很精美的圖片和一句讓人回味無窮的話。每天打開扇貝,感覺又開啟了有逼格的一天。

扇貝啟動頁

(3) 價值觀和社會價值

Bing搜索和騰訊網404 no found界面用來做走失兒童公益。為了能讓大家看得更清晰一些,這兩張圖我就不縮小了,希望寶貝能盡快回家。

Bing搜索

騰訊網

丁香園404 no found界面展現了因惡性醫患遇害的同道,向他們表示哀悼。

丁香園

(4) 人文關懷

下圖分別來自Pinterest和微信,Pin在搜索輸入depress、suicide等極度負面情緒詞匯的時候,會出現“Can we help”提示,告訴用戶這些圖片會讓人情緒低落,如果你或別人正在經受困難,甚至想自殺或者傷害自己,我們可以幫助你,你并不是孤單一個人。

這正體現了一個企業的社會價值。

在Facebook修改了自己的感情狀態,看到了這樣的一則官方幫助貼,有點暖心了。

Facebook

在淘寶搜索穿山甲,心里一驚,居然有搜索結果,然后……

給阿里點個贊吧,還是希望全民都能建立起保護意識,也希望盡快研制出新型藥物。讓我們一起來保護這個可愛的小家伙吧。

在淘寶搜索穿山甲

好例子太多了,以后有遇見好的例子會繼續更新。

這里需要說明的是,無論是在哪一層級上的設計,都會對其他兩層產生影響。

比如一個好看的界面設計,會讓用戶更能接受并理解他,從而得出這個產品不錯的結論。也就是說,情感化設計是整體性的,設計的時候都是需要綜合考慮的,不存在只針對某個層級的設計。只是說諾曼將“情感化設計”分為三個層級后,讓我們找到了設計的側重點,更加方便我們設計了。

比如我們可以從本能層為切入點切入,思考得到一個設計方案后,再通盤考慮對行為層和反思層的影響,最后通過修正得到一個更恰當的解決方案。 下文根據層級對案例進行分類,只是為了更方便的進行闡述。

二、什么是情感化設計?

這是個老生常談的問題,所謂的情感化設計就是以用戶情感角度為出發點的設計方式,以期讓用戶和產品發生情感上的連接。

現在流量明星都在努力塑造自己的人設,并主動頻繁更新動態,讓粉絲能更輕易的與自己互動,并發生情感上的連接。他們已經不像老一輩明星那樣讓人感覺遙不可及高高在上,反而讓人感覺親密無間,這些青春靚麗的小哥哥小姐姐成為了多少人的云戀愛對象。

產品也一樣,早就不應該是冷冰冰的機器。我們也應該給產品一個性格:逗逼、小可愛、穩重大叔、極客、情懷、可靠……

這些有血有肉有溫度有感情的產品,更能讓用戶產生情感上的共鳴。每個人都喜歡跟自己趣味相投的人在一起,對待產品也一樣。

三、情感化的設計思路是什么?

我查閱了大量資料,也跟做用戶體驗的同事交流后發現,確實業內現在并沒有一個統一的標準化的設計思路。但幸運的是,我們浸淫情感化設計多年,形成了一套我們覺得切實可行的情感化設計思路,今天就將其傾囊相授:

1. 首先需要明確目標,不是為了情感化而情感化

作為一個設計團隊,我們要先明確當前急需解決的問題,有策略有節奏的進行執行,大家方向統一目標一致,這樣才有可能高效產出,并取得高分答卷。

假設:現在的目標是提升產品的品牌認知。

2. 提取情感化關鍵詞

我們需要找到用戶情感的訴求點,或者我們想傳達的情感價值觀。并將這些關鍵詞提取出來,作為設計的核心關鍵詞。

假設:提取的情感化關鍵詞是活力、陽光和親和。

3. 尋找切入點

切入點有非常多,比如統一的視覺系統、文案語言風格、驚喜感、趣味性、微交互等等。

假設:我們以統一的視覺系統入手,可以對logo、色調、視覺元素、圖片、插畫等進行整體升級。

4. 具體方案細節設計

我們對找到的切入點進行全盤的把握,然后再逐個擊破,最后形成新版的情感化的設計方案。

以上是情感化設計的思路,總結起來就是如下:

情感化設計思路

四、情感化設計的作用

情感化設計的作用有很多:

  1. 情感化設計可以緩解用戶的負面情緒。比如等待、產品出bug、無內容空白頁、斷網、服務器失聯、錯誤操作等等;
  2. 情感化設計可以引導用戶行為。情緒是可以影響用戶的感知、決策甚至是記憶的。我們可以利用這一點,比如當用戶完成某項任務時,心理處于愉悅狀態,我們就可以引導用戶到應用商店給我們五星好評。再比如如果用戶要注銷賬號時,賣個萌,是否可以讓用戶再考慮一下;
  3. 情感化設計可以提升品牌認同。持續的正面情感反饋,會讓用戶欲罷不能,并將這種情感投射到品牌上。這種極強的情感認同,會讓用戶產生極強的忠誠度;
  4. 情感化設計可以促進增長。這是一個潛移默化的過程,好口碑自然會有好增長。

有個誤區:情感化設計大家似乎都在追求正向的情感,但實際上負面的情感也不是不能用。

比如緊迫感:紅包有時限、下單必須多長時間內支付。

心理學上的解釋就是,當人類處于負面情緒時,會更集中注意力去解決當前的困境;當人類處于正面情緒的時候,思維會更開闊更有創造力。這也是人類進化而來的結果,正所謂飽暖思淫欲,饑寒起盜心。

這也是為什么常常有產品經理抱怨:明明這個按鈕那么明顯,用戶為什么看不見呢?因為當用戶處于困境的時候,真的就是進行重復操作,而讓自己處于死循環中,最后無奈退出,退出的時候還要罵一句這產品真笨蛋。

還有個使用負面情緒的例子是共享按摩椅。

它的喇叭剛好就放在頭枕的位置,喇叭里面循環播放著廣告詞。正常路過的時候,并不會感覺很刺耳,但只要人往那一坐,是戴上耳機也無濟于事;想瞇一會兒,被這廣告詞吵得睡不著,但又不想放棄這么舒服的座椅;最后在幾經掙扎下,還是乖乖掃碼買單按摩了。仿佛耳邊飄來一個聲音:這個問題充錢就可以解決了,都是被人算計好了的。

五、情感化設計的風險

情感化設計的好處很多,但它的缺點也會對產品造成很大的傷害,我們不能不了解情感化設計的風險:

1. 情感化設計存在時效性,一時新穎的設計,可能很快就會過時;

2. 每個人成長環境不同、理解力不一樣,這導致情感化設計存在較強的主觀性。有人覺得還OK的設計,另外一撥人甚至感覺受到了冒犯;

比如下面優酷贈送會員的浮窗,理性看用戶領取會員是最佳選擇,優酷也想從文案上讓原本二選一的選擇題變成唯一答案的必選題。但這一句“不要了,我愛看廣告”讓我感覺受到了羞辱和嘲笑。我選擇都不選,退出并清理后臺。

優酷視頻

3. 情感化設計有時候會影響產品的可用性。因為它在分散用戶的注意力,處理不好的話,反而會讓用戶偏離重心;

4. 全球化的產品,一定要考慮到不同國家地區、不同種族和不同文化背景的感受。

從小眾產品做到大眾產品,情感化設計越來越難,因為眾口難調。每一次設計,都會有人跳出來反對,甚至同一個人,因為他自己心情的變化,也可能對同一個設計作出相左的評論。

為了讓我們更安全的進行情感化設計,我們總結出了一些原則:

1. 在不常見的頁面做情感化設計,比如登錄注冊頁、退出登錄、空白頁、斷網、弱網、服務器失聯等邊界場景,還可以在產品引入新功能時,用戶完成里程碑式操作或成長時;

2. 結合節假日或值得紀念的日子出現情感化設計;

3. 盡量采用細微的變化;

4. 不要欺騙用戶情感。

我收到了即刻的一條通知“你好,我們應該認識很久了?!蔽乙患?,這會是誰呢?慕名而來?

結果打開一看,是即刻的新功能介紹。那一刻我感覺到了欺騙。

即刻

5. 不要太刻意,無意間的發現更能讓用戶驚喜。也可以準備一些彩蛋,給用戶不期的驚喜。

6. 不要干擾用戶主線操作。

7. 只做適合自己的情感化設計,不要為了情感化而情感化。情感化設計是飯后甜點,不能當正餐。

以上。

 

本文由 @湯涌 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 太棒了 后天考研復試 希望能夠幫助到我

    回復
  2. 看完驚嘆原來還有那么多那么細節而且有效的設計

    來自貴州 回復
  3. 感謝大佬無私分享

    來自江蘇 回復
  4. 寫得不錯哈,認真閱讀到最后。

    來自浙江 回復
  5. 好看

    來自浙江 回復
  6. 贊賞

    來自浙江 回復
  7. 寫的很贊,理應讀到最后 ??

    來自湖北 回復
    1. 真心感謝你們的支持,太感動了(*^.^*)

      回復
  8. 只做適合自己的情感化設計,不要為了情感化而情感化。情感化設計是飯后甜點,不能當正餐。

    以上,有道理66666

    來自廣東 回復
    1. 哇,能讀到文末的都是真愛啊

      回復
    2. 這里有個真愛 ??

      來自上海 回復