從這4個(gè)角度，做出情感化設(shè)計(jì)的產(chǎn)品

情感是我們生活中不可割舍的元素，UI設(shè)計(jì)師也開始在設(shè)計(jì)時(shí)添加「情感化元素」，但是我們忽略掉了一個(gè)最基本的問題，為什么要做情感化設(shè)計(jì)？產(chǎn)品能在情感化設(shè)計(jì)中得到什么？

解決問題之前，我們需要了解一下情感化設(shè)計(jì)的概念。

情感化設(shè)計(jì)是基于產(chǎn)品的功能性和易用性后，追求的更高層次的目標(biāo)。我們只有先了解產(chǎn)品的邏輯，全面理解分析后，才能做出不影響產(chǎn)品功能下的情感化設(shè)計(jì)。

早在2002年，美國認(rèn)知心理學(xué)家Donald Norman就提出了這一概念，他將產(chǎn)品特質(zhì)劃分為功能性、有用性、易用性和愉悅性四個(gè)層面，由低到高，而情感化設(shè)計(jì)則處于頂端位置。

好了，現(xiàn)在大家已經(jīng)有了一個(gè)初步的認(rèn)知，下面我來為大家解答剛才的問題。

一. 向用戶傳遞情感心流

心流，也就是沉浸式體驗(yàn)。E Sherman在《Flow:the psychology of optimal experience》中提到了沉浸式體驗(yàn)，沉浸就是讓人專注在當(dāng)前的目標(biāo)（由設(shè)計(jì)者營造）情境下感到愉悅和滿足，產(chǎn)生共鳴，忘記真實(shí)世界的情境。

設(shè)計(jì)師會通過畫面、氛圍、圖形、文案、動效和音樂等方式，以營造出符合當(dāng)前環(huán)境的情景，幫助用戶快速融入其中。

沉浸式體驗(yàn)最常見的方式是向用戶講故事。故事是處理信息的一種方式，將某些操作、信息通過故事的方法傳遞給用戶，讓用戶產(chǎn)生相同的情感共鳴，進(jìn)而被吸引，對它的印象更加深刻。

我們以Sortie En Mer為例。Sortie En Mer是一個(gè)模擬溺水的網(wǎng)站，是為Guy Gotton宣傳航海服的，游戲宗旨是教育人們出海一定要穿救生衣。在交互上與其它同類網(wǎng)站不同，這一部分是以第一人稱的角度來簡述故事和經(jīng)驗(yàn)。

故事很簡單，主人公在航海的過程中從船上落下后掙扎到死亡的過程，加上音樂的烘托，會感到更加絕望。畫面由明亮到暗沉，也暗喻來主人公體力不支。

同類主題的網(wǎng)站，大多只單純的展示服裝的特性和防水材料相關(guān)的技術(shù)數(shù)據(jù)。Sortie En Mer在普通的交互邏輯上進(jìn)行了情感化設(shè)計(jì)，將一個(gè)海上發(fā)生意外的故事，通過訴說傳遞給用戶，讓用戶有身臨其境的參與感，營造融入其中的感覺。

二. 塑造友好的形象

通常我們認(rèn)為產(chǎn)品是冷冰冰的，但是優(yōu)秀的產(chǎn)品，并不是冷冰冰的毫無情感，它仿佛就是一個(gè)活生生的生命，具有個(gè)性，人們更愿意與有情感有溫度的生命交朋友。

那怎樣才能做有溫度的朋友呢？我們可以通過下面兩個(gè)案例來分析。

1. 融360

現(xiàn)在很多產(chǎn)品都有自己的吉祥物，通過吉祥物去提升產(chǎn)品溫度。那么吉祥物是基于什么設(shè)計(jì)出來的呢？我們以融360的吉祥物設(shè)計(jì)為例。

首先，我們先分析一下其產(chǎn)品的構(gòu)成：融360是一款移動金融智選平臺（核心定位），用戶大都為有貸款、辦理信用卡需求的中青年群體（使用人群），交互和視覺偏向于簡單，具有普適性。

在進(jìn)行產(chǎn)品的情感化設(shè)計(jì)時(shí)，我們應(yīng)該從產(chǎn)品特質(zhì)和用戶本身出發(fā)，在研究的過程中，這兩者間有什么關(guān)系，是我們需要深入探討的問題。這種情感化設(shè)計(jì)是產(chǎn)品特征的一個(gè)展現(xiàn)，需要與其「性格、氣質(zhì)、腔調(diào)」相符。

A. 吉祥物以人形寶寶的樣子出現(xiàn)，將產(chǎn)品擬人化，消除了人機(jī)間的冰冷交互，幫助用戶和產(chǎn)品間建立友好的聯(lián)系；

B. 它為什么會是一只牛？因?yàn)榻鹑诳偸桥c牛相伴，華爾街金融街靠牛守護(hù)，用戶也會get到這點(diǎn)。
C. 牛大寶可靠、聰明，分別對應(yīng)著產(chǎn)品的安全感和智能性，與產(chǎn)品性格相符。

那具體在App中是怎樣應(yīng)用的呢？

情緒是情感有意識的體驗(yàn)，它有目標(biāo)性，通常也有原因，比如當(dāng)用戶在輸入信息時(shí)，會產(chǎn)生煩躁心理，為了降低這種反感，我們用一個(gè)有情緒感的icon來緩解?；蛘弋?dāng)用戶在退出時(shí)，用一個(gè)賣萌的表情去挽留用戶。

情感化設(shè)計(jì)可以加強(qiáng)用戶對產(chǎn)品氣質(zhì)的定位。就是由于牛大寶與產(chǎn)品極其相似，更能夠被大眾所接受，才一躍成為了「金融網(wǎng)紅」。

2. same

Same是一款針對年輕人的、去中心化的社交平臺，類似于豆瓣、微博等，但又不完全相同。因?yàn)橛脩羧巳旱哪贻p化，所以整體以輕快、簡潔為主。

我真的超級喜歡Same的小人icon，每一個(gè)icon都感覺「活了」。在加入情感化設(shè)計(jì)的同時(shí)，也考慮到了核心元素在每個(gè)環(huán)節(jié)的延展性，進(jìn)一步加強(qiáng)了用戶對產(chǎn)品性格的認(rèn)知。

當(dāng)然，same的情感化設(shè)計(jì)并不僅體現(xiàn)在icon上，還體現(xiàn)在各種地方。比如說話題、banner設(shè)計(jì)。

向用戶數(shù)樹立友好的形象，不單指icon多么精美、界面樣式多么流行、配色多么好看。而是通過情感元素所傳達(dá)出來的信息和氣質(zhì)，與整個(gè)視覺設(shè)計(jì)保持一致，且區(qū)別于競品，可以幫助用戶對產(chǎn)品有正面認(rèn)知的設(shè)計(jì)。

所以，首先要想好進(jìn)行情感化設(shè)計(jì)是想傳達(dá)什么，產(chǎn)品的立場、強(qiáng)調(diào)、氣質(zhì)和形象分別是什么。簡單的說，就是你希望用戶怎樣去認(rèn)知你的產(chǎn)品。

 

三. 成為理解用戶的朋友

從產(chǎn)品的細(xì)節(jié)出發(fā)，悉心觀察，換位思考，滿足各形各色的用戶需求和偏好。為他們帶來愉悅的體驗(yàn)，幫他們解決問題，幫他們提高效率，甚至幫了解他們的一切，成為他們最可靠的小伙伴。

隱藏的細(xì)節(jié)設(shè)計(jì)是營造驚喜，和體現(xiàn)產(chǎn)品設(shè)計(jì)逼格的地方。在產(chǎn)品某些點(diǎn)上進(jìn)行微交互和動畫設(shè)計(jì)，可以為用戶帶來較高的愉悅感。

大家有沒有厭倦千篇一律的、點(diǎn)了只會傻乎乎變色的「贊」？而Twitter是怎么做的呢？在普通的贊的基礎(chǔ)上添加了微交互，用戶在點(diǎn)贊后會得到一個(gè)動態(tài)的情感反饋，愉悅感會成倍的增加。

情感化的細(xì)節(jié)設(shè)計(jì)是為了創(chuàng)造出一個(gè)有趣的瞬間，并可以把用戶的注意力吸引到正確的位置，讓用戶在不知不覺間養(yǎng)成對產(chǎn)品的使用習(xí)慣，也可以培養(yǎng)用戶粘性。用戶在嘗試過之后，對于這種交互會有「哎呦，不錯(cuò)哦」的感覺。

設(shè)計(jì)細(xì)節(jié)，并不是單純的從UI角度去說它好不好看，而是從分析其是否可以在大的視覺體系下，將情感融入其中，輔助塑造產(chǎn)品的性格與定位。

將產(chǎn)品的細(xì)節(jié)融入情感，一是賦予了產(chǎn)品本身的調(diào)性和趣味；二是充分體現(xiàn)產(chǎn)品的定位和特點(diǎn)。它的發(fā)生并非讓用戶刻意的體會些什么，而是希望用戶可以感知到它本來就是產(chǎn)品里的一部分，從而體現(xiàn)產(chǎn)品的價(jià)值。

總結(jié)

現(xiàn)在，產(chǎn)品類型趨近，情感化設(shè)計(jì)也在趨于相同。大家應(yīng)該根據(jù)具體產(chǎn)品性質(zhì)的不同，具體問題具體分析，避免隨波逐流。

為了讓產(chǎn)品功能與用戶情感的承接，更好的滿足人們情感的訴求，我們應(yīng)該在情感化設(shè)計(jì)上持續(xù)探索與挖掘，并為之努力。