編輯導(dǎo)語(yǔ)：用戶(hù)體驗(yàn)決定了一款產(chǎn)品的用戶(hù)留存率和轉(zhuǎn)化率，好的用戶(hù)體驗(yàn)具有極強(qiáng)極簡(jiǎn)的交互能力。本篇文章中，作者分享了提升交互能力的方法；在體驗(yàn)流程中設(shè)計(jì)師該注意什么；大廠產(chǎn)品的設(shè)計(jì)案例，以及學(xué)習(xí)思路，感興趣的小伙伴不妨來(lái)看看~

一、如何提升交互能力

很多剛?cè)腴T(mén)的小朋友不知道怎么提升設(shè)計(jì)能力，其實(shí)有一個(gè)很簡(jiǎn)單的方法，那就是“收集”！

之前我做了很多次的收集任務(wù)，比如剛開(kāi)始不知道怎么做UI界面，所以收集了很多界面。

通過(guò)不同頁(yè)面類(lèi)型來(lái)區(qū)分參考素材，比如主頁(yè)、首頁(yè)，訂單頁(yè)、個(gè)人中心、列表頁(yè)。

那么所有的頁(yè)面都可以分為這么十幾類(lèi)，當(dāng)你不會(huì)做的時(shí)候就可以看看別人是怎么做的。這樣起碼就不用擔(dān)心沒(méi)有靈感了，根據(jù)不同的參考起碼可以產(chǎn)出至少2-3個(gè)方案，然后只需要判斷哪種方案更適合你的場(chǎng)景就好了～

由于有了這個(gè)界面庫(kù)，每當(dāng)部門(mén)里有同學(xué)有不會(huì)排版、布局的問(wèn)題都會(huì)來(lái)向我請(qǐng)教。當(dāng)然工作中的遇到的頁(yè)面問(wèn)題也都被我輕松解決。

隨著界面設(shè)計(jì)能力的不軟提升，后來(lái)我的痛點(diǎn)轉(zhuǎn)移到了思維能力上，為什么別人思考那么有深度？如何形成有體系的思維能力？

于是我開(kāi)始大量的閱讀文章，看看別人對(duì)于同樣的一個(gè)產(chǎn)品/設(shè)計(jì)問(wèn)題是怎么思考的。并將我閱讀后，認(rèn)為有價(jià)值的內(nèi)容分類(lèi)整理在語(yǔ)雀的知識(shí)庫(kù)里，方便后期檢索（這邊都是我看過(guò)，并精心挑選過(guò)的文章哦），現(xiàn)在已經(jīng)累計(jì)500+文章，關(guān)注人數(shù)也超500+，后續(xù)也會(huì)不斷更新優(yōu)秀文章。

也有很多同學(xué)想知道我的文章分類(lèi)方法，那這里簡(jiǎn)單說(shuō)一下，我會(huì)根據(jù)設(shè)計(jì)的工作流程主要分為：用研類(lèi)/產(chǎn)品類(lèi)/設(shè)計(jì)類(lèi)/數(shù)據(jù)類(lèi)/品牌類(lèi)/自我提升類(lèi)等等。

比如后面我開(kāi)始做B端設(shè)計(jì)，于是需要研究對(duì)于B端產(chǎn)品相關(guān)問(wèn)題，新開(kāi)了一個(gè)“B端知識(shí)庫(kù)”。也按照相同的邏輯去組織分類(lèi)。

那么今年想要突擊一下交互能力，于是開(kāi)了這個(gè)板塊收集一下好的產(chǎn)品交互怎么做的，同時(shí)也希望和大家一起分享一下。

二、體驗(yàn)設(shè)計(jì)師需要注意什么

每個(gè)用戶(hù)在使用我們產(chǎn)品的時(shí)候就像在闖關(guān)一樣，在他闖關(guān)的流程中體驗(yàn)設(shè)計(jì)師有時(shí)候是一個(gè)給他加魔法加防御補(bǔ)血條的輔助，有時(shí)候又化身為描述劇情，引導(dǎo)用戶(hù)完成下一步任務(wù)的NPC。

好的用戶(hù)體驗(yàn)，無(wú)非是基于整個(gè)用戶(hù)完成任務(wù)的過(guò)程（使用路徑）進(jìn)行優(yōu)化。這里我將流程分為三個(gè)階段：

1. 用戶(hù)行為開(kāi)始前；
2. 用戶(hù)行為開(kāi)始后；
3. 用戶(hù)行為結(jié)束后。

1. 用戶(hù)行為開(kāi)始前

在開(kāi)始前，我們需要確保用戶(hù)能找到任務(wù)的入口，且要快速方便的找到。

2. 用戶(hù)行為開(kāi)始后

在開(kāi)始任務(wù)開(kāi)始后，作為設(shè)計(jì)師我們的責(zé)任是幫助用戶(hù)完成任務(wù)。包括預(yù)估用戶(hù)的操作路線(xiàn)，避免用戶(hù)發(fā)生失誤，以及在用戶(hù)犯錯(cuò)時(shí)實(shí)時(shí)的提供幫助。

如果能在過(guò)程中，減少1點(diǎn)點(diǎn)用戶(hù)的操作難度，那就更好啦～

3. 用戶(hù)行為結(jié)束后

當(dāng)用戶(hù)完成任務(wù)了，對(duì)于一些復(fù)雜或是重要的信息，我們可以提醒用戶(hù)進(jìn)行檢查，通過(guò)二次確認(rèn)的方式減少用戶(hù)犯錯(cuò)的概率，同時(shí)給予用戶(hù)安全感。

小思考：如果現(xiàn)在需要給用戶(hù)布置“進(jìn)入一個(gè)房子”的任務(wù)，在整個(gè)流程中我們可以做什么呢～

主要就是分為下面幾步啦：

現(xiàn)在大家應(yīng)該都對(duì)體驗(yàn)流程的基本邏輯有了了解，接下來(lái)基于這個(gè)框架，我們一起看看優(yōu)秀的產(chǎn)品是怎么做的吧。

三、本期產(chǎn)品亮點(diǎn)（目錄）

1. 【IOS系統(tǒng)】放大你正在操作的

（1）使用場(chǎng)景

在Imessage中選擇表情，滑動(dòng)時(shí)，表情欄會(huì)放大。方便你看的更清楚，更好選擇。

（2）設(shè)計(jì)思考

在IOS系統(tǒng)中，這樣的交互很常見(jiàn)，如輸入時(shí)，移動(dòng)光標(biāo)，也會(huì)出現(xiàn)放大鏡方便你把光標(biāo)放到正確的字旁邊。

可復(fù)用場(chǎng)景，當(dāng)手指阻擋用戶(hù)視線(xiàn)，放大被交互的組件；當(dāng)操作十分細(xì)微，難以控制時(shí)，可以放大被交互的組件。

2. 【淘寶】收藏后引導(dǎo)商品對(duì)比

（1）使用場(chǎng)景

基于批量收藏的場(chǎng)景，當(dāng)用戶(hù)來(lái)到收藏夾。彈出比價(jià)引導(dǎo)，考慮到用戶(hù)購(gòu)買(mǎi)時(shí)存在需要對(duì)比的場(chǎng)景，這樣的做法應(yīng)該是想引導(dǎo)用戶(hù)對(duì)比商品后進(jìn)行下單行為。

（2）設(shè)計(jì)思考

1. 雖然這個(gè)對(duì)于用戶(hù)場(chǎng)景的思考是成立的，但是由于大部分人在淘寶中購(gòu)買(mǎi)的以日常用品為主?？赡懿幌耠娮宇?lèi)產(chǎn)品有那么清楚的可以用來(lái)比價(jià)的維度。比如，用戶(hù)像買(mǎi)一條裙子，一條碎花裙/吊帶裙/牛仔裙，版型/花色/價(jià)格/質(zhì)感都不一樣，其實(shí)是很難拿到一起做對(duì)比的。
2. 吸附到右側(cè)的或者是下拉的二樓，都已經(jīng)成為了一種比較常見(jiàn)的收納更多信息的組件。設(shè)計(jì)師可以將此應(yīng)用到更多的場(chǎng)景中去。

3. 【微信】步驟拆解，收集用戶(hù)反饋

（1）使用場(chǎng)景

在朋友圈上線(xiàn)廣告，對(duì)于如此大體量的產(chǎn)品，很有可能傷害用戶(hù)的情感。不同于在資訊產(chǎn)品中分發(fā)廣告，在朋友圈投廣告，就好比在你家里刷牛皮癬。

所以微信一方面嚴(yán)格控制投放的品牌，另一方面也留下反饋入口，收集用戶(hù)的聲音。

（2）設(shè)計(jì)思考

1. 當(dāng)我們要上一個(gè)比較敏感的功能時(shí)，不妨留一個(gè)入口去收集用戶(hù)反饋的，如何做到收集建議，而不打擾用戶(hù)。
2. 同時(shí)兩個(gè)氣泡彈窗之間的跳轉(zhuǎn)方式，可以讓用戶(hù)階段性的展示信息，降低用戶(hù)的心理負(fù)擔(dān)，用戶(hù)的參與度就更高了。

4. 【微信讀書(shū)】超寫(xiě)實(shí)動(dòng)效提升用戶(hù)粘性

（1）使用場(chǎng)景

在讀書(shū)過(guò)程中，用戶(hù)可以根據(jù)喜好設(shè)置翻頁(yè)的模式。這里展示的仿真翻頁(yè)，能給枯燥的閱讀過(guò)程帶來(lái)一絲趣味性。

（2）設(shè)計(jì)思考

“超寫(xiě)實(shí)”一直設(shè)計(jì)中常用的設(shè)計(jì)手法，一個(gè)成熟的產(chǎn)品，可以抓住一些關(guān)鍵細(xì)節(jié)進(jìn)行打磨，從而提升產(chǎn)品的品質(zhì)，提升用戶(hù)粘性（同理之前網(wǎng)易云的膠片/豆瓣FM的扇形切換）。

5. 【知乎】情感化文字鼓勵(lì)用戶(hù)點(diǎn)贊

（1）使用場(chǎng)景

點(diǎn)贊時(shí)，除了愛(ài)心的微動(dòng)效，同時(shí)會(huì)彈出一個(gè)toast，表達(dá)感謝。通過(guò)文字+動(dòng)效兩種方式來(lái)傳達(dá)情感，鼓勵(lì)用戶(hù)點(diǎn)贊。

（2）設(shè)計(jì)思考

用戶(hù)的行為需要被肯定和尊重，有時(shí)候一點(diǎn)點(diǎn)小的變化，就能給用戶(hù)帶來(lái)情緒價(jià)值。當(dāng)一些需要提升數(shù)據(jù)，但是并不能直接給與用戶(hù)帶來(lái)直接“物質(zhì)”好處的場(chǎng)景，就可以考慮情緒價(jià)值。

6. 【淘寶】通過(guò)動(dòng)效加深用戶(hù)理解

（1）使用場(chǎng)景

在天貓中通過(guò)結(jié)合一個(gè)簡(jiǎn)單的手勢(shì)來(lái)介紹產(chǎn)品的優(yōu)勢(shì)。如體驗(yàn)超清的放大/了解產(chǎn)品的內(nèi)部構(gòu)件/直觀的看到產(chǎn)品的新功能如何加熱食材。

相比普通的靜態(tài)圖文介紹，3D的手勢(shì)互動(dòng)，除了讓用戶(hù)更清楚的了解到產(chǎn)品的詳情外，也多了一份參與感。

（2）設(shè)計(jì)思考

作為設(shè)計(jì)師，我們都知道圖片比文字的閱讀性更高，動(dòng)態(tài)比靜態(tài)的理解成本更低（舉例我們會(huì)感覺(jué)看翻拍電影，比讀小說(shuō)會(huì)更輕松一些）。

在一些復(fù)雜功能中，可以適當(dāng)?shù)娜谌雱?dòng)效便于用戶(hù)理解。

7. 【京東】跳轉(zhuǎn)評(píng)論引導(dǎo)下單

（1）使用場(chǎng)景

在用戶(hù)瀏覽完商詳首圖后，出現(xiàn)評(píng)論模塊，點(diǎn)擊/繼續(xù)滑動(dòng)自動(dòng)跳轉(zhuǎn)到評(píng)論模塊。

（2）設(shè)計(jì)思考

如果是做過(guò)電商的同學(xué)們都應(yīng)該知道，評(píng)論對(duì)于用戶(hù)的轉(zhuǎn)化是有很大的影響力。

很顯著的證據(jù)就是，有無(wú)評(píng)論的商品的銷(xiāo)量差異是很大的，那么如何利用有評(píng)論商品的優(yōu)勢(shì)呢。對(duì)應(yīng)我們前面提到的，重要的功能可以做多入口，多路徑。

8. 【餓了么】根據(jù)不同的場(chǎng)景，在首頁(yè)展示不同的模塊

（1）使用場(chǎng)景

早上推薦早餐，晚上推薦宵夜。下單展示訂單狀態(tài)，不同的時(shí)間點(diǎn)，根據(jù)不同的用戶(hù)行為，觸發(fā)不同的展示模塊。

（2）設(shè)計(jì)思考

該設(shè)計(jì)方案符合，外露高優(yōu)功能的設(shè)計(jì)思路。

根據(jù)不同時(shí)間點(diǎn)，展示不同的卡片文案和店鋪推薦。這種類(lèi)似千人千面的展示方案，能最大化的提高用戶(hù)轉(zhuǎn)化效率。

點(diǎn)擊口快速跳轉(zhuǎn)到相應(yīng)的品類(lèi)，幫助用戶(hù)快速?zèng)Q策。

在用戶(hù)下單后的場(chǎng)景中外露訂單狀態(tài)，此時(shí)用戶(hù)最關(guān)心訂單狀態(tài)，此功能優(yōu)先級(jí)最高。不需要他再進(jìn)入個(gè)人中心去查找訂單入口，降低了用戶(hù)的操作成本。

9. 【OFO】報(bào)修操作的可視化

（1）使用場(chǎng)景

在故障上報(bào)時(shí)，可以通過(guò)勾選單車(chē)部件的圖片，使用戶(hù)能更加清晰的完成報(bào)修行為。

（2）設(shè)計(jì)思考

OFO第一版的報(bào)修頁(yè)面，上部分展示單車(chē)圖示，用過(guò)線(xiàn)條標(biāo)注出單車(chē)不同部件的名稱(chēng)，下部分展示部件名稱(chēng)。

由于單車(chē)組件之間存在遮擋和重疊關(guān)系，等你找到想報(bào)修的名稱(chēng)后，還需要在下方找到對(duì)應(yīng)名稱(chēng)的按鈕。

第二版的頁(yè)面就簡(jiǎn)單很多，不需要你知道單車(chē)部件叫什么，你就點(diǎn)擊和損壞部件相同的圖片即可。這就是把復(fù)雜留給自己，把簡(jiǎn)單留給用戶(hù)。

10. 【拼多多】及時(shí)反饋刺激用戶(hù)提現(xiàn)

（1）使用場(chǎng)景

點(diǎn)擊圖標(biāo)區(qū)的“每日搖紅包”，搖出的小金額會(huì)實(shí)時(shí)打到微信里，并且從微信彈出商家轉(zhuǎn)賬通知。大金額會(huì)存到錢(qián)包，需要購(gòu)物提現(xiàn)。

（2）設(shè)計(jì)思考

都知道拼多多是用戶(hù)心理拿捏的高手，這次又學(xué)到了。

首先這種實(shí)時(shí)打款的真實(shí)感，點(diǎn)了就能拿錢(qián)，真的讓人很快樂(lè)（刺激用戶(hù)）。

第二是利用了微信的背書(shū)，讓很多已經(jīng)對(duì)紅包/抽獎(jiǎng)產(chǎn)生不信任的用戶(hù)，發(fā)現(xiàn)真的可以拿到錢(qián)，產(chǎn)生想要參與的興趣（轉(zhuǎn)化用戶(hù)）。

搖完5次后，你的錢(qián)包里應(yīng)該已經(jīng)有了20-40塊錢(qián)，只需要購(gòu)物就可以提現(xiàn)，誰(shuí)看了不心動(dòng)呢（行動(dòng)點(diǎn)）。

四、參考文章

情感化設(shè)計(jì)：https://www.yuque.com/836488572/lzinxo/lxfoty#Q2oHA

本文由 @喜寶的設(shè)計(jì)筆記｜且曼 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議