看完這篇文章你將學(xué)到，提升交互能力的方法；在體驗(yàn)流程中設(shè)計(jì)師該注意什么；大廠產(chǎn)品的設(shè)計(jì)案例，以及學(xué)習(xí)思路。

往期案例：

如何提升交互能力？

很多剛?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ù)里，方便后期檢索。

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

好的用戶體驗(yàn)，無(wú)非是基于整個(gè)用戶完成任務(wù)的過(guò)程（使用路徑）進(jìn)行優(yōu)化。

這里我將流程分為三個(gè)階段：用戶行為開(kāi)始前；用戶行為開(kāi)始后；用戶行為結(jié)束后。

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

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

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

在開(kāi)始任務(wù)開(kāi)始后，作為設(shè)計(jì)師我們的責(zé)任是幫助用戶完成任務(wù)。包括預(yù)估用戶的操作路線，避免用戶發(fā)生失誤，以及在用戶犯錯(cuò)時(shí)實(shí)時(shí)的提供幫助。如果能在過(guò)程中，減少 1 點(diǎn)點(diǎn)用戶的操作難度，那就更好啦～

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

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

小思考：如果現(xiàn)在需要給用戶布置“進(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)」放大你正在操作的

使用場(chǎng)景

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

設(shè)計(jì)思考

在 IOS 系統(tǒng)中，這樣的交互很常見(jiàn)，如輸入時(shí)，移動(dòng)光標(biāo)。也會(huì)出現(xiàn)放大鏡方便你把光標(biāo)放到正確的字旁邊。可復(fù)用場(chǎng)景，當(dāng)手指阻擋用戶視線，放大被交互的組件；當(dāng)操作十分細(xì)微，難以控制時(shí)，可以放大被交互的組件。

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

使用場(chǎng)景

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

設(shè)計(jì)思考

雖然這個(gè)對(duì)于用戶場(chǎng)景的思考是成立的，但是由于大部分人在淘寶中購(gòu)買(mǎi)的以日常用品為主。可能不像電子類(lèi)產(chǎn)品有那么清楚的可以用來(lái)比價(jià)的維度，比如，用戶像買(mǎi)一條裙子，一條碎花裙/吊帶裙/牛仔裙，版型/花色/價(jià)格/質(zhì)感都不一樣，其實(shí)是很難拿到一起做對(duì)比的。

吸附到右側(cè)的或者是下拉的二樓，都已經(jīng)成為了一種比較常見(jiàn)的收納更多信息的組件。設(shè)計(jì)師可以將此應(yīng)用到更多的場(chǎng)景中去。

3. 「微信」步驟拆解，收集用戶反饋

使用場(chǎng)景

在朋友圈上線廣告，對(duì)于如此大體量的產(chǎn)品，很有可能傷害用戶的情感。不同于在資訊產(chǎn)品中分發(fā)廣告，在朋友圈投廣告，就好比在你家里刷牛皮癬。所以微信一方面嚴(yán)格控制投放的品牌，另一方面也留下反饋入口，收集用戶的聲音。

設(shè)計(jì)思考

當(dāng)我們要上一個(gè)比較敏感的功能時(shí)，不妨留一個(gè)入口去收集用戶反饋的，如何做到收集建議，而不打擾用戶。

同時(shí)兩個(gè)氣泡彈窗之間的跳轉(zhuǎn)方式，可以讓用戶階段性的展示信息，降低用戶的心理負(fù)擔(dān)，用戶的參與度就更高了。

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

使用場(chǎng)景

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

設(shè)計(jì)思考

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

5. 「知乎」情感化文字鼓勵(lì)用戶點(diǎn)贊

使用場(chǎng)景

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

設(shè)計(jì)思考

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

6. 「淘寶」通過(guò)動(dòng)效加深用戶理解

使用場(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)，除了讓用戶更清楚的了解到產(chǎn)品的詳情外，也多了一份參與感。

設(shè)計(jì)思考

作為設(shè)計(jì)師，我們都知道圖片比文字的閱讀性更高，動(dòng)態(tài)比靜態(tài)的理解成本更低（舉例我們會(huì)感覺(jué)看翻拍電影，比讀小說(shuō)會(huì)更輕松一些）。在一些復(fù)雜功能中，可以適當(dāng)?shù)娜谌雱?dòng)效便于用戶理解。

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

使用場(chǎng)景

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

設(shè)計(jì)思考

如果是做過(guò)電商的同學(xué)們都應(yīng)該知道，評(píng)論對(duì)于用戶的轉(zhuǎn)化是有很大的影響力。很顯著的證據(jù)就是，有無(wú)評(píng)論的商品的銷(xiāo)量差異是很大的，那么如何利用有評(píng)論商品的優(yōu)勢(shì)呢。對(duì)應(yīng)我們前面提到的，重要的功能可以做多入口，多路徑。

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

使用場(chǎng)景

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

設(shè)計(jì)思考

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

根據(jù)不同時(shí)間點(diǎn)，展示不同的卡片文案和店鋪推薦。這種類(lèi)似千人千面的展示方案，能最大化的提高用戶轉(zhuǎn)化效率。點(diǎn)擊口快速跳轉(zhuǎn)到相應(yīng)的品類(lèi)，幫助用戶快速?zèng)Q策。

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

9. 「美團(tuán)單車(chē)」報(bào)修操作的可視化

使用場(chǎng)景

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

設(shè)計(jì)思考

美團(tuán)單車(chē)第一版的報(bào)修頁(yè)面，上部分展示單車(chē)圖示，用過(guò)線條標(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)單留給用戶。

10. 「拼多多」及時(shí)反饋刺激用戶提現(xiàn)

使用場(chǎng)景

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

設(shè)計(jì)思考

都知道拼多多是用戶心理拿捏的高手，這次又學(xué)到了。首先這種實(shí)時(shí)打款的真實(shí)感，點(diǎn)了就能拿錢(qián)，真的讓人很快樂(lè)（刺激用戶）。第二是利用了微信的背書(shū)，讓很多已經(jīng)對(duì)紅包/抽獎(jiǎng)產(chǎn)生不信任的用戶，發(fā)現(xiàn)真的可以拿到錢(qián)，產(chǎn)生想要參與的興趣（轉(zhuǎn)化用戶）。

搖完 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