---
# System prepended metadata

title: 20210808 網頁風格與配色確認
tags: [MFEE 前期規劃]

---

# 20210808 網頁風格與配色確認

## 色系確認

### 色系
- ![主色系參考](https://i.imgur.com/jcD1Pyg.png)

- 主色
    - 綠色
    - ![綠色系參考](https://i.imgur.com/Tcvv6uX.png)

- 副色
    - 黃色 #D9BC2B
- 強調色
    - 橘色 #D96E30


## 風格與初步版型確認

### 首頁

#### 導覽列 + Banner

- ![](https://i.imgur.com/jtMcmts.jpg)

#### 文章專欄

- ![](https://i.imgur.com/4xIXDpD.png)

- 上層放熱門專欄 / 文章

- 下層放其他專欄 / 文章
    - 透過輪播 或 slider 製作
    - 圖內的 Select 區塊替換為 More (觀看更多文章) 

#### 商品專區

- ![](https://i.imgur.com/YUqwgE3.png)

- 上層放主打商品 / 促銷廣告
- 下層放各項商品類別


#### 外送平台

- ![](https://i.imgur.com/hqMz3ma.png)

- 放上各種類別的產品
    - 例如:健康餐盒
    - 例如:蛋白質餐
    - 例如:養生...etc

- 點擊後跳轉到外送店家一覽

#### Footer

- ![](https://i.imgur.com/PrtoNP4.png)

###### tags: `MFEE 前期規劃`