UI設計中的情感化設計

心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗；只有當產品觸及到用户的內心時，使他產生情感的變化，那麼產品便不再冷冰冰；他透過眼前的東西，看到的是設計師為了他的使用體驗，對每一個魔鬼細節的用心琢磨，人們會產生愉快、喜愛和幸福的情感。

情感化設計並不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用户獲得愉悦的使用體驗；讓設計變得高級不僅僅是視覺層面，這些簡單而美好的設計細節充滿了積極情緒，它是滿足產品的功能性和易用性之後，追求更高層次的目標。

一、提示性文字

語言是情感化設計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用户的好感，賦予產品的新的生命力；例如App那些push推送通知，因為用户每天收到的PUSH實在是太多了，早已心如止水！

這個時候，你就需要一條成本低、效率高的PUSH文案，去撩動用户主子們的心；將原本對用户的打擾變成一種逗趣，讓人看到會心一笑。

二、下拉刷新

下拉刷新是用户在App使用中經常進行的操作，常見的下拉刷新設計是圖標加文字的形式，這種設計簡單、直觀，但毫無設計感，不能引發用户任何的情緒。

下拉刷新是一種臨時狀態，豐富它的設計細節不會造成與產品界面的格格不入，相反，一個富有設計感的下拉刷新設計能讓產品獲得用户的好感；例如uc頭條在下拉刷新時會蹦出一隻奔跑的小鹿，暗示正在快馬加鞭的加載新內容，小鹿形象延續了品牌logo。

作為資訊類產品，內容更新速度至關重要，奔跑的小鹿正好隱喻了這一點；用户也在這種快樂的情緒中對產品產生好感，瞬間就讓下拉刷新變得生動有趣。

三、頭像設計

個人中心頁與用户信息密切相關，用户的虛擬形象在這裏得以展現，常見的設計是一個用户頭像加登陸文字的形式，這種默認的頭像設計無法得到用户的認同感。

現在很多的產品已經放棄了死板的默認頭像，給用户更多的選擇。

賦予產品一些人格魅力，可以讓產品富有生命力，消除人機界面的冰冷交互，幫助用户和產品建立友好的聯繫；例如美團外賣和躺平，它們各自的身份都代表了產品的氣質和用户的屬性，讓用户產生一種身份的認同感。

四、缺省頁化解負面情緒

通常狀態是當前頁面沒有內容或無網絡狀態下出現的頁面。

常見的設計是圖標加提示文字的形式，這種簡陋的設計會給用户心理造成很大的落差，陷入負面情緒中；情感化設計在此時就可發揮巨大的作用，它通過設計手段來減輕用户在看到一個毫無內容的界面時所產生的挫敗感。

設計師可發揮的空間很大，根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容；例如躺平的空白頁呈現出一種賤萌的場景，讓用户會心一笑，使產品充滿了趣味性。

五、標籤欄微動效

情感化設計變得越來越豐富，圖標設計上升至可以展示動畫效果；通過動效的使用，標籤欄切換變得不再死板。

用户在頻繁切換頁面時，不再覺得單調；精心設計的動態效果，能夠緩解用户等待時焦躁的心情，從心理上縮短用户等待時長，讓品牌更加深入人心。

六、模擬用户行為

如果一個產品可以模擬用户的行為，將用户代入真實的情境中，用户就會對產品產生深刻的認同感；例如「潮汐」會根據時間場景和季節變化，播放不同的背景音樂來營造氛圍；雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。

情感化設計可以拉近用户與產品之間的距離，在更深的層面體現出對人性的關懷，為人們帶去情感上的愉悦和感動。

洞悉用户的行為，換位思考去滿足用户的需求，情感交流就產生了；例如當你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預知了你發截圖的需求。

再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。

在「淘票票」上購買電影票時，你會發現影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現在影片的什麼位置；有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。

七、有趣的細節設計

俗話説：有趣的靈魂萬里挑一，可見有趣是可以引發交流進而讓人們產生積極的情緒。

在UI設計中，有些有趣的設計是隱形的，需要用户自己去發現，當用户找到這顆彩蛋時，就會獲得一份喜悦和樂趣，增強用户對產品的探知慾；例如在電腦端打開B站的鬼畜區長按這個返回圖標10秒左右，你會打開鬼畜區的新世界(⊙o⊙)（友情提示：記得戴上耳機或調小音量）其實長按「返回」10秒後網頁下方會出現一條黑框提示「嘗試輸入字母，發現鬼畜秘密」；按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕！

有些有趣的設計又是顯性的，目的是讓用户與產品引發交流從而產生積極的情緒；例如成為優酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發彈幕時使用劇集相關角色的頭像；帶角色扮演頭像的彈幕，讓發言更有劇集代入感。

這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性，一方面也豐富了彈幕區的多樣化，可謂一舉兩得了。

總的來説：UI設計的“高級感”意味着在視覺層面要從細微之處着手，創造出精緻富有設計感的畫面；而另一方面要從情感化設計出發，使用户與產品產生情感上的共鳴，獲得更高層次的使用體驗。

作者：Fyin印跡；公眾號：印跡拾光

本文由 @Fyin印跡 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議