---
# System prepended metadata

title: 20210801 網站初步功能討論與確認
tags: [MFEE 網頁設計]

---

# 20210801 網站初步功能討論與確認

## <span style="color:orange">下週討論項目</span>
-----------------------------------------
#### <span style="color:orange">0807(六)</span>
- 繳交網頁風格與功能配置範本
    - 找自己喜歡的風格、配色、想要的網站風格與切版範本
    - 到[網站設計發想](https://docs.google.com/spreadsheets/d/18auc5QKSfZ0WiWjE0OwDQLEHuf4CFyexptdYbLkHna4/edit?usp=sharing)做填寫，可貼截圖或網頁連結

#### <span style="color:orange">0808(日)</span>
- 討論網站主視覺與風格
    - 依每個人找到的網頁，討論整體配色與風格
    - 初步確認顏色與大致風格

-----------------------------------------
## <span style="color:orange">待完成項目</span>
-----------------------------------------
- **確認網站初步功能，並製作 sitemap**
- **製作小專 / 大專專案控管表**
    - 小專: Excel(組長)
    - 大專: 待確認表單設計與內容，整合至 Notion 模板(組長)

-----------------------------------------
## <span style="color:orange">商城</span>
-----------------------------------------
- 第一層: 快速上桌 / 健身專區 / 食材 (類別需再增加,類別名稱待定)
    - 參考網站: https://www.fitme24.com/
- 第二層: show: 商品小圖 
    - [健身專區營養計算參考](https://drive.google.com/file/d/1qoZ2Fk9WvYEZ-ofmuB4RhxZIiTLEDvz8/view?usp=sharing")
        - 首圖
        - 價錢
        - 收藏愛心
        - 加購物車
- 第三層: 商品介紹
    - 營養成分 / 價錢 / 容量 / 介紹詞 / 加購物車/ 數量選擇 / 細節照

-----------------------------------------
## <span style="color:orange">外送平台</span>
-----------------------------------------
- 直接跳到產品頁面
    - 分類選項表 名稱再討論
 - 健康餐盒店家名稱
     -   價格
     -   評分
 - 篩選功能
     -   價格高低
     -   評分高低
      [ubereat介面參考](https://www.ubereats.com/tw/search?pl=JTdCJTIyYWRkcmVzcyUyMiUzQSUyMiVFNiU5RCVCMSVFNiVCOSU5NiVFOCVCNyVBRjExOSVFNSVCNyVCNyUyMiUyQyUyMnJlZmVyZW5jZSUyMiUzQSUyMkVqeE1ZVzVsSURFeE9Td2dSRzl1WjJoMUlGSmtMQ0JPWldsb2RTQkVhWE4wY21samRDd2dWR0ZwY0dWcElFTnBkSGtzSUZSaGFYZGhiaUF4TVRRaUxpb3NDaFFLRWdtREJhNmN1cXhDTkJFM0dyV2lzc1BKX3hJVUNoSUpiWnQ2em95c1FqUVJZeXhBdlNseGZUYyUyMiUyQyUyMnJlZmVyZW5jZVR5cGUlMjIlM0ElMjJnb29nbGVfcGxhY2VzJTIyJTJDJTIybGF0aXR1ZGUlMjIlM0EyNS4wNjkxMjgzJTJDJTIybG9uZ2l0dWRlJTIyJTNBMTIxLjYxNjcyNjMlN0Q%3D&q=%E5%81%A5%E5%BA%B7%E9%A4%90%E7%9B%92)
        
-----------------------------------------
## <span style="color:orange">好食專欄</span>
-------------------------------------------
![](https://i.imgur.com/nhwvH9u.png)
#### 1. 進到專欄後，會出現文章分類選項 
* 聰明飲食
    * 增肌/減脂
    * 健康飲食
    * 提升免疫力
* 食物謠言
    * 細部分類發想中...
* 美味食譜
    * 免開火料理
    * 輕食甜點
    * 快速上桌
#### 2. 進入任一篇文章，除了內文，還包含以下功能
[文章呈現方式參考](https://www.foodnext.net/issue/paper/5111592118)
* 文章提及的商品列表 ->進入後，可到商品詳細頁面
    * 若是介紹餐廳，會出現立即訂購按鈕，連到外送頁面
    [點此訂購（詳情以商品頁為主）](https://blog.pinkoi.com/tw/food-travel/2107-yummy-cinnamon-roll/)
    * 若是介紹食譜，會出現「相關商品」列表，連結到商城
    [相關商品](https://blog.pinkoi.com/tw/lifestyle/2107-diy-umeshu/)
* 簡易互動列 -> like文章、收藏文章、文章瀏覽次數
* 文章問答題
* 文章留言區
* 該文章分類的其他文章

#### 3. 欲使用互動功能，導引登入/註冊
#### 4. 完成登入，跳回原文章頁面
--------------------------------------
## <span style="color:orange">輪盤 + 會員專區</span>
---------------------------------------
- 註冊
    - 會員資料設定
        - 帳號
        - 密碼
        - 姓名
        - 手機
        - e-mail
        - 使用FB/LINE註冊（待定）
- 登入
    - 個人資訊
        - 姓名
        - 手機
        - e-mail
    - 歷史訂單
        - 訂單號碼
        - 訂單日期
        - 訂單金額
        - 訂單狀態
    - 會員點數
        - 點數紀錄
            - 日期
            - 點數（ex.每日登入點數.專欄Q&A正解點數.首購折價券）
            - 更動原因（ex.退貨）
            - 到期日
            - 現有總點數
    - 商品追蹤清單
    - 文章收藏清單
- 忘記密碼
    - 輸入e-mail
- 幫助
    - 常見問題
        - 購物流程說明
        - 退換貨政策
        - 條款與細則
    - 聯繫客服


-----------------------------------------
## <span style="color:orange">購物車</span>
-----------------------------------
### <span style="color:orange">購物車結帳</span>
- 限制會員使用商城購買與結帳
- 使用者未登入前可使用購物車，僅結帳時需登入
- 購物車頁面
    - 顯示麵包屑
    - 購物結帳流程
    - 使用者目前位置
    - ![](https://i.imgur.com/mbzOUX5.png)


### <span style="color:orange">待與老師確認項目</span>
- 是否可加入購物車後結帳 or 直接填寫訂單資料 = 會員資料
    - 參考網站
        - [盛和風食集](https://www.foodsandsation.com.tw/users/sign_in)
        - [台灣藍鵲茶 - 購物車](https://www.bluemagpietea.com/cart/)
- 是否可增加 FB 或 Google 登入功能
    - 需確認技術困難度與必要性
    - ![](https://i.imgur.com/JtpECoN.png)

-----------------------------------------

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