---
tags: UI 直播班 - 2021 春季班
---

# ⚡️ 5/27 （四）每日任務 Day 14

## 本日題目：Shopping Cart

購物車的設計非常重要
通常我們會加入調整數量的功能
含有品項名稱、圖片、價格、單價、總價
有的還會有優惠代碼輸入格以及優惠價格
流程的順暢與否都會直接影響到使用者的購買意願
今天我們來設計一個購物車頁面
可自由選擇設計成 Full Page 或是 Modal 形式

- **設計一個 Shopping Cart，商品主題自訂**

- 需含有以下資訊
- 品項名稱、圖片、價格、數量、單價、總價
- 通往結帳頁面的按鈕（e.g.結帳去、下一步）、移除商品的按鈕
- 購物車內至少要有兩個以上的商品

- 圖片可以自由於[Unsplash](https://unsplash.com/)選擇，或從此[圖片集](https://unsplash.com/collections/11580214/d'perfume)選取使用

- **任務模板**
- dribbble 上傳的作品尺寸有固定尺寸，建議可以先下載[任務模板](https://firebasestorage.googleapis.com/v0/b/homework-tools.appspot.com/o/ui-training%2F20215%2F37WWX-Daily%20UI%20-%20dribbble%20template.xd?alt=media&token=e26755e4-5af0-4aa7-ad94-02354057c86a)

---

#### Dribbble 參考連結：

[範例 1](https://dribbble.com/shots/7170609-E-commerce-scooter-customizing-concept-Cart-Page-1)

[範例 2](https://dribbble.com/shots/6819854-Shopping-Cart)

[範例 3](https://dribbble.com/shots/9681711-Shopping-Cart-UX)

## 任務回報流程

請同學依照下方步驟回報任務:

> **初次回報請先至 [Dribbble](https://dribbble.com/) 註冊會員**

1. 將完成的作業整理並上傳至 Dribbble
2. 將 Dribbble 連結貼至 Slack 的每日任務回報區
3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/VyvpcJzzQy6yz8bRucvqLg?view)