Case 28 | Coffee Beans.com

網址:https://coffeebeansdelivered.com.au

近來喜歡泡一些手沖咖啡,對咖啡品牌開始慢慢了解的同時也發現有一些咖啡網站也挺有特點的。今天分析的這篇就是一個澳洲品牌的咖啡網站。

・nav bar用的深色背景(#121212)和下面的咖啡液流動的視頻圖片相互融合,白色的導航類目字體居中。右邊是搜索,購物車,Log in

・最有特點的是這個大的看似是圖片,實際上是有動畫效果的。中間的咖啡液是在流動的,用戶在瀏覽網站時候就可以看到咖啡豆變成咖啡液的流動。視覺上非常有趣,整個網站頁面傳達出了動感和新鮮freash的品牌理念

・頁面上兩個紅色背景的CTA button非常有意思。一個“Help me decide",一個“Buy coffee"

・點擊進入“Help me decide",是帶有圖片icon問答形式的。每回答一個問題,下一個問題才會出現。非常巧妙的設計,用戶不會在開始一下子看到很多問題容易直接放棄問卷。而每回答一個問題再出來下一個問題,好像遊戲過關一樣的體驗,讓用戶能一個一個問題的仔細完成,從而AI自動幫助用戶選擇最適合的豆子。對於節約用戶時間,增加購買下單率,甚至包括減小退貨率,都是一個很可愛具有匠心的設計

・擬實物化的圖片很好的幫助用戶快速選擇,因為部分專業性名詞對於用戶會是一個confused的地方,也有可能讓用戶感到frustrated。所以這裡的圖片就非常有必要了,看圖說話是較為用戶友好的

直接放出產品的信息(包括價格,產地),和可以“order'的action對於直接宣傳產品和提高用戶的購買率都是直觀的

這個頁面是深色作為背景的,仔細觀察可以看到背景圖片都是與咖啡主題相關的:咖啡田地,咖啡豆,泡咖啡中。所有背景圖片都是調暗了的圖片,好像用了“mask"的效果一樣。

背景圖片如下:

圖片和上方的文字間距是較小的,能從視覺上為用戶分類分區

每個閱讀box是長方形的,像是在貨架上擺放的咖啡豆的外包裝袋的形狀。一些組合的背景圖片具有幾何美感。

模仿設計

🍺思考:

・暗色的與主題契合的背景圖讓頁面在背景處也展示產品,非常專業精心設計的細節

・排版的橫縱的視覺效果的應用讓頁面生動活潑

・居中。內容和圖片基本都是居中排版的,整個從上到下瀏覽頁面時候不會費勁

・box-view的內容展示,box的size有所不同,頁面organized的同時不會呆板