---
# System prepended metadata

title: Rufous 網站參考

---

# Rufous 網站參考


## 首頁
* ###  [Campos Coffee](https://us.camposcoffee.com/?site=us)｜首圖 ![](https://i.imgur.com/OUfC0BY.png)
    * 優點：滿版的首圖創造氣氛、CTA 按鈕明確
    * 缺點：頁面下方的 parrallax scroll 動畫干擾閱讀、字有點小
---
* ### [Origo Coffee](https://origocoffee.myshopify.com/)｜首圖
    純粹覺得照片很好看XD![](https://i.imgur.com/HWKeY1M.jpg)
---
* ### [About Life](https://www.about-life.coffee/)｜載入頁面/首圖 ![](https://i.imgur.com/cnKmfeQ.jpg) ![](https://i.imgur.com/lHo1uze.png)

    優點：視覺很漂亮！第一次看到 navigation bar 在最下面、載入頁面動畫很有趣
    缺點：動畫太多、字太多很花、載入太慢
--- 
* ### [The Roastery by Noze Cafe](https://www.tysons.jp/roastery/menu/)
    字體 layout 很好看ˊˇˋ（是游明朝體）
![](https://i.imgur.com/tamtzEa.png)
---
* ### [The Prolific Bean](https://theprolificbean.com/)｜品牌故事/製造過程
    如果要放大手工烘焙、職人精神的品牌形象，可以參考這個網站的排版。
![](https://i.imgur.com/w5VAekq.png)
    * 優點：增加質感
    * 缺點：要注意圖文不能太冗長，顧客畢竟還是來買咖啡的
---
* ### [House of Coffee Beans](http://www.houseofcoffeebeans.com/)｜首頁架構
    首頁的架構是首圖 -> 幻燈片（加字可以變成品牌故事）-> 商品陳列
![](https://i.imgur.com/i7CvoQX.jpg)
![](https://i.imgur.com/YDPsVhZ.png)
    * 優點：因為用很多橫式的陳列，所以頁面滑下來不會太長
    * 缺點：手機瀏覽的話就沒辦法用橫的排版，不然會太小
---

## 商品陳列
* ### [Coffee Address](https://www.coffeeaddress.com/)｜首頁陳列
    Landing Page 往下滑之後用手動輪播的方式介紹咖啡。下面的 CTA 引導使用者進入全部商品的頁面。
![](https://i.imgur.com/7u226r9.png)

     * 優點：適合放在首頁介紹幾樣重點商品
     * 缺點：
         1. 商品包裝/咖啡豆的照片要吸睛，不然每張都會看起來一樣。
         2. 加上說明（例如烘焙方式、產地）會更清楚，因為名字有時候看不出來想表達什麼。

* ### 補充：商品照不同（上圖）vs 商品照一樣（下圖）
    上圖：不同圖片讓使用者比較好分辨
    下圖：要很努力看名字才知道差在哪
![](https://i.imgur.com/DNvEJcR.png)[網頁連結](https://camposcoffee.com/product-category/coffee/)
![](https://i.imgur.com/UjY6LZn.png)[網頁連結](https://us.camposcoffee.com/?site=us)

    * 優點：hover 直接出現購物車，方便
    * 缺點：hover 放大的動畫很煩，會一直想避開它