本期我們將再次看看別的產(chǎn)品在交互體驗(yàn)上有哪些有意思的設(shè)計(jì)吧！

案例分享

1. 自如簡(jiǎn)潔趣味 banner

自如首頁(yè)經(jīng)過(guò)改版后，頭部 Banner 采用了大面積白色底和小動(dòng)效的形式，以實(shí)現(xiàn)簡(jiǎn)潔而富有品質(zhì)感的效果。

提升用戶體驗(yàn)：通過(guò)采用大面積白色底減弱 Banner 的營(yíng)銷感，提升整體頁(yè)面的品質(zhì)感和氛圍感，同時(shí)可以降低用戶對(duì)廣告/活動(dòng)的抵觸情緒，提升信息的傳遞效率。

引導(dǎo)用戶視覺(jué)焦點(diǎn)：在減弱 Banner 的營(yíng)銷感的同時(shí)，通過(guò)簡(jiǎn)單而有趣的小動(dòng)效，提升頭部的氛圍感，吸引用戶的視線，引導(dǎo)用戶進(jìn)行點(diǎn)擊和轉(zhuǎn)化。

2. 盒馬-頂部 banner

盒馬 app 嘗新頁(yè)頂部 banner 采用線描動(dòng)畫結(jié)合實(shí)物圖的風(fēng)格表現(xiàn)，線描 ip 小人生動(dòng)有趣的表現(xiàn)和商品實(shí)物圖結(jié)合令人眼前一亮。

傳遞正向情緒價(jià)值：線描小人表情生動(dòng)有趣，結(jié)合期待搓手、揮手打招呼等動(dòng)作，展示對(duì)推薦美食的向往，傳遞正向情緒價(jià)值，激發(fā)用戶的好奇心和探索欲。

提高用戶點(diǎn)擊欲：輪播/手動(dòng)切換時(shí)，背景變化的交互動(dòng)效與星形的主視覺(jué)結(jié)合，自然有趣的互動(dòng)元素，令人眼前一亮。引人注目，激發(fā)用戶的點(diǎn)擊欲。

3. 美團(tuán)外賣

美團(tuán)外賣的首頁(yè)下拉動(dòng)畫與膨脹神券的結(jié)合，為用戶帶來(lái)了生動(dòng)有趣的體驗(yàn)。

增強(qiáng)用戶體驗(yàn)：隨著用戶下拉頁(yè)面，紅包金額逐漸增大，最終進(jìn)入到領(lǐng)取紅包的頁(yè)面。這種交互設(shè)計(jì)不僅順滑方便，還增強(qiáng)了用戶的參與感和體驗(yàn)感。

提升用戶對(duì)紅包的感知：用戶越往下拉，紅包的金額越大，這種設(shè)計(jì)讓用戶能夠直觀地感受到紅包的價(jià)值。同時(shí)，進(jìn)入到領(lǐng)取紅包的頁(yè)面也增加了用戶對(duì)紅包的期待和興奮感。

4. 滴滴打車評(píng)價(jià)體驗(yàn)創(chuàng)新設(shè)計(jì)

滴滴打車為了提升用戶體驗(yàn)，對(duì)司機(jī)評(píng)價(jià)的設(shè)計(jì)進(jìn)行了精心擴(kuò)展。通過(guò)這些設(shè)計(jì)細(xì)節(jié)的引入，使得滴滴打車的評(píng)價(jià)界面更加生動(dòng)有趣，讓用戶在評(píng)價(jià)司機(jī)的同時(shí)也能享受到更愉悅的體驗(yàn)。

引入動(dòng)態(tài)表情，豐富情緒表達(dá)的方式：在評(píng)價(jià)界面的浮層頂部，滴滴打車引入了表情動(dòng)畫，通過(guò)放大的動(dòng)畫效果，增強(qiáng)了用戶的情緒感受。這樣的設(shè)計(jì)不僅豐富了情緒表達(dá)的方式，還為用戶帶來(lái)了更多趣味性。

呈現(xiàn)驚喜動(dòng)畫，增強(qiáng)評(píng)價(jià)過(guò)程的趣味性：當(dāng)用戶點(diǎn)擊滿意按鈕后，如果選擇進(jìn)一步提供詳細(xì)的評(píng)價(jià)，滴滴打車還特意加入了放禮花的動(dòng)效。這樣的動(dòng)效不僅在豐富用戶的情緒表達(dá)的同時(shí)，也增強(qiáng)了整個(gè)評(píng)價(jià)過(guò)程的趣味性。

5. 閑魚(yú)-海鮮市場(chǎng)

「閑魚(yú)」App 的海鮮市場(chǎng)板塊頭部的圖標(biāo)入口插畫增加了點(diǎn)擊交互動(dòng)效，這一舉措極大地提升了用戶的互動(dòng)性和趣味性。

對(duì)于用戶來(lái)說(shuō)：通過(guò)動(dòng)效的設(shè)計(jì)，「閑魚(yú)」App 成功地將用戶的操作與應(yīng)用的反饋相結(jié)合，讓用戶在使用過(guò)程中感受到更加自然和流暢的交互體驗(yàn)。

對(duì)于平臺(tái)來(lái)說(shuō)：讓用戶在使用過(guò)程中感受到更加愉悅的心情，從而進(jìn)一步提高用戶的使用頻率和留存率。

6. 大眾點(diǎn)評(píng)-隱藏二樓，劃出驚喜

大眾點(diǎn)評(píng)首頁(yè)下劃超 1/4 屏即可呼喚出二樓空間。通過(guò)下滑操作的交互，用戶可以快速訪問(wèn)更多相關(guān)內(nèi)容，而無(wú)需進(jìn)行額外的點(diǎn)擊或搜索。不僅能夠提高用戶的操作效率，還能夠增加頁(yè)面的可用性和吸引力。

多樣化的流量入口：在屏效比十分緊張的首頁(yè)，通過(guò)下劃的方式增加了一個(gè)新的多樣化流量入口。

漸進(jìn)式露出的驚喜：在下劃過(guò)程中，“下拉刷新”的文案隨之變?yōu)椤八墒诌M(jìn)入二樓”，并通過(guò)強(qiáng)眼的主視覺(jué)吸引用戶注意，在交互的過(guò)程中巧妙地激起了用戶的驚喜。

最后要說(shuō)的話

本期的設(shè)計(jì)分享就到這里啦。

文章中的案例與思考來(lái)自于智行 UED 同學(xué)的日常分享。

后續(xù)我們將持續(xù)深度體驗(yàn)產(chǎn)品，挖掘更多值得分享、學(xué)習(xí)的設(shè)計(jì)案例。努力將其中的方法理論應(yīng)用到智行 APP 后續(xù)的產(chǎn)品設(shè)計(jì)中。

愿我們的努力為你帶來(lái)更好的體驗(yàn)。

作者：智行ZXD設(shè)計(jì)中心