60fps

依互動模式瀏覽應用程式動態案例,在製作原型前研究節奏、回饋與轉場。

前往 60fps 官方網站

簡介

60fps 收集行動與網頁介面的動態案例。可以從片段或應用程式瀏覽,也能依載入、初次使用引導、按鈕及轉場等模式篩選。

為何收錄

同一段互動值得看不只一次:記下觸發條件、最先改變的元素,以及何時能進行下一步。這樣才能把吸引人的動畫轉成「回饋是否清楚、流程是否連續」的設計問題。片段能呈現行為,卻看不出背後的實作、效能或減少動態設定。

適合的工作

正在決定動態如何幫助理解流程的產品設計師與前端開發者。若要看靜態遊戲畫面,可從 Game UI Database 或 Interface In Game 開始。

可以怎麼用

  • 比較同一模式的幾個案例,再決定動態是否真的提供有用回饋。
  • 實作前先畫出觸發、轉換與結束狀態的簡短分鏡。
  • 檢查互動反應速度並提供減少動態的路徑;參考片段本身無法驗證這兩點。

Animate.css

Animate.css 是可直接套用的 CSS 動畫類別集。

  • animation
  • ui

動態

Anime.js

Anime.js 提供 JavaScript 動畫 API。

  • animation
  • ui

動態

AutoAnimate

AutoAnimate 替介面元素變動加上轉場。

  • animation
  • ui

動態