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

# 11/22（一）每日任務 Day 1

## 本日題目：Button

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

### 🌟 通關條件：

- **設計三種不同造型的按鈕**
- **可自由選擇是否設計動畫效果**
- **任務模板**
- 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/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 連結貼至 Discord 頻道```每日任務回報區```的**當日題目討論串**
3. 助教審核後會留下 Emoji 💯 並將不錯的檔案整理至 [UI 直播班每日任務作品牆](https://hackmd.io/@hexschool/rJKtGFQuY)

---

### 🌟 自我檢核

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

- 參考[助教低標範例](https://www.figma.com/file/eJIr6IC112554VCEt6zDtK/Daily-UI-Day-1-Button?node-id=0%3A1)
- 沒有設計三種按鈕
- 顏色對比度不足導致文字不易辨識