依主題找術語 · 12 份指南

動態效果

認識動態效果如何說明變化、引導注意，同時讓畫面保持好用。

01 / 術語圖鑑

全部動態效果術語

開啟一個術語，就能看簡單解釋、例子、使用時機、正式程度和程式名稱。

01 · 深入了解
文字亂碼轉場 Text Scramble

一種裝飾文字效果。它會短暫顯示亂碼，再變回真正的文字。
02 · 核心
拖放 Drag & Drop

拖放讓使用者直接移動、排序或傳送項目，並清楚顯示項目已被拿起，以及可以放在哪裡。
03 · 核心
動畫 Animation

動畫是隨時間安排的視覺變化，可以包含多個階段、狀態或重複動作。
04 · 深入了解
視差捲動 Parallax Scrolling

視差捲動會讓不同圖層在頁面捲動時以不同速度移動，利用速度差製造深度感。
05 · 核心
減少動態 Reduced Motion

減少動態是一項無障礙設定，也是一種設計模式。它會移除或簡化不必要的移動效果。
06 · 深入了解
跑馬燈帶 Marquee

一條會不斷移動並重複內容的區塊。對動態敏感的人要能暫停，或改看靜態版本。
07 · 深入了解
進場、離場與交叉淡化 Enter, Exit & Crossfade

進場、離場和交叉淡化是三種動態模式。新增、移除或替換內容時可使用，讓畫面變化保持連續。
08 · 深入了解
微互動 Microinteraction

微互動是針對單一操作的小型回饋循環，包含觸發、規則、回應，以及操作後保留的狀態。
09 · 深入了解
彈簧動畫 Spring Animation

彈簧動畫採用物理模型，由剛性、阻尼、質量和初始速度控制動作。
10 · 核心
緩動曲線 Easing

緩動曲線決定動畫從開始到結束的速度變化，例如先慢後快，或先快後慢。
11 · 核心
轉場過渡 Transition

轉場過渡會在數值改變後，用一段指定時間從已知的視覺狀態移到另一個狀態。
12 · 核心
關鍵影格 Keyframes

關鍵影格是動畫中的具名時間點，每個時間點都會設定當下的屬性值。