編輯導(dǎo)語：在日常產(chǎn)品使用中，一些產(chǎn)品細(xì)節(jié)的交互會(huì)讓我們產(chǎn)生不一樣的感受，通過觀察產(chǎn)品細(xì)節(jié)，不斷積累自己對(duì)產(chǎn)品設(shè)計(jì)的一些認(rèn)知，也是一種與用戶拉進(jìn)關(guān)系的方式。作者總結(jié)了自己在生活中使用產(chǎn)品發(fā)現(xiàn)的一些細(xì)節(jié)，與你分享。

章節(jié)目錄：

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

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

1. 使用場景

隨著新功能的不斷疊加，支付寶首頁越來越臃腫。對(duì)與國民級(jí)支付軟件的用戶來說，使用起來不僅繁瑣而且還干擾操作。

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

設(shè)計(jì)目標(biāo)：通過自定義首頁模塊，提升首頁核心功能模塊顯示，從而提升用戶使用體驗(yàn)。

設(shè)計(jì)方案：在“我的”-“設(shè)置”-“功能管理”-首頁欄目卡片”中，可以移除或添加需要的板塊，按需調(diào)整。

當(dāng)移除欄目后，它會(huì)以圖文樣式展示，提高用戶快速理解，便于添加選擇。

如此體量的產(chǎn)品能做到移除模塊功能，對(duì)于kpi壓力無疑是巨大的。支付寶能把選擇交給用戶，讓用戶操作度更高，無疑是最好的用戶體驗(yàn)。它能使首頁干凈清爽，一目了然。

二、【CP】配對(duì)概率 – 數(shù)字滾動(dòng)，強(qiáng)化品牌背書

1. 使用場景

如今陌生人交友產(chǎn)品同質(zhì)化嚴(yán)重，很難做出差異化，希望通過配對(duì)率來增強(qiáng)用戶心動(dòng)感，從而進(jìn)行社交互動(dòng)。

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

設(shè)計(jì)目標(biāo)：提高互動(dòng)聊天率，通過“性格心理學(xué)模型”強(qiáng)化產(chǎn)品特有功能，助力配對(duì)成功。

設(shè)計(jì)方案：在首頁，每當(dāng)切換一名用戶，頭像右側(cè)就會(huì)有MATCH（配對(duì)概率）的百分比，同時(shí)結(jié)合上下滾動(dòng)的展示形式，呈現(xiàn)在用戶視野里，突出核心算法功能。

當(dāng)點(diǎn)擊百分比模塊，下方會(huì)顯示詳情描述，便于用戶理解數(shù)字的含義以及公信度，為用戶互選CP打下堅(jiān)定基礎(chǔ)。避免因猶豫不決的用戶錯(cuò)過對(duì)的人而苦惱。

三、【iPhone相機(jī)】左滑連拍 – 配合動(dòng)畫，明確交互操作

1. 使用場景

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

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

設(shè)計(jì)目標(biāo)：提高容錯(cuò)性，避免誤操作發(fā)生。

設(shè)計(jì)方案：打開相機(jī)，點(diǎn)擊一下是拍照，當(dāng)點(diǎn)擊按鈕滑動(dòng)到左側(cè)時(shí)是連拍，連拍張數(shù)在原始位置展示。當(dāng)長按時(shí)是錄像，長按并右滑是鎖定錄像。一個(gè)拍照模塊給予4種交互，縮短用戶拍照-連拍-錄像等不同場景下的快速記錄功能。

想一下，每當(dāng)想要抓拍，或者記錄美好瞬間，往往都是拍照環(huán)節(jié)過慢導(dǎo)致錯(cuò)過畫面。這種痛只有記錄者本人才能明白。

我又研究了一下安卓設(shè)備的連拍功能，進(jìn)入相機(jī)，（點(diǎn)擊拍照，長按連拍）這種設(shè)計(jì)很規(guī)矩，但設(shè)想一個(gè)場景，用戶著急拍攝，只因觸屏?xí)r間稍長導(dǎo)致連拍，想要?jiǎng)h除連拍內(nèi)的照片還要在進(jìn)行不斷操作，相比iphone，誤操作概率會(huì)更加大（這里排除一部分用戶使用習(xí)慣）。除此之外，安卓只給予拍照和連拍，錄像還要進(jìn)行點(diǎn)擊切換，操作成本相比iphone會(huì)大一些。

四、【iPhone桌面】多標(biāo)移動(dòng) – 快速整理，移動(dòng)位置如此輕松

1. 使用場景

手機(jī)桌面很亂，想必大家都經(jīng)歷過。不是不想整理，只是一個(gè)一個(gè)拖動(dòng)圖標(biāo)整理起來太過麻煩。

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

設(shè)計(jì)目標(biāo)：保持原有桌面編輯交互，提供多標(biāo)收集功能，提升整理桌面的高效操作。

設(shè)計(jì)方案：桌面1的一排圖標(biāo)移動(dòng)到桌面2，你會(huì)怎么操作！挨個(gè)拖拽效率太低，放到一個(gè)容器移動(dòng)再移出，操作繁瑣。這里告訴你更便捷的方法，首先激活桌面編輯面板，通過長按使圖標(biāo)懸浮起來，然后點(diǎn)擊想要一起移動(dòng)的圖標(biāo)，你會(huì)看到一個(gè)補(bǔ)間動(dòng)畫，并且懸浮圖標(biāo)的右上方有數(shù)字標(biāo)簽，表示當(dāng)前選擇的圖標(biāo)數(shù)量，只需移動(dòng)到其他桌面釋放，多個(gè)圖標(biāo)就一次性移動(dòng)過來了。是不是很簡單，趕緊試試吧。

五、【iPhone拷貝】三指捏合 – 神奇的復(fù)制粘貼就此出現(xiàn)

1. 使用場景

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

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

設(shè)計(jì)目標(biāo)：用三指交互，來解決發(fā)送照片鏈路過長導(dǎo)致的繁瑣情況。提升復(fù)制粘貼易用性體驗(yàn)。

設(shè)計(jì)方案：iOS15中，通過對(duì)某一照片進(jìn)行三指捏合復(fù)制拷貝，進(jìn)入微信對(duì)話頁面，三指放大，顯示粘貼彈窗，點(diǎn)擊發(fā)送即可快速發(fā)給好友照片。

這是用iPhone特有的三指交互，來提升產(chǎn)品互聯(lián)的復(fù)制粘貼功能，縮短常規(guī)交互鏈路，滿足想要高效操作的用戶需求。不僅是照片，文本內(nèi)容也可三指捏合?？吹竭@里，趕緊試試吧。

六、【有妖氣漫畫】按鈕動(dòng)效 – 結(jié)合IP，趣味操作入我心

1. 使用場景

有妖氣漫畫，把社區(qū)模塊放在第一欄，能看出產(chǎn)品更重UGC內(nèi)容互動(dòng)。那么如何強(qiáng)化發(fā)布按鈕，引導(dǎo)用戶發(fā)表內(nèi)容。

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

設(shè)計(jì)目標(biāo)：提高發(fā)布按鈕的視覺層級(jí)，提升UGC內(nèi)容發(fā)布量。

設(shè)計(jì)方案：進(jìn)入首頁時(shí)，右下方的添加按鈕會(huì)結(jié)合IP展示一個(gè)動(dòng)畫，并放大?號(hào)，目的吸引用戶視覺追蹤，強(qiáng)化發(fā)表按鈕屬性，讓想要發(fā)表內(nèi)容的用戶快速編輯，從而降低猶豫時(shí)間。當(dāng)切換不同板塊時(shí)，發(fā)表按鈕會(huì)重新播放動(dòng)畫，強(qiáng)化按鈕屬性，增加用戶發(fā)表按鈕的位置記憶點(diǎn)。對(duì)于動(dòng)漫產(chǎn)品本身，動(dòng)畫的輔助元素不僅不會(huì)反感，反而會(huì)豐富產(chǎn)品趣味體驗(yàn)，同時(shí)也能有效吸引用戶注意力。一舉兩得的設(shè)計(jì)，是一個(gè)好的產(chǎn)品設(shè)計(jì)點(diǎn)。

七、【百度翻譯】雙Tab組合 – 縮短路徑，標(biāo)簽欄里藏乾坤

1. 使用場景

工具型產(chǎn)品，最在意的就是操作效率，功能再多，只要能做到即用即走那就是好的使用體驗(yàn)。

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

設(shè)計(jì)目標(biāo)：通過底部浮層設(shè)計(jì)，縮短功能按鈕的操作路徑，從而提升產(chǎn)品易用性體驗(yàn)。

設(shè)計(jì)方案：進(jìn)入首頁，底部能看到類似雙Tab欄的浮層，當(dāng)向下滑動(dòng)后，會(huì)顯示小箭頭；當(dāng)向上滑動(dòng)，會(huì)展開浮層內(nèi)的功能區(qū)。

此設(shè)計(jì)蠻有風(fēng)險(xiǎn)的，因?yàn)閭蜹ab的浮層一直置于底部，占用頁面高度，當(dāng)用戶不知道能縮小時(shí)，本身就會(huì)影響頁面瀏覽體驗(yàn)。通過多觸達(dá)樣式來提高功能的進(jìn)入容易度，解決功能入口路徑過長的問題。

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

1. 使用場景

看車買車都會(huì)提前在手機(jī)里了解車型的基本情況，去實(shí)體店不至于門外漢，但預(yù)覽車模時(shí)知道車的尺寸也很難感受到買車人進(jìn)入車內(nèi)的一個(gè)空間大小情況，如何給用戶直觀感受。

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

設(shè)計(jì)目標(biāo)：提升車型中乘坐空間的內(nèi)飾大小情況，方便用戶更好下決策。

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

懂汽車的人都知道，車內(nèi)空間乘坐舒適度可通過座椅來前后調(diào)整，傾斜角度也可調(diào)整。身高只是其中一個(gè)因素，但【懂車帝】為了讓用戶直觀感受身高在空間內(nèi)的大小，用人偶建模來呈現(xiàn)，但對(duì)于后臺(tái)眾多車型適配來說是一個(gè)巨大的工程量。如此小的設(shè)計(jì)點(diǎn)，這么大費(fèi)周章，這不就是把用戶體驗(yàn)放在最前面嘛。只有把用戶放在第一位，產(chǎn)品才會(huì)越來好。

九、【陌陌】自研浮窗 – 更加規(guī)范，更加懂你

1. 使用場景

直播畫面不想錯(cuò)過，但又想瀏覽查看其他消息，如何更好兼容使用體驗(yàn)。

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

設(shè)計(jì)目標(biāo)：提升小窗口易用性體驗(yàn)，不阻礙用戶正常操作功能。

設(shè)計(jì)方案：通過重設(shè)計(jì)小窗口，讓直播浮窗貼合產(chǎn)品刪格系統(tǒng)，并且浮窗上下位置只能在滑動(dòng)頁面內(nèi)，也就是不能超過頂部導(dǎo)航欄，底部不能超過標(biāo)簽欄。無論在哪個(gè)頁面中都能進(jìn)行正常功能按鈕操作，且不被遮擋，如此小的設(shè)計(jì)細(xì)節(jié)，社交領(lǐng)域的同學(xué)注意到了嗎！

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

1. 使用場景

使用番茄鐘最害怕中途誤操作導(dǎo)致時(shí)間終止沒有記錄。

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

設(shè)計(jì)目標(biāo)：通過長按取消，降低誤觸情況，提高產(chǎn)品易用性體驗(yàn)。

設(shè)計(jì)方案：在專注模式下，只有時(shí)間與提示文字顯示，通過文字引導(dǎo)，長按屏幕任意位置，會(huì)看到一個(gè)進(jìn)度條顯示，當(dāng)進(jìn)度條走完，表示已取消專注，并在首頁顯示一個(gè)難過的番茄表情。

長按取消的時(shí)間大約3s，3s之內(nèi)釋放都會(huì)默認(rèn)繼續(xù)專注。在交互中花費(fèi)較長時(shí)間，是為了避免因誤操作帶來不可逆的情況發(fā)生。

十一、結(jié)語

設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。

認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

本期產(chǎn)品細(xì)節(jié)分析結(jié)束，我們下期再見！

#專欄作家#

碳水Sir；微信公眾號(hào)：草蓉三石，人人都是產(chǎn)品經(jīng)理專欄作家。One More產(chǎn)品設(shè)計(jì)負(fù)責(zé)人，擅長設(shè)計(jì)細(xì)節(jié)洞察分析。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議。