編輯導(dǎo)語：產(chǎn)品體驗(yàn)是一個很好的學(xué)習(xí)方式，通過觀察和思考，方便快捷地培養(yǎng)自己的設(shè)計思維。本文作者總結(jié)了十個有趣的產(chǎn)品體驗(yàn)思考，一起來看看吧。

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

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

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

一、京東—購物車頁面的使用體驗(yàn)思考

1. 設(shè)計描述

京東購物車的標(biāo)題欄右邊有商品編輯模式和快捷入口，商品tab位置有「全部」、「降價」、「篩選」三個標(biāo)簽，頁面內(nèi)容部分為購物車的商品列表，默認(rèn)狀態(tài)下方為價格明細(xì)和購買按鈕，商品編輯模式會變?yōu)槿x、快速清理、移入關(guān)注、刪除四個按鈕。

點(diǎn)擊編輯文字按鈕，下方區(qū)域呈現(xiàn)四個按鈕，點(diǎn)擊“全選”可選中所有商品列表，點(diǎn)擊“快速清理”，彈出彈窗，選擇商品移入關(guān)注或刪除，點(diǎn)擊“移入關(guān)注”將商品從購物車挪到我的收藏中，點(diǎn)擊“刪除”，可刪除選中商品。點(diǎn)擊上方快捷入口按鈕，彈窗從上方向下彈出?？梢蕴鱿?、首頁、搜索、分享等功能，點(diǎn)擊圖標(biāo)操作進(jìn)入對應(yīng)頁面。

2. 設(shè)計思考

（1）購物車頁面功能很全，快捷入口可更快的切換到對應(yīng)的常用頁面，商品編輯功能可以進(jìn)行商品管理，在電商購物時，用戶會經(jīng)歷「查找目標(biāo)商品-篩選商品-詢問客服-最終下單」的這樣一個流程，平時遇上平臺大促的時候，這些用戶行為觸發(fā)頻率就會變的非常高，購買的商品種類也會有很多。

在流程中，用戶會需要去頻繁的比價和查看，交流，甚至是分享給自己的好友，所以快捷入口增加這樣的功能有利于用戶更快的觸達(dá)自己的目標(biāo)，幫助用戶節(jié)省時間；商品編輯過程中，有移入關(guān)注的的操作，很多電商平臺基本都有這樣的設(shè)計，因?yàn)橛泻芏嗌唐酚脩糇约阂埠茈y抉擇到底要不要，要的話，什么時候會有需要。不要的話，畢竟是用戶精挑細(xì)選。所以產(chǎn)品為用戶保留商品，置于購收藏夾，用戶可隨需隨取。

商品編輯模式中，禁止點(diǎn)擊查看店鋪和商品詳情。京東這個設(shè)計太過于專一。編輯就只能是編輯。淘寶這個對于用戶場景的考慮的就比較多，因?yàn)椴榭春途庉嬙谑褂貌僮魃希矝]有相互干擾。雖然流程有打斷，也不影響商品編輯，但是如果用戶在管理的時候也會想去瀏覽其他信息。而且這種行為發(fā)生的可能性很大。所以京東的這一點(diǎn)限制還比較強(qiáng)。

（2）看到最新版本的購物車標(biāo)簽中，去掉了“常買”這個標(biāo)簽，之前也有很多人討論這個功能，但我對于這個新增的標(biāo)簽分類不太看好。

電商購物的商品繁雜，有很多商品，用戶不會那么高頻去購買，根據(jù)最近線上買菜的場景我確實(shí)驗(yàn)證了這一點(diǎn)，買菜屬于“生鮮”的領(lǐng)域，是一個比較高頻會重復(fù)購買的行為。購買的商品有購買記錄可以查看，所以這個標(biāo)簽價值是被拖大了。反而是降價這個商品標(biāo)簽我覺得價值還是很可以的，起碼設(shè)計是結(jié)合了用戶心智，降價能提示用戶商品便宜了，能刺激到用戶。

二、快手—滑動操作的延展性太豐富了

1. 設(shè)計描述

手機(jī)界面是一個二維平面空間（X軸、Y軸），快手將手勢交互操作在平面空間中應(yīng)用的淋漓盡致，應(yīng)用打開后，默認(rèn)是首頁精選模塊，快手的首頁結(jié)構(gòu)：關(guān)注、發(fā)現(xiàn)、精選三大模塊，其中發(fā)現(xiàn)模塊下有二級分類，默認(rèn)固定精選標(biāo)簽，還可以自定義標(biāo)簽。

當(dāng)進(jìn)入頁面后，向左滑動流程，進(jìn)入“精選/視頻”-“精選/視頻列表+縮圖播放”-“視頻作者個人主頁”。過程中第二次滑動時，出現(xiàn)視頻列表，在列表區(qū)域上下滑動可預(yù)覽全部視頻內(nèi)容，視頻播放窗口以左邊界中點(diǎn)為中心縮小，當(dāng)前視頻播放快結(jié)束時，會有倒計時定時器顯示還剩多少秒。

若在發(fā)現(xiàn)模塊自定義新增設(shè)定“美食”、“NBA”、“手藝”、“萌娃”四個標(biāo)簽，此時在個人主頁，向右滑動過程為：“個人主頁”-“精選/視頻列表+縮圖播放”-“精選/視頻”-“發(fā)現(xiàn)（萌娃，手藝，NBA，美食，推薦）”-“關(guān)注”-“用戶個人中心”。若位置在「發(fā)現(xiàn)」自定義的任意一個標(biāo)簽，上滑隱藏標(biāo)簽，此時右滑直接至「關(guān)注」模塊。

2. 設(shè)計思考

（1）快手的設(shè)計真的讓我體會到了，交互操作的應(yīng)用是有多強(qiáng)大，之前在綠洲的那個首頁頁面中看到過這個模塊切換交互?；瑒硬僮骺梢曰跇I(yè)務(wù)做很多延展。像快手這種能一滑到底的操作似乎比綠洲更加豐富。發(fā)現(xiàn)中的二級標(biāo)簽，不管是標(biāo)簽顯示還是隱藏，都能滑動，這樣相鄰模塊間切換的靈活度很高。

（2）從精選模塊左滑，在當(dāng)前頁面呈現(xiàn)此視頻相關(guān)的內(nèi)容列表。我們都知道，短視頻都是靠內(nèi)容來吸引用戶的，但是怎么能給用戶持續(xù)的吸引力并讓用戶關(guān)注是視頻作者，一直都是平臺在思考的問題。短視頻的商業(yè)運(yùn)營模式之前在寫抖音中某個功能的時候提過，“平臺-用戶-創(chuàng)造者”三者是相互關(guān)聯(lián)的。

當(dāng)用戶在查看內(nèi)容的時候，因?yàn)楹芏鄡?nèi)容都是平臺推薦給用戶的。有時候一個視頻內(nèi)容能引起用戶的興趣，但還不足以讓他關(guān)注你，除非是你的內(nèi)容真的get到用戶的點(diǎn)。

但是當(dāng)左滑出現(xiàn)列表內(nèi)容之后，用戶可以持續(xù)性的查看內(nèi)容，沉浸在內(nèi)容中達(dá)到關(guān)注的設(shè)計目標(biāo)，另一種場景是用戶就是想查看其他內(nèi)容，這樣的設(shè)計觸達(dá)路徑很快，一步就能搞定，甚至?xí)屵@類用戶很驚喜。讓不同的目標(biāo)人群都能受益。

三、盒馬—內(nèi)容區(qū)千人千面的設(shè)計樣式

1. 設(shè)計描述

（1）盒馬的首頁列表內(nèi)容主要幾種形式，分別為商品、菜譜、好物推薦、廣告、品類標(biāo)簽商品。點(diǎn)擊商品縮略圖，進(jìn)入商品詳情頁，再返回退出，商品縮略圖上會覆蓋白色的遮罩，會顯示有相關(guān)聯(lián)的四件商品推薦選擇，直接點(diǎn)擊可進(jìn)入相應(yīng)的商品詳情頁，點(diǎn)擊關(guān)閉按鈕，遮罩消失。當(dāng)點(diǎn)擊其他商品時再退出，重新出現(xiàn)遮罩效果，之前的商品效果消失。

（2）點(diǎn)擊某些商品中的購物車按鈕，會在列表下方位置出現(xiàn)一個為“最佳搭配”的新內(nèi)容，內(nèi)容區(qū)域中最多可展示三件商品，且每件商品都有單獨(dú)的購物車按鈕，可點(diǎn)擊加入購物車，點(diǎn)擊出現(xiàn)此效果的商品內(nèi)容是有選擇性的，并不是每一個商品都能點(diǎn)擊出現(xiàn)“最佳搭配”內(nèi)容。

2. 設(shè)計思考

盒馬首頁點(diǎn)擊商品進(jìn)入詳情頁再退出之后，首頁縮略圖上彈出遮罩，提供查看類似商品的功能對用戶來說是比較友好的，首先效果在用戶返回之后彈出，用戶在結(jié)束完一個商品瀏覽之后，如果沒有購買此商品，會對剛才的商品注意力會減弱。

此時提供其他類似商品的推薦，不會讓用戶反感，甚至幫助用戶快速提供其他可能想要的商品，可以提升用戶做購買決策，同時不會影響用戶在首頁瀏覽其他商品。

這個引導(dǎo)設(shè)計完全是用戶不需要操作的情況下進(jìn)行，在瀏覽過程中上沒有刻意打斷用戶，反而是在無結(jié)果之后引導(dǎo)用戶去選擇。用戶體驗(yàn)上比較弱干擾，業(yè)務(wù)上也能增加商品的曝光入口，提升商品購買率。

點(diǎn)擊商品的購買按鈕，列表下方出現(xiàn)商品搭配，其實(shí)很多搭配的商品也不是用戶想要的，但盒馬利用這一個功能增加其他商品的曝光入口。在用戶體驗(yàn)上，和遮罩效果差不多，做到弱干擾，強(qiáng)推薦。

列表的內(nèi)容不會因?yàn)槎喑鰜淼淖罴汛钆鋬?nèi)容讓用戶感到難受，除了以上兩個設(shè)計小細(xì)節(jié)之外，盒馬還有很多內(nèi)容區(qū)域的設(shè)計，比如各種品類標(biāo)簽（例：粉紅cp）的內(nèi)容，將大圖分成四個縮略小圖，圖片間隔數(shù)秒的進(jìn)行輪播切換，層出不窮的設(shè)計樣式，設(shè)計目標(biāo)就是為了增加商品曝光率，最大化列表內(nèi)容價值。

四、騰訊視頻—NBA直播間虛擬賽場模式

1. 設(shè)計描述

在NBA直播間頁面的「賽況」標(biāo)簽tab內(nèi)容上。有一個虛擬籃球場的設(shè)計樣式。透視虛擬籃球場上方是記分牌，顯示兩只隊伍的隊標(biāo)和比賽進(jìn)行中的比分，中間是賽事進(jìn)行的文字解說提示內(nèi)容（賽事情況、暫停、換人等），下方是兩支隊伍當(dāng)前上場的隊員頭像，點(diǎn)擊可以查看球員詳情。

當(dāng)一方球隊進(jìn)攻時，虛擬籃球場上會箭頭指示球隊攻擊籃筐的方向，中間提示文字為某一隊的進(jìn)攻回合，并有隊員落位后的標(biāo)記（小圓點(diǎn)）顯示，當(dāng)球員投籃時，會有籃球路線軌跡顯示，同時下方的隊員頭像會有上下抖動的效果，提示該投籃球員。

當(dāng)比賽結(jié)束之后，「賽況」標(biāo)簽將移動至最右邊，虛擬球場上會顯示兩只球隊的投籃（投丟和投進(jìn)）區(qū)域分布圖。下方的頭像展示首發(fā)球員的頭像，并且不可點(diǎn)擊查看球員相關(guān)信息。

2. 設(shè)計思考

（1）NBA在騰訊體育商業(yè)業(yè)務(wù)板塊中是很重要的部分。在NBA直播間頁面，用戶可以觀看直播視頻、充值VIP、解說文字播報，球員信息、數(shù)據(jù)展示、粉絲互動、比賽集錦等。

騰訊體育是獨(dú)家的可以直播NBA體育賽事的平臺，因?yàn)檫@個原因，加上國內(nèi)龐大的NBA粉絲團(tuán)，所以發(fā)展會員核心業(yè)務(wù)是非常有必要的。不過騰訊體育在現(xiàn)在的設(shè)計上對于普通用戶也非常友好，因?yàn)槌四芡ㄟ^解說來了解比賽情況，還能通過虛擬賽場實(shí)時了解雙方球隊進(jìn)行中的很多賽況細(xì)節(jié)，不錯過的比賽的精彩時刻。

普通用戶雖然那么直觀強(qiáng)烈的進(jìn)行直播視頻體驗(yàn)，但是對于會員充值的用戶看精彩比賽直播是比較公平的。

（2）虛擬賽場模式相較純文字解說更加生動有新意。這

個設(shè)計也是遵循環(huán)境貼切原則，讓用戶更加接近真實(shí)的線下賽事場景，為用戶營造更真實(shí)的沉浸式體驗(yàn)。尤其是比賽過程中，在虛擬籃球場上，對于每個球隊的攻擊回合有明確的指示，對于球員投籃的方向、區(qū)域，用戶可以有更清晰的了解。

當(dāng)對應(yīng)球員投籃時，底部球員頭像也會對應(yīng)的上下抖動去提示。球場中間會實(shí)時賽事播放提示，幫助用戶能捕捉比賽的重要信息。整個設(shè)計在與用戶的互動過程中有趣生動。

五、得物—高級感的商品3D旋轉(zhuǎn)效果

1. 設(shè)計描述

3D全息空間設(shè)計樣式僅限鞋類商品，操作路徑為“詳情頁-半開合狀態(tài)-3D空間”，在商品詳情頁面點(diǎn)擊圖片中的「3D」按鈕或「3D空間」按鈕，頁面中的大圖商品從詳情中掉落到屏幕中間，此時詳情頁面向內(nèi)凹，形成一個有厚度門的樣式，門縫內(nèi)側(cè)上下方內(nèi)容分為為返回按鈕和得物L(fēng)OGO字樣，詳情頁面和3D空間呈現(xiàn)在同一個屏幕。

進(jìn)入頁面，商品即時會以Z軸為中心自動開始旋轉(zhuǎn)，此時若手勢拖動商品，可控制商品在任意方向、角度進(jìn)行轉(zhuǎn)動，點(diǎn)擊左上方的返回按鈕，詳情頁從內(nèi)向外關(guān)閉3D展示空間，商品原路徑返回到縮略圖中，輕觸立體空間中的內(nèi)容區(qū)，此時完全進(jìn)入商品的3D空間展示，商品不會自動旋轉(zhuǎn)，用戶需要自己手勢控制商品方向和角度去查看，放大查看商品細(xì)節(jié)，還可以進(jìn)行截屏、錄屏、收藏、購買、分享等操作。

2. 設(shè)計思考

（1）得物APP是一個潮流商品購買、鑒別、潮流生活分享的網(wǎng)購平臺，得物的起源是售賣潮流大牌鞋類商品起家，對于核心業(yè)務(wù)鞋類商品的設(shè)計也是極致用心。

從「毒（DU）」改名「得物(DEWU)」,這個創(chuàng)意的改動也是極大的擴(kuò)散了品牌影響力。產(chǎn)品增加“鑒別服務(wù)”功能，幫助用戶實(shí)現(xiàn)“先鑒別，再發(fā)貨”的購物流程，多程序鑒別，讓用戶得到心儀滿意的好商品，得到安心的購物體驗(yàn)。

（2）鞋類商品一直是得物的重心業(yè)務(wù)，鞋類詳情頁中增加商品3D全息空間展示效果。

采用類似藝術(shù)品展覽式呈現(xiàn)方式，利用3D空間塑造球鞋商品展示的品質(zhì)和氛圍，用戶瀏覽時可操控商品自轉(zhuǎn)，720度無死角的查看鞋的材質(zhì)，圖案，紋理，設(shè)計細(xì)節(jié)，全力展示球鞋的真實(shí)和高級感，給用戶一種線下查看商品的沉浸式體驗(yàn)，頁面交互流程中，通過這種“門開合”的處理方式富有新意，通過頁面，能觀察到得物在為自己的核心業(yè)務(wù)，用戶體驗(yàn)和心智塑造方面下了很大的功夫。

鞋類商品都是大品牌，單價高，品牌感強(qiáng)，需要通過高級感的設(shè)計來為商品做襯托。讓用戶認(rèn)同商品的價值，認(rèn)同自己的選擇和生活品質(zhì)。

得物能夠在眾多競品中脫穎而出，除了它業(yè)務(wù)做的早以外，對于品牌營銷和設(shè)計把控都確實(shí)做的非常棒！把潮流理念包裝的盡善盡美，潮流價值傳達(dá)的淋漓盡致！

六、網(wǎng)易云音樂—好歌曲我們一起聽

1. 設(shè)計描述

在音樂播放頁面點(diǎn)擊進(jìn)度條上方區(qū)域的最右邊選項(xiàng)按鈕，彈窗調(diào)起，“一起聽“功能區(qū)域有用戶的頭像和加號按鈕，點(diǎn)擊區(qū)域，重新彈出底部彈窗，可以進(jìn)行匹配偏好設(shè)置，頁面中間有兩個小人圖標(biāo)，有音符轉(zhuǎn)動環(huán)繞的效果，點(diǎn)擊按鈕“開始隱身一起聽”，音樂播放頁面中CD唱片縮小，顯示用戶頭像，頭像右邊會有搜索匹配的掃描效果。

當(dāng)搜索完成后，另一個頭像使用面具樣式代替搜到的人，同時會隨機(jī)選擇一首歌開始播放，頭像下方會顯示兩個人的距離和一起聽的時間。

若分享給好友，也會有兩個人頭像，并有耳機(jī)線連接。唱片下方有個交流功能，可以給對方發(fā)送文字或表情，選擇表情，頁面中間會有預(yù)置的表情包，發(fā)送任意表情會在頁面中間有表情包動畫效果。

當(dāng)一起聽歌超過五分鐘后，可以點(diǎn)擊對方頭像，申請揭面并解鎖更多互動。同時可以重新匹配好友或重新進(jìn)行偏好設(shè)置。當(dāng)關(guān)閉之后，會留下一起聽的記錄。

2. 設(shè)計思考

（1）當(dāng)下音樂環(huán)境生態(tài)已經(jīng)發(fā)生了很多變化，從早起聽音樂的單一需求，到現(xiàn)下更多的“音樂+社交互動“需求，很多人一直在致力于思考音樂形式在未來存在的可能性是怎么樣的。時代和用戶都會引領(lǐng)音樂的風(fēng)格，去挖掘音樂的價值。

一起聽的功能在頁面的入口隱藏的不是很深，在分享入口和更多選項(xiàng)中都有一起聽的功能，一起聽功能對于正常聽音樂的用戶來說，使用頻率不高，除非是特殊場景或者強(qiáng)意愿體驗(yàn)這個功能的用戶才會去使用。

（2）音樂可以幫助用戶表達(dá)和消化情緒，“一起聽”的分享對象可以是陌生人或者自己的好友。對于自己的朋友，當(dāng)你聽到好聽的音樂想和朋友一起分享，你通過一起聽分享給朋友，你們可以異地同步同一時間聽音樂，希望讓對方能和你一樣get音樂的點(diǎn)，以此產(chǎn)生共鳴，或者是不開心的時候希望有人陪你一起去消化情緒，這樣都能增加彼此的聯(lián)系。

當(dāng)你想結(jié)交音樂好友，你可以通過一起聽來匹配陌生人，一起聽歌互動，加好友。一起聽的有多種表達(dá)互動的設(shè)計，如表情包，語音、文字。

用戶可以根據(jù)自己的需要去選擇溝通方式。同時在一起聽超過5分鐘后，才可以解鎖更多互動，5分鐘的接觸時間，算是給各自一個交友思考的緩沖。

七、愛回收—狀態(tài)可見的詢價步驟操作

1. 設(shè)計描述

愛回收的詢價詳情頁面，詢價需要檢測的機(jī)器特征主要依次分為：「使用情況」、「運(yùn)行情況」、「個人賬號是否可退出」、「外觀情況」、「基礎(chǔ)信息」、「功能情況（非必選）」。

主要特征下還可以進(jìn)行二、三級細(xì)分（如：外觀情況特征-外框背板-三級特征123）。當(dāng)完成一個特征選擇之后，上方的詢價進(jìn)度條信息就會更新，上方進(jìn)度條的總的特征選擇數(shù)根據(jù)“機(jī)器”和“第一個特征”來判斷，正常開機(jī)、全新包裝、無法開機(jī)三種場景的所需要的詢價特征步驟會有差異。

當(dāng)之前特征選完之后，若選擇有誤，可以通過特征選項(xiàng)列表區(qū)域的修改按鈕進(jìn)行重新選擇。后面已選擇的內(nèi)容會根據(jù)當(dāng)前已改的特征選擇進(jìn)行重置。當(dāng)?shù)谝粋€特征選擇完，若不上滑的查看的已選特征的情況下，按正常步驟操作，頁面會一直控制只顯示兩個特征內(nèi)容。

2. 設(shè)計思考

（1）愛回收是最早做回收業(yè)務(wù)的應(yīng)用之一，隨著產(chǎn)品的發(fā)展的日趨成熟，對于機(jī)器詢價的特征檢測項(xiàng)目也變得越來越精細(xì)，這樣更能精準(zhǔn)的匹配回收價格，隨著特征選信息的增多，那頁面對于處理信息（包括排版、歸類等）的難度也會與越來越高。

首先愛回收將特征選擇內(nèi)容進(jìn)行分類，分類也更加的細(xì)致化，模塊化，信息一目了然。主要特征下還會有二級、三級特征的選擇，在三級特征中第一個選擇也會聯(lián)動其他平級特征，設(shè)計將不同或同層級的特征選擇都關(guān)聯(lián)的十分緊密。

且在「第一特征“使用情況”」這個特征選擇中，將機(jī)器詢價分為「能開機(jī)，全新機(jī)，無法開機(jī)」三種場景去直接聯(lián)動詢價步驟。詢價邏輯很清晰，以機(jī)器狀態(tài)為源頭來推詢價特征要求。

（2）在詢價內(nèi)容上方的詢價進(jìn)度顯示屬于交互中的狀態(tài)可見原則，用戶可以在根據(jù)機(jī)器情況，在詢價過程中了解自己需要多少步完成，目前已進(jìn)行到詢價第幾步，這樣保證用戶在操作過程中，頁面能將信息適當(dāng)?shù)姆答伣o用戶，提示用戶現(xiàn)在處于操作的哪個步驟，引導(dǎo)用戶正確的結(jié)束流程。

最重點(diǎn)的是詢價內(nèi)容在上下滑動過程中，機(jī)型型號和進(jìn)度條會一直固定在頂部。用戶能全流程的了解自己操作的進(jìn)度。同類競品中，愛回收詢價頁面的信息處理，用戶操作提示的各種設(shè)計還是很棒的。

八、司庫—縮略主圖查看頁面新增功能

1. 設(shè)計描述

（1）司庫商品詳情頁面點(diǎn)擊大圖，進(jìn)入「大圖查看」頁面，大圖會放大在屏幕中間顯示，同時下方會有商品名，商品價格、規(guī)格等信息、收藏、加購、購買等功能，商品價格同一行會顯示圖片數(shù)量排序和總數(shù)，頂部左上方有關(guān)閉按鈕。中間的詳情大圖可以左右滑動查看其他商品圖片。

點(diǎn)擊收藏，頁面中間彈出提示“收藏成功”，點(diǎn)擊「加購」按鈕，會再次進(jìn)入到新頁面，頁面頂部左右滑動瀏覽圖片，中間內(nèi)容是商品屬性規(guī)格選擇，商品名同一排的右邊有關(guān)閉按鈕，點(diǎn)擊返回上一級，底部有加入購物袋按鈕，點(diǎn)擊按鈕也是返回上一級頁面面。點(diǎn)擊「購買」按鈕和「加購」按鈕點(diǎn)進(jìn)去的新頁面設(shè)計樣式是一樣的，僅內(nèi)容上多增加一個花唄分期的字段。

2. 設(shè)計思考

（1）司庫是一個高端大牌奢侈品電商購物平臺，我僅有一次購買東西的體驗(yàn)，雖然自己沒有高頻率進(jìn)行購物，但是司庫上有很多商品吸引著我的注意力，很多設(shè)計細(xì)節(jié)讓我可以學(xué)習(xí)探究。

最早對司庫有粘性是因?yàn)樗姆e分功能，當(dāng)你在購買一個比較貴的商品時，積分的抵扣力度還是很大的，10個積分相當(dāng)1塊錢，積分可以通過每天簽到或購買商品獲得，在購買商品的時候一次性抵扣了差不多100多塊錢。

購買那一刻是真的激動，自己累積的積分可以最大化的發(fā)揮價值。后來放棄司庫的原因也是因?yàn)榉e分的原因，因?yàn)楹灥降姆e分會在一年內(nèi)重置。對我來說也就此失去了吸引力。

（2）不管是功能設(shè)計還是運(yùn)營機(jī)制設(shè)計，對于平臺來說，都是為了提高產(chǎn)品的DAU，刺激用戶的購買率。如司庫縮略大圖的中的升級功能，如同詳情頁中的詳情頁，等同詳情頁的縮減版，通常的電商平臺點(diǎn)擊詳情頁大圖，都是單一的為了仔細(xì)觀察商品。

主圖查看增加功能的設(shè)計也是為了提高商品的購買率，給幾個主要功能的操作路徑增添更多的曝光入口，引導(dǎo)用戶去收藏、添加或購買。在瀏覽的整個行為路徑中，讓主要的功能隨處可見。

作為司庫的老用戶，經(jīng)常會看到一些比較讓人意外的小設(shè)計，就會留意，然后去思考為何會這么設(shè)計，是為了提升業(yè)務(wù)目標(biāo)，還是為了某種用戶場景？

九、瑞幸咖啡—新舊首頁設(shè)計大比拼

1. 設(shè)計描述

（1）瑞幸咖啡新版本改動很多，主要的幾個點(diǎn)為：Banner、金剛區(qū)內(nèi)容、商品內(nèi)容、底部tab功能，首先Banner圖片尺寸被放大，采用了4:3的設(shè)計比例，金剛區(qū)舍棄了之前圖片文字的設(shè)計樣式，增加用戶頭像和問候語，新版改的金剛區(qū)業(yè)務(wù)功能使用圖標(biāo)的表現(xiàn)樣式，同時采用面性和線性的圖標(biāo)來區(qū)分主要業(yè)務(wù)和次要業(yè)務(wù)。

面性圖標(biāo)應(yīng)用三大主營業(yè)務(wù)為：到店取、幸運(yùn)送、賣潮品。線性圖標(biāo)應(yīng)用四塊其他次要業(yè)務(wù)：會議團(tuán)餐、買4贈3、瑞即購、優(yōu)惠聯(lián)盟。

（2）商品內(nèi)容通過“優(yōu)惠券+商品”的多種售賣展示形式，在我的優(yōu)惠專區(qū)模塊，第一排展示兩份優(yōu)惠券，下方展示三個咖啡飲品，底部tab將原先的“購物車”模塊由“自由卡”功能代替，把“飲品添加購物車”功能整合到“菜單”功能模塊。

2. 設(shè)計思考

（1）老版本的使用體驗(yàn)就一個感受，信息太密集，沒有視覺和業(yè)務(wù)中心。

信息之間的層次區(qū)分也不是特別好。尤其是金剛區(qū)的那一塊整個就感覺沒什么區(qū)分，業(yè)務(wù)功能展示的是挺多，但是沒有視覺重心。

整個首頁瀏覽下來沒有點(diǎn)擊的欲望。高頻次的下單功能也和其他功能使用同樣的圖片加文字的方式。之前每次下單的時候基本都想不到去點(diǎn)擊那一塊，會直接進(jìn)入到菜單頁面選商品。

新版本的設(shè)計也總算是回歸正常。主營業(yè)務(wù)突出表現(xiàn)，次要業(yè)務(wù)要有區(qū)分。這樣用戶操作的目的性更強(qiáng)。金剛區(qū)的大留白處理，讓重要信息更有效的觸達(dá)給用戶。

（2）業(yè)務(wù)方面：從瑞幸業(yè)務(wù)的整個發(fā)展軌跡來看。從早起的門店自取-增加外送-無人咖啡機(jī)。一直圍繞著咖啡飲品業(yè)務(wù)做延展，記得之前做輕食業(yè)務(wù)，最后也下架了，最終回歸本質(zhì)做主營業(yè)務(wù)。所以金剛區(qū)的圖標(biāo)位置需要留給哪些業(yè)務(wù)功能也是一個比較著重考慮的點(diǎn)。

新版本改動的另外一個設(shè)計點(diǎn)也引起我的注意，就是將“購物車”這個功能剔除。

將“飲品添加購物車”的功能整合在選品購買流程中。新版本的流程可以讓用戶更快的去完成選擇加購買，可以讓用戶在一個頁面進(jìn)行“飲品加購審查-訂單確認(rèn)-訂單付費(fèi)”，節(jié)省了用戶操作步驟。

十、馬蜂窩—快捷有趣的博主游記閱覽

1. 設(shè)計描述

（1）游記介紹頁面點(diǎn)擊目錄懸浮按鈕，右滑彈出一個側(cè)邊欄，有“目錄”和“文中提及地點(diǎn)”兩個標(biāo)題tab，目錄中展示的是博主游記的一些內(nèi)容章節(jié)，目錄有錨點(diǎn)定位效果，點(diǎn)擊某一節(jié)，可以直接鎖定相關(guān)內(nèi)容，當(dāng)下滑到文中提及景點(diǎn)的內(nèi)容時，上方標(biāo)題自動切到“文中提及地點(diǎn)”標(biāo)題tab，點(diǎn)擊任一景點(diǎn)，進(jìn)入景點(diǎn)話題，可查看更多其他相關(guān)游記。

（2）游記頁面中有一個“頂一頂”的功能按鈕，用戶連續(xù)點(diǎn)擊，頁面中會有一個個向上的手指進(jìn)入用戶的頭像，上方會有數(shù)字增長的小特效。

在瀏覽游記的過程中，游記內(nèi)容中圖片下方有評論和點(diǎn)贊按鈕，對博主圖片的反饋也能引用到評論中，當(dāng)點(diǎn)圖片下方或頁面底部評論按鈕時，彈出鍵盤輸入框，輸入框內(nèi)除了寫文字、發(fā)表情、貼圖片，還可以給內(nèi)容貼平臺預(yù)置的標(biāo)簽。

2. 設(shè)計思考

（1）馬蜂窩的主要運(yùn)營模式也是通過文章內(nèi)容的形式，旅游型的電商盈利模式。為用戶提供海量的旅游攻略和景點(diǎn)介紹，以及覆蓋旅游中的吃喝玩樂的所有內(nèi)容。

馬蜂窩的很多博主也是通過簽約平臺，為平臺輸出高質(zhì)量的內(nèi)容。關(guān)于旅游游記的的文章內(nèi)容篇幅非常長，文字介紹比較多，上下滑動查看游記內(nèi)容確實(shí)比較累，馬蜂窩的側(cè)邊欄使用目錄的交互方式，通過錨點(diǎn)定位的交互操作讓用戶閱讀內(nèi)容更加輕松，更有選擇性。

側(cè)邊欄同時還增加“文中提及地點(diǎn)”的話題內(nèi)容，可以直接跳轉(zhuǎn)話題，用戶更容易全面的獲取針對性的信息，參與討論。

（2）底部導(dǎo)航中的“頂一頂”功能動畫效果也是非常有趣，平臺在引導(dǎo)用戶使用這個功能的原因也是和業(yè)務(wù)相關(guān)聯(lián)。

頂一頂?shù)臄?shù)值越大，就有很高的概率讓博主的游記文章登頂蜂首，為博主游記提升更多的曝光率，那用戶也是博主文章增加曝光量的來源。平臺通過這種趣味性的設(shè)計觸動用戶去做這樣的點(diǎn)擊行為。

同時讓博主更有動力為平臺輸出文章。評論區(qū)的設(shè)計也是很多小細(xì)節(jié)，比如圖片也可以進(jìn)行描述并同步到評論內(nèi)容中，撰寫評論還可以為文章增加有趣萌萌的卡通標(biāo)簽，多種形式的文章反饋更容易增加用戶互動的積極性。

總結(jié)：

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

案例內(nèi)容的表達(dá)和理解有不恰當(dāng)或站友不認(rèn)同之處，歡迎指摘和交流討論，碼字不易，謝謝支持！

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

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

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