---
# System prepended metadata

title: 20210825 網站視覺設計
tags: [MFEE 網頁設計]

---

# 20210825 網站視覺設計

## 主題: 討論網站各頁面視覺設計初稿、交稿時程

### 交稿時程

- 8/27 提交每個人的理想字體並互相交換套用查看效果

- 8/28 20:00 開會確認視覺設計稿，確認使用的統一字體

### 設計稿 Figma

- [Figma 設計稿](https://www.figma.com/file/bYlrnSI2ie5XqoHUCL2sP0/%EF%BC%A4%E7%B5%84%E9%A6%96%E9%A0%81%E8%A8%AD%E8%A8%88?node-id=0%3A1)

### 設計樣式

- Logo、標題顏色
    - #2A593E
        - ![](https://i.imgur.com/nmXn9jt.png)

-----------------------------
### 首頁

- Logo 置中
    - ![](https://i.imgur.com/XyfdrAx.png)

- Navbar
    - 首頁的 section 選單置左
    - 其他的 section 置頂

- 固定選單
    - 固定右側，放餐食扭蛋( icon )

#### 首頁、商城、專欄 Section 各一個 Banner
- ![](https://i.imgur.com/deJs5yC.png)
- Banner 顯示代表性的內容
    - 例: 商城 → 健康餐盒廣告


#### 商城
- 放主打商品的 Banner
- 商品圖統一去背，加上文案
- ![](https://i.imgur.com/UmNl70H.jpg)
- 商城嚴選
    - 放上商城分類(健康餐盒、調理包、食材等...)
    - 使用 Hover ( 滑鼠移入會亮 )

#### 專欄
- 放主打文章的 Banner
- 專欄分類
- ![](https://i.imgur.com/gXMd12B.png)

#### 外送平台

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

-----------------------------
### 專欄

- 第三層需要麵包屑
    - ![](https://i.imgur.com/6KkRE9w.png)

- 熱門文章
    - 目前隨機產生，並同步顯示於首頁專欄 Section
    - 可用文章瀏覽次數

- 文章底下的留言板功能
    - 可評分或留言
    - 待確認:是否串接 LINE / FB 帳號

-----------------------------
### 商城

- 版型參考
    - ![](https://i.imgur.com/2bvlC9Z.jpg)


- 商品分類
    - Navbar Hover 顯示商品類別
    - ![](https://i.imgur.com/edpfnS4.png)


- 商品篩選
    - 條件
        - 價格區間: 規則待確認
        - 卡路里
        - 品牌
        - 蛋白質含量

    - 擺放位置、套件與樣式(待確認)
        - 範本參考
        - ![](https://i.imgur.com/hTUQLOm.png)

-----------------------------
### 會員

- 會員專區內容併入首頁 登入/註冊 中

- 可串接 FB / LINE 帳號登入(待確認實作難度)
    - 需要看 API 文件

- 優惠券
    - 1 點可折 1 元

-----------------------------
### 外送平台

- 版型參考
    - ![](https://i.imgur.com/027Iu6t.png)

- 地圖功能
    - GPS 定位當前位置附近的店家
    - 頁面自動篩選當前時間內有營業的餐廳
    - ![](https://i.imgur.com/9RcBfeb.png)


- 可做關鍵字搜尋

- 篩選功能
    - 距離
    - 價格
    - 新至舊

-----------------------------
### 購物車

- 版型參考
    - ![](https://i.imgur.com/1KQjZBp.png)
    - 需要有結帳流程圖示
        - ![](https://i.imgur.com/LojnSc4.png)

- 優惠與商品
    - 優惠: 串接會員
    - 商品: 串接商城

- 需有目前已使用的優惠與其他可用優惠
    - 點擊繼續購物可導向商城
    - ![](https://i.imgur.com/NUgXTgl.png)

- 需顯示商城其他可購買的商品
    - 顯示可達標免運費的商品
    - ![](https://i.imgur.com/TICpxZX.png)

- 運送與付款方式
    - ![](https://i.imgur.com/Ts3FJHH.png)
    - 需要有免運費
    - 可使用優惠代碼(會員折抵)
    - 付款方式
        - 7-11 貨到不付款
            - 需做信用卡 / Line Pay 結帳
    - 運送方式
    - 需指定超商運送門市
        - 自定 Google 地圖，以經緯度定位模擬選擇門市


###### tags: `MFEE 網頁設計`