網頁或App界面的情感化設計，作為用戶體驗和需求金字塔的最高層級，越來越多的受到設計師們的關注和重視。Donald Arthur Norman， 作為享譽全球的認知心理學家和尼爾森·諾曼集團的聯合創辦人之一，也在其名為《情感化設計》的書籍中，從本能，行為和反思三個設計維度，講述 了情感在界面設計的重要地位和作用，強調web或app設計要從情感層面吸引和留住用戶，提升用戶體驗。
但作為設計師， 究竟如何才能將情感元素巧妙地融入網頁或軟件設計，使界面輕鬆擺脫冰冷的人機交流，增強界面吸引力和引導力的同時，提升用戶認同感和忠誠度呢？
首先，什麼是網頁或App UI的情感化設計？
網頁或App UI的情感化設計是指，設計師利用界面元素或元素的組合，激發和帶給用戶正面，積極的情緒反映，例如快樂，喜愛，自由等等。 一定情境下，一些設計師甚至大膽使用別出心裁的頁面設計，激發用戶負面情感（比如悲傷，遺憾等等），以求引起用戶共鳴，從而拉近與用戶的心理距離，更加高效地引導用戶，提升用戶認同感。
簡而言之，情感化設計具體包括利用彩配色激發用戶情感，或高興，或溫暖，或寧靜祥和；利用簡單易懂，自由流暢的交互設計，吸引用戶點擊或參與；以及利用暖心體貼的界面文本設計，打動用戶等等。
總之，好的情感化設計界面會讓用戶眼前一亮，迅速抓住用戶的心，讓用戶擁有更加暖心，愉悅的體驗。
如圖，利用界面所有元素，尤其是圖片和文案，向用戶傳達其產品安全而值得信賴的情感信息。
那麼，如何才能設計出充滿人情味的Web或App設計？
正如以上情感化設計定義講述的那樣，Web或App設計的每一個元素或細節都可能成為用戶情緒的激發點和源頭。那麼，設計師如何才能更加高效的利用簡單常見的界面元素，打造吸睛又不失人情味的頁面設計呢？為方便大家理解和借鑑，這裡主要從6個主要方面為大家介紹：
1). 利用視覺元素的情感化設計，打動人心
視覺設計元素也可人情味十足。具體而言，設計師可以從以下幾個方面嘗試設計：
*利用色彩吸引用戶，激發用戶情感
色彩，作為頁面視覺設計中最重要的元素之一，對於Web或App UI 能否在第一眼就吸引並留住用戶發揮著至關重要的作用。無論是單個色彩的應用，還是多種色彩的搭配使用， 例如網頁主色調，配色以及圖片文字色調的選擇等等，終究都是為了通過色彩帶給用戶不同的情緒反應，獲得不同的情感體驗。
例如，黃，紅等積極的色彩或主色調的應用，給人以熱情，青春，幸福，快樂等正面情緒，讓用戶不自覺地擁有更加積極正面的情感。而，藍，綠，黑等消極色彩或配色的應用，給人以安靜祥和，自由舒適之感，讓用戶不自覺地平靜下來，變得更加理智而有耐心。總之，利用色彩引發不同的情感傾向，是頁面設計中表達情感的重要途徑之一。
如圖，作為一款中餐廳的在線網頁設計，設計師選擇了最具東方特色的紅，黃色作為整款設計的主色調。這樣的色彩選擇不僅讓整款設計直觀吸睛，引人入勝。而且，還營造出了極具東方之美的氛圍，讓人忍不住喜愛而躍躍欲試。
如圖，以藍，白色為主色調的404報錯頁面，能夠在無形中傳遞出平靜舒適之感，從而更加有效的緩解用戶突然面對報錯時的負面情緒。
*打造清晰直觀的佈局和排版設計，拒絕煩亂和用戶反感
選擇或設計更加清晰，直觀，結構化和層次化的頁面佈局和排版，能夠讓用戶更加簡單快速的把握界面主次，從而避免雜亂無章或毫無層次重點的內容設計，帶給用戶的不快和反感。
如圖，利用更加清晰直觀，且層次結構分明的佈局和排版，突出界面主次，方便用戶更加簡單快捷的查找所需內容， 拒絕煩亂和用戶反感。
*利用網頁視覺元素的組合和對比，打造舒適，統一的設覺設計
除了利用單個視覺元素（例如色彩，圖片，文字等）吸引用戶，多種視覺元素的組合和對比，對於打造舒適，統一的界面設計，作用也是極佳。比如，通過圖片和文字的色彩，大小，位置，對齊方式，數量，以及層級的組合和對比，創建更加清晰直觀，舒適易懂的頁面設計。
如圖，通過利用Mockplus的“圖片”，“ 單行文字”以及“按鈕” 等組件的組合，結合其尺寸，位置，排版，色彩，以及對齊方式的不同，打造出視覺上舒適，統一的網頁原型設計。
此外，一定形狀，網格以及動畫的添加，也能夠非常有效地幫助設計師創建更具視覺魅力的頁面設計。
如圖，通過Mockplus的快速格子和自動填充功能製作極富視覺魅力的網格，並結合其“單行文字”和“多行文字”組件，設計出層次結構清晰，排版佈局直觀易懂的網頁原型設計，為用戶提供更加簡單流暢的體驗。
總之，把握好各種視覺元素以及元素之間相互組合的基本設計規律，有目的的營造出一定的頁面情感，從而實現與用戶情感層面的對話，給用戶留下極佳的第一映像。
2). 利用便捷流暢的交互設計，提供愉悅的用戶體驗
Web或App設計之中，交互設計不僅能夠滿足用戶需求，體現其功能性和實用性，而且還能夠激發用戶的愉悅心情，提升用戶體驗。換而言之，一款優質的網頁或應用的交互設計，不僅要簡單易懂，讓用戶輕鬆的知道做什麼，怎麼做，以滿足其需求。而且還能允許用戶自由流暢地完成交互設計，成功購買或瞭解相關軟件或產品，提供愉悅的交互體驗，加深用戶印象。
如圖，以上的交互設計，不僅讓用戶瞭解到在登錄時需要做什麼。而且，當用戶輸入密碼時，上面的動態人偶還會相應的捂住雙眼。當用戶密碼輸入錯誤時，輸入的密碼不僅會變紅，提醒用戶。 而且，人偶也會相應的給出反映。總之，整款設計給人以俏皮安全之感。可以說是十分暖心的設計了。
當然，交互設計也需要符合實際情境，再簡單流暢的交互設計，不符合相應情境，也可能引起用戶不滿而反感。
3).採用獨具魅力的設計風格和主題，打造有趣特別的用戶體驗
採用獨具魅力的頁面設計風格和主題，不僅能夠提升其頁面設計的趣味性和獨特性，還能夠極大的加深用戶對產品或品牌的印象，讓用戶戀戀不忘，從而成為軟件或產品的直接傳播者或推廣者。而設計師可以從以下幾個方面嘗試進行情感化設計：
*利用不同的設計技巧或風格，簡化或優化界面設計
如圖，簡約設計的風格，帶給用戶簡單便捷的瀏覽體驗。
如圖的實例設計，設計師可以利用Mockplus的“圖標”（Mockplus封裝了超過3000個矢量圖標的強大圖標庫，方便設計師更具需要選擇和使用）組件，簡單設計出具有扁平化設計風格的網頁原型，讓頁面更加平滑流暢，視覺層級突出，使用戶更加方便快捷的查找和使用需要的信息。
漸進式設計技巧，隱藏部分界面功能，減少界面噪音對用戶的干擾，從而讓用戶更加直觀快速的完成需要的操作。（點擊鏈接更多漸進式設計技巧）
如圖，漸進式設計技巧，對於提升網頁用戶體驗，作用也是極佳的。
總之，多樣的設計技巧和風格的應用，能夠帶給用戶不一樣的體驗。
*分析受眾特點，選擇不同的設計主題，帶給用戶不同的情感體驗
在具體的網頁或軟件設計中，設計師也要注意分析和把握軟件或產品受眾特點，選擇不同的設計主題，表達不同的情感，從而提供不同的情感體驗。例如，面向兒童的網頁或App設計，就需要更多的添加明亮色彩，可愛有趣的卡通形象，動畫以及遊戲，吸引受眾的同時，體現網站對兒童的喜愛。
*利用幽默風趣的設計，快速引起用戶注意和共鳴
幽默風趣的設計風格，最能直接快速的引起用戶注意，激發用戶情感共鳴，留住用戶的同時，提升用戶參與度。所以，在具體的情感化設計中，也可在界面設計中，嘗試多設計和添加一些幽默視頻，圖片，插畫或動畫，更加有效的吸引和留住用戶。
如圖，幽默風趣的設計風格，給人以輕鬆自由之感，應用到各種報錯頁面，能夠非常有效的緩解用戶的負面情緒。
總之，不同設計風格，技巧以及主題選擇和應用，能夠極大地簡化或優化頁面，帶給用戶不同的情感體驗。
4). 利用暖心文本設計，激發用戶好感和共鳴
直擊心靈的文本設計也是實現與用戶情感交流的重要途徑。相較於冰冷且毫無人情味的界面說明，報錯信息，通知以及反饋，帶有設計師主觀情感，溫暖，貼心的文本設計，更能激發用戶好感，引導用戶行為的同時，加深用戶對軟件和產品的認可和喜愛。
如圖，暖心的文本設計，結合擬人化的圖標設計，實現與用戶在情感方面的交流，提共更佳的情感體驗。
如圖，委婉而不失趣味性的文本設計，讓頁面更具吸引力的同時，能夠有效地緩解用戶的負面情緒。
此款Mockplus網頁原型設計，除了通過可愛的企鵝簡筆畫吸引用戶注意，而且還巧妙的添加帶有撒嬌賣萌意味的文本設計，讓用戶看完後，忍不住點擊瞭解詳情。這就是文本設計的魅力。
5). 別出心裁的創意設計，賦予網頁或App個性
創意，創意，創意！ 無論哪種設計，失敗與成功之間，差的，始終只是創意。這也是設計師們時常會在著手設計之前，大量瀏覽最新的網頁或情感化設計資源，以激發設計靈感的原因。別出心裁的創意設計，能夠賦予頁面個性和靈氣，讓用戶感受到對方是 “有血有肉的人”，而非冰冷的工具或機器。（點擊下載更多的最新設計資源和素材）
如圖， 利用文本與圖片相互呼應的創意，傳達頁面情感，達到與用戶情感層面的交流。
首先，Mockplus提供了強大的組件庫，圖標庫以及樣式庫，能夠幫助設計師快速的將設計創意原型化。而且，其提供的8種演示和分享方式，對於設計師及時測試，獲取反饋並迭代相應創意，也非常實用。
當然，如若，需要團隊協作完成某些Web或App UI的情感化設計，其團隊版和企業版的團隊協作和管理功能也是非常值得嘗試的。
6).其它打動用戶的細節設計
情感化設計，可以應用到網頁或App很多頁面設計中，以緩解用戶負面情緒，更加高效的引導用戶行為，並提升用戶對品牌的認同感和忠誠度。比如，登錄註冊，引導，反饋，加載，404報錯等頁面的細節設計，不僅能夠打動用戶，讓原本冰冷的人機交互充滿人情味，還能夠有效的促成購買，實現其商業價值。（點擊查看更多最新創意404報錯設計）
如圖，搜索框圖標變化的細節設計，讓界面更加暖心而有活力。
如圖，登錄頁面的歡迎語句的添加，讓死板枯燥的頁面多了一絲暖意。
所以，細節設計也能決定成敗。設計師在平時的UI設計中要重視每一個細節，讓界面處處都流露出真情，使用戶不忍離開。
總之，希望以上提及界面情感化設計技巧和最新設計實例，能對你有所啟發。
最後，情感化設計過程中有哪些注意事項呢？
情感化Web或App界面設計的過程中，設計師們也需要牢記一些注意事項，避免適得其反的情況出現：
*情感化設計在於把握和激發用戶的情感，而不僅僅是設計師感情的抒發
適當在設計中添加代表個人態度的圖片，文字或交互，體現設計師的情感和立場，目的是為激發用戶相應的情緒反應，引起共鳴，從而加深用戶對品牌和產品的印象，增加產品銷量，提升用戶忠誠度。但，設計師需要牢記，萬萬不能將其作為個人情感抒發，甚至發洩的平臺，過多主觀情感的添加，反而會激起一部分用戶的不滿，帶來不好的效果。
如圖，一定引語的添加，能夠有效的表明設計師的情感和立場，引起共鳴。 但過多的主觀情感的添加，則可能引起用戶反感，結果反而會適得其反。
*情感化設計具有一定的時效性
同時，設計師也需要了解：情感化設計具有一定的時效性。時代在變化，代表某一情感的象徵（例如文字，圖片，圖標，事物等），也在發生變化。所以，設計師在情感化設計的過程中，也需要考慮到這一點，適時的更新相應的情感設計。
*情感化設計要以軟件功能為基礎
*情感化設計要注意情境的把控
幽默可以給用戶帶來輕鬆愉悅的體驗，但並不是所有情景都適合幽默風趣的調調。其它情感設計風格和細節也是如此。所以，設計要注意情境的把控，避免引起用戶不滿和反感。
結語
網頁或App界面設計不再僅僅依賴於其功能性，實用性以及適用性的提高，具有更高層級的功能界面人性化設計，也越來越多的受到設計師們關注和重視，以便為用戶提供更加愉悅，暖心的用戶體驗。而情感化設計作為人性化設計的重要組成部分，對於網站能否在第一眼直擊用戶心靈，吸引和留住用戶，提升用戶認同感和忠實度，甚至在潛移默化中將用戶轉化成軟件或產品的宣傳者等等，都發揮著不容小覷的作用。
所以，設計師在Web或App界面設計中，要注意適當添加情感元素，情感化界面的各個模塊，讓冷冰冰的人機交流變得暖意洋洋，帶給用戶不一樣的情感體驗。
總之，希望以上講解的Web或App UI 情感化設計技巧，最新設計實例以及原型相關設計實例，能對你有所幫助。
閱讀更多 Mockplus摹客 的文章
