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

1.版式

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

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

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

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

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

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

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

2.會(huì)員頁(yè)

1.喜茶的會(huì)員頁(yè)給我眼前一亮的感覺(jué)，會(huì)員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺(jué)。 

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

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

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

3.圖標(biāo) 

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

4.動(dòng)畫 

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

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

5.字體

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

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

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

6.更多界面欣賞

作者：黃小偉
來(lái)源：站酷