# 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
- 

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

- Logo 置中
- 

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

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

#### 首頁、商城、專欄 Section 各一個 Banner
- 
- Banner 顯示代表性的內容
- 例: 商城 → 健康餐盒廣告

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

#### 專欄
- 放主打文章的 Banner
- 專欄分類
- 

#### 外送平台


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

- 第三層需要麵包屑
- 

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

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

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

- 版型參考
- 

- 商品分類
- Navbar Hover 顯示商品類別
- 

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

- 擺放位置、套件與樣式(待確認)
- 範本參考
- 

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

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

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

- 優惠券
- 1 點可折 1 元

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

- 版型參考
- 

- 地圖功能
- GPS 定位當前位置附近的店家
- 頁面自動篩選當前時間內有營業的餐廳
- 

- 可做關鍵字搜尋

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

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

- 版型參考
- 
- 需要有結帳流程圖示
- 

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

- 需有目前已使用的優惠與其他可用優惠
- 點擊繼續購物可導向商城
- 

- 需顯示商城其他可購買的商品
- 顯示可達標免運費的商品
- 

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

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