---
# System prepended metadata

title: ⚡️ 5/28 （五）每日任務 Day 15
tags: [UI 直播班 - 2021 春季班]

---

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

# ⚡️ 5/28 （五）每日任務 Day 15

## 本日題目： empty state

```
空白狀態指的是在「沒有資料」、「空列表」
或「錯誤」所呈現的一個畫面
空白狀態會透過一些圖示或文字告訴使用者怎麼回事
最後引導使用者操作相關的功能
引導使用者添加內容，增強使用者對於網頁的黏著度
今天請試著製作一個 empty state
```

- **設計一個 empty state，主題自訂**
- 可以是信箱草稿空狀態、商品收藏空狀態...等，請各位自由發揮
- 須包含**引導按鈕**，引導使用者去做進一步動作
- **任務模板**
  - 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/6844911-Empty-state-01)

[範例 2](https://dribbble.com/shots/5753726-Empty-State-Illustration)

[範例 3](https://dribbble.com/shots/5182843-empty-states-design)

## 任務回報流程

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

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

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