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

# 11/23（二）每日任務 Day 2

## 本日題目：Card

Card 時常被運用在有圖片或文字的產品內容上
dribbble 的頁面也屬於一種卡片式設計哦

Card 通常具有以下四個特點：
1. 與撲克牌相似的外型
2. 彈性的版面
3. 群組相關資訊
4. 詳細資訊頁面的進入點（e.g.進入產品詳情頁的按鈕、點選整張卡片）

卡片中內容與內容的間距是群組化的重要關鍵
過近與過遠的距離都會導致視覺上的不同
今天來試著設計看看一個符合情境的 Card 吧！

### 🌟 通關條件：

- **請依照下方情境設計一個 Card**
- **主題：咖啡廳網頁**
- 請製作一個三欄式卡片（如下圖）
- 每一個卡片需含有：圖片、品項名稱、品項介紹、售價、產品詳情頁轉換按鈕（或設計為點擊整張卡片即可進入產品詳情頁）
- 圖片請從此[圖片集](https://unsplash.com/collections/9605043/caf'e-ui-design)中選用，請選用色系或排版相近的圖片
- **任務模板**
- dribbble 上傳的作品尺寸有固定尺寸，建議可以先下載[任務模板](https://firebasestorage.googleapis.com/v0/b/homework-tools.appspot.com/o/ui-training%2F202111%2FhscyE-Dribbble%20template.fig?alt=media&token=dfe1fe17-391f-4e2a-9bee-8541ae9716b4)

---

#### Dribbble 參考連結：

[範例 1](https://dribbble.com/shots/8980779-Tool-Cards-UI-Design)

[範例 2](https://dribbble.com/shots/8558843-Product-card)

[範例 3](https://dribbble.com/shots/9202060-Blog-Cards-UI-Design)

## 任務回報流程

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

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

1. 將完成的作業整理並上傳至 Dribbble
2. 將 Dribbble 連結貼至 Discord 頻道```每日任務回報區```的**當日題目討論串**
3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/@hexschool/rJKtGFQuY)

### 🌟 自我檢核

若助教沒有留下 Emoji 代表你可能是一些地方做錯了或是沒達到低標
因每日任務助教不會提供批改
如果沒有通過的話可以參考下方檢核點自我審查哦

- 參考[助教低標範例](https://www.figma.com/file/a4OkpNO7jYfrTmMFbGAKen/Daily-UI-Day-2-Card?node-id=0%3A1)
- 缺少資訊（圖片、品項名稱、品項介紹、售價）
- 資訊或圖片沒有一致的對齊邏輯，一下齊左一下齊右