喜茶小程序產(chǎn)品設(shè)計體驗(yàn)分析

2023-6-5    博博

進(jìn)入喜茶小程序的時候給我的感受是簡潔、時尚、極致的設(shè)計風(fēng)格,截了兩張小程序內(nèi)的兩個界面。 確實(shí)做的還挺不錯的,為什么給人感受不一樣?接下來我們分析分析




1.版式

1.首先從下面的頁面我們能發(fā)現(xiàn),界面的排版只有卡片左邊距留了20的安全距離,而卡片右邊安全距離為0,這樣特別的版式設(shè)計給人不對稱的感覺,這樣的設(shè)計能讓用戶記住,同時又有一點(diǎn)時尚范的感覺,很符合喜茶目標(biāo)用戶年輕人的審美。
2.同時產(chǎn)品的banner是3:2的比例,較為靠近黃金比例的尺寸。 



1.點(diǎn)單頁面,喜茶新增了新品推廣位,一些新上的產(chǎn)品都會在推廣位呈現(xiàn),尺寸比例4:3,給人的感受像是線下海報一樣,同時第三個廣告位露出部分,讓用戶知道后面還可以左滑查看。同時推廣頁的右下角有個箭頭指引,告知用戶可點(diǎn)擊。 

2.看完這幾個頁面會發(fā)現(xiàn),喜茶的基本上都是純直角的設(shè)計語言,推廣頁是直角、標(biāo)簽是直角、按鈕微圓角,直角的設(shè)計語言給人的感受是時尚、極致、極簡的設(shè)計感受,個人非常喜歡。 

3.但是點(diǎn)單頁面的有點(diǎn)亂,標(biāo)簽的顏色過多,不夠統(tǒng)一,圖標(biāo)的也非常的多,這樣給人的感受就會比較凌亂,盡可能少的去表現(xiàn),這樣更加能提高用戶的效率。



1.在點(diǎn)單頁面用戶上滑,推廣位漸漸的往上消失,這樣產(chǎn)品的展示會更多,利于用戶挑選和尋找。 

2.用戶在選口味界面,發(fā)現(xiàn)每一個標(biāo)簽的內(nèi)的文字左右的安全距離一致,依次排列,具有節(jié)奏感,頁面給人感受簡潔、易操作,同時用戶可以選自己的口味,可進(jìn)行保存,下次點(diǎn)直接就可以選擇自己的口味。





在喜茶的百貨界面能清晰發(fā)現(xiàn)每一個模塊的都是不一樣的,很多產(chǎn)品的商場頁面都是一致的,而喜茶在產(chǎn)品的展示會以不一樣的形式出現(xiàn),每一個模塊都有尺寸和排版的差異,這樣給用戶有種落錯感,更加有設(shè)計。



2.會員頁

1.喜茶的會員頁給我眼前一亮的感覺,會員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。 

2.會員頁用戶在切換的同時圖標(biāo)的顏色會跟著會員的顏色變化,特權(quán)的內(nèi)容也會有不一樣的變化,讓用戶有明顯的等級感知。 

3.切換到“黑卡”的時候,會發(fā)現(xiàn)會員頁的“喜”字加上了質(zhì)感。 

4.會員卡上“喜”字提取了“喜茶”中的“喜”,跟其他產(chǎn)品的會員做了區(qū)分的同時又加深了品牌印象。







3.圖標(biāo) 

喜茶有兩種不同風(fēng)格的圖標(biāo),一種是比較極簡,線性,差異性沒有那么強(qiáng),而另一種則是插畫風(fēng)格的圖標(biāo),給人感受比較有趣,更有差異,極簡則符合喜茶整體小程序的調(diào)性,而插畫又豐富了頁面的單調(diào)性。



4.動畫 

1.喜茶頂部的banner做非常不錯,例如跟FENDI合作的會在首屏加入視頻,用戶一進(jìn)入小程序就能看到能很好的吸引用戶的注意。 



2.用戶在左右切換banner時,文字會先出現(xiàn)然后底部的圖片漸漸出現(xiàn),給用戶感受自然、流暢的感受,好的動畫效果能給產(chǎn)品加分,給用戶留下好的感受。



5.字體

1.喜茶的數(shù)字字體是NeutraText-DemiAlt,每次進(jìn)去喜茶看到他們的數(shù)字字體非常有獨(dú)特性,給人的感受時尚、極致、有設(shè)計。 

2.部分界面和海報喜茶會用上方正悠宋,有點(diǎn)中國風(fēng)、古風(fēng)的韻味在里面,而且也非常有獨(dú)特的設(shè)計美感,喜茶會應(yīng)用在國風(fēng)的海報以及會員頁的“喜”字上,突出風(fēng)格化。

3.好的字體能很好的提高產(chǎn)品的品牌感和設(shè)計美感,更能傳達(dá)該品牌想傳達(dá)的東西。




6.更多界面欣賞





作者:黃小偉
來源:站酷



藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。

分享本文至:

日歷

鏈接

個人資料

存檔