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

# W4-直播講義

## 一、Prototype 原型設計

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

</br>

### 類型

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

</br>

### 基本原型操作

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

- Hotspot 互動區域
- Trigger 互動觸發器
- Interaction 互動回饋
- Animation 動畫效果

> 在某個區域做了某件事觸發了一個怎麼樣的動畫回饋

</br>

### 常用形式

#### Trigger

- On click
- While hovering
- After delay
- On drag

#### Interaction

* Change to
* Navigation to
* Open overlay
* Scroll to

#### Animation
* Smart animate
* Dissolve
* instant

</br>

### 設定技巧

- 操作結構：動畫的方向要合理
- 狀態細節：增加操作狀態，如讀取
- 動畫長度：不超過 0.4s（多爾蒂門檻）

</br>

---

</br>

## 二、當週作業

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

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

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

#### 需要繳交：

- 設計檔連結
- 請在繳交前將檔案名稱改成：週數-繳交等級-Discord 暱稱（e.g. W1-LV2-王小明）
- 繳交時請附註試煉等級與 Discord 暱稱
- 螢幕錄影檔（建議繳交）

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

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

#### 原型動畫列表：

- 按鈕的 Hover State
- fix position when scrolling → 選單列、懸浮按鈕
- Scroll to → 選單錨點、回頂端
- Open Overlay → 互動視窗 Modal
- Interactive Components → 左右切換的輪播、常見問題 Accordions 的收折

#### 試煉等級：

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

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

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

</br>

---

</br>

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

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

#### 需要繳交：

- 設計檔連結
- 請在繳交前將檔案名稱改成：Final-Mockup-Discord 暱稱
- 繳交時請附註試煉等級與 Discord 暱稱

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

- 建議的響應式尺寸：桌面版（1920×1080），手機版（414×896）
- 根據 AIDA 去規劃區塊，可以在設計稿旁標註細節
- 滿版的區塊盡量不要重複使用（頂多與 Footer 合併）
- 注意每個區塊之間的間距（盡量統一數值）
- 可以將 Mockup 跟 Prototype 分不同 Pages 製作
- 為自己的作品加上一個 Thumbnail 封面

#### 試煉等級：

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

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

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

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