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

# ⚡️ 5/12 （三）每日任務 Day 3

## 本日題目：Dropdown

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

- **請將下方內容設計成 Dropdown 下拉式選單**
- **需含有會員照片一張（使用假圖即可）**
- **任務模板**
- 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/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/)
Adobe XD Plugins 推薦 [UI Faces](https://www.adobe.com/tw/products/xd/features/plugins.html)

## 任務回報流程

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

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

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