---
# System prepended metadata

title: W4-直播講義
tags: [UI 直播班 - 2021 春季班]

---

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

# W4-直播講義

## 一、Prototype 原型設計

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

### 類型

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

### 基本原型操作

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

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

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

#### Trigger

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

![](https://i.imgur.com/pScQthQ.png)

#### Action

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

![](https://i.imgur.com/vBj4dID.png)


### 設定技巧

- 操作結構
- 狀態回饋
- 持續時間
    - 保持 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