前兩天有一個粉絲要我寫一個喜茶小程序的產品分析，正好當天買了喜茶和 FENDI 聯名的奶茶，看到喜茶的小程序做的很不錯，不管是從視覺感受、體驗設計都做的很不錯。

那么今天我將從 5 個緯度進行分析，希望對自己有所幫助，對你們也有幫助。

更多產品設計分析：

進入喜茶小程序的時候給我的感受是簡潔、時尚、極致的設計風格，截了兩張小程序內的兩個界面。 確實做的還挺不錯的，為什么給人感受不一樣？接下來我們分析分析

一、版式

首先從下面的頁面我們能發現，界面的排版只有卡片左邊距留了 20 的安全距離，而卡片右邊安全距離為 0，這樣特別的版式設計給人不對稱的感覺，這樣的設計能讓用戶記住，同時又有一點時尚范的感覺，很符合喜茶目標用戶年輕人的審美。

同時產品的 banner 是 3:2 的比例，較為靠近黃金比例的尺寸。

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

②看完這幾個頁面會發現，喜茶的基本上都是純直角的設計語言，推廣頁是直角、標簽是直角、按鈕微圓角，直角的設計語言給人的感受是時尚、極致、極簡的設計感受，個人非常喜歡。

③但是點單頁面的有點亂，標簽的顏色過多，不夠統一，圖標的也非常的多，這樣給人的感受就會比較凌亂，盡可能少的去表現，這樣更加能提高用戶的效率。

①在點單頁面用戶上滑，推廣位漸漸的往上消失，這樣產品的展示會更多，利于用戶挑選和尋找。

②用戶在選口味界面，發現每一個標簽的內的文字左右的安全距離一致，依次排列，具有節奏感，頁面給人感受簡潔、易操作，同時用戶可以選自己的口味，可進行保存，下次點直接就可以選擇自己的口味。

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

二、會員頁

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

會員頁用戶在切換的同時圖標的顏色會跟著會員的顏色變化，特權的內容也會有不一樣的變化，讓用戶有明顯的等級感知。

切換到“黑卡”的時候，會發現會員頁的“喜”字加上了質感。

會員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產品的會員做了區分的同時又加深了品牌印象。

三、圖標

喜茶有兩種不同風格的圖標，一種是比較極簡，線性，差異性沒有那么強，而另一種則是插畫風格的圖標，給人感受比較有趣，更有差異，極簡則符合喜茶整體小程序的調性，而插畫又豐富了頁面的單調性。

四、動畫

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

用戶在左右切換 banner 時，文字會先出現然后底部的圖片漸漸出現，給用戶感受自然、流暢的感受，好的動畫效果能給產品加分，給用戶留下好的感受。

五、字體

喜茶的數字字體是 NeutraText-DemiAlt，每次進去喜茶看到他們的數字字體非常有獨特性，給人的感受時尚、極致、有設計。

部分界面和海報喜茶會用上方正悠宋，有點中國風、古風的韻味在里面，而且也非常有獨特的設計美感，喜茶會應用在國風的海報以及會員頁的“喜”字上，突出風格化。

好的字體能很好的提高產品的品牌感和設計美感，更能傳達該品牌想傳達的東西。

六、更多界面欣賞

總結

1. 好的排版能給用戶不一樣的感受，不一定非要一模一樣。
2. 喜茶的會員提取了“喜“字，不僅加深了品牌印象，而且形成與其他產品的差異。
3. 好的動畫效果能給產品加分，給用戶留下好的感受。
4. 好的字體能很好的提高產品的品牌感和設計美感，更能傳達該品牌想傳達的東西。
5. 喜茶的目標很明確，做年輕人的生意，所以喜茶整體的風格都很符合年輕人的審美，簡潔、清新的 設計風格，但是這種風格不一定每一個品牌都能成，在商業的角度需要考慮的太多太多，高級不一定能成！

感謝大家閱讀～ 希望這篇文章對你有幫助，謝謝大家～