Spring toggle
A spring, not a tween. It overshoots a hair and settles, so it feels physical.
spring 520 / 30 04.5 / 網頁與介面動效subpage.back
讓介面感覺有生命。
滾動敘事、微互動和頁面轉場，讓網站更容易理解、更難忘記，同時不犧牲速度與無障礙性。
subpage.sample.eyebrow
動效實驗室：七個可以觸控的互動
真實可用的介面動效，不是影片。切換、懸停、拖動、點選。這裡的一切都遵循減少動態的設定。
04Depth
0%
- Brief
- Boards
- Animate
- Ship
subpage.sample.disclaimer
subpage.deliverables.eyebrowsubpage.deliverables.title
subpage.deliverables.title
subpage.deliverables.titleAccent
subpage.deliverables.lede
01
動效原則
緩動、時序和彈簧引數，讓每個互動都像同一款產品的一部分。
02
滾動與頁面轉場
以故事為主導的滾動序列和路由轉場，引導注意力，就像本站這樣。
03
微互動庫
有目的地響應的按鈕、開關、選單、卡片和表單。
04
生產程式碼或匯出檔案
乾淨的 CSS 與 JavaScript，或 Lottie 與影片匯出，適配你的技術棧。
05
無障礙版本
從設計之初就納入的減少動態替代方案和焦點行為，而不是事後補丁。
06
效能預算
在上線前，針對載入時間和互動延遲來衡量動效。
subpage.process.eyebrowsubpage.process.title
subpage.process.title
subpage.process.titleAccent
subpage.process.lede
審計
找出動效在哪裡能讓事情更清楚，又在哪裡只會增加噪音。
制定原則
定義緩動與時序的詞彙，讓決策不再是逐個案例而定。
在瀏覽器中做原型
在真實的介質中構建，讓你所批准的就是最終上線的。
上線並衡量
帶著效能預算釋出，並觀察使用者實際做了什麼。
subpage.connects.eyebrowsubpage.connects.title
subpage.connects.title
subpage.connects.titleAccent
subpage.connects.lede
subpage.faq.eyebrowsubpage.faq.title
subpage.faq.title
subpage.faq.titleAccent
subpage.faq.lede
動畫會拖慢我們的網站嗎？
如果做得正確就不會。我們設定效能預算，用成本最低的屬性做動畫，並在真實裝置上測試。
你們會寫程式碼嗎？
會。我們可以交付可用於生產的程式碼，也可以移交規範和匯出檔案，由你的團隊實現。
無障礙方面呢？
每個動效都有減少動態的替代方案，鍵盤和讀屏的行為與動畫一起設計。
能配合我們的 CMS 或框架嗎？
我們適配大多數現代技術棧。告訴我們你用的是什麼，我們會確認最佳方案。
我能看到它運作嗎？
你正在看。本站的滾動序列、計數器和揭示效果，都是用同樣的方法構建的。