編輯導語：學習好的產(chǎn)品設(shè)計，不僅有助于提升自己的能力，也能開拓自己的思維方式。本文作者對一些產(chǎn)品的優(yōu)秀設(shè)計進行了分析，并提出了自己的思考，推薦對產(chǎn)品設(shè)計感興趣的童鞋閱讀。

設(shè)計成長在于日常的學習積累，多看、多想、多寫是最基礎(chǔ)的一種方式，體驗產(chǎn)品的一些設(shè)計點，思考并記錄能讓自己學習理解得更深。除了可以豐富自己的設(shè)計體系之外，也能從優(yōu)秀的設(shè)計中吸收更多的東西，賦能在自己的日常工作當中。

產(chǎn)品體驗其實是一個很好的培養(yǎng)自己閱讀習慣的方法，簡單、便捷、易獲取。但閱讀，并把自己理解的東西寫出來呈現(xiàn)給別人，卻是一個很艱難的過程。因為大家對于設(shè)計的理解也會千差萬別，所以內(nèi)容的表達若有不恰當或站友不認同之處，歡迎指摘和交流討論。

內(nèi)容不求有多出彩，只希望能彼此共勉。設(shè)計總結(jié)均由自己思考編寫，體驗中注明了使用機型、產(chǎn)品版本和設(shè)計點類型，便于大家了解。文章篇幅過長，多達1w+字，閱讀時間會比較久，感謝你的細心閱讀，如有建議可反饋留言！

2021產(chǎn)品體驗思考第1彈目錄

01、抖音——“剛剛看過”交互設(shè)計的體驗思考

02、微信——高效率的“撤回”和“重新編輯”功能

03、淘寶——詳情頁的商品“標簽”功能

04、轉(zhuǎn)轉(zhuǎn)——新用戶「發(fā)布閑置商品任務(wù)」引導流程

05、掃描全能王——文檔列表中的交互操作小細節(jié)

06、優(yōu)酷——趣味性的彈幕互動交流

07、菜鳥—物流信息狀態(tài)的標簽Tab設(shè)計

08、綠洲——“WOW”彩虹屁水滴打榜評論功能

09、愛彼迎——絲滑的手勢交互和收藏評分功能

10、攜程旅行——首頁金剛區(qū)差異化設(shè)計

一、抖音——“剛剛看過”交互設(shè)計的體驗思考

1. 設(shè)計描述

當用戶打開抖音首頁推薦模塊，想要看完當前視頻后，繼續(xù)瀏覽分集視頻內(nèi)容時，點擊創(chuàng)作者頭像進入個人中心頁面，上滑查找剛剛瀏覽視頻內(nèi)容的續(xù)集時，若剛剛觀看的視頻位置超過列表的第5排，第5排內(nèi)容上滑出現(xiàn)，觸發(fā)按鈕彈出。

“剛剛看過”按鈕從底部漸入右下方固定，點擊按鈕，列表快速上滑直接鎖定剛剛觀看的內(nèi)容，且剛剛觀看的內(nèi)容和其他視頻內(nèi)容有明顯區(qū)別提示，剛剛看過的內(nèi)容上有遮罩效果和文案提示。

2. 設(shè)計思考

當初看到這個功能的時候，確實讓我很受用。首先我能很快找到視頻并停留，當我能快速觸達剛剛看到的內(nèi)容的時候，會對上一級頁面觀看的視頻內(nèi)容有短暫的回憶，這個記憶沉浸會讓用戶停留在頁面的時間延長，從而減少了頁面跳出率，同時我也成為了很多影視剪輯作者的粉絲。

當長時間使用這個新功能之后，作為深度用戶的我也思考到了很多，發(fā)現(xiàn)不管在首頁推薦或關(guān)注模塊，還是在朋友這個tab，觀看當前內(nèi)容時，從作者頭像點擊進去，剛剛瀏覽的視頻大部分都會在列表最前面展示給用戶。推薦展示的規(guī)則和“剛剛看過”功能的初衷，是不是平臺希望創(chuàng)造者最近更新的視頻能夠快速觸達給用戶，引起用戶注意，并減少頁面跳出率且能順利成為視頻作者的粉絲并增加流量呢？

（1）平臺

抖音依賴的是短視頻內(nèi)容，抖音的用戶可以是視頻的創(chuàng)造者也可以是觀看者。

一方面，它需要鼓勵視頻創(chuàng)造者持續(xù)地輸出優(yōu)質(zhì)的視頻內(nèi)容，然后通過自己的算法機制，幫創(chuàng)造者將視頻推送給用戶；另一方面，它也在提升產(chǎn)品觀看者的用戶體驗（內(nèi)容的質(zhì)量和產(chǎn)品的使用滿意度），幫助更多觀看視頻的人成為創(chuàng)造者的粉絲，增加他們的流量，反向刺激創(chuàng)造者進行視頻內(nèi)容輸出，循環(huán)反復。

（2）創(chuàng)造者

短視頻變現(xiàn)對于創(chuàng)造者也是一個極大的利益刺激點，他們需要源源不斷地輸出高質(zhì)量的作品來增加粉絲和點贊量，這樣才能讓平臺給其推送更多的流量。接到更多的商務(wù)合作進行短視頻變現(xiàn)。

（3）觀看者

對于觀看者來說有打發(fā)碎片化時間的作用。抖音短視頻內(nèi)容豐富，類型多樣，確實能吸引不同類型，不同年齡層次的觀看者。對于用戶來說，需要產(chǎn)品使用滿意度高，減少思考決策時間，目標觸達效率高，能解決問題。

二、微信——高效率的“撤回”和“重新編輯”功能

1. 設(shè)計描述

當用戶編輯一大段信息內(nèi)容發(fā)送出去之后，若發(fā)現(xiàn)編輯的信息表達不妥當或者是文字表述有問題，在兩分鐘內(nèi)的反應時間內(nèi)可長按信息內(nèi)容進行撤回操作，及時挽回損失，撤回之后會有文案提示：“你撤回了一條信息，重新編輯”，點擊重新編輯，且之前撤回的信息內(nèi)容直接鍵入到輸入框進行修改。

2. 設(shè)計思考

自動讀取，減少操作的方式契合尼爾森設(shè)可用性原則中的“容錯原則”和“協(xié)助記憶原則”，高效率幫助用戶從錯誤中恢復并完成內(nèi)容輸出修改和發(fā)送。這兩個高效的功能在第一次使用的時候，真的既驚喜又意外。微信團隊大佬們真的對于用戶使用場景和需求思考的很深，給大大的贊。

三、淘寶——詳情頁的商品“標簽”功能

1. 設(shè)計描述

我記得之前使用淘寶的時候，進入詳情頁，商品大圖基本是以圖片的形式呈現(xiàn)，隨著用戶對產(chǎn)品有更加嚴格的要求，又增加了視頻、gif等樣式。

新版本上，很多店鋪商品大圖下面會有一排標簽，商戶可根據(jù)自己的產(chǎn)品來配置標簽名稱，再對應配置不同的展示內(nèi)容。這樣大大增加了商品呈現(xiàn)的形式和商品購買機率。標簽也可以更多地收納商品描述的資源和信息，增加用戶的信賴感和滿足感。賣家的標簽設(shè)置還可以按不同類型的商品需求來配置。不同的標簽對應不同的宣傳呈現(xiàn)形式。

2. 設(shè)計思考

（1）趣味性的購買體驗-卡西歐手表

如圖，不同的卡西歐代理商在展示商品的時候，都使用了標簽功能，唯一的區(qū)別是一個使用“AR試戴”功能，一個使用“3D”功能多角度查看商品，個人算是低成本嘗試體驗了一把將卡西歐戴在手上的感覺?；诩夹g(shù)的AR體驗，讓用戶能模擬產(chǎn)品的試戴場景，3D旋轉(zhuǎn)也能讓用戶多角度的觀察產(chǎn)品。都旨在增加用戶對產(chǎn)品的興趣和信任感，促進用戶購買欲。

（2）提升用戶購買決策-NIKE鞋

商品使用“樣式”標簽，點擊樣式標簽，商品大圖左下角會出現(xiàn)一排小縮略圖，提供商品不用的顏色屬性，可快捷地查看不同顏色商品的效果。這個標簽里面在同一位置可容納多張圖，通過控制小縮略圖查看大圖。同時點擊文字“全部”，會彈出選擇框選擇顏色尺寸。

相較之前的設(shè)計，用戶需要下滑操作找到選擇列表才能挑選商品?，F(xiàn)在只要進入頁面就可以查看產(chǎn)品樣式并選擇添加，這樣可以讓用戶減少瀏覽時間并盡快做出購買決策。

（3）用戶可供參考的搭配-服飾/衣服

買衣服的時候發(fā)現(xiàn)商戶賣家喜歡配置“搭配”這個標簽，并且會給圖片中模特身上的產(chǎn)品配置商品鏈接。因為很多商戶經(jīng)營服飾產(chǎn)品的時候，也會賣褲子、鞋等產(chǎn)品。商戶可以更多地給自己其他產(chǎn)品做配套宣傳，吸引用戶并給一些穿搭參考，促進用戶購買。

基于這個功能，我想闡述一下淘寶背后的運營，淘寶是一個通過商戶賣家入駐上架商品，并將商品呈現(xiàn)給用戶買家進行選擇購買的平臺。做過店鋪的朋友都知道，淘寶后臺有很多各式各樣的運營玩法提供給商家，幫助他們增加銷量和收入。

就比如上圖的詳情頁，后臺會有一些基礎(chǔ)的模版，也會開發(fā)很多新功能。其中的“標簽”功能，需要商戶購買使用此功能的權(quán)益，商戶就可以在后臺定制化地編輯想要呈現(xiàn)給用戶的內(nèi)容（比如賣卡西歐的商家，他需要使用”AR”這個功能吸引用戶，增加用戶購買欲，那商戶需要開通此功能并付費）。

淘寶會通過檢測用戶大數(shù)據(jù)，研究分析用戶操作行為和消費習慣，對應設(shè)計開發(fā)一些有利于商戶售賣的功能。

四、轉(zhuǎn)轉(zhuǎn)——新用戶「發(fā)布閑置商品任務(wù)」引導流程

1. 設(shè)計描述

轉(zhuǎn)轉(zhuǎn)的「新用戶發(fā)布閑置任務(wù)引導」，按照“引導開始”-“引導中”-“引導結(jié)束”三個階段，完成引導用戶發(fā)布產(chǎn)品的閉環(huán)。

首先進入到手機頁面，首頁正上方會彈出“現(xiàn)金獎勵”運營活動框，等待幾秒之后消失。

底部tab上方會常駐顯示引導框。點擊可以進入“發(fā)布閑置任務(wù)領(lǐng)獎勵”頁面，進入頁面即出現(xiàn)彈窗提示“引導完成第一個任務(wù)”，彈窗內(nèi)描述任務(wù)具體個數(shù)和步驟進度，點擊關(guān)閉按鈕，彈窗消失，可查看基礎(chǔ)任務(wù)和加速任務(wù)。

在頁面點擊返回按鈕會第二次出現(xiàn)“發(fā)布任務(wù)”挽留彈框。點擊離開，會第三次彈出“任務(wù)入口提示”引導，且需要停留五秒才能退出。直接退出后會返回首頁。可以繼續(xù)點擊操作進入“發(fā)布閑置任務(wù)領(lǐng)獎勵”頁面。

2. 設(shè)計思考

（1）階段一：引導開始

引導框的提示文案：“送你108元現(xiàn)金獎勵”和“恭喜您，你有108元待提現(xiàn)”，最大化地描述獲取金額大小的利益刺激點，避免直接使用”發(fā)布任務(wù)領(lǐng)獎勵“的描述文案。

在用戶心智模型分析中，有一種模型叫“擔心錯過”；其中有一個心理學特點是叫做厭惡損失，其實市面上類似的設(shè)計引導有很多，主要目的就是為了引導用戶操作，但根據(jù)心理學編輯出來的文案會讓用戶更容易接受。

（2）階段二：引導中

“引導完成第一個任務(wù)”彈窗：在此過程中，我通過不同賬號反復測試，發(fā)現(xiàn)在操作多次之后，這個彈窗會反復出現(xiàn)，只能說這個彈窗干擾能力有點強。

其實根據(jù)任務(wù)機制的設(shè)計，得獎勵的方式就是完成三種任務(wù)。所以在“領(lǐng)取獎勵”頁面可以將任務(wù)拆分1、2、3步，將具體信息明確展示給用戶?？紤]到頁面中的彈窗比較多，“引導完成第一個任務(wù)”、“發(fā)布任務(wù)挽留”、“任務(wù)入口提示”等彈窗。所以設(shè)計可以讓用戶少一點思考和疑問，降低用戶學習成本。

“發(fā)布任務(wù)挽留”彈窗：為了降低頁面跳出率，使用“離開”文字按鈕，弱化用戶注意力，突出發(fā)布閑置功能，這一點早前在淘買中也看到過?！稗D(zhuǎn)轉(zhuǎn)”的核心功能就是用戶發(fā)布閑置。閑置商品的增加才能維持產(chǎn)品的生態(tài)。所以強化發(fā)布功能，旨在促進用戶發(fā)布閑置商品。

“任務(wù)入口提示”彈窗：主要是為了提示用戶任務(wù)入口的位置。首先這個“發(fā)布閑置任務(wù)獎勵”任務(wù)在產(chǎn)品的多個地方都會呈現(xiàn)給用戶，彈窗出現(xiàn)過程中，強制用戶停留5秒鐘觀看gif了解這個功能的入口。這樣的操作是否會讓用戶失去耐心，降低功能的價值呢？

（3）階段三：引導結(jié)束

最后彈窗讀秒結(jié)束后，直接進入首頁。產(chǎn)品閉環(huán)流程很清晰。結(jié)束之后首頁浮層框繼續(xù)提示引導用戶可繼續(xù)進入頁面，引導框必須手動關(guān)閉或者點擊進去頁面完成發(fā)布閑置任務(wù)。

這個功能可能是基于產(chǎn)品目標：在XXX時間內(nèi)發(fā)布閑置產(chǎn)品量達到XXX個（時間段可能是是日、月、年的量），以及設(shè)計目標：思考如何促進用戶發(fā)布閑置的行為，提高發(fā)布閑置商品量，再結(jié)合運營活動鼓勵用戶發(fā)布閑置領(lǐng)獎勵，設(shè)計通過引導流程將設(shè)計目標穿插在運營活動中。

但引導中，由于過多的彈窗出現(xiàn)，強制提示困擾用戶，是不是會犧牲大量的用戶體驗來達成產(chǎn)品目標？引導功能在鼓勵用戶行為上還是比較有價值且有效率的，但設(shè)計需要克制，要在平衡產(chǎn)品價值和用戶體驗的同時解決實際問題。

五、掃描全能王——文檔列表中的交互操作小細節(jié)

1. 設(shè)計描述

（1）首頁

最近文檔的列表區(qū)域，有左右兩部分可點擊進行操作的區(qū)域。交互操作也有兩種：點按和長按操作。

左邊部分主要是縮略圖和文件時間、數(shù)目等信息內(nèi)容，點擊縮略圖或文案信息區(qū)域都會進入到文檔編輯頁，返回后，此編輯的文檔會置于列表頂部。

列表右邊是一個“描邊圓圈”設(shè)計樣式。點擊按鈕進入文檔可編輯模式，進行文檔編輯的操作。在某一整塊列表區(qū)域長按任何一個信息時，也可進入文檔編輯頁。

（2）文檔編輯頁面

和首頁一樣，都有左右兩部分構(gòu)成，但交互方式僅有上下滑動，左右位置上下滑動的操作結(jié)果是有差異的。左邊區(qū)域上下滑動時查看文檔內(nèi)容。右邊滑動的目的是為了選中目標文檔。多選需對應選中某一列文檔后，手指要持續(xù)放置手機屏幕向上或下進行移動。

2. 設(shè)計思考

（1）首頁的交互操作方式

點按右邊的“描邊小圓點”進行編輯真的很令人驚喜，誰能知道這個小玩意它其實是一個文檔編輯的功能。

正常的長按是大家比較熟悉的操作，長按可以喚起很多隱藏功能。所以這樣的小提示會被忽略。小圓圈這種樣式在用戶行為認知里面可能認為這個文檔是可以被選中的，當用戶嘗試去點擊的時候，更多地可能是出于好奇。

這個功能很類似于“小紅點”提示功能。但是產(chǎn)品將這種功能設(shè)計的精細且克制，確實是讓人想不到的。如果做成那種強提示的紅色填充樣式也許會太過于搶眼，影響用戶對于信息的判斷。

作為用戶的我，真是“驚喜”地養(yǎng)成了這樣一個使用文檔編輯流程的習慣。長按和點擊按鈕進入編輯頁面的行為操作，現(xiàn)在對我來說已經(jīng)是五五開了，事實上點按相比長按的操作方式，效率會更高，節(jié)省時間。這種低成本的教育方式確實對產(chǎn)品對用戶來說都是很有益的。

（2）被編輯過的文檔返回會置于列表頂部

這個操作真的有點讓我難受，若你同時掃描了很多張發(fā)票，但掃描好發(fā)票的的縮略圖基本一致，會鋪滿整個列表。

當頻繁地查看不同的發(fā)票信息時，你會只記得頂部的是剛被編輯過的，由于人的短時記憶會很清楚地記得置頂發(fā)票的信息。當頻繁操作之后，置頂?shù)膬?nèi)容會被反復的替換，這樣打亂人的記憶來整理列表數(shù)據(jù)的方式會增加記憶負擔。

按照最近時間的排序去展示能讓用戶思路理解更清晰。更近的時間內(nèi)容，人的記憶會更容易被喚起。也更加有條理性。其實編輯的文檔返回之后，可以在首頁文檔列表上做一些適當?shù)奶幚?，可以將縮略圖增加遮罩效果加“剛剛編輯”文案用于提示，又或者在列表信息旁邊增加文案提示。

（3）工具類產(chǎn)品的實用性很重要

文檔型工具類的產(chǎn)品除了其產(chǎn)品固有的核心功能外，就是處理編輯功能。在使用過程中，大家在接觸很多工具型產(chǎn)品的時候首先都會去嘗試各種交互手勢去操作，研究產(chǎn)品的使用方法，使用過程中遇到繁瑣不明白的操作，可能會出現(xiàn)排斥和不耐煩，甚至可能是直接放棄。

產(chǎn)品人創(chuàng)造新功能的時候，我覺得作為用戶可以嘗試和體驗，給開發(fā)產(chǎn)品的公司提出一些改進建議，這也算是作為設(shè)計師的一種積累??！

六、優(yōu)酷——趣味性的彈幕互動交流

1. 設(shè)計描述

（1）上面兩張圖片中，我們可以看到移動端優(yōu)酷操作中的兩種視頻彈幕形式：豎屏和橫屏。豎屏彈幕承載的表現(xiàn)形式比較有限，只能選擇預置文字或手動打字、發(fā)表情。橫版彈幕展示的信息更多，當全屏展開播放時，用戶的注意力是整個視頻內(nèi)容，除了囊括豎屏彈幕的基礎(chǔ)形式外，還可以進行彈幕設(shè)置，可選擇彈幕的文字表現(xiàn)樣式，在輸入的彈幕文字上還可以增加“主演頭像”小道具。

（2）兩種彈幕初始時，都有一個禁止彈幕的文字按鈕，當點擊此按鈕，彈出文字輸入框，同時可查看其他用戶的彈幕內(nèi)容，豎版彈幕的用戶文字內(nèi)容不支持點擊。橫版彈幕樣式支持更多新穎的玩法操作，可以點按其他用戶彈幕內(nèi)容當彈幕輸入喚起時，視頻會禁止播放。當發(fā)送彈幕或者撤銷彈幕編輯之后，視頻重新播放。

2. 設(shè)計思考

（1）彈幕喚起功能

進入頁面，默認彈幕禁止。點擊文字按鈕之后，輸入框直接連接彈幕按鈕彈出，同時彈幕文字內(nèi)容也慢慢出現(xiàn)在視頻內(nèi)容上。這個小交互還是非常不錯的，一個點擊動作兼顧兩種交互效果。觸發(fā)按鈕，實時展示其他內(nèi)容。

相比之前“單點單控”的功能單一性，這個交互使用讓用戶操作更靈活。鍵盤彈出后，視頻播放停止，用戶的操作重心轉(zhuǎn)移到文字內(nèi)容輸送，同時也不會錯過視頻的精彩細節(jié)。這點為用戶考慮的也很周到。

（2）彈幕樣式

豎版彈幕相比較橫版彈幕的樣式比較少，針對不同的用戶使用場景，對應的彈幕功能設(shè)置也不一樣。主要是豎版閱覽的時候除了視頻內(nèi)容之外，還會有其他的信息承載，用戶彈幕文字有多種樣式，但不支持點按操作更多。

畢竟文字呈現(xiàn)的內(nèi)容和手指可操作區(qū)域都比較受限，橫版樣式內(nèi)容更豐富，全屏展示之后，用戶的注意力也會沉浸在視頻內(nèi)容的瀏覽中，增添用戶互動交流的趣味性，同時手指操作的區(qū)域更大了，這樣可以針對文字的樣式，設(shè)計得更富有表現(xiàn)力。

（3）彈幕功用性

橫版彈幕點按其他用戶的彈幕文字內(nèi)容時，會跳出小提示框，可以進行點贊、炸、發(fā)言+1，舉報等操作。

前兩個功能操作之后會出現(xiàn)對應文案語意的小動畫；第三個功能，如果認同發(fā)言的用戶可直接發(fā)送，操作方便；舉報功能可以監(jiān)督用戶的語言規(guī)范，維護彈幕內(nèi)容的文化。彈幕的趣味性和嚴謹性也能讓用戶能夠更加開心文明地進行互動。

（4）隨著z時代來臨，用戶接觸信息會更快，更密集

表達自己想法的地方也會越來越多，彈幕只是其中的承載形式之一。彈幕生態(tài)的發(fā)展未來方向也有很多令人思考的點，例如如何提高彈幕的趣味性，如何控制彈幕內(nèi)容的文明性。

不可否認，彈幕的存在讓用戶的交流互動更密切，像優(yōu)酷這種彈幕多樣的樣式，已經(jīng)極大地豐富了彈幕的趣味性，吸引了用戶使用。同時在用戶各種分場景下，有很多針對性的設(shè)計思考，個人認為已經(jīng)很有創(chuàng)造力了。但是對于言論的自由和認知偏差也會誤導很多用戶。

所以對于很多文娛類產(chǎn)品來說，在設(shè)計出有趣的東西之余，也需要更多地承擔引導用戶行為的責任。

七、菜鳥——物流信息狀態(tài)的標簽Tab設(shè)計

1. 設(shè)計描述

菜鳥一級tab標簽對應產(chǎn)品的主要業(yè)務(wù)：收件和寄件。二級的錨點tab標簽對應的是業(yè)務(wù)的主要狀態(tài)：分為“待收件（待寄出）”、“派送中（待收件）”、“運輸中（派送中）”、“未發(fā)貨（運輸中）”、“已簽收（已簽收）”。

若對應標簽的物流信息個數(shù)為0，對應標簽文字使用灰色樣式，點擊當前標簽，會彈出toast提示此標簽下暫無物流信息。

當對應標簽的物流信息個數(shù)>0，標簽文字文字使用純黑樣式，點擊當前標簽后，tab欄直接上滑固定在頂部位置，且當前標簽的列表內(nèi)容會在tab欄下方呈現(xiàn)?；瑒舆^程結(jié)束后，所有當前標簽下的每個物流列表內(nèi)容底部背景由白色變成黃色，且會有一個3s的長亮停滯效果，來提示用戶具體物流信息。

同時，選中的標簽也會有樣式設(shè)計作為狀態(tài)區(qū)分，如上圖選中的“運輸中”標簽文字為深藍色，底部為淺藍色背景。

2. 設(shè)計思考

（1）tab標簽的類型

菜鳥根據(jù)業(yè)務(wù)和對應業(yè)務(wù)的物流狀態(tài)信息，設(shè)置了普通標簽tab和錨點tab。當產(chǎn)品業(yè)務(wù)增長之后，頁面內(nèi)容也會非常多。tab進行區(qū)分，可以使用戶更高效地瀏覽信息，同時讓頁面的區(qū)分也更加清晰。

隨著電商產(chǎn)業(yè)的發(fā)展，用戶線上購物非常頻繁，自然對應的物流信息也很多。用戶大都是使用手機查看物流信息，但手機的信息承載能力有限，那換位思考，如何讓用戶更加有條理性地查看信息就變得很重要，所以錨點tab標簽可以讓用戶快速定位信息和跳轉(zhuǎn)瀏覽，從對應標簽的第一個物流信息進行查看。

（2）tab標簽的設(shè)置

從收件業(yè)務(wù)來看，通過五個標簽文案的設(shè)置，用戶可以看到一個商品派送的全流程，從商品下單等待收貨-商家發(fā)貨-派送中-運輸中-簽收。用戶對于商品的物流信息的每個環(huán)節(jié)都一目了然。物流狀態(tài)分布更加明細。

“待收件”放在靠前的位置，因為用戶比較關(guān)心自己的待收件的個數(shù)。那從流程來說，“派送-運輸-簽收”是不是可以聯(lián)系地更緊密一點？所以“未發(fā)貨”和“已簽收”的位置可以更換，讓流程信息銜接更完整。

（3）tab標簽的定位效果

一般的處理方式是直接跳轉(zhuǎn)目標對應的位置，菜鳥的定位效果很細節(jié)。點擊對應標簽后，此狀態(tài)下每個物流信息內(nèi)容底部背景變成淺黃色，長亮3s后消失，這種細節(jié)的提示既不干擾用戶，又能清晰引起用戶的注意。

（4）產(chǎn)品極致細節(jié)的處理

細節(jié)處理會帶給用戶很多驚喜，讓用戶更方便更高效地熟悉產(chǎn)品，增加用戶對產(chǎn)品的粘性。

但對于產(chǎn)品的一些問題也要隨時去注意。今天在使用菜鳥查看運輸中的物流信息的時候，發(fā)現(xiàn)了一個問題：當點擊“運輸中”的標簽的時候，標簽卻沒有樣式提示（淺藍背景深藍文字），但之前使用的時候卻發(fā)現(xiàn)有提示，一開始還以為是手機系統(tǒng)的bug，但反復退出程序去點擊使用發(fā)現(xiàn)還是一樣。

因此果斷記錄下問題并反饋給客服，不管能不能收到回復，還是想將問題反饋給菜鳥。雖然平時用戶也不會察覺到這些。但是我覺得這個是產(chǎn)品技術(shù)問題上的bug。對于用戶基數(shù)還比較龐大的產(chǎn)品，做好細節(jié)才能更加容易俘獲用戶的心！

八、綠洲——“WOW”彩虹屁水滴打榜評論功能

1. 設(shè)計描述

以首頁主題的idol內(nèi)容評論為例，“WOW彩虹”水滴打榜屬于評論的一種形式，作為評論功能體系中的一種運營玩法。如圖中所示，在評論輸入框里面有一個小彩虹圖片和WOW文字。點擊此圖片文字區(qū)域，底部彈出彈框，彈窗中有系統(tǒng)自帶的預置文案，同時還可以點擊彈窗內(nèi)「換一句」按鈕選擇文案內(nèi)容。

每日免費發(fā)送三次，超過后可通過消耗積累獲得的水滴繼續(xù)發(fā)送評論文案，每條文案需要使用0.2水滴。發(fā)送后，文案會從評論輸入框上方從左至右滑出提示，同時有彩帶爆炸動畫效果，3s后消失。

在idol的“WOW彩虹”榜單，粉絲通過日?；顒荧@取水滴值，然后通過消耗水滴值給自己喜歡的idol評論，平臺再根據(jù)粉絲的水滴貢獻值對他們進行榜單排名。

2. 設(shè)計思考

（1）綠洲將評論功能運營化，玩法更加細分

分為普通評論留言和打榜評論沖榜單。普通評論留言，粉絲通過輸入框輸入自己想要表達的詞語。對于打榜評論留言，用戶無需做過多的語言組織，選擇預置的文案就像是挑選道具一樣，當發(fā)送“WOW彩虹”內(nèi)容之后，頁面中還會出現(xiàn)有趣的彩帶爆炸效果提示，吸引用戶使用。

（2）每天免費三次打賞

超過次數(shù)后，粉絲可以通過消耗小水滴進行沖榜?！妇G洲」是微博出品的美好生活社交產(chǎn)品，基于微博的強大資源和idol影響力，通過運營的設(shè)計玩法賦能社交生態(tài)，吸引大量的用戶注冊使用。

對于注冊的用戶來說，在平臺中既可以作為粉絲，也可讓自己成長為某個領(lǐng)域的kol，成為別人的idol。用戶流量大，評論活躍度高，水滴活動的運營玩法可以加強用戶對產(chǎn)品的粘性。

沖榜打賞類似游戲的玩法，用水滴榜單貢獻值排名的手段，激勵用戶表達自己對idol的喜愛度。擠進榜單的粉絲也能更大幾率地增加自己的曝光率，促進用戶在平臺輸出更多的社交內(nèi)容，形成一個良性循環(huán)的社交生態(tài)。

（3）在主題明星中的板塊，wow榜單位置隱藏過于深

在進入明星單條動態(tài)中，需要點擊評論輸入框上方的文字進入，頁面中提示很弱，沒有及時地讓我觸及到榜單排名。純文字介紹說明會影響用戶的判斷。如果打榜要發(fā)展為產(chǎn)品的一個核心玩法，那位置的提示查看是否需要更清晰？

（4）「綠洲」小清新的自然風設(shè)計風格使用起來有一種舒暢的感覺

社交的本質(zhì)是交流，是自我呈現(xiàn)。清新綠的色系更貼近于生活，也算是契合綠洲的產(chǎn)品理念“美好生活”的初衷，綠洲涉及的業(yè)務(wù)內(nèi)容也越來越寬泛，基本上全是連接于生活。

對于運營類設(shè)計，尤其是打榜的玩法，游戲需要的趣味性和用戶普適性，現(xiàn)在僅有的呈現(xiàn)方式就是純文字的。而且參考很多社交平臺的打榜機制，都是以道具類這種常見但比較新穎的方式。畢竟道具的設(shè)計可以更多元化，延展性更強。比如可以根據(jù)“WOW彩虹”主題設(shè)計很多相關(guān)聯(lián)的內(nèi)容，那樣是不是會更具有特色或趣味一些呢？

九、愛彼迎——絲滑的手勢交互和收藏評分功能

1. 設(shè)計描述

（1）手勢操作

在愛彼迎首頁雙列表Feed流和篩選頁單列表Feed流的房源列表中，每一個房源內(nèi)容中均由圖片、文字等信息構(gòu)成，單列表內(nèi)容顯示的文字信息相對來說更多。

若將每個房源視為一個小容器單元，點擊任一房源容器單元，都會在當前位置聚焦放大撐滿屏幕查看房源詳情。進入詳情頁面后，手指置于屏幕上，向下拖動，整個頁面會跟隨手勢的方向進行移動；但向上拖動后松手，依然會到當前頁；其他方向拖動松手后，整個頁面縮小直接返回列表頁原位置。

（2）收藏功能

進入詳情頁點擊愛心按鈕可以收藏房源，底部tab上方會彈出一個小的提示框，選擇將收藏的房源歸類，點擊更改按鈕進入分類頁面。當再次點擊愛心按鈕時，底部的提示框文案會立馬替換，提示撤銷剛才的取消收藏操作。底部的提示框會停留10秒后消失。

（3）評分功能

詳情頁大圖上有房源評分、用戶評論的數(shù)目和內(nèi)容的提示，用戶評價內(nèi)容會不停的更換。

2. 設(shè)計思考

（1）愛必迎的房源內(nèi)容點擊進入和拖動返回的交互操作體驗絲滑

類似容器的概念，容器里面的內(nèi)容可以在同一頁面進行放大縮小，這種交互過程會讓用戶對于房源信息的關(guān)注有持續(xù)性。

在進行返回操作時，通過手勢控制頁面的移動方向，相當于返回的功能。手勢控制的區(qū)域也不只是頁面指定的某一塊內(nèi)容，你可以在詳情頁面的任意區(qū)域，拖動頁面退出，操作空間更大，更方便。同時也比正常點擊左上方的返回按鈕更節(jié)省時間。

利用交互操作增加功能的多樣性，產(chǎn)品的交互思考可見一斑。雖然這個交互操作只針對用戶在瀏覽房源列表內(nèi)容。對于目的地版本列表內(nèi)容沒有采用這種交互方式?？赡芤灿袑τ跇I(yè)務(wù)場景方面的思考，畢竟搜索房源查看是一個高頻的用戶行為。

（2）詳情頁點擊收藏的設(shè)計結(jié)合了產(chǎn)品的核心功能

收藏的房源會置于“心愿單”模塊，“心愿單”是產(chǎn)品的主要模塊之一。愛彼迎基于真實的房源內(nèi)容，給用戶最全的信息資源，通過點擊收藏操作，聯(lián)動提示框去引導用戶使用“心愿單”功能。

首先對于點擊「愛心」，不管是收藏還是取消收藏，底部都會彈出提示框引導用戶操作。尤其是取消收藏后，提示框文案會顯示“已從「心愿單」中清除”，“更改”按鈕替換成“撤銷”。

這個撤銷文案不得不說，既細節(jié)又“雞賊”。撤銷會吸引用戶再次點擊文字按鈕。因為「撤銷」的字面意思是提示用戶這個流程任務(wù)還沒有結(jié)束，然后就會下意識繼續(xù)操作，點擊撤銷將房源又重新放回到了心愿單。

（3）大圖上增加評分的功能很細節(jié)

其實在用戶日常使用app的時候，不管是購物選商品或是旅游定房間，做最終的決定之前，都繞不開去了解其他人真實的使用評價。用戶評論在某種程度上能決定一個人的購買決策。

評論的重要性在于用戶都會有從眾心理，比如一個房源100個人有90個人給好評，相較于其他10個人的給差評，用戶還是可以接受，畢竟有這么多人幫自己去試錯，就算有點瑕疵也在可接受范圍之內(nèi)。所以評分的強提示也能讓用戶更快更好地了解房源并做出決定。

十、攜程旅行——首頁金剛區(qū)差異化設(shè)計

1. 設(shè)計描述

（1）視覺設(shè)計

首先是金剛區(qū)的圖標設(shè)計，一共分為上下兩部分，第一部分有五個圖標，對應的五大主營業(yè)務(wù)分別為“酒店”、“機票”、“火車票”、“旅游”、“攻略/景點”，通過五種不同的強提示色作為背景底。

第二部分一共有十個小圖標，在主營業(yè)務(wù)下面分別有兩個關(guān)聯(lián)業(yè)務(wù)，并且通過五種不同的弱提示色作為背景底色。視覺設(shè)計上使用五大色系：紅、藍、紫、綠、橙。同一個色系下的深色背景對應主營業(yè)務(wù)，淺色背景對應關(guān)聯(lián)業(yè)務(wù)。如“酒店業(yè)務(wù)”對應「民宿/客棧，酒店套餐」。

（2）交互操作

金剛區(qū)支持左右滑動，初始時只能向左滑動，滑動至最左，金剛區(qū)圖標換成產(chǎn)品的其他業(yè)務(wù)。滑動過程中，頁面列表內(nèi)容向下方（負Y軸）移動。同時右邊（負X軸）劃出其他業(yè)務(wù)的圖標。

2. 設(shè)計思考

（1）視覺設(shè)計

疫情后互聯(lián)網(wǎng)時代，旅游行業(yè)大受沖擊，攜程旅行也對于業(yè)務(wù)及時地做出了針對性的調(diào)整。很多產(chǎn)品金剛區(qū)圖標設(shè)計，一直都中規(guī)中矩地堅持著“7+/-2”設(shè)計法則，甚至會給一個“全部或者更多”的圖標，幫助容納更多的產(chǎn)品業(yè)務(wù)。

點擊圖標后進入新頁面，查看更多業(yè)務(wù)或者功能。攜程新改版的首頁圍繞五大主營業(yè)務(wù)，結(jié)合視覺設(shè)計進行改動，通過使用亮色突出主營業(yè)務(wù)，吸引用戶將注意力集中在業(yè)務(wù)上，讓用戶更快捷地捕捉業(yè)務(wù)信息。

關(guān)聯(lián)業(yè)務(wù)使用淺顏色。深淺的顏色對比強烈，信息層次清晰簡單易懂。每個單獨豎行的關(guān)聯(lián)業(yè)務(wù)的圖標和主營業(yè)務(wù)使用同一色系。通過顏色的深淺，讓一級和二級業(yè)務(wù)有區(qū)分，同時也保證了他們的關(guān)聯(lián)性。這種視覺上的設(shè)計改動，讓業(yè)務(wù)層級表現(xiàn)的有條理性，幫助產(chǎn)品業(yè)務(wù)能夠?qū)訉蛹毞?，卻又相互沒有大的影響。

（2）交互設(shè)計

市面上很多產(chǎn)品都已經(jīng)熟知，如何利用這個交互操作來代替“查看更多”的功能。

手機界面作為一個二維平面空間，在X軸、Y軸的二維空間中，通過交互操作可以最大化地提升空間的使用效率，確實對于某些特殊場景是一個不錯的設(shè)計。設(shè)計的主要目的是想通過交互操作幫助產(chǎn)品承載更多業(yè)務(wù)。

市面上的產(chǎn)品大多數(shù)通過X軸一個方向的平移來查看更多功能，而攜程旅行通過兩軸移動進行操作。這個差異性的設(shè)計也是出于對產(chǎn)品業(yè)務(wù)場景的一些思考。很多產(chǎn)品中金剛區(qū)的圖標很多，考慮到設(shè)計中的一些法則，金剛區(qū)可容納的圖標個數(shù)會受限制，當平行且同等重要業(yè)務(wù)增多，用戶就會頻繁來回多次的切換查看（例：美團的金剛區(qū)三行15個，左滑兩次查看完，每切換一次都是固定15個）。

在攜程旅行新版本設(shè)計中我們可以看到，附加業(yè)務(wù)多達38個，大多數(shù)并不是主營業(yè)務(wù)，更不是用戶會高頻操作去點擊的業(yè)務(wù)，但需要保留讓用戶看到。這樣的交互設(shè)計可以提升用戶操作和閱讀信息的效率。

十一、總結(jié)

產(chǎn)品體驗思考可以用于自己的日常積累學習，助力自己養(yǎng)成勤于寫作和思考的習慣。提升自己的撰寫和表達能力！

案例內(nèi)容的表達和理解有不恰當或站友不認同之處，歡迎指摘和交流討論。

本期分享到此結(jié)束。持續(xù)學習，助力成長！

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

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