6個產(chǎn)品細節(jié)剖析,看看高手是如何做設(shè)計的!
本期我們將再次看看別的產(chǎn)品在交互體驗上有哪些有意思的設(shè)計吧!
案例分享
1. 自如簡潔趣味 banner
自如首頁經(jīng)過改版后,頭部 Banner 采用了大面積白色底和小動效的形式,以實現(xiàn)簡潔而富有品質(zhì)感的效果。
提升用戶體驗:通過采用大面積白色底減弱 Banner 的營銷感,提升整體頁面的品質(zhì)感和氛圍感,同時可以降低用戶對廣告/活動的抵觸情緒,提升信息的傳遞效率。
引導用戶視覺焦點:在減弱 Banner 的營銷感的同時,通過簡單而有趣的小動效,提升頭部的氛圍感,吸引用戶的視線,引導用戶進行點擊和轉(zhuǎn)化。
2. 盒馬-頂部 banner
盒馬 app 嘗新頁頂部 banner 采用線描動畫結(jié)合實物圖的風格表現(xiàn),線描 ip 小人生動有趣的表現(xiàn)和商品實物圖結(jié)合令人眼前一亮。
傳遞正向情緒價值:線描小人表情生動有趣,結(jié)合期待搓手、揮手打招呼等動作,展示對推薦美食的向往,傳遞正向情緒價值,激發(fā)用戶的好奇心和探索欲。
提高用戶點擊欲:輪播/手動切換時,背景變化的交互動效與星形的主視覺結(jié)合,自然有趣的互動元素,令人眼前一亮。引人注目,激發(fā)用戶的點擊欲。
3. 美團外賣
美團外賣的首頁下拉動畫與膨脹神券的結(jié)合,為用戶帶來了生動有趣的體驗。
增強用戶體驗:隨著用戶下拉頁面,紅包金額逐漸增大,最終進入到領(lǐng)取紅包的頁面。這種交互設(shè)計不僅順滑方便,還增強了用戶的參與感和體驗感。
提升用戶對紅包的感知:用戶越往下拉,紅包的金額越大,這種設(shè)計讓用戶能夠直觀地感受到紅包的價值。同時,進入到領(lǐng)取紅包的頁面也增加了用戶對紅包的期待和興奮感。
4. 滴滴打車評價體驗創(chuàng)新設(shè)計
滴滴打車為了提升用戶體驗,對司機評價的設(shè)計進行了精心擴展。通過這些設(shè)計細節(jié)的引入,使得滴滴打車的評價界面更加生動有趣,讓用戶在評價司機的同時也能享受到更愉悅的體驗。
引入動態(tài)表情,豐富情緒表達的方式:在評價界面的浮層頂部,滴滴打車引入了表情動畫,通過放大的動畫效果,增強了用戶的情緒感受。這樣的設(shè)計不僅豐富了情緒表達的方式,還為用戶帶來了更多趣味性。
呈現(xiàn)驚喜動畫,增強評價過程的趣味性:當用戶點擊滿意按鈕后,如果選擇進一步提供詳細的評價,滴滴打車還特意加入了放禮花的動效。這樣的動效不僅在豐富用戶的情緒表達的同時,也增強了整個評價過程的趣味性。
5. 閑魚-海鮮市場
「閑魚」App 的海鮮市場板塊頭部的圖標入口插畫增加了點擊交互動效,這一舉措極大地提升了用戶的互動性和趣味性。
對于用戶來說:通過動效的設(shè)計,「閑魚」App 成功地將用戶的操作與應用的反饋相結(jié)合,讓用戶在使用過程中感受到更加自然和流暢的交互體驗。
對于平臺來說:讓用戶在使用過程中感受到更加愉悅的心情,從而進一步提高用戶的使用頻率和留存率。
6. 大眾點評-隱藏二樓,劃出驚喜
大眾點評首頁下劃超 1/4 屏即可呼喚出二樓空間。通過下滑操作的交互,用戶可以快速訪問更多相關(guān)內(nèi)容,而無需進行額外的點擊或搜索。不僅能夠提高用戶的操作效率,還能夠增加頁面的可用性和吸引力。
多樣化的流量入口:在屏效比十分緊張的首頁,通過下劃的方式增加了一個新的多樣化流量入口。
漸進式露出的驚喜:在下劃過程中,“下拉刷新”的文案隨之變?yōu)椤八墒诌M入二樓”,并通過強眼的主視覺吸引用戶注意,在交互的過程中巧妙地激起了用戶的驚喜。
最后要說的話
本期的設(shè)計分享就到這里啦。
文章中的案例與思考來自于智行 UED 同學的日常分享。
后續(xù)我們將持續(xù)深度體驗產(chǎn)品,挖掘更多值得分享、學習的設(shè)計案例。努力將其中的方法理論應用到智行 APP 后續(xù)的產(chǎn)品設(shè)計中。
愿我們的努力為你帶來更好的體驗。
作者:智行ZXD設(shè)計中心
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)