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

# W4-直播講義

## 一、Prototype 原型設計

> 原型設計是對產品會如何運作的模擬，能在產品正式發布前檢驗操作流程與使用者的回饋，並藉此測試設計的可用性與可行性，以持續進行迭代。

### 類型

- 低擬真原型（Lo-Fi Prototype）
- 高擬真原型（Hi-Fi Prototype）

### 基本原型操作

#### 互動原型的基本要素

- Hotspot 互動區域
- Trigger 互動觸發器
- Action 互動回饋

> 在某個區域做了某件事觸發了一個動作回饋

#### Trigger

- Tap
- Drag
- Time
- Keys & GamePad
- Voice


#### Action

- Type
- Transition
- Auto-Animate
- Overlay
- Previous Artboard
- Audio Playback
- Speech Playback
- Destination
- Animation
- Easing
- Duration


### 設定技巧

- 操作結構
- 狀態回饋
- 持續時間
- 保持 400 毫秒內
- 退出動畫稍短於進入動畫

### 匯出模式

- 線上標注檔
- 螢幕錄影

</br>

---

</br>

## 二、當週作業

### 作業 1 - Prototype 練習（非必做，但建議完成）

除了漂浮，小怪獸還獲得了縮放物品的魔法。大廳微微晃動，天花板上有扇門霎時開啟，
門後有扇更小的門，最終試煉的紙條不知何時出現在自己手中：運用目前得到的魔法穿越
愈來愈小的門，即可抵達設計的殿堂……

> 請將範例的網頁加上原型互動動畫

#### 需要繳交：

- 設計原始檔（檔名：Final-Mockup-Slack名字）
- 附上最終作業主題的線上文件
- Development 線上連結（檔名：Final-Share-Slack名字）
- （建議繳交）Prototype 的螢幕錄影 （檔名：Final-Record-Slack名字）
- 使用[作業上傳工具](https://homework-tools.web.app/ui-training.html)產生連結來繳交

#### 繪製前的小提醒：

- 設定原型動畫時，可以多去試試看調整參數或選項會有什麼差異
- 可以使用 Material 畫布上提供的素材（視情況需要新增畫布或內容）

#### 原型動畫列表：

- 按鈕的 Hover State
- fix position when scrolling → 懸浮按鈕
- Scroll to → 回頂端、選單錨點
- Overlay → 互動視窗 Modal
- Auto-Animate → 左右切換的輪播

#### 試煉等級：

> 當週作業盡量每週繳交，沒有做到預設的等級也沒關係，盡量準時繳交才能即時檢視自己的學習成效喔

- **Level 1（給初學者）**
- 加上 2 個原型動畫

- **Level 2（建議繳交）**
- 加上 4 個原型動畫

</br>

---

</br>

### 作業 2 - 最終作業 Mockup（精稿）

> 請將最終作業的 Wireframe 調整為精稿

#### 需要繳交：

- 設計原始檔
- 附上最終作業主題的線上文件
- 線上連結（Development）
- Prototype 的螢幕錄影 （建議繳交）
- 請在上傳前將檔案名稱成：Final-Mockup-Slack名字
- 使用[作業上傳工具](https://homework-tools.web.app/ui-training.html)產生連結來繳交

#### 繪製前的小提醒：

- 接續著前面的最終作業 Wireframe 來調整成精稿（包含 RWD 響應式設計）
- 色彩套用在文字上或與文字疊合時要注意辨識度（可以將 WCAG 的對比度作為參考）
- 建議在旁邊額外複製一份設計稿來套用 Protoype（做在同一個檔案）
- 需要製作至少三個區塊的 Prototype
- 建議有個 Logo 看起來會更完整（最簡單的方式是直接套一個有特色的字型）

#### 試煉等級：

> 最終作業每週繳交可以減輕最後的壓力，也可以有更多的討論機會喔

- **Level 1（給初學者）**
- 完成桌面與手機版的精稿（包含 Prototype）

- **Level 2（建議繳交）**
- 完成桌面與手機版的精稿（包含 Prototype）
- 整理 UI Kit（標準色、字型、icon、按鈕等重複元件）

- **Level 3（你是怪物ㄅ）**
- Level 2 所有條件
- 調整成精稿時盡量增加更多細節（e.g. 按鈕樣式、裝飾、版型呈現）

</br>

---

</br>

## 四、每日任務

### Daily UI

> 每天完成一個 Daily UI 題目，一週五個

Daily UI 講求的是持續，每天完成一個題目，且沒有正確答案。
想要嘗試有創意的樣式、或是做出目前能力所及最好的程度都是很好的方向。

</br>

#### 任務回報流程：

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

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

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

Slack 的每日任務回報區與任務細節會在當天才會發布，請將對應的題目回覆在當天的回報區 Thread 裡

</br>

#### 任務模板
- 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)

</br>

#### 本週題目(5/31-6/4)：

- Scroll to
- overlay（modal）
- Contact Us（置入地圖）
- Image Slider
- FAQ