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

# ⚡️ 5/31 （一）每日任務 Day 16

## 本日題目：Scroll to

Scroll to 常使用於單一頁面中的快速區塊切換
有時會與導覽列配合使用
有時會是在滿版 Header 中置入一個箭頭，示意使用者點擊並滾動至下方內容區塊
今天請試著使用 Prototype 中的 Scroll to 
來設計從「點選內容／按鈕」->「快速滾動至指定區塊」的畫面

- 主題：自訂
- 可自選要使用導覽列或按鈕去設定 Scroll to
- **若選擇導覽列內容，請依照以下項目製作：最新商品、本月熱門、聯絡我們，且任選一個導覽列內容去執行 Scroll to 動作即可**
- 今日題目較複雜，有任何疑問歡迎詢問助教 Joanne
- **任務模板**
- 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/3285390-Fresh-Juice-homepage-animation)
此範例畫面類似 Header 點擊按鈕並滾動至下方內容區塊

[範例 2](https://dribbble.com/shots/15039384-X-RAY-CONSULTING-WEB-UI-DESIGN-HOMEPAGE)

## 任務回報流程

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

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

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