2023-6-5 博博
進(jìn)入喜茶小程序的時候給我的感受是簡潔、時尚、極致的設(shè)計風(fēng)格，截了兩張小程序內(nèi)的兩個界面。 確實做的還挺不錯的，為什么給人感受不一樣？接下來我們分析分析
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è)計。
1.喜茶的會員頁給我眼前一亮的感覺，會員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。
2.會員頁用戶在切換的同時圖標(biāo)的顏色會跟著會員的顏色變化，特權(quán)的內(nèi)容也會有不一樣的變化，讓用戶有明顯的等級感知。
3.切換到“黑卡”的時候，會發(fā)現(xiàn)會員頁的“喜”字加上了質(zhì)感。
4.會員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產(chǎn)品的會員做了區(qū)分的同時又加深了品牌印象。
喜茶有兩種不同風(fēng)格的圖標(biāo)，一種是比較極簡，線性，差異性沒有那么強(qiáng)，而另一種則是插畫風(fēng)格的圖標(biāo)，給人感受比較有趣，更有差異，極簡則符合喜茶整體小程序的調(diào)性，而插畫又豐富了頁面的單調(diào)性。
1.喜茶頂部的banner做非常不錯，例如跟FENDI合作的會在首屏加入視頻，用戶一進(jìn)入小程序就能看到能很好的吸引用戶的注意。
2.用戶在左右切換banner時，文字會先出現(xiàn)然后底部的圖片漸漸出現(xiàn)，給用戶感受自然、流暢的感受，好的動畫效果能給產(chǎn)品加分，給用戶留下好的感受。
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á)的東西。
藍(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.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍(lán)藍(lán)設(shè)計的小編 http://m.bouu.cn