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

前言

細節設計作為產品的一個重要環節，也是值得我們去琢磨思考的。本文分析了 10 個案例細節，一起來看看有哪些細節是自己沒有注意到的呢。

往期回顧：

「抖音」

沉浸觀影 – 雙指放大，聚焦視頻內容觀看更集中

1. 使用場景

遇到要看的視頻，周圍功能圖標遮擋對觀看效果大打折扣。

2. 設計思考

設計目標：提高視頻完播率，從觀影體驗角度出發。

設計方案：通過雙指擴大，你會看到視頻被撐大，除了視頻內容，圖標以及底部 Tab 欄都消失了。不僅如此，頂部會有明顯的 Toast 提示，“松開清屏”。當你雙指放開，進入專注模式，可以進行暫停、倍率、關閉等選擇。

如今短視頻充斥著人們的生活，5-30 秒的內容大多都是爽片，看完就過去了。中等視頻 1-5 分鐘是較為提供優質內容的范疇。以短視頻抖音來說，上下滑動的交互形式，注定首頁要常駐一堆功能入口（頂部導航、底部標簽欄、作者頭像，互動圖標，標題內容等）。這些多少都會干擾用戶進行專注觀影，尤其是 1 分鐘以上的視頻，字幕被遮擋等觀影體驗不佳這都會影響平臺留存以及創作者的完播率。

通過清屏功能，解決視頻被遮擋的問題，讓用戶專注觀影。同時雙指放大交互操作較難激活，也能避免用戶誤操作發生。即使有此概率，放大操作有一個路徑激活，當滑動到一半以上會觸發震動反饋，提示用戶此時松開可清屏觀影。

總結：雙指放大（交互難、防止誤操作）滑動觸發（一定距離震動、及時反饋）。

「Gmail 郵箱」

快捷刪除 – 賦予頭像選擇屬性，效率大幅提升

1. 使用場景

Gmail 郵箱采用獨特交互操作，并未進行本土化設計，使用還是不太友好，例如批量編輯。雖然操作位置不一樣，但使用很方便。

2. 設計思考

設計目標：提升批量操作效率，節省操作時間。

設計方案：Gmail 郵箱針對郵件刪除左右滑動都沒觸發刪除功能，原來隱藏在頭像處。

用戶通過點擊頭像，激活選擇編輯功能，進行郵件批量操作。

國內選擇文件，一般采用左滑刪除（左滑-點擊刪除-二次確認）、點編輯批量刪除（編輯-選擇-刪除），最少都需要三步才能刪除。Gmail 郵箱，（點擊頭像-刪除）兩步完成。別看減少了一步，操作體驗大大提升。頭像本身就是附加的內容視圖，按國內通欄都是點擊進入詳情，會不會浪費了更多交互可能。按照這個思路，探索自家產品可優化的交互鏈路。

「今日頭條」

開屏緬懷 – 用愛發光，產品與用戶的情感綁定

1. 使用場景

航空事件打擊太大，如何給予用戶緬懷窗口。

2. 設計思考

設計目標：提升產品情感，讓用戶感受到產品的感性一面。

設計方案：在開屏頁提供入口，確保在線用戶打開應用時都能看到。“點亮緬懷”與用戶共鳴，上劃進行互動評論。

開屏一般都是各大平臺廣告營收的重要組成部分，如此重要的位置在當天放置緬懷頁面。如此體現今日頭條的人文情懷，流量與情感是相通的，只有了解用戶、了解痛點，才能做出好的產品。

「態棒」

表態彈幕 – 靜態頁面多內容，曝光物品熱度

1. 使用場景

電商頁都快到達設計的盡頭了，還能怎樣提高商品熱度。

2. 設計思考

設計目標：提升產品互動感受，促使用戶購買率上升。

設計方案：常規電商頁都是靜態展示內容，態棒推出特有的“印象彈幕”，在靜態圖片之上加入動態彈幕，即使用戶無操作，也會展示更多內容，提高更多內容的呈現。

把類似視頻彈幕功能植入到電商頁中，多少會提高商品的互動和曝光，但也需考慮商品圖的簡約性，如果都是促銷文案精美排版的照片注定會存在彈幕干擾，影響用戶瀏覽商品。

所以態棒目前的清爽商品圖適合“表態”當前彈幕展示，目前還是很看好這款產品的設計，加油。

「夸克」

長按添加窗口 – 賦予多交互，降低操作成本

1. 使用場景

新增窗口常規需要點擊窗口-添加新窗口。

2. 設計思考

設計目標：縮短交互路徑，提升更多操作可能。

設計方案：長按底部第二個 Tab，你會看到上方由 1-2-3 頁面的交互動畫。通過底部窗口數字可以知道增加了一個新窗口。

原本需要兩步點擊操作才能完成的功能，用長按交互來二次賦予相同功能，給予手勢操作更多可能，一向極簡的夸克，同樣用極簡的交互為用戶提供服務，值得大家學習。

「識區」

上滑內容 – 文案與振動反饋，快速引導學習

1. 使用場景

字節新產品，識區文章的上下切換如何更符合用戶理解。

2. 設計思考

設計目標：提升上下切換的理解成本，防止誤操作發生。

設計方案：在識區內閱讀完一篇文章，通過上劃進行切換下一篇文章。為防止誤操作，剛上滑時會顯示“上滑查看下條內容”。當滑到一定節點會給予震動反饋，文案顯示“松手查看”表示激活下一篇文章。

與上面（1）抖音手勢類似，同樣在移動路徑中激活功能，目的都是降低誤操作發生。此方法同樣適用于長按滑動的交互頁面中。

「iPhone 截圖」

長按移動 – 雙指交互，互相獨立

1. 使用場景

截屏目的為了在第三方平臺發布，或者郵件反饋 bug 等情況，如何提高添加效率。

2. 設計思考

設計目標：縮短交互路徑，優化 iPhone 特有功能。

設計方案：當截屏后，左下角會顯示縮略圖，如果你只是左滑移出那就太浪費了。

最近我發現這個交互功能，通過長按縮略圖激活移動功能，然后通過另一只手切換到第三方編輯平臺，當縮略圖右上角顯示＋，表示此位置可以放置截圖，松開手指，自動貼入編輯頁中。

目前我常用的備忘錄以及郵箱都可以使用，其他還沒嘗試，感興趣的小伙伴可以體驗一下。它就像是兩個大腦，互相獨立。軟件可以一心二用，但人腦不可以。這也是軟件吸引用戶使用的一點。

「夸克」

下滑輸入 – 快速搜索，縮短用戶點擊路徑

1. 使用場景

點擊夸克搜索框時，多少會因為觸發區域過高較難點擊。

2. 設計思考

設計目標：提升搜索框易觸達性，優化用戶使用體驗。

設計方案：常規點擊來選擇搜索框，偶然發現通過屏幕下滑同樣也能激活搜索框。

首頁下滑，能看到交互軌跡，此交互貼合產品的極簡風格，同樣通過手勢交互，給予多種觸達入口。便于用戶特殊場景下的使用體驗，是設計提升體驗的優化點。

「iPhone 信息」

雙指觸發 – 快速編輯批量信息

1. 使用場景

iPhone 向來就是以體驗驅動的公司。如何快速編輯信息，看看 iPhone 怎么做的。

2. 設計思考

設計目標：通過手勢交互提升短信編輯的易用性操作。

設計方案：左右雙指并列向下滑動，瞬間激活選擇按鈕，所到之處均已選擇。激活編輯面板可以單指在左邊選擇按鈕處滑動批量選擇。

無意間發現的交互方式，優化并縮短了交互路徑，同時雙指滑動觸發難度較大，能防止一般誤操作的發生，雖然功能較為隱藏，但并不影響正常用戶。

又一個手勢交互提升用戶體驗的設計亮點。

「美團外賣」

天氣配圖 – 降低急躁，與用戶產生情感體諒

1. 使用場景

惡劣天氣外賣配送延遲，遇到差評的情況。

2. 設計思考

設計目標：解決惡劣天氣外賣小哥萬一延誤收到差評的問題。通過天氣感知降低差評率發生。

設計方案：當點外賣時，美圖外賣右下角會顯示當前天氣情況，提前告知用戶因天氣帶來的不可控因素。當點擊進入，能看到玻璃外模糊的外賣騎手，以及霧蒙蒙的水蒸氣。

家里暖，外面冷，強差異，易體諒。雖然產品都需要精美的設計，但有時會物極必反。一些場景下，精美的插畫設計未必有照片更能激發用戶共鳴感。所以，好的設計并不只是設計本身，而是能與用戶產生情感共鳴的設計，無論表現手法是什么，能產生共鳴就是好的設計。

結語

設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。認真記錄產品細節，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。

本期產品細節分析結束，我們下期再見！

歡迎關注作者微信公眾號：草蓉三石