---
lang: zh-tw
---
跟著板塊設計，掌握動態特效網站的優勢
===
###### tags: `線上課程`

## Chapter1 前言
### 動態特效網站 與 動態網站 的區別

## Chapter2 動態特效網站製作前提｜釐清三大限制，判斷適不適合做動態特效網站
apple網站可以是訓練突破口
### 1.網站目的
根據不同網站目的 調整動態特效比例

#### 視覺形網站
透過厲害的視覺效果，傳遞核心精神，讓人留下深刻的印象。
著重於「塑造品牌形象」，而非傳遞複雜資訊。
適合讓動態特效作為主角，抓住使用者的目光。
通常以**動態特效作為主角**
動態設計佔 80~90%

#### 資訊型網站
參考網站:ZENPACK
注重資訊傳遞的效率，讓使用者有更好的閱讀體驗。
動態特效以「強化重點、幫助閱讀」為主。
避免過度搶眼，分散使用者注意力。
通常以**傳遞資訊為主，動態特效為輔**
動態設計佔 10~20%

#### 功能型網站
為了讓使用者更容易產生特定行動，
注重動線安排及使用的流暢度。
將動態特效用於「提升使用流暢度」，
幫助使用者更直覺、更快速的完成他想要執行的動作。
通常以**動態特效引導使用者完成特定動作**
動態設計佔 <5%

### 2.軟硬體設備
#### 主機規格
動態比例越高 主機規格就要越高
影響因素包括以下
#### 瀏覽器支援度
製作前要先了解**各個瀏覽器的支援狀況**
##### 檢查工具

### 3.預算資源
#### 動態特效製作成本，控制在**客戶預算的2~3成左右**
#### 製作難度更高的動態特效，**則須額外收費**

## Chapter3 如何發想動態特效｜開展動態特效網站企劃，從五大面向發想關鍵字雛形
### 動態回推設計
參考網站:POW!Entertainment
動態網站視覺效果最優先
#### 1.發想關鍵字
發想關鍵字 **要從品牌核心出發**
##### 品牌背景
第一步，從品牌背景發想，像是主要的產品，或是品牌理念等。
##### 視覺印象
第二步，從視覺印象著手，整理出看到這個品牌時，有哪些印象或感受。
品牌擬人化
##### 素材觀察
第三步，從素材發想，檢視品牌給的文字、圖片或品牌識別等檔案，
紀錄觀察到的特色。
##### 概念延伸
賦予網站概念，思考自己想要給這個網站什麼樣的故事或氛圍。
##### 動態聯想
第五步，發想動態關鍵字，也就是想像前面的關鍵字，可能會有怎樣的動作。

#### 2.找Ref
##### 視覺元素
Pinterest Behance
##### 動態特效
最容易卡關的地方，是不知道要「到哪裡」找參考，
以及不知道「該怎麼找到符合關鍵字」的動態特效。
想要找到動態特效參考，就要**先了解特效的專屬名稱**

#### 3.進行配置

#### 4.調整細節

## Chapter4 創意發想方法｜擴展關鍵字，找到獨一無二的創意
### 關鍵字場景化
#### 場景化
步驟一，賦予「關鍵字」場景，
讓詞彙從一個點，擴展到一個面。
#### 場景動態化
步驟二，「場景動態化」，
想像這個場景的人、事、物，會有哪些動作。

### 關鍵字抽象化
把原本的關鍵字，簡化為抽象元素，並賦予動態。
#### 分解重構
把原本的關鍵字，簡化為抽象元素，並賦予動態。
#### 特徵聯想
強化某個特徵，讓人可以一眼聯想到他的原貌。
#### 局部呈現
凸顯出局部樣貌，傳遞圖片氛圍（常用於照片處理）。

## Chapter5 配置動態特效(一)｜設計前先懂佈局，用主要動態引人入勝
### 主要動態
參考網站:雨林新零售 Rain Forest Retail
參考網站:Memories - The Real Stan Lee
參考網站:KEBUKE可不可
主要動態 = 代表動態

## Chapter6 配置動態特效(二)｜提升完整度，用共通動態定調整體風格
### 必備共通動態
比較不複雜，持續時間短
##### 1. 進場動態
定義：畫面上所有物件進場的時候，所採用的動態特效。

##### 步驟一，選定「使用特效」
常見有淡入、位移、色塊遮擋、放大縮小等
##### 步驟二，調整進場「完成時間」
兩秒內完成進場動態
##### 步驟三，設定不同物件的「進場時機」
創造時間差

##### 2. 回饋動態
定義：使用者跟網站互動時，出現的回饋效果。
標題 連結 按鈕 資訊區塊
滑鼠指到物件時，使用位移、底線 / 底色、變色、改變透明度等。
得到更多資訊

##### 3. 滾動動態
定義：往下捲動網頁時，物件隨著頁面滾動出現的動態效果。
適合用在**資訊量較大的網站**
在資訊標題、內文段落、圖片區塊等，加入底色變化、淡入、文字位移、色塊刷過等。

##### 4. 游標動態
定義：滑鼠游標移動時出現的動態特效。
游標指到可操作物件時，出現放大、縮小、改變顏色 / 透明度 / 幾何形狀等。

### 次要共通動態
##### 1. 轉場動態
定義：頁面加載完成前，出現的過場效果。
##### 2. 點擊動態
定義：點擊滑鼠後，觸發的動態效果。
能大幅增加網站記憶點
##### 3. 離場動態
定義：使用者要離開「當前頁面」時，出現的過場特效。
使用與進場動態相同的特效
**不要超過1秒**

## Chapter7
##### 進場動態
##### 進場動態
### 個別動態

## Chapter8

## Chapter9

## Chapter10

## Chapter11

## Chapter12