# 讓 CSS 動畫提升你的網站使用者體驗 - 李建杭 Amos

{%hackmd o8oUosN0QnqMSkF1_6kH7g %}

#### 📚 議程介紹

{%preview https://webconf.tw/agenda/41 %}

###### ▼▼▼ 開始筆記 ▼▼▼
## 關於Amos
* 設計轉職前端
* 熱愛CSS開發
* 厭惡智障使用者介面
* 金魚都能懂教學系列作者

## Agenda
- 網頁動畫常見的狀況
- 動畫與體驗注意事項
- 有哪些很棒的 CSS 動畫屬性
- 與 AI 協作
- 提升你的動畫敏感度，工程師跟設計都沒有動畫敏感度的話，會讓好的體驗消失

## 理想與現實的衝突

### 為何我們的「體驗魔術」總在實作中消失？

* **設計師的理想**

* 在 Figma 中，我們設計了絲滑、連續的體驗
* Tooltip 永遠緊貼目標，優雅地換位

* **工程師的現實**

* 交付後，常聽到的回覆是：

* 「這動畫太複雜，效能會拖垮」
* 「這需要巨大的 JS 函式庫，很麻煩」

* **結果**

* 最終，許多 UX 的細節魔鬼，就這樣被犧牲了

### 我們正在製造「認知斷裂」 違反大腦直覺的介面互動

#### 數位傳送（Digital Teleportation）

**定義**：

* 傳統網頁中，介面元素會瞬間移動至另一位置

**問題點**：

* 違反「物體恆存（Object Permanence）」的心理學原則
* 使用者無法直覺理解元素是同一個，需額外負荷來確認：「這兩個是同一個東西嗎？」

**結果**：

* 增加大腦認知負擔
* 干擾使用流程的連貫性與信任感

#### 關聯破裂（Broken Proximity）

**定義**：

* Tooltip 或選單與觸發元件被視覺上切斷

**問題點**：

* 違反「接近性法則」，打破格局與視覺結構
* 元素位置混亂，視覺關聯變得模糊

**結果**：

* 使用者無法建立穩定的界面預期
* 增加操作上的不確定與挫折感


### 快？慢？時間控制帶來質感
* 即時反應（Instantaneous）
* 平順過渡（Smooth Transition）
* 延遲／等待（Delay / Loading）
* 設計洞察：EASING

#### 適用情境
* 即時反應：選單、卡片
* 平順過度：頁面切換、Drawer、Modal
* 延遲等待：進度條、Loading


動畫不是做得多、做的炫就好，體驗感還是很重要
>[name=Amos]對官網評價：選單hover會被擋住，動畫過多焦點模糊

### 精心設計的舞台劇不會讓你感到混亂
Principle 1：舞台編排（Choreography） - 控制焦點
* 任何時刻只能有一個「主角」動畫，配角動畫必須是柔和、延遲的以創造背景感
Principle 2：感知分離（Perceptual Separation） - 隱藏複雜性
* 流暢的過渡本來就是對複雜性最好的掩蓋
* view transition 會讓換頁非常的順暢

### 從心理學到程式碼：你的動畫檢查清單
- 速度 Speed
- **心理學目標**：實現平順過渡
- **設計原則**：速度需恰當、優雅結束
- 方向 Direction
- **心理學目標**：建立空間合理感
- **設計原則**：進入與退出的方向需一致，避免使用者迷失
- 消失/顯示 Appearance
- **心理學目標**：有目的地引導注意力
- **設計原則**：動畫需清晰傳達出現或消失的過程
- 大小 Size
- **心理學目標**：傳遞層級與優先權
- **設計原則**：變大代表重要，變小代表內容內縮
- 延續性 Continuity
- **心理學目標**：維持空間恆定與連貫性
- **設計原則**：確保動畫過程中元素位置與狀態不跳動，維持視覺穩定

### CSS 不再只是「樣式」語言，它是「網站互動細節的邏輯語言」

* View Transitions API:連續性（Continuity）—解決換頁時的「瞬間傳送」問題，讓頁面流暢。
* Anchor Positioning:關聯性（Proximity） 一解決定位時的「跑版斷裂」問題，讓元素精準。
* Scroll Snap:終點（Closure）一解決滾動時的「不穩定終點」問題，讓滾動穩定。

Curing Digital Teleportation with View Transitions
(用 View Transitions 治癒數位瞬移)
Key Insight: 瀏覽器原生支援 DOM 狀態的「快照」轉場，將過去數百行 JS 的複雜動畫簡化。

### 使用 View Transitions 解決數位傳送問題

### View Transitions in Action：實現視覺連續性的程式碼作法

### Anchor Positioning

### Perfect Landings, Every Time with Scroll Snap

### From Compromise to Empowerment

### 未來工作流：AI 處理繁瑣，我們專注創意
AI處理動畫的數學與優化,人專注高層次創意與UX策略

### 鍛鍊你的動態直覺：從「看見」到「感受」的修煉

將你的生活直覺和物理知識應用到數位介面上

- 拆解分析
- 錄製優秀 APP 動畫，慢動作分析其時長(Duration)、曲線(Easing)與屬性(Property)，將視覺效果數據化。
- 實驗模仿
- 寫看看不同參數帶來的心理感受
- 如果聽完這場沒去感受，真的會沒感覺
- 很多時候是沒有標準答案的
- 第一性原理，思考最終想要創造什麼，再回推
- 情境內化
- 將介面動畫與現實世界的物理直覺連結

### 複雜而不雜亂：流暢過度是複雜性最好的掩護
- 核心原則一：舞台編排（Choreography） - 控制焦點
- 主角動畫：
- 使用者操作的直接反饋(如View Transition)，時間較長（例:300ms)
- 配角動畫：
- 背景元素的柔和、延遲淡入，時間較短，且有延遲
- 核心原則二：感知分離（Perceptual Separation） - 隱藏複雜性
- 在 View Transition 的流暢動畫過程中，瀏覽器在背後處理複雜的 DOM 元素重排。使用者因為「連續性」的滿足，感覺整個流程簡潔、一氣呵成

### 進階課題：多物件動畫的編排藝術

避免視覺混亂，創造如舞台劇般的節奏感

- 序列化進場（Sequential Entrance）
- 元素應遵循資訊的是層次
- 聚合式離場
- 統一慣性

### 總結：從妥協到賦能的現代 CSS

| 認知問題 | 心理學原則 | 現代 CSS 解決方案 |
| --------- | ----- | ------------------ |
| 頁面切換的斷裂感 | 物體恆存 | View Transitions |
| 浮動元素的錯位 | 接近性法則 | Anchor Positioning |
| 滾動體驗的不確定性 | 閉合法則 | Scroll Snap & SDA |
| 決策與優化的耗時 | 效率與精準 | AI 賦能工作流 |

> scroll-triggered animation 20251212 剛發佈 值得關注

### 結語
==好的動畫不只是好看，更有減輕認知負荷、建立空間心智模型、引導使用者注意力的重要作用與目的。==

---
#### 聊天區

可是我喜歡圓角跟玻璃耶...
Amos:其實我也喜歡，但個人體感上圓角太大了，像是筆電上的視窗邊緣，在操作上會出現不精準的模糊空間，加上介面回應與提示不足的話，操作性就會掉。但你跟我的體感差異也就是我這場演講想要傳遞的，每個人體感不同，但若都能提出自己對介面或動畫的看法與感受，思維與想法就會更廣，進而碰撞出更多更棒的想法與改善體驗。

有人喜歡有人不喜歡

謝謝筆記超人們和排版超人們～～ 🙏🙏

謝謝筆記超人們

路人: 阿捏我還是蠻想要簡報的...