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

# 11/26（五）每日任務 Day 5

## 本日題目：Dropdown

有時網頁的頁面資訊較為繁雜
需要同時呈現多種資訊的時候我們可以使用 Dropdown 下拉式選單
簡化頁面資訊的同時
也多了更多可以設計的空間

- **請將下方內容設計成 Dropdown 下拉式選單**
- **需含有會員照片一張（使用假圖即可）**
- **有一欄需做成 hover 樣式**
- **任務模板**
- 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/14323576-Figma-React-Ui-kit-Dropdown-component-Outline-style)

[範例 2](https://dribbble.com/shots/9516333-Daily-UI-27-Dropdown)

[範例 3](https://dribbble.com/shots/11976554-himalayas-app-account-dropdown-concept)

#### 資源分享：
[Material Design Icon](https://fonts.google.com/icons?selected=Material+Icons)
[Unsplash 免費可商用圖庫](https://unsplash.com/)

## 任務回報流程

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

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

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

### 🌟 自我檢核

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

- 參考[助教低標範例](https://www.figma.com/file/1kQoHGJ031ozbMsJ8qo2El/Daily-UI-Day-5-Dropdowns?node-id=0%3A1)
- 不符合任務內容資料需求
- 沒有做 hover 樣式
- 色彩不利閱讀
- 對齊沒有邏輯