---
tags: Vue 直播班 - 2022 冬季班
---

# 第七週

課程範例版型：

- [https://hexschool.github.io/js-training-layout-1/](https://hexschool.github.io/js-training-layout-1/)
- [https://hexschool.github.io/js-training-layout-2/](https://hexschool.github.io/js-training-layout-2/)

### 本週提醒

- <a href="https://rpg.hexschool.com/training/33/task?type=detail&id=328" target="_top">第七週主線任務：後台開發</a>
- 心得牆開放
- [心得牆素材圖](https://hackmd.io/MbLP-CigS72ovX_ATNgzrw?view)
- 線上助教服務

### 上一週的團隊作業討論：

https://bejewled-air-4cb.notion.site/2f9d3306ae124bc19b54e8f4003b2c61

## 本日重點：

1. 最終作業 / 專題 流程說明
2. 設計概念分享
3. 選擇了專題，頁面製作哪些要注意呢？
1. 如果對於自己的設計作品不知道如何執行，可以在稍晚附上自己的連結

### 最終作業 / 專題 流程說明

**基本使用者故事：**

用戶：

- 用戶可以進入首頁，了解該產品的特色
- 用戶可以查看產品列表
- 用戶可以透過分類過濾產品
- 用戶可以搜尋產品
- 用戶可以在產品列表加入購物車
- 可以查看更詳細的內容
- 用戶可以進入商品細節頁面
- 可以得知商品的細節描述
- 可以選擇不同數量，並加入購物車
- 可以加入收藏
- 可以查看相似的品項
- 用戶可以加入購物車
- 購物車的商品，可以在任何頁面得知數量
- 重複加入相同的商品，購物車的同商品數量會增加 1
- 用戶可以重新調整購物車商品數量
- 用戶可以將購物車的商品品項移除
- 用戶可以透過優惠券折扣商品
- 用戶可以結帳
- 用戶可以將加入購物車的商品結帳
- 結帳表單會提供最基本的驗證
- 結帳完成，用戶可以查看付款相關資訊

管理者（最終作業不檢視）：

- 管理者可以登入後台
- 管理者可以新增、編輯、刪除商品
- 管理者可以新增優惠券
- 管理者可以設定優惠券到期時間
- 管理者可以管理訂單
- 管理者無法新增訂單
- 管理者可以調整訂單的狀態

**需要製作的頁面**

- 前台
- 基本頁面：
- 首頁（不含 Navbar 至少包含五個 section）
- 產品列表
- 單一產品細節頁面
- 購物車
- 表單填寫
- 付款完成
- 可延伸功能或畫面：
- 關於/品牌/產品介紹…：[https://hoongyuu.github.io/Cheeto-s-Wine/#/intro](https://hoongyuu.github.io/Cheeto-s-Wine/#/intro)
- 部落格/文章：[https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist](https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist)
- 分類：[https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=城市導覽](https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=%E5%9F%8E%E5%B8%82%E5%B0%8E%E8%A6%BD)
- 延伸產品：[https://char849.github.io/vue3-week8a-main/#/course](https://char849.github.io/vue3-week8a-main/#/course)
- 搜尋：[https://kevinhes.github.io/finalworkvue2022/#/](https://kevinhes.github.io/finalworkvue2022/#/)
- 優惠券發放活動：[https://nighthree.github.io/ChocolateShop/#/coupon](https://nighthree.github.io/ChocolateShop/#/coupon)
- 我的最愛：[https://jordan-ttc-design.github.io/fine-job/#/](https://jordan-ttc-design.github.io/fine-job/#/)
- 一堆動態效果：[https://huan5678.github.io/chill-bar/#/](https://huan5678.github.io/chill-bar/#/)
- 後台（第七週作業，第八週不審核、也不會檢視畫面）

**需要達到的條件：**

1. 視為一個正式運行的網站
2. 不能有假字、假圖
3. 所有連結均需要能夠正確運作
4. 符合基本的使用者體驗

### 設計概念分享

https://www.figma.com/proto/0oZaYFoT6iyclwj1heDrWt/202302---Vue-%E7%9B%B4%E6%92%AD%E7%8F%AD-%E8%A8%AD%E8%A8%88%E6%95%99%E6%9D%90?page-id=0%3A1&node-id=1%3A4&viewport=936%2C249%2C0.75&scaling=scale-down

### 選擇了專題，頁面製作哪些需要注意呢？

- 選擇專題：
- [https://www.notion.so/2022-Vue-a76bdf53e72b4a789c21ffbc67819dee](https://www.notion.so/a76bdf53e72b4a789c21ffbc67819dee)
- 對於執行上有問題的，歡迎貼上你的設計圖連結
- 沒有選擇專題
- 有設計背景
- 沒有設計背景
- 穩定為主（單色）
- 整齊
- 盡可能符合使用者體驗

### 其他參考資源

1. 資訊傳達 → 引導用戶看到他想看的東西
- 每個網站都有一個最重要的目標，參考案例：
1. [https://aws.amazon.com/tw/](https://aws.amazon.com/tw/)
2. [https://evernote.com/intl/zh-tw](https://evernote.com/intl/zh-tw)
3. [https://www.shopify.com/tw](https://www.shopify.com/tw)
2. 美觀 → 讓用戶符合期待
- 你的網站想要呈現如何的風格？
1. 很貴：[https://tw.louisvuitton.com/zht-tw/homepage](https://tw.louisvuitton.com/zht-tw/homepage)
2. 搶便宜：[https://i3fresh.tw/](https://i3fresh.tw/)
3. 新創、自然：[https://www.greenvines.com.tw/](https://www.greenvines.com.tw/)
- 在符合資訊傳達概念下，如何有更美觀的樣式
1. 色彩單純、文字運用、格線系統
2. 最重要的是排整齊…
3. 使用者體驗 → 讓用戶可以順利達到他的目標
- 關於使用者體驗的表單設計
1. [https://github.com/Wcc723/Google-UX-Playbook-for-Retail-translate/blob/master/zh-tw/section_8.md](https://github.com/Wcc723/Google-UX-Playbook-for-Retail-translate/blob/master/zh-tw/section_8.md)
- Google Accessibility 說明文件
1. [https://web.dev/learn/accessibility/](https://web.dev/learn/accessibility/)
2. 案例 - 顏色對比度：[https://web.dev/learn/accessibility/color-contrast/](https://web.dev/learn/accessibility/color-contrast/)

## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/33/task?type=detail&id=328" target="_top">第七週主線任務：後台開發</a>
- 團隊任務：
- https://rpg.hexschool.com/training/33/show?embedhm=R4PDTijLSYqrnN24-InDqA