編輯導(dǎo)語：一個(gè)好的設(shè)計(jì)細(xì)節(jié)能有效助力產(chǎn)品增長，本篇文章作者分享了10個(gè)助力產(chǎn)品增長的設(shè)計(jì)細(xì)節(jié)，講述了其使用場景和設(shè)計(jì)思考等內(nèi)容，一起來學(xué)習(xí)一下吧，希望對(duì)你有幫助。

章節(jié)目錄：

1. 【飛豬】豬鼻搜索 – 融入動(dòng)效，強(qiáng)化品牌滲透；
2. 【Timebook】點(diǎn)贊動(dòng)效 – 停留后的播放，引導(dǎo)操作；
3. 【騰訊新聞】長按點(diǎn)贊 – 彩蛋背后的思考，釋放用戶情緒；
4. 【支付寶】清爽模式 – Tab隱藏，專注支付工具服務(wù)；
5. 【飛書】雙擊編輯 – 交互的提效用途，更快更高效；
6. 【貝殼找房】新舊看房 – 產(chǎn)生預(yù)判，避免白走一趟浪費(fèi)的時(shí)間；
7. 【得物】3D試穿 – 及時(shí)體驗(yàn)，減少門店試穿過程；
8. 【映客直播】 雙直播 – 一個(gè)預(yù)覽直播一個(gè)小窗直播，屏效利用更大；
9. 【拼多多】商品收藏 – 預(yù)選屬性默認(rèn)保存，一鍵懂你；
10. 【微信】視頻號(hào)喜歡 – 頭像神奇位移，極度舒服。

一、【飛豬】豬鼻搜索——融入動(dòng)效，強(qiáng)化品牌滲透

1. 使用場景

全新UI升級(jí)后，搜索模塊有較大改動(dòng)，如何在搜索欄中引導(dǎo)用戶，同時(shí)不打擾用戶使用。

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

設(shè)計(jì)目標(biāo)：提升搜索按鈕pv率，同時(shí)強(qiáng)化飛豬品牌。

設(shè)計(jì)方案：在進(jìn)入飛豬界面時(shí)，能看到頂部搜索欄搜索按鈕會(huì)有一個(gè)豬鼻子抖動(dòng)特效，隨后消失，下拉刷新時(shí)，豬鼻子特效再次激活，很是有趣。

其實(shí)在完善的旅游行業(yè)中，產(chǎn)品設(shè)計(jì)已經(jīng)很難有獨(dú)自特色亮點(diǎn)，畢竟設(shè)計(jì)都是有輪回（擬物-扁平-再到擬物）。安卓與蘋果手機(jī)的交互視覺也基本相仿，那好的設(shè)計(jì)還能從哪里出發(fā)？

結(jié)合產(chǎn)品特有的品牌IP去進(jìn)行產(chǎn)品融入，如果能在產(chǎn)品目標(biāo)中進(jìn)行強(qiáng)化IP那簡直厲害。很成功的產(chǎn)品設(shè)計(jì)細(xì)節(jié)，再一次強(qiáng)化了飛豬在我腦海中的記憶，值得大家學(xué)習(xí)。

二、【Timebook】點(diǎn)贊動(dòng)效——停留后的播放，引導(dǎo)操作

1. 使用場景

一款社交產(chǎn)品，能讓用戶持續(xù)UGC（用戶素生產(chǎn)內(nèi)容）不容易，需要有較多互動(dòng)，才能留住用戶。

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

設(shè)計(jì)目標(biāo)：提高點(diǎn)贊互動(dòng)率，讓用戶互動(dòng)率得到提升。

設(shè)計(jì)方案：當(dāng)用戶停留到某一條動(dòng)態(tài)時(shí)，通過頁面懸停時(shí)間，激活點(diǎn)贊按鈕動(dòng)效，靈動(dòng)的動(dòng)畫，仿佛對(duì)方再和你互動(dòng)，想要你一個(gè)點(diǎn)贊，不自覺地就會(huì)引導(dǎo)互動(dòng)起來，也算是打破只看不點(diǎn)贊的僵局。

這個(gè)設(shè)計(jì)亮點(diǎn)非常值得學(xué)習(xí)。當(dāng)你要提升某個(gè)功能使用率，不妨把做圖標(biāo)設(shè)計(jì)的時(shí)間改為動(dòng)效設(shè)計(jì)。相比于平面圖形，動(dòng)態(tài)圖形更容易引起用戶注意。

三、【騰訊新聞】長按點(diǎn)贊——彩蛋背后的思考，釋放用戶情緒

1. 使用場景

新聞資訊類產(chǎn)品長時(shí)間閱讀會(huì)引起用戶疲勞，如何通過點(diǎn)贊來讓用戶短暫休息。

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

設(shè)計(jì)目標(biāo)：提升用戶使用時(shí)長，短暫放松是為了更好的閱讀使用。

設(shè)計(jì)方案：前面有講過微博點(diǎn)贊動(dòng)效，其實(shí)做的蠻浮夸的，但作為泛娛樂產(chǎn)品還是挺好的，但也會(huì)強(qiáng)制打斷用戶閱讀。

在騰訊新聞中通過長按點(diǎn)贊圖標(biāo)，會(huì)激活點(diǎn)贊動(dòng)效，統(tǒng)一的紅色圖標(biāo)，強(qiáng)化點(diǎn)贊按鈕本身的屬性。隨著長時(shí)間按壓，屏幕會(huì)顯示逐漸遞增的數(shù)字，最高到+100大約需要5s，這個(gè)過程能讓用戶眼睛聚焦，大腦放空一下，好讓之后閱讀思路更加清晰。

四、【支付寶】清爽模式——Tab隱藏，專注支付工具服務(wù)

1. 使用場景

支付工具內(nèi)的眾多服務(wù)增加使得產(chǎn)品越來越臃腫，不使用的功能時(shí)常干擾用戶操作，反感聲越來越大。

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

設(shè)計(jì)目標(biāo)：通過自定義生活頻道導(dǎo)航欄，讓用戶操作更清爽，提升用戶滿意度。

設(shè)計(jì)方案：在我的-設(shè)置-功能管理-生活頻道入口，來選擇生活頻道是否在底部導(dǎo)航欄中顯示。開啟關(guān)閉配有對(duì)應(yīng)效果方便用戶直觀理解，尤其對(duì)于億級(jí)體量的產(chǎn)品，要滿足不同年齡層用戶學(xué)習(xí)成本，圖示對(duì)應(yīng)會(huì)更加友好，提升用戶理解與使用體驗(yàn)。

五、【飛書】雙擊編輯——交互的提效用途，更快更高效

1. 使用場景

在文檔預(yù)覽模式下，如何對(duì)某一行進(jìn)行快速編輯操作。

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

設(shè)計(jì)目標(biāo)：提升預(yù)覽到編輯的快速切換，縮短交互路徑，為用戶提效。

設(shè)計(jì)方案：當(dāng)用戶瀏覽一個(gè)文檔，想要在某一行進(jìn)行文字編輯時(shí)，除了右下角編輯按鈕外，還可以雙擊想要編輯的段落，即可快速進(jìn)入編輯模式，同時(shí)光標(biāo)停留在雙擊位置處，很是高效。

這就是菲茨定律，通過雙擊交互來替代點(diǎn)擊編輯按鈕的交互時(shí)間，從而讓編輯效率得到提升。反觀語雀，移動(dòng)端并沒有做到這點(diǎn)，編輯文章回到頂部，還得和有優(yōu)化空間的。

六、【貝殼找房】新舊看房——產(chǎn)生預(yù)判，避免白走一趟浪費(fèi)的時(shí)間

1. 使用場景

二手房中，看現(xiàn)房很難產(chǎn)生清空后的房屋預(yù)判，會(huì)因?yàn)榉块g過亂或東西過多導(dǎo)致空間不好的預(yù)期，如何解決用戶這種問題？

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

設(shè)計(jì)目標(biāo)：通過VR技術(shù)進(jìn)行三維空間采集來提供全新室內(nèi)設(shè)計(jì)布局，提高房屋轉(zhuǎn)賣率。

設(shè)計(jì)方案：在二手房詳情頁中，點(diǎn)擊設(shè)計(jì)效果，能看到當(dāng)前與新裝修后的室內(nèi)對(duì)比VR圖，避免因舊家布局亂，產(chǎn)生不好的預(yù)期，從而不在詳細(xì)了解。

雖然VR技術(shù)是接第三方服務(wù)，但這種新舊裝修對(duì)比最能直觀給用戶產(chǎn)生正向預(yù)期。好不容易買一套房，不也要找室內(nèi)設(shè)計(jì)先看下整體裝修效果嗎！

七、【得物】3D試穿——及時(shí)體驗(yàn)，減少門店試穿過程

1.使用場景

線上電商最大的痛點(diǎn)就是無法試穿，導(dǎo)致看上去挺好，但我自己穿就不知道了。

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

設(shè)計(jì)目標(biāo)：通過AR現(xiàn)實(shí)，提升試穿直觀感受，從而促進(jìn)商品下單率。

設(shè)計(jì)方案：在商品詳情頁中，點(diǎn)擊AR試穿，就可透過手機(jī)看到鞋子試穿后的效果，除了真實(shí)腳感不能感受，外形各角度效果都非常不錯(cuò)，有種身臨其境的感覺，刺激用戶進(jìn)行下單決策。

無論是直播電商試穿或者AR試穿都在解決用戶無法親身體驗(yàn)的嘗試，通過一個(gè)對(duì)象嫁接，能使用戶得到信任，從而提升商品交易量。

八、【映客直播】 雙直播 – 一個(gè)預(yù)覽直播一個(gè)小窗直播，屏效利用更大

1.使用場景

關(guān)注的博主，晚上同一時(shí)間開播，無奈只有一個(gè)手機(jī)不能一起看。

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

設(shè)計(jì)目標(biāo)：提升直播曝光率，為用戶提供更更多博主直播，提高屏效。

設(shè)計(jì)方案：在直播頁面中，選擇小窗口模式，會(huì)以浮窗直播外漏，用戶可邊看小窗直播，邊看預(yù)覽直播大畫面，目的為了曝光更多優(yōu)秀博主內(nèi)容，讓用戶按需選擇。雙直播無論對(duì)用戶還是博主都提供了多種引流方式，從而提升瀏覽量與瀏覽時(shí)長。

九、【拼多多】商品收藏——預(yù)選屬性默認(rèn)保存，一鍵懂你

1. 使用場景

拼多多拼著買更劃算，可遇到當(dāng)下不買但需要過幾天買的東西，又不想滑走商品，這時(shí)就需要收藏功能來代替購物車。

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

設(shè)計(jì)目標(biāo)：提升收藏功能的易用性，不用二次選擇即可一鍵下單，快捷高效購物。

設(shè)計(jì)方案：在瀏覽商品時(shí)，選擇好商品屬性，點(diǎn)擊收藏，商品默認(rèn)放在收藏模塊中，需要買時(shí)，只需打開收藏頁，就能看到商品信息和之前預(yù)選的商品屬性，節(jié)省二次選擇操作，為用戶提供高效收藏。

相比淘寶的收藏，只是簡單的商品收藏，并沒有把預(yù)選的商品屬性一并收藏起來，用戶在收藏中購物時(shí)，還需要再進(jìn)入商品頁二次選擇，頻繁重復(fù)的操作，帶來的低效的購物體驗(yàn)。

十、【微信】視頻號(hào)喜歡——頭像神奇位移，極度舒服

1. 使用場景

在瀏覽視頻時(shí)，如何引導(dǎo)并強(qiáng)化點(diǎn)擊喜歡的操作。

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

設(shè)計(jì)目標(biāo)：提升喜歡交互的趣味體驗(yàn)，提高點(diǎn)擊率。

設(shè)計(jì)方案：當(dāng)點(diǎn)擊喜歡，你能看到自己的頭像會(huì)有一個(gè)弧形移動(dòng)效果，最終停留在正文上方。很流暢的操作，頭像停留出是好友旁邊，有種擠在朋友身邊的錯(cuò)覺，并不孤單，加強(qiáng)親密性，視頻都很喜歡并不是只有我自己覺得好。

弧形移動(dòng)相比直線移動(dòng)更具有動(dòng)感，更能抓住用戶視線，從而再次強(qiáng)化喜歡按鈕的功能。

十一、結(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é)議。