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

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

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

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

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

01、抖音——“剛剛看過(guò)”交互設(shè)計(jì)的體驗(yàn)思考

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

03、淘寶——詳情頁(yè)的商品“標(biāo)簽”功能

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

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

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

07、菜鳥(niǎo)—物流信息狀態(tài)的標(biāo)簽Tab設(shè)計(jì)

08、綠洲——“WOW”彩虹屁水滴打榜評(píng)論功能

09、愛(ài)彼迎——絲滑的手勢(shì)交互和收藏評(píng)分功能

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

一、抖音——“剛剛看過(guò)”交互設(shè)計(jì)的體驗(yàn)思考

1. 設(shè)計(jì)描述

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

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

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

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

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

（1）平臺(tái)

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

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

（2）創(chuàng)造者

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

（3）觀看者

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

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

1. 設(shè)計(jì)描述

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

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

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

三、淘寶——詳情頁(yè)的商品“標(biāo)簽”功能

1. 設(shè)計(jì)描述

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

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

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

（1）趣味性的購(gòu)買(mǎi)體驗(yàn)-卡西歐手表

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

（2）提升用戶購(gòu)買(mǎi)決策-NIKE鞋

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

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

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

買(mǎi)衣服的時(shí)候發(fā)現(xiàn)商戶賣(mài)家喜歡配置“搭配”這個(gè)標(biāo)簽，并且會(huì)給圖片中模特身上的產(chǎn)品配置商品鏈接。因?yàn)楹芏嗌虘艚?jīng)營(yíng)服飾產(chǎn)品的時(shí)候，也會(huì)賣(mài)褲子、鞋等產(chǎn)品。商戶可以更多地給自己其他產(chǎn)品做配套宣傳，吸引用戶并給一些穿搭參考，促進(jìn)用戶購(gòu)買(mǎi)。

基于這個(gè)功能，我想闡述一下淘寶背后的運(yùn)營(yíng)，淘寶是一個(gè)通過(guò)商戶賣(mài)家入駐上架商品，并將商品呈現(xiàn)給用戶買(mǎi)家進(jìn)行選擇購(gòu)買(mǎi)的平臺(tái)。做過(guò)店鋪的朋友都知道，淘寶后臺(tái)有很多各式各樣的運(yùn)營(yíng)玩法提供給商家，幫助他們?cè)黾愉N(xiāo)量和收入。

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

淘寶會(huì)通過(guò)檢測(cè)用戶大數(shù)據(jù)，研究分析用戶操作行為和消費(fèi)習(xí)慣，對(duì)應(yīng)設(shè)計(jì)開(kāi)發(fā)一些有利于商戶售賣(mài)的功能。

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

1. 設(shè)計(jì)描述

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

首先進(jìn)入到手機(jī)頁(yè)面，首頁(yè)正上方會(huì)彈出“現(xiàn)金獎(jiǎng)勵(lì)”運(yùn)營(yíng)活動(dòng)框，等待幾秒之后消失。

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

在頁(yè)面點(diǎn)擊返回按鈕會(huì)第二次出現(xiàn)“發(fā)布任務(wù)”挽留彈框。點(diǎn)擊離開(kāi)，會(huì)第三次彈出“任務(wù)入口提示”引導(dǎo)，且需要停留五秒才能退出。直接退出后會(huì)返回首頁(yè)?？梢岳^續(xù)點(diǎn)擊操作進(jìn)入“發(fā)布閑置任務(wù)領(lǐng)獎(jiǎng)勵(lì)”頁(yè)面。

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

（1）階段一：引導(dǎo)開(kāi)始

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

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

（2）階段二：引導(dǎo)中

“引導(dǎo)完成第一個(gè)任務(wù)”彈窗：在此過(guò)程中，我通過(guò)不同賬號(hào)反復(fù)測(cè)試，發(fā)現(xiàn)在操作多次之后，這個(gè)彈窗會(huì)反復(fù)出現(xiàn)，只能說(shuō)這個(gè)彈窗干擾能力有點(diǎn)強(qiáng)。

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

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

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

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

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

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

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

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

1. 設(shè)計(jì)描述

（1）首頁(yè)

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

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

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

（2）文檔編輯頁(yè)面

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

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

（1）首頁(yè)的交互操作方式

點(diǎn)按右邊的“描邊小圓點(diǎn)”進(jìn)行編輯真的很令人驚喜，誰(shuí)能知道這個(gè)小玩意它其實(shí)是一個(gè)文檔編輯的功能。

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

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

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

（2）被編輯過(guò)的文檔返回會(huì)置于列表頂部

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

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

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

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

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

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

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

1. 設(shè)計(jì)描述

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

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

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

（1）彈幕喚起功能

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

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

（2）彈幕樣式

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

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

（3）彈幕功用性

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

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

（4）隨著z時(shí)代來(lái)臨，用戶接觸信息會(huì)更快，更密集

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

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

所以對(duì)于很多文娛類(lèi)產(chǎn)品來(lái)說(shuō)，在設(shè)計(jì)出有趣的東西之余，也需要更多地承擔(dān)引導(dǎo)用戶行為的責(zé)任。

七、菜鳥(niǎo)——物流信息狀態(tài)的標(biāo)簽Tab設(shè)計(jì)

1. 設(shè)計(jì)描述

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

若對(duì)應(yīng)標(biāo)簽的物流信息個(gè)數(shù)為0，對(duì)應(yīng)標(biāo)簽文字使用灰色樣式，點(diǎn)擊當(dāng)前標(biāo)簽，會(huì)彈出toast提示此標(biāo)簽下暫無(wú)物流信息。

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

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

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

（1）tab標(biāo)簽的類(lèi)型

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

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

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

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

“待收件”放在靠前的位置，因?yàn)橛脩舯容^關(guān)心自己的待收件的個(gè)數(shù)。那從流程來(lái)說(shuō)，“派送-運(yùn)輸-簽收”是不是可以聯(lián)系地更緊密一點(diǎn)？所以“未發(fā)貨”和“已簽收”的位置可以更換，讓流程信息銜接更完整。

（3）tab標(biāo)簽的定位效果

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

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

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

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

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

八、綠洲——“WOW”彩虹屁水滴打榜評(píng)論功能

1. 設(shè)計(jì)描述

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

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

在idol的“WOW彩虹”榜單，粉絲通過(guò)日?；顒?dòng)獲取水滴值，然后通過(guò)消耗水滴值給自己喜歡的idol評(píng)論，平臺(tái)再根據(jù)粉絲的水滴貢獻(xiàn)值對(duì)他們進(jìn)行榜單排名。

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

（1）綠洲將評(píng)論功能運(yùn)營(yíng)化，玩法更加細(xì)分

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

（2）每天免費(fèi)三次打賞

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

對(duì)于注冊(cè)的用戶來(lái)說(shuō)，在平臺(tái)中既可以作為粉絲，也可讓自己成長(zhǎng)為某個(gè)領(lǐng)域的kol，成為別人的idol。用戶流量大，評(píng)論活躍度高，水滴活動(dòng)的運(yùn)營(yíng)玩法可以加強(qiáng)用戶對(duì)產(chǎn)品的粘性。

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

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

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

（4）「綠洲」小清新的自然風(fēng)設(shè)計(jì)風(fēng)格使用起來(lái)有一種舒暢的感覺(jué)

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

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

九、愛(ài)彼迎——絲滑的手勢(shì)交互和收藏評(píng)分功能

1. 設(shè)計(jì)描述

（1）手勢(shì)操作

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

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

（2）收藏功能

進(jìn)入詳情頁(yè)點(diǎn)擊愛(ài)心按鈕可以收藏房源，底部tab上方會(huì)彈出一個(gè)小的提示框，選擇將收藏的房源歸類(lèi)，點(diǎn)擊更改按鈕進(jìn)入分類(lèi)頁(yè)面。當(dāng)再次點(diǎn)擊愛(ài)心按鈕時(shí)，底部的提示框文案會(huì)立馬替換，提示撤銷(xiāo)剛才的取消收藏操作。底部的提示框會(huì)停留10秒后消失。

（3）評(píng)分功能

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

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

（1）愛(ài)必迎的房源內(nèi)容點(diǎn)擊進(jìn)入和拖動(dòng)返回的交互操作體驗(yàn)絲滑

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

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

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

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

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

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

這個(gè)撤銷(xiāo)文案不得不說(shuō)，既細(xì)節(jié)又“雞賊”。撤銷(xiāo)會(huì)吸引用戶再次點(diǎn)擊文字按鈕。因?yàn)椤赋蜂N(xiāo)」的字面意思是提示用戶這個(gè)流程任務(wù)還沒(méi)有結(jié)束，然后就會(huì)下意識(shí)繼續(xù)操作，點(diǎn)擊撤銷(xiāo)將房源又重新放回到了心愿單。

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

其實(shí)在用戶日常使用app的時(shí)候，不管是購(gòu)物選商品或是旅游定房間，做最終的決定之前，都繞不開(kāi)去了解其他人真實(shí)的使用評(píng)價(jià)。用戶評(píng)論在某種程度上能決定一個(gè)人的購(gòu)買(mǎi)決策。

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

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

1. 設(shè)計(jì)描述

（1）視覺(jué)設(shè)計(jì)

首先是金剛區(qū)的圖標(biāo)設(shè)計(jì)，一共分為上下兩部分，第一部分有五個(gè)圖標(biāo)，對(duì)應(yīng)的五大主營(yíng)業(yè)務(wù)分別為“酒店”、“機(jī)票”、“火車(chē)票”、“旅游”、“攻略/景點(diǎn)”，通過(guò)五種不同的強(qiáng)提示色作為背景底。

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

（2）交互操作

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

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

（1）視覺(jué)設(shè)計(jì)

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

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

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

（2）交互設(shè)計(jì)

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

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

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

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

十一、總結(jié)

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

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

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

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

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