10個產品細節剖析，看看大廠是如何做設計的！

看完這篇文章你將學到，提升交互能力的方法；在體驗流程中設計師該注意什么；大廠產品的設計案例，以及學習思路。

往期案例：

如何提升交互能力？

很多剛入門的小朋友不知道怎么提升設計能力，其實有一個很簡單的方法，那就是“收集”！之前我做了很多次的收集任務。

比如剛開始不知道怎么做 UI 界面，所以收集了很多界面。通過不同頁面類型來區分參考素材，比如主頁/首頁，訂單頁/個人中心/列表頁。

那么所有的頁面都可以分為這么十幾類，當你不會做的時候就可以看看別人是怎么做的。這樣起碼就不用擔心沒有靈感了，根據不同的參考起碼可以產出至少 2-3 個方案，然后只需要判斷哪種方案更適合你的場景就好了～

由于有了這個界面庫，每當部門里有同學有不會排版/布局的問題都會來向我請教。當然工作中的遇到的頁面問題也都被我輕松解決。

隨著界面設計能力的不軟提升，后來我的痛點轉移到了思維能力上，為什么別人思考那么有深度？如何形成有體系的思維能力？于是我開始大量的閱讀文章，看看別人對于同樣的一個產品/設計問題是怎么思考的。并將我閱讀后，認為有價值的內容分類整理在語雀的知識庫里，方便后期檢索。

也有很多同學想知道我的文章分類方法，那這里簡單說一下，我會根據設計的工作流程主要分為：用研類/產品類/設計類/數據類/品牌類/自我提升類等等。

比如后面我開始做 B 端設計，于是需要研究對于 B 端產品相關問題，新開了一個“B 端知識庫”。也按照相同的邏輯去組織分類。

那么今年想要突擊一下交互能力，于是開了這個板塊收集一下好的產品交互怎么做的，同時也希望和大家一起分享一下。

體驗設計師需要注意什么？

每個用戶在使用我們產品的時候就像在闖關一樣，在他闖關的流程中體驗設計師有時候是一個給他加魔法加防御補血條的輔助，有時候又化身為描述劇情，引導用戶完成下一步任務的 NPC。

好的用戶體驗，無非是基于整個用戶完成任務的過程（使用路徑）進行優化。

這里我將流程分為三個階段：用戶行為開始前；用戶行為開始后；用戶行為結束后。

1. 用戶行為開始前

在開始前，我們需要確保用戶能找到任務的入口，且要快速方便的找到。

2. 用戶行為開始后

在開始任務開始后，作為設計師我們的責任是幫助用戶完成任務。包括預估用戶的操作路線，避免用戶發生失誤，以及在用戶犯錯時實時的提供幫助。如果能在過程中，減少 1 點點用戶的操作難度，那就更好啦～

3. 用戶行為結束后

當用戶完成任務了，對于一些復雜或是重要的信息，我們可以提醒用戶進行檢查，通過二次確認的方式減少用戶犯錯的概率，同時給予用戶安全感。

小思考：如果現在需要給用戶布置“進入一個房子”的任務，在整個流程中我們可以做什么呢～

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

現在大家應該都對體驗流程的基本邏輯有了了解，接下來基于這個框架，我們一起看看優秀的產品是怎么做的吧。??????！！！

本期產品亮點（目錄）

1. 「IOS 系統」放大你正在操作的

使用場景

在 Imessage 中選擇表情，滑動時，表情欄會放大。方便你看的更清楚，更好選擇。

設計思考

在 IOS 系統中，這樣的交互很常見，如輸入時，移動光標。也會出現放大鏡方便你把光標放到正確的字旁邊。可復用場景，當手指阻擋用戶視線，放大被交互的組件；當操作十分細微，難以控制時，可以放大被交互的組件。

2. 「淘寶」收藏后引導商品對比

使用場景

基于批量收藏的場景，當用戶來到收藏夾。彈出比價引導，考慮到用戶購買時存在需要對比的場景，這樣的做法應該是想引導用戶對比商品后進行下單行為。

設計思考

雖然這個對于用戶場景的思考是成立的，但是由于大部分人在淘寶中購買的以日常用品為主。可能不像電子類產品有那么清楚的可以用來比價的維度，比如，用戶像買一條裙子，一條碎花裙/吊帶裙/牛仔裙，版型/花色/價格/質感都不一樣，其實是很難拿到一起做對比的。

吸附到右側的或者是下拉的二樓，都已經成為了一種比較常見的收納更多信息的組件。設計師可以將此應用到更多的場景中去。

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

使用場景

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

設計思考

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

同時兩個氣泡彈窗之間的跳轉方式，可以讓用戶階段性的展示信息，降低用戶的心理負擔，用戶的參與度就更高了。

4. 「微信讀書」超寫實動效提升用戶粘性

使用場景

在讀書過程中，用戶可以根據喜好設置翻頁的模式。這里展示的仿真翻頁，能給枯燥的閱讀過程帶來一絲趣味性。

設計思考

“超寫實”一直設計中常用的設計手法，一個成熟的產品，可以抓住一些關鍵細節進行打磨，從而提升產品的品質，提升用戶粘性（同理之前網易云的膠片/豆瓣 FM 的扇形切換）。

5. 「知乎」情感化文字鼓勵用戶點贊

使用場景

點贊時，除了愛心的微動效，同時會彈出一個 toast，表達感謝。通過文字+動效兩種方式來傳達情感，鼓勵用戶點贊。

設計思考

用戶的行為需要被肯定和尊重，有時候一點點小的變化，就能給用戶帶來情緒價值。當一些需要提升數據，但是并不能直接給與用戶帶來直接“物質”好處的場景，就可以考慮情緒價值。

6. 「淘寶」通過動效加深用戶理解

使用場景

在天貓中通過結合一個簡單的手勢來介紹產品的優勢。如體驗超清的放大/了解產品的內部構件/直觀的看到產品的新功能如何加熱食材。

相比普通的靜態圖文介紹，3D 的手勢互動，除了讓用戶更清楚的了解到產品的詳情外，也多了一份參與感。

設計思考

作為設計師，我們都知道圖片比文字的閱讀性更高，動態比靜態的理解成本更低（舉例我們會感覺看翻拍電影，比讀小說會更輕松一些）。在一些復雜功能中，可以適當的融入動效便于用戶理解。

7. 「京東」跳轉評論引導下單

使用場景

在用戶瀏覽完商詳首圖后，出現評論模塊，點擊/繼續滑動自動跳轉到評論模塊。

設計思考

如果是做過電商的同學們都應該知道，評論對于用戶的轉化是有很大的影響力。很顯著的證據就是，有無評論的商品的銷量差異是很大的，那么如何利用有評論商品的優勢呢。對應我們前面提到的，重要的功能可以做多入口，多路徑。

8. 「餓了么」根據不同的場景，在首頁展示不同的模塊

使用場景

早上推薦早餐，晚上推薦宵夜。下單展示訂單狀態，不同的時間點，根據不同的用戶行為，觸發不同的展示模塊。

設計思考

該設計方案符合，外露高優功能的設計思路。

根據不同時間點，展示不同的卡片文案和店鋪推薦。這種類似千人千面的展示方案，能最大化的提高用戶轉化效率。點擊口快速跳轉到相應的品類，幫助用戶快速決策。

在用戶下單后的場景中外露訂單狀態。此時用戶最關心訂單狀態，此功能優先級最高。不需要他再進入個人中心去查找訂單入口，降低了用戶的操作成本。

9. 「美團單車」報修操作的可視化

使用場景

在故障上報時，可以通過勾選單車部件的圖片，使用戶能更加清晰的完成報修行為。

設計思考

美團單車第一版的報修頁面，上部分展示單車圖示，用過線條標注出單車不同部件的名稱，下部分展示部件名稱。由于單車組件之間存在遮擋和重疊關系，等你找到想報修的名稱后，還需要在下方找到對應名稱的按鈕。

第二版的頁面就簡單很多，不需要你知道單車部件叫什么，你就點擊和損壞部件相同的圖片即可。這就是把復雜留給自己，把簡單留給用戶。

10. 「拼多多」及時反饋刺激用戶提現

使用場景

點擊圖標區的“每日搖紅包”，搖出的小金額會實時打到微信里，并且從微信彈出商家轉賬通知。大金額會存到錢包，需要購物提現。

設計思考

都知道拼多多是用戶心理拿捏的高手，這次又學到了。首先這種實時打款的真實感，點了就能拿錢，真的讓人很快樂（刺激用戶）。第二是利用了微信的背書，讓很多已經對紅包/抽獎產生不信任的用戶，發現真的可以拿到錢，產生想要參與的興趣（轉化用戶）。

搖完 5 次后，你的錢包里應該已經有了 20-40 塊錢，只需要購物就可以提現，誰看了不心動呢（行動點）。

參考文章

情感化設計： https://www.yuque.com/836488572/lzinxo/lxfoty#Q2oHA