---
# System prepended metadata

title: 跟著板塊設計，掌握動態特效網站的優勢

---

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

## Chapter1 前言
### 動態特效網站 與 動態網站 的區別
![](https://hackmd.io/_uploads/ByeWTPSWT.png)
![](https://hackmd.io/_uploads/Hkc7aPrZa.png)

## Chapter2 動態特效網站製作前提｜釐清三大限制，判斷適不適合做動態特效網站
![](https://hackmd.io/_uploads/r1VWCDrZ6.png)
apple網站可以是訓練突破口
### 1.網站目的
根據不同網站目的 調整動態特效比例
![](https://hackmd.io/_uploads/Hy7dzdBb6.png)

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

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

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

### 2.軟硬體設備
#### 主機規格
動態比例越高 主機規格就要越高
影響因素包括以下
![](https://hackmd.io/_uploads/ry_01OSZT.png)
#### 瀏覽器支援度
![](https://hackmd.io/_uploads/H15ZldrWp.png)
製作前要先了解**各個瀏覽器的支援狀況**
##### 檢查工具
![](https://hackmd.io/_uploads/SJMXWdHb6.png)

### 3.預算資源
![](https://hackmd.io/_uploads/SJlu-uHba.png)
#### 動態特效製作成本，控制在**客戶預算的2~3成左右**
![](https://hackmd.io/_uploads/rkb0bdS-p.png)
#### 製作難度更高的動態特效，**則須額外收費**
![](https://hackmd.io/_uploads/r1l7GdBZ6.png)

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

#### 2.找Ref
##### 視覺元素
Pinterest Behance
##### 動態特效
最容易卡關的地方，是不知道要「到哪裡」找參考，
以及不知道「該怎麼找到符合關鍵字」的動態特效。
![](https://hackmd.io/_uploads/Bk1RV_H-T.png)
想要找到動態特效參考，就要**先了解特效的專屬名稱**
![](https://hackmd.io/_uploads/r1PYUdSbT.png)
![](https://hackmd.io/_uploads/SyN9LdB-a.png)
![](https://hackmd.io/_uploads/HJU0UurZa.png)

#### 3.進行配置

#### 4.調整細節


## Chapter4 創意發想方法｜擴展關鍵字，找到獨一無二的創意
![](https://hackmd.io/_uploads/BJCoDdBZp.png)
### 關鍵字場景化 
![](https://hackmd.io/_uploads/Bk64u_BZp.png)
![](https://hackmd.io/_uploads/SkVwdOr-T.png)
#### 場景化
步驟一，賦予「關鍵字」場景，
讓詞彙從一個點，擴展到一個面。
#### 場景動態化
步驟二，「場景動態化」，
想像這個場景的人、事、物，會有哪些動作。

### 關鍵字抽象化
把原本的關鍵字，簡化為抽象元素，並賦予動態。
![](https://hackmd.io/_uploads/BkModuHZT.png)
![](https://hackmd.io/_uploads/H1D3O_SZT.png)
![](https://hackmd.io/_uploads/HJ6au_SWp.png)
![](https://hackmd.io/_uploads/SJEkF_S-p.png)
#### 分解重構
把原本的關鍵字，簡化為抽象元素，並賦予動態。
#### 特徵聯想
強化某個特徵，讓人可以一眼聯想到他的原貌。
#### 局部呈現
凸顯出局部樣貌，傳遞圖片氛圍（常用於照片處理）。

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

## Chapter6 配置動態特效(二)｜提升完整度，用共通動態定調整體風格
### 必備共通動態
![](https://hackmd.io/_uploads/By-ukFrba.png)
比較不複雜，持續時間短
##### 1. 進場動態
定義：畫面上所有物件進場的時候，所採用的動態特效。
![](https://hackmd.io/_uploads/BJMoxtHb6.png)

##### 步驟一，選定「使用特效」
![](https://hackmd.io/_uploads/HJji9qH-6.png)
常見有淡入、位移、色塊遮擋、放大縮小等
##### 步驟二，調整進場「完成時間」
兩秒內完成進場動態
##### 步驟三，設定不同物件的「進場時機」
創造時間差

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

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

##### 4. 游標動態
定義：滑鼠游標移動時出現的動態特效。
![](https://hackmd.io/_uploads/SkfchcS-6.png)
游標指到可操作物件時，出現放大、縮小、改變顏色 / 透明度 / 幾何形狀等。

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


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

## Chapter8

## Chapter9

## Chapter10

## Chapter11

## Chapter12
