有哪些常用元件？
首先我們必須清楚網站必須用到的元件有哪些，才能設計出更完善的 UI Animation ，這邊先幾個介紹較為常用的元件們。
元件的應用情境
在設計 UI Animation 前必須考慮元件的使用情境，不僅僅展現技術與品牌行銷，在適當的時機使用適當的互動才更能夠提升與用戶之間的連結。在設計 UI Animation 前必須考慮元件的使用情境，不僅僅展現技術與品牌行銷，在適當的時機使用適當的互動才更能夠提升與用戶之間的連結。
元件的應用情境大致可分為以下幾種形式：
Navigation | 導航
導航類型的元件能提示使用者當下所在的位置，讓使用者知道該往哪走，越大的空間越容易迷路，當網站的層級越多時 Navigation 的易用性就愈發重要。
Feedback | 回饋
其目的在於傳達使用者當前系統的狀態＆進度，減緩焦慮。舉例來說：點擊表單送出後會系統跳出 Alert 告訴使用者表單已送出成功、頁面加載時會出現 Loading Animation 讓使用者了解需暫時等待、按鈕觸發後會更改顏色＆透明度讓使用者清楚元件已觸發。
在 Feedback 這個情境之下能夠做出的 UI Animation 相當多元，也是我們非常喜歡運用的環節。
Guide and Hint | 引導與暗示
常會利用 Tooltips 來呈現，用於引導使用者進行下一步操作，或者在一個全新的互動模式時更快速的引導使用者做出正確的動作。
元件的狀態與呈現手法？
一般常用的元件狀態有 : Hover（滑鼠滑過的樣式）, Pressed（按鈕已按下的狀態）, Focus（鍵盤聚焦的樣式）, Active（滑鼠按下的樣式）, Disabled（按鈕禁用的狀態）。
除了一般常見的透明度之外還有哪幾種形式？
就拿hover來說，普遍最常看到的手法就是 Mouseover 後會改變元件的透明度＆大小，在靈感網站上看過那麼多酷超的 UI Animation 後，整理出幾個覺得很有趣的設計手法讓大家參考，以下分為實作類型＆實驗類型
實作類型
Arrow Button 線條與邊框的變形，製造強烈的點擊引導。
以圓圈形式的元素貫穿整個網站，在 Button Hover 時會融入整個 Scenes 的 Mouseover。
Mouseover 的發光效果。
實驗類型
有趣的下載動畫，以下都是會被工程師追殺的提案類型。
玩雙關的漢堡菜單。
會讓人瘋狂點擊的書籤。
品牌視覺的延伸應用（用戶體驗結合行銷設計的實例）
承上個章節，看完這些超酷的 UI Animation 後回到案例實做，又該如何與之連結呢？此時我們必須回到品牌核心，探討客戶對於網站的需求以及品牌推廣的重點在哪，他們想強調什麼。這邊以我們自己現有的專案為例。
&Tea
由於客戶提出的品牌的重點在於推廣其飲品的獨特和消費者與品牌的交流，因此我們以水紋的概念融入 Menu 與 Arrow Button 做設計延伸，在不影響使用戶點擊難易度的情況下增加元件的互動，Button Hover 時平行線呈顯漣漪的動態效果。
59燒肉
59 的選單是我自己覺得跟品牌形象融合很恰當的設計，在 Mouseover 後 Menu 的兩條平行線會變成一雙筷子夾起的樣子，搭配背景牛肉的照片，身為消費者很想趕快衝去開吃 XD
適合行動裝置的點擊回饋
這個使用情境比較適合行動裝置，由於行動裝置中的按鈕沒有 Hover States，某些狀況下使用者在點擊按鈕後會不清楚是否已點擊成功，尤其當按鈕是能夠重複點擊的狀態下。如：能夠重複點擊的投票按鈕，此時點擊回饋就會影響到使用者操作的流暢性。
總結
UI Animation 不單單只為了呈現酷炫的特效與手法（當然能夠融入其中更好 XD），最重要的還是如何提供使用者在網站中有更好的使用體驗，在有趣的互動中接收到正確的引導。在體驗滿意度提升後也就相對達到了品牌行銷的目的。
