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

# ⚡️ 6/2 （三）每日任務 Day 18

## 本日題目：Contact Us

電商網站通常會放上店家資訊
除了地址外，有些也會置入地圖
或著一些訂房網站也常會需要置入圖片讓使用者更加清楚所在位置
今天請試著在設計稿中置入「可滑動」的地圖圖片

- 主題自訂，使用 Horizontal & Vertical Scroll 功能置入可滑動的地圖（做法與課程中有說到的拖曳圖片相同）
- 須包含兩區塊：1. 地圖 2. 店家資訊（店名、地址、營業時間）
- **任務模板**
- 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/11487197-Office-Locations)

[範例 2](https://dribbble.com/shots/7150621--Real-Estate)

[範例 3](https://dribbble.com/shots/5409387-Viabill-Contact-Us)

#### 可以使用 Adobe XD 的 Plugin:Fancy Maps 或直接載入地圖圖片

## 任務回報流程

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

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

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