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

# ⚡️ 5/10 （一）每日任務 Day 1

## 本日題目：Button

按鈕在網頁中的應用範圍非常廣泛
除了表單的送出、轉換頁面
還可以設計一些效果，如：Hover
再進一步可以有更多不同的動畫增加使用者體驗
透過設計師的巧思，讓一個簡單的按鈕變得更不簡單
今天試著設計三種不同造型的按鈕看看吧！

- **設計三種不同的按鈕**
- **可自由選擇是否設計動畫效果**
- **任務模板**
- 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/13969160-Daily-UI-083-Button-s)

[範例 2](https://dribbble.com/shots/5290347-Button-Hover)

[範例 3](https://dribbble.com/shots/4043432-Button-hover-and-click-prd)

#### 也可以加上合適的 Icon 豐富你的設計：
[Material Icons](https://fonts.google.com/icons?selected=Material+Icons)

## 任務回報流程

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

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

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