每個(gè)用戶體驗(yàn)設(shè)計(jì)師都要懂的UX移情圖

Empathy，同理心，或者說移情，是UX設(shè)計(jì)師在為產(chǎn)品進(jìn)行用戶體驗(yàn)設(shè)計(jì)的時(shí)候，最強(qiáng)的能力和工具之一。移情是人類情緒和心智中最重要的功能之一，在很多時(shí)候，它是產(chǎn)生情感共鳴和理解的基石，它也是改善用戶體驗(yàn)的重要途徑。

通常我們所說的換位思考，就是移情。借助移情，設(shè)計(jì)師站在用戶的角度來看待問題，了解用戶的需求，理解用戶的心態(tài)，這是改善用戶體驗(yàn)的第一步。

在設(shè)計(jì)的時(shí)候，設(shè)計(jì)師常常會(huì)使用移情圖來進(jìn)行UX設(shè)計(jì)。

什么是移情

在了解移情圖之前，先得了解什么是移情。IDEO 首席執(zhí)行官 Tim Brown 在《Change by Design》這本書中是這樣寫到的：“我們思考和用戶之間的關(guān)系的時(shí)候，不應(yīng)該是‘我們對(duì)他們’，也不是‘我們代表他們’，而應(yīng)該是‘我們同他們一起’。”

而移情不僅僅是需要設(shè)計(jì)師站在用戶的角度，還需要穿上他們的衣服，身處用戶的環(huán)境，基于用戶所面對(duì)的真實(shí)需求，只有在這樣的狀況下，你才會(huì)真正體會(huì)用戶的痛點(diǎn)，這樣才能夠真正提供有效的方案，幫他們擺脫問題。為什么一定要這樣呢？很簡單，身臨其境你才知道這個(gè)時(shí)候應(yīng)有的想法，使用什么樣的語言，闡述什么樣的感受。

這些就是移情所能做到的事情。

移情圖是什么

了解了移情之后，移情圖就不難理解了。移情圖是UX設(shè)計(jì)過程中的重要素材，是幫助團(tuán)隊(duì)中的設(shè)計(jì)師和非設(shè)計(jì)師可視化地理解用戶的需求。在制作出可交互的原型之前，它便會(huì)加入到工作流程當(dāng)中，更好的指引團(tuán)隊(duì)進(jìn)行用戶體驗(yàn)設(shè)計(jì)。

UX設(shè)計(jì)師使用移情圖更好地勾勒出他們的目標(biāo)受眾，值得一提的是，它并非是用戶角色（personas），但是可以和用戶角色協(xié)同工作。

在制作移情圖之前，也務(wù)必先創(chuàng)造一個(gè)用戶角色。下面是具體的做法。

如何創(chuàng)建移情圖

首先，你需要將你團(tuán)隊(duì)中的成員和利益相關(guān)者都集中起來，全過程大概需要1個(gè)小時(shí)左右，在白板上勾勒出一個(gè)預(yù)定義的用戶角色。

接下來，就可以繪制移情圖了。移情圖通常被劃分為4個(gè)象限，這四象限通常分別代表想法和感受/所見/所聽/所做 四個(gè)方面。

• 他們的感受和想法。這里寫的是用戶的愿望，希望和期待。他們有什么樣的想法？什么東西讓他們覺得舒服和高興？什么東西是他們不喜歡的？
• 他們聽到了什么。他的朋友們都告訴了他什么？他的朋友、同事、家人都在說什么？在這個(gè)社交媒體爆炸的時(shí)代，意見領(lǐng)袖們都在說什么？
• 他們看到了什么。他們周圍的環(huán)境中有什么？他們平時(shí)會(huì)看到什么？市場提供給他們什么？
• 他們說了什么，做了什么。他們的態(tài)度，他們的行為都是什么樣的？

除了這4個(gè)象限之外，你還可以增加兩個(gè)部分，一個(gè)是用戶痛點(diǎn)，一個(gè)是目標(biāo)和收獲。前者概括了用戶所碰到的主要的困難和障礙，后者是用戶希望達(dá)成的目標(biāo)。

關(guān)于用戶痛點(diǎn)，比如用戶很難在一個(gè)網(wǎng)站中找到他想要的內(nèi)容，這使他感到沮喪；關(guān)于用戶目標(biāo)，可以是在5分鐘甚至更短的時(shí)間內(nèi)買到春運(yùn)回家的高鐵票。

移情圖長什么樣？

同樣還是拿實(shí)例來做說明，比如你正在設(shè)計(jì)一個(gè)專門銷售演唱會(huì)和相關(guān)活動(dòng)的票務(wù)系統(tǒng)。

首先你得記住一件事情，就是你不需要在移情圖上耗費(fèi)太多的時(shí)間，你只需要花費(fèi)半個(gè)小時(shí)到一個(gè)小時(shí)來完成這個(gè)部分的工作就行。你可以預(yù)先設(shè)定一個(gè)用戶角色，然后基于這個(gè)角色來勾畫整個(gè)移情圖：

充分發(fā)揮你的移情能力，設(shè)身處地地基于Jane Doe 這個(gè)角色來構(gòu)思她的所想，所看，所聽和所做，接下來你應(yīng)該就有更好的辦法來幫她解決問題。當(dāng)你完整地將移情圖勾畫出來之后，你再基于圖中的內(nèi)容來構(gòu)思解決方案。理想情況下，你可以將注意力集中在用戶需求上，幫她實(shí)現(xiàn)愿望。

移情圖對(duì)于UX設(shè)計(jì)的好處

移情圖的優(yōu)點(diǎn)在于，它讓設(shè)計(jì)師來重新審視用戶所處的狀況，理解用戶的問題和他們的世界觀。它的優(yōu)勢還包括：

• 易于創(chuàng)建，足夠快速
• 可以和原型設(shè)計(jì)的工作流程結(jié)合起來
• 可以通過調(diào)研迭代出盡可能貼近真實(shí)的數(shù)據(jù)
• 可以用來確定關(guān)鍵性的問題
• 更好的理解目標(biāo)用戶

無論創(chuàng)建一個(gè)新的網(wǎng)站還是新的APP，如果設(shè)計(jì)師沒有同理心，產(chǎn)品和用戶的真實(shí)需求是很難對(duì)接起來的，這樣必然會(huì)將產(chǎn)品導(dǎo)向失敗。當(dāng)然，移情圖在整個(gè)產(chǎn)品設(shè)計(jì)中是一環(huán)而非全部，它能夠指明產(chǎn)品UX設(shè)計(jì)的方向，降低用戶在使用過程中的挫折感，幫助產(chǎn)品更上一層樓。

結(jié)語

移情是一種性價(jià)比極高的了解用戶的方法，它即是創(chuàng)建優(yōu)秀產(chǎn)品的重要途徑，也是一種培養(yǎng)設(shè)計(jì)思維的有效方法。

【2018年設(shè)計(jì)趨勢，一個(gè)都不要錯(cuò)過】

1. 《2018年，這10個(gè)LOGO設(shè)計(jì)趨勢值得你關(guān)注》
2. 《超全面總結(jié)！2017年UI設(shè)計(jì)領(lǐng)域流行過這21個(gè)設(shè)計(jì)趨勢》
3. 《掌握這12個(gè)移動(dòng)端UX設(shè)計(jì)趨勢，你就掌控了2018年》
4. 《這款獨(dú)特的紫色，是為你指引2018年設(shè)計(jì)方向的年度潘通色》

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com