編輯導語：在日常産品使用中，一些産品細節的交互會讓我們産生不一樣的感受，通過觀察産品細節，不斷積累自己對産品設計的一些認知，也是一種與用戶拉進關系的方式。作者總結了自己在生活中使用産品發現的一些細節，與你分享。

章節目錄：

1. 【支付寶】清爽模式– 首頁消失，專注支付工具服務
2. 【CP】配對概率– 數字滾動，強化品牌背書
3. 【iphone相機】左滑連拍– 配合動畫，明确交互操作
4. 【iPhone桌面】多标移動– 快速整理，移動位置如此輕松
5. 【iPhone拷貝】三指捏合– 神奇的複制粘貼就此出現
6. 【有妖氣漫畫】按鈕動效– 結合IP，趣味操作入我心
7. 【百度翻譯】雙Tab組合– 标簽欄裡藏乾坤
8. 【懂車帝】 乘坐空間– 人偶預覽，乘坐效果一目了然
9. 【陌陌】自研浮窗– 更加規範，更加懂你
10. 【我的番茄】放棄專注– 長按模式，防止誤操作發生

一、【支付寶】清爽模式 – 首頁消失，專注支付工具服務

1. 使用場景

随着新功能的不斷疊加，支付寶首頁越來越臃腫。對與國民級支付軟件的用戶來說，使用起來不僅繁瑣而且還幹擾操作。

2. 設計思考

設計目标：通過自定義首頁模塊，提升首頁核心功能模塊顯示，從而提升用戶使用體驗。

設計方案：在“我的”-“設置”-“功能管理”-首頁欄目卡片”中，可以移除或添加需要的闆塊，按需調整。

當移除欄目後，它會以圖文樣式展示，提高用戶快速理解，便于添加選擇。

如此體量的産品能做到移除模塊功能，對于kpi壓力無疑是巨大的。支付寶能把選擇交給用戶，讓用戶操作度更高，無疑是最好的用戶體驗。它能使首頁幹淨清爽，一目了然。

二、【CP】配對概率 – 數字滾動，強化品牌背書

1. 使用場景

如今陌生人交友産品同質化嚴重，很難做出差異化，希望通過配對率來增強用戶心動感，從而進行社交互動。

2. 設計思考

設計目标：提高互動聊天率，通過“性格心理學模型”強化産品特有功能，助力配對成功。

設計方案：在首頁，每當切換一名用戶，頭像右側就會有MATCH（配對概率）的百分比，同時結合上下滾動的展示形式，呈現在用戶視野裡，突出核心算法功能。

當點擊百分比模塊，下方會顯示詳情描述，便于用戶理解數字的含義以及公信度，為用戶互選CP打下堅定基礎。避免因猶豫不決的用戶錯過對的人而苦惱。

三、【iPhone相機】左滑連拍 – 配合動畫，明确交互操作

1. 使用場景

手機連拍功能必須要有的，可你知道iphone的連拍如何激活嘛！

2. 設計思考

設計目标：提高容錯性，避免誤操作發生。

設計方案：打開相機，點擊一下是拍照，當點擊按鈕滑動到左側時是連拍，連拍張數在原始位置展示。當長按時是錄像，長按并右滑是鎖定錄像。一個拍照模塊給予4種交互，縮短用戶拍照-連拍-錄像等不同場景下的快速記錄功能。

想一下，每當想要抓拍，或者記錄美好瞬間，往往都是拍照環節過慢導緻錯過畫面。這種痛隻有記錄者本人才能明白。

我又研究了一下安卓設備的連拍功能，進入相機，（點擊拍照，長按連拍）這種設計很規矩，但設想一個場景，用戶着急拍攝，隻因觸屏時間稍長導緻連拍，想要删除連拍内的照片還要在進行不斷操作，相比iphone，誤操作概率會更加大（這裡排除一部分用戶使用習慣）。除此之外，安卓隻給予拍照和連拍，錄像還要進行點擊切換，操作成本相比iphone會大一些。

四、【iPhone桌面】多标移動 – 快速整理，移動位置如此輕松

1. 使用場景

手機桌面很亂，想必大家都經曆過。不是不想整理，隻是一個一個拖動圖标整理起來太過麻煩。

2. 設計思考

設計目标：保持原有桌面編輯交互，提供多标收集功能，提升整理桌面的高效操作。

設計方案：桌面1的一排圖标移動到桌面2，你會怎麼操作！挨個拖拽效率太低，放到一個容器移動再移出，操作繁瑣。這裡告訴你更便捷的方法，首先激活桌面編輯面闆，通過長按使圖标懸浮起來，然後點擊想要一起移動的圖标，你會看到一個補間動畫，并且懸浮圖标的右上方有數字标簽，表示當前選擇的圖标數量，隻需移動到其他桌面釋放，多個圖标就一次性移動過來了。是不是很簡單，趕緊試試吧。

五、【iPhone拷貝】三指捏合 – 神奇的複制粘貼就此出現

1. 使用場景

其中一個場景：在相冊中翻到一個照片想要發給朋友，通過點擊分享-微信-發送給朋友-選擇好友-确定發送。或者打開微信好友-添加-選擇照片-發送。無論哪種都需要多步驟操作，還有更快的方式嘛。

2. 設計思考

設計目标：用三指交互，來解決發送照片鍊路過長導緻的繁瑣情況。提升複制粘貼易用性體驗。

設計方案：iOS15中，通過對某一照片進行三指捏合複制拷貝，進入微信對話頁面，三指放大，顯示粘貼彈窗，點擊發送即可快速發給好友照片。

這是用iPhone特有的三指交互，來提升産品互聯的複制粘貼功能，縮短常規交互鍊路，滿足想要高效操作的用戶需求。不僅是照片，文本内容也可三指捏合。看到這裡，趕緊試試吧。

六、【有妖氣漫畫】按鈕動效 – 結合IP，趣味操作入我心

1. 使用場景

有妖氣漫畫，把社區模塊放在第一欄，能看出産品更重UGC内容互動。那麼如何強化發布按鈕，引導用戶發表内容。

2. 設計思考

設計目标：提高發布按鈕的視覺層級，提升UGC内容發布量。

設計方案：進入首頁時，右下方的添加按鈕會結合IP展示一個動畫，并放大➕号，目的吸引用戶視覺追蹤，強化發表按鈕屬性，讓想要發表内容的用戶快速編輯，從而降低猶豫時間。當切換不同闆塊時，發表按鈕會重新播放動畫，強化按鈕屬性，增加用戶發表按鈕的位置記憶點。對于動漫産品本身，動畫的輔助元素不僅不會反感，反而會豐富産品趣味體驗，同時也能有效吸引用戶注意力。一舉兩得的設計，是一個好的産品設計點。

七、【百度翻譯】雙Tab組合 – 縮短路徑，标簽欄裡藏乾坤

1. 使用場景

工具型産品，最在意的就是操作效率，功能再多，隻要能做到即用即走那就是好的使用體驗。

2. 設計思考

設計目标：通過底部浮層設計，縮短功能按鈕的操作路徑，從而提升産品易用性體驗。

設計方案：進入首頁，底部能看到類似雙Tab欄的浮層，當向下滑動後，會顯示小箭頭；當向上滑動，會展開浮層内的功能區。

此設計蠻有風險的，因為僞Tab的浮層一直置于底部，占用頁面高度，當用戶不知道能縮小時，本身就會影響頁面浏覽體驗。通過多觸達樣式來提高功能的進入容易度，解決功能入口路徑過長的問題。

八、【懂車帝】 乘坐空間 – 人偶預覽，乘坐效果一目了然

1. 使用場景

看車買車都會提前在手機裡了解車型的基本情況，去實體店不至于門外漢，但預覽車模時知道車的尺寸也很難感受到買車人進入車内的一個空間大小情況，如何給用戶直觀感受。

2. 設計思考

設計目标：提升車型中乘坐空間的内飾大小情況，方便用戶更好下決策。

設計方案：在心儀車型中點擊3D看車，進入3D車模頁面，可點擊左側「乘車空間」選擇3中不同身高人偶來進行空間大小感知，目的為了讓用戶進行自我身高對比，從而間接了解到用戶本人坐在車内的空間情況。

懂汽車的人都知道，車内空間乘坐舒适度可通過座椅來前後調整，傾斜角度也可調整。身高隻是其中一個因素，但【懂車帝】為了讓用戶直觀感受身高在空間内的大小，用人偶建模來呈現，但對于後台衆多車型适配來說是一個巨大的工程量。如此小的設計點，這麼大費周章，這不就是把用戶體驗放在最前面嘛。隻有把用戶放在第一位，産品才會越來好。

九、【陌陌】自研浮窗 – 更加規範，更加懂你

1. 使用場景

直播畫面不想錯過，但又想浏覽查看其他消息，如何更好兼容使用體驗。

2. 設計思考

設計目标：提升小窗口易用性體驗，不阻礙用戶正常操作功能。

設計方案：通過重設計小窗口，讓直播浮窗貼合産品删格系統，并且浮窗上下位置隻能在滑動頁面内，也就是不能超過頂部導航欄，底部不能超過标簽欄。無論在哪個頁面中都能進行正常功能按鈕操作，且不被遮擋，如此小的設計細節，社交領域的同學注意到了嗎！

十、【我的番茄】放棄專注 – 長按模式，防止誤操作發生

1. 使用場景

使用番茄鐘最害怕中途誤操作導緻時間終止沒有記錄。

2. 設計思考

設計目标：通過長按取消，降低誤觸情況，提高産品易用性體驗。

設計方案：在專注模式下，隻有時間與提示文字顯示，通過文字引導，長按屏幕任意位置，會看到一個進度條顯示，當進度條走完，表示已取消專注，并在首頁顯示一個難過的番茄表情。

長按取消的時間大約3s，3s之内釋放都會默認繼續專注。在交互中花費較長時間，是為了避免因誤操作帶來不可逆的情況發生。

十一、結語

設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。

認真記錄産品細節，了解背後的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。

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

#專欄作家#

碳水Sir；草蓉三石，人人都是産品經理專欄作家。One More産品設計負責人，擅長設計細節洞察分析。

本文原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部