編輯導(dǎo)語：當(dāng)下的產(chǎn)品種類豐富，有一些產(chǎn)品的小細(xì)節(jié)做到很到位，深入用戶心。我們一起來看看這些常用產(chǎn)品中哪些小細(xì)節(jié)是值得get的。

該系列內(nèi)容主要會分析當(dāng)下不同產(chǎn)品中值得大家借鑒的交互流程以及設(shè)計(jì)，其目的是為了讓大家能夠和筆者一起探討體驗(yàn)設(shè)計(jì)的價(jià)值，更希望大家能夠在評論區(qū)指出筆者的不足，從而輸出更好的內(nèi)容。

案例目錄：

1. 【微信】微信幫你快速找到收藏夾中塵封多年的內(nèi)容
2. 【攜程】提供用戶隱形需求的卡片式tab欄
3. 【快手】讓用戶觀看電影解說尋找下一集的快捷操作
4. 【扇貝單詞】金剛區(qū)的多種用法
5. 【網(wǎng)易云音樂】降低用戶排斥度的續(xù)費(fèi)提示
6. 【小紅書】如何構(gòu)建良好的用戶聊天氛圍
7. 【soul】“趕緊給自己抓一個(gè)小寵物”，soul的像素風(fēng)寵物養(yǎng)成小游戲
8. 【美團(tuán)】記得留住幫閨蜜點(diǎn)奶茶的小票，證明你心中有她
9. 【小紅書】讓你輕松“盜用”網(wǎng)紅濾鏡
10. 【Moo音樂】不一樣的切歌體驗(yàn)
11. 【淘寶】圖片中你想要的可能和別人不一樣
12. 【淘寶】「定向搜索」教你如何做內(nèi)容篩選
13. 【京東】隱藏在購買頁的搜索框
14. 【抖音剪映】邊看邊播讓你輕松get爆款視頻剪輯技巧
15. 【qq音樂】不要再讓切歌影響你駕車

一、?【微信】微信幫你快速找到收藏夾中塵封多年的內(nèi)容

1. 產(chǎn)品體驗(yàn)

內(nèi)容頁添加標(biāo)簽：點(diǎn)擊收藏按鈕后，底部會出現(xiàn)提示，引導(dǎo)用戶為內(nèi)容添加標(biāo)簽。

收藏頁添加標(biāo)簽：進(jìn)入收藏頁面，左滑單條內(nèi)容卡片出現(xiàn)工具欄，點(diǎn)擊icon添加標(biāo)簽。

內(nèi)容頁搜索標(biāo)簽/內(nèi)容：點(diǎn)擊搜索，下方展示標(biāo)簽內(nèi)容，可快速搜索收藏內(nèi)容。

2. 產(chǎn)品思考

相信大家都有過類似的體驗(yàn)，就是自己在收藏夾中收藏了許多內(nèi)容，但由于長時(shí)間沒翻閱，內(nèi)容就永遠(yuǎn)的塵封在了收藏夾中。

當(dāng)自己想再次尋找內(nèi)容時(shí)，由于忘記名字和收藏的時(shí)間很難再次找到。

微信的標(biāo)簽功能很好的幫助大家解決了這個(gè)問題，簡單的一個(gè)標(biāo)簽功能就能很好的幫助用戶提高收藏夾的管理體驗(yàn)，也大大增加了該模塊的用戶活躍度。

或許當(dāng)我們想提升產(chǎn)品某個(gè)區(qū)域的活躍度時(shí)，并不需要在首頁增加各種導(dǎo)流，只需要在合適的場景下引導(dǎo)用戶使用即可。

3. 借鑒點(diǎn)

用戶點(diǎn)擊搜索框后，彈出的快捷標(biāo)簽搜索很好提升了用戶搜索的效率。直接充當(dāng)了收藏夾的作用。

二、【攜程】提供用戶隱形需求的卡片式tab欄

1. 產(chǎn)品體驗(yàn)

在購票區(qū)域，點(diǎn)擊機(jī)票tab欄以后，會出現(xiàn)「特價(jià)機(jī)票」的子層級tab。點(diǎn)擊火車tab以后，會出現(xiàn)「境外火車」的子層級tab。

2. 產(chǎn)品思考

當(dāng)用戶在購買機(jī)票的時(shí)，不同時(shí)間段的價(jià)格各不相同，因此許多用戶會花費(fèi)大量的時(shí)間在選擇便宜的機(jī)票上。

常規(guī)的設(shè)計(jì)策略是在每個(gè)航班信息中寫上【特惠】的標(biāo)簽。而攜程的策略是在查詢票價(jià)的時(shí)候直接可以快速選擇特價(jià)票，這無疑是提升了用戶的購票體驗(yàn)。

3. 借鑒點(diǎn)

當(dāng)我們在設(shè)計(jì)tab欄的信息層級時(shí)，總會遇到類似于位置不夠，難以區(qū)分父子層級的困難。該方式很好的幫助我們解決了單一tab層級下，子層級信息布局方式。

三、【快手】讓用戶觀看電影解說尋找下一集的快捷操作

1. 產(chǎn)品體驗(yàn)

精選頁右滑展示作者更多作品，可在該頁面快速切換創(chuàng)作者內(nèi)容。

2. 產(chǎn)品思考

當(dāng)用戶點(diǎn)擊創(chuàng)作者個(gè)人主頁時(shí)，最高頻次的操作就是查看該作者的更多作品。

相信大家都有過類似的體驗(yàn)，當(dāng)自己在觀看電影解說或連續(xù)劇的短視頻內(nèi)容時(shí)，如果對內(nèi)容非常感興趣，就需要尋找下一集內(nèi)容，我們會點(diǎn)擊頭像進(jìn)入用戶主頁，然后一個(gè)個(gè)尋找，該操作會花費(fèi)很長時(shí)間，極有可能在過程中失去耐心導(dǎo)致直接退出個(gè)人主頁查看其他視頻。

在這個(gè)大量內(nèi)容充斥的時(shí)代下，稍有不慎就會導(dǎo)致用戶直接流失。

表面上快手只是方便了用戶快速切換內(nèi)容，但其實(shí)我們可以看出產(chǎn)品對于該模塊的產(chǎn)品策略。

產(chǎn)品一方面是希望用戶能看到更多創(chuàng)作者的垂類作品，另一方面也是鼓勵(lì)創(chuàng)作者輸出成系列的內(nèi)容，這也增加用戶與創(chuàng)作者的聯(lián)系。

3. 借鑒點(diǎn)

我們在產(chǎn)品設(shè)計(jì)過程中，需要考量到用戶在使用場景下的各類操作，減少關(guān)鍵任務(wù)的操作流程。

類似于這樣的設(shè)計(jì)可以運(yùn)用在照片查看、視頻查看等需要快速切換前后內(nèi)容的產(chǎn)品當(dāng)中。

四、【扇貝單詞】金剛區(qū)的多種用法

1. 產(chǎn)品體驗(yàn)

在扇貝單詞的發(fā)現(xiàn)頁下，金剛區(qū)做出了樣式改變。

2. 產(chǎn)品思考

金剛區(qū)一般在產(chǎn)品中充當(dāng)產(chǎn)品主要功能的入口，在一般情況下產(chǎn)品迭代是不會改變金剛區(qū)在整體頁面的布局以及排列順序。

用戶對于金剛位分別是什么功能已形成了一定的肌肉記憶，因此這也給金剛區(qū)的設(shè)計(jì)和作用提出來更多可能性。

如產(chǎn)品在某一時(shí)間段準(zhǔn)備迎接一些重要節(jié)日或者活動(dòng)，金剛區(qū)可以成為烘托氣氛的重要元素。

因?yàn)樗诘奈恢檬钱a(chǎn)品中的視覺中心，雖說該區(qū)域承載的是核心功能，過多的調(diào)整會影響用戶的可用性，但總是一成不變也會給用戶造成疲勞。

不如將金剛區(qū)作為運(yùn)營活動(dòng)的核心區(qū)域，從而影響用戶使用產(chǎn)品時(shí)的整個(gè)氛圍。

五、【網(wǎng)易云音樂】降低用戶排斥的另類續(xù)費(fèi)提示

1. 產(chǎn)品體驗(yàn)

當(dāng)用戶會員即將過期時(shí)，網(wǎng)易云音樂會在歌單列表上提示用戶續(xù)費(fèi)。

2. 產(chǎn)品思考

我們經(jīng)常在思考如何讓用戶能夠自愿且主動(dòng)地進(jìn)行消費(fèi)，現(xiàn)在最常見的做法是采用首月超低的價(jià)格引導(dǎo)用戶連續(xù)包月，用戶可能會因?yàn)橥浕蛘吲侣闊亩_(dá)成連續(xù)包月的效果。

單對于非會員或是放棄成為會員的用戶，如何委婉的引導(dǎo)用戶充值會員是一個(gè)困難的事情，如果采用直接的彈窗或者toast提示，則會打擾用戶，給予用戶不好的使用體驗(yàn)，但如果引導(dǎo)的過于隱蔽則會容易被用戶無視。

網(wǎng)易云音樂采用的做法則是在特定的場景下告訴用戶如果不充值會員則會失去什么。這樣的方式即引導(dǎo)了用戶充值，表達(dá)了會員能夠帶來的權(quán)益，更重要的則是在恰當(dāng)時(shí)機(jī)和場景下給予了用戶消費(fèi)的理由。

3. 借鑒點(diǎn)

當(dāng)我們在思考導(dǎo)流類設(shè)計(jì)時(shí)，大多數(shù)設(shè)計(jì)師采用的方式是彈窗和提示。其實(shí)我們可以思考用戶會在什么樣的場景下需要該功能，在用戶有需求的時(shí)刻給予引導(dǎo)才是最有效的引導(dǎo)。

六、【小紅書】小紅書幫你巧妙的開啟聊天

1. 產(chǎn)品體驗(yàn)

在用戶打開與其他用戶的聊天界面中，右下角會出現(xiàn)“比心”的快捷操作。

2. 產(chǎn)品思考

在平臺中，打開聊天界面就會出現(xiàn)比心的表情，巧妙地幫助了用戶不知道如何開場的尷尬，對于消息的接受者，看到有粉絲給自己比心，也會更愿意回復(fù)。

小紅書在聊天場景下所做的嘗試，我們可以看到背后的原因其實(shí)是小紅書針對于社區(qū)運(yùn)營的策略。

社區(qū)運(yùn)營大多數(shù)的主戰(zhàn)場是在評論區(qū)這樣群體效應(yīng)明顯的區(qū)域，但其實(shí)也不能放過人群中點(diǎn)與點(diǎn)的鏈接。或許只是一個(gè)簡單動(dòng)畫就打破了人與人之間的尷尬。

3. 借鑒點(diǎn)

在這里筆者有一個(gè)大膽的猜想，這類提示“表情”可以運(yùn)用在不同類型的聊天產(chǎn)品中，或許不只是一個(gè)表情也可以是一句話，而這里的內(nèi)容可以加入產(chǎn)品策略、slogon、品牌元素。

比如在類似于企業(yè)辦公場景下可以內(nèi)置禮貌且不失有趣的開場白，在soul這樣的陌生人社交平臺中則可以內(nèi)置容易引起話題的開場白。

七、【soul】趕緊給自己抓一個(gè)小寵物，soul的像素風(fēng)寵物養(yǎng)成小游戲

1. 產(chǎn)品體驗(yàn)

在soul平臺中，可以通過抓娃娃的機(jī)制選擇電子寵物領(lǐng)養(yǎng)。

2. 產(chǎn)品思考

現(xiàn)在許多產(chǎn)品都嘗試通過在產(chǎn)品中飼養(yǎng)電子寵物來增加用戶粘性，比如天貓的“超級星秀貓”。

從策略上來思考，產(chǎn)品是希望通過利用養(yǎng)成類機(jī)制吸引用戶在一天中使用產(chǎn)品的頻次，從而提升產(chǎn)品的活躍度。

其中的喂養(yǎng)、澆水、裝扮等功能需要搭配完成產(chǎn)品中的任務(wù)，該策略很巧妙地將產(chǎn)品的各個(gè)功能與電子寵物進(jìn)行串聯(lián)。

在這個(gè)尋求差異化的時(shí)代，soul推出電子寵物和其他產(chǎn)品拉開了差距。

從視覺風(fēng)格上看，采用了像素風(fēng)，這與當(dāng)下產(chǎn)品相比較，從視覺上拉開了差距，這也符合soul產(chǎn)品在市場上的年輕定位。

另一方面則是對于寵物的抓取機(jī)制，相較于其他產(chǎn)品，如“超級星秀貓”“螞蟻莊園”等頭部產(chǎn)品的寵物模塊都是直接給予用戶一只寵物，但soul則是用抓娃娃的形式讓用戶在多個(gè)寵物中抓取自己想要的。

從用戶體驗(yàn)層面來說，用戶在最開始就付出了更多的情緒，這更有利于用戶再次使用該模塊的幾率。

八、【美團(tuán)】記得留住幫閨蜜點(diǎn)奶茶的小票，證明你心中有她

1. 產(chǎn)品體驗(yàn)

在美團(tuán)的找人支付功能中，付款用戶會收到一個(gè)賬單，當(dāng)完成支付后，賬單的狀態(tài)會呈現(xiàn)出被檢票的樣式。

2. 產(chǎn)品思考

該狀態(tài)是用戶成功幫朋友付款完成的狀態(tài)。仔細(xì)看可以看出該模塊采用了門票的樣式，相信大家都有過這樣的經(jīng)歷，當(dāng)你拿著門票進(jìn)入游樂場或者電影院，工作人員會進(jìn)行檢票，檢票成功后會在票上打一個(gè)孔，有的甚至直接把票撕一個(gè)角。

美團(tuán)外賣成功幫人付款的狀態(tài)非常滿足用戶的心智模型，是否滿足用戶心智模型是評判一個(gè)產(chǎn)品體驗(yàn)是否優(yōu)秀的重要因素。根據(jù)用戶心智模型所設(shè)計(jì)出的功能越來越多地出現(xiàn)在產(chǎn)品中。

九、【小紅書】讓你輕松“盜用”網(wǎng)紅濾鏡

1. 產(chǎn)品體驗(yàn)

在筆記詳情頁面，圖片區(qū)域的左下角會出現(xiàn)濾鏡的按鈕，點(diǎn)擊濾鏡便會出現(xiàn)使用濾鏡的快捷方式以及使用人數(shù)。

2. 產(chǎn)品思考

相信大家在逛小紅書的時(shí)候都會看到非常精致的照片，許多用戶會去詢問博主網(wǎng)紅用的什么軟件調(diào)色的，用的哪一款濾鏡。目的是希望自己的照片也能夠像博主網(wǎng)紅的照片擁有一樣色調(diào)和質(zhì)感。

我們也可以在平臺中點(diǎn)開優(yōu)質(zhì)的圖片內(nèi)容，下方的評論區(qū)會充斥著類似“求”同款濾鏡的聲音。

小紅書洞察到了用戶的這一需求，非常聰明地將「同款濾鏡」這樣的入口放在圖片的左下角，讓用戶看到喜歡的濾鏡，直接點(diǎn)擊就能對自己的圖片進(jìn)行美化或者立馬拍一張照片。

在筆者看來這個(gè)細(xì)節(jié)不僅僅幫助用戶解決了濾鏡的需要，更是在引導(dǎo)用戶發(fā)送筆記，從而增加產(chǎn)品活躍度，將更多的普通用戶往內(nèi)容創(chuàng)作者方向引導(dǎo)。當(dāng)我們點(diǎn)擊同款濾鏡后進(jìn)入的不單只是美化圖片的區(qū)域，而直接是發(fā)送筆記的模塊。

十、【Moo音樂】不一樣的切歌體驗(yàn)

1. 產(chǎn)品體驗(yàn)

在音樂播放頁面，下方會有播放器復(fù)層，滑動(dòng)播放器左邊的唱片即可切歌。在歌曲播放頁，全局上下滑動(dòng)可實(shí)現(xiàn)列表內(nèi)切歌。

2. 產(chǎn)品思考

在這個(gè)互聯(lián)網(wǎng)產(chǎn)品飛速發(fā)展的時(shí)代，產(chǎn)品設(shè)計(jì)和功能同質(zhì)化已是不爭的事實(shí)。

大家都希望將自己的產(chǎn)品做出差異化，但真的想要實(shí)際落地的時(shí)候卻無從下手。

Moo的切歌功能給了我們很好的參考。在音樂播放器中切歌是用戶高頻使用的操作，想要產(chǎn)品有差異化或許可以從尋找產(chǎn)品中的高頻操作開始，如淘寶的「購買」和「加入購物車」，微信的「發(fā)紅包」，bilibili的「視頻暫停/播放」。

當(dāng)我們尋找到高頻操作后則需要針對操作進(jìn)行優(yōu)化和升級，可以融入品牌基因或者革新交互方式等等。

Moo則是將品牌和交互都融入了其中，這樣既能拉開與同類產(chǎn)品的差距，更能提高該產(chǎn)品對于用戶的品牌認(rèn)知。

但筆者在此提醒，在做差異化設(shè)計(jì)時(shí)還是要符合產(chǎn)品的目標(biāo)以及用戶目標(biāo)，如果為了差異而差異只會導(dǎo)致用戶的流失。

十一、【淘寶】圖片中你想要的可能和別人想要的不一樣

1. 產(chǎn)品體驗(yàn)

在淘寶逛逛模塊，進(jìn)入單條內(nèi)容，點(diǎn)擊「找同款」彈出底部彈窗，可針對識別內(nèi)容進(jìn)行產(chǎn)品篩選。

2. 產(chǎn)品思考

我們在逛淘寶的時(shí)候，特別是逛逛模塊，我們會看到琳瑯滿目的商品推薦/測評的內(nèi)容。

看到有趣的會直接進(jìn)入內(nèi)容詳情頁，尋找自己喜歡的產(chǎn)品。

但有時(shí)候博主拍了照片或視頻本來只想推薦眼影，但你卻看上她的口紅，接下來就千方百計(jì)和博主取得聯(lián)系，評論區(qū)留言/私信都來一遍。

「找同款」的功能很好的解決了這個(gè)問題，該功能是基于淘寶圖片搜索所延展的功能，將圖片搜索不僅限于搜索頁，很巧妙的將博主內(nèi)容和平臺技術(shù)相結(jié)合，提高了用戶在平臺中消費(fèi)的可能性。

十二、【淘寶】「定向搜索」教你如何做內(nèi)容篩選

1.? 產(chǎn)品體驗(yàn)

點(diǎn)擊淘寶消息tab搜索框，下方會出現(xiàn)搜索指定內(nèi)容，點(diǎn)擊后進(jìn)入定向搜索。

2. 產(chǎn)品思考

現(xiàn)如今許多產(chǎn)品都開始往超級APP的方向發(fā)展，產(chǎn)品功能越來越區(qū)域復(fù)雜，對應(yīng)搜索結(jié)果也越來越復(fù)雜，用戶想要找到自己想要的內(nèi)容則需要花費(fèi)大量的精力。

定向搜索可以幫助用戶很好的解決這個(gè)問題，用戶懷著目的來到搜索，則說明知道自己想要什么，點(diǎn)擊定向搜索則過濾了近百分之八十的不相關(guān)信息，這無疑是減少了用戶的操作時(shí)間。

十三、【京東】隱藏在購買頁的搜索框

1. 產(chǎn)品體驗(yàn)

進(jìn)入京東產(chǎn)品內(nèi)容詳情頁，往下瀏覽，瀏覽到店鋪信息時(shí)，下方出現(xiàn)搜索框，并給予相關(guān)的產(chǎn)品搜索關(guān)鍵詞。

2. 產(chǎn)品思考

當(dāng)我們點(diǎn)開電商類產(chǎn)品的購買詳情頁時(shí)，大多數(shù)人的瀏覽順序是先看相關(guān)的產(chǎn)品宣傳圖，更多維度的了解產(chǎn)品的外觀，再是看評論區(qū)的評價(jià)。

如果此時(shí)都處于比較滿意的狀態(tài)，那么用戶的下一步操作就是加入購物車或者立即購買。

但如果產(chǎn)品的相關(guān)信息并不符合期望就會退出頁面重新搜索，嘗試更精準(zhǔn)的搜索關(guān)鍵詞找到自己想要的產(chǎn)品。

從退出到搜索需要至少兩步的操作，有些時(shí)候更是需要3步。

在京東的產(chǎn)品詳情頁下方的搜索區(qū)域無疑是幫助用戶縮短了操作路徑，并且搜索框的位置是在評論區(qū)的下方，如果用戶看到了搜索框，大概率就說明用戶已經(jīng)瀏覽了大部分產(chǎn)品信息，此時(shí)用戶是否需要對產(chǎn)品有進(jìn)一步操作大致有了預(yù)期。

如果要購買或加入購物車在這之前就會進(jìn)行該類操作，但如果是需要退出頁面，用戶所停留的位置大概率也就是瀏覽完產(chǎn)品信息后的位置。在該位置放置一個(gè)搜索框是恰到好處的。

從數(shù)據(jù)層面來思考，京東分析了詳情頁的跳出率，用戶從哪個(gè)位置跳出的頻率最高，然后去了哪里。將跳出的位置與要去的目的地結(jié)合這樣極大的實(shí)現(xiàn)了最短路徑的目標(biāo)。

十四、【抖音剪映】邊看邊播讓你輕松“get”爆款視頻剪輯技巧

1. 產(chǎn)品體驗(yàn)

在產(chǎn)品中，點(diǎn)擊相關(guān)視頻內(nèi)容，右下角會出現(xiàn)邊看邊剪輯按鈕。點(diǎn)擊后會進(jìn)入視頻編輯頁面。該視頻則會以復(fù)層的形式出現(xiàn)在編輯頁面。

2. 產(chǎn)品思考

邊看邊剪這其實(shí)是大部分專業(yè)的視頻設(shè)計(jì)師都會有的需求，他們會在制作視頻前參考大量同類型作品，以及學(xué)習(xí)特殊效果的教程，但此類需求只能在web并且搭配雙屏幕才得到滿足。

隨著抖音的創(chuàng)作生態(tài)越來越完善，創(chuàng)作者們的能力越來越強(qiáng)，對于創(chuàng)作內(nèi)容的品質(zhì)要求越來越高，單純的自主創(chuàng)作早已不能滿足現(xiàn)在創(chuàng)作者的需求，因此在剪映里的內(nèi)容推薦中出現(xiàn)了邊看邊播的功能。

這實(shí)現(xiàn)了用戶在手機(jī)上也能邊看參考邊剪輯的需求。能看出剪映在移動(dòng)端為滿足創(chuàng)作者做出的嘗試。這不僅能提高創(chuàng)作者創(chuàng)作的積極性同時(shí)還能保證抖音的內(nèi)容質(zhì)量穩(wěn)步提高。

十五、【QQ音樂】不要再讓切歌影響你的駕車專注度

1. 產(chǎn)品體驗(yàn)

在QQ音樂的播放頁面，點(diǎn)擊更多會彈出底部菜單，點(diǎn)擊菜單中駕駛模式會播放頁面的功能進(jìn)行重新適配，將常用功能的按鈕放大。

2. 產(chǎn)品思考

想象一下，當(dāng)你開著自己的愛車，穿梭在城市中心的高架上，一邊看著窗外的景色，一邊聽著音樂，這個(gè)時(shí)候突然推薦了一首“難聽”的音樂，將你從這片刻的享受中拉了出來，于是你想要切換音樂，此時(shí)你需要尋找按鈕，但是視線不能離開正前方太久，你需要反復(fù)切換視角。原本美好的心情可能被一首突如其來的音樂打斷了。

QQ音樂的駕駛模式優(yōu)化了在駕車場景下的一系列交互。將切歌的按鈕變成左滑和右滑，將常用功能放大，剔除了需要用戶花時(shí)間注視屏幕才能完成的功能，如評論和切換音效。

現(xiàn)如今，我們在設(shè)計(jì)產(chǎn)品體驗(yàn)時(shí)需要具備場景思維，分析用戶在使用我們產(chǎn)品時(shí)的各個(gè)特殊場景，如需要單手操作的地鐵上，吵雜的商城，燈光昏暗的車庫，嚴(yán)肅的會議室。分析這些場景能夠有助于幫洞察用戶的需求從而讓產(chǎn)品體驗(yàn)越來越好。

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

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