Figma原型中的按鈕動態效果

今天想分享一下我最近的UI設計練習，關於界面過渡效果的一些有趣應用。這次的練習主題是原型動態效果，雖然自己目前對動效很熟練了，但有一些效果實際上很少被使用，所以借此機會來試試看，也能維持自己的熟練度。

這次的練習主題包括以下幾點：

• 確認按鈕過渡效果： 包括3種不同的變化，從一個狀態到另一個狀態的流暢切換。
• 按鈕狀態： 包括心形按鈕（適用於收藏或按心等狀態）和加載動效。
• 確認加載到完成的過渡效果按鈕。

✏️來記錄一下這次的學習心得：

1. 將動畫過渡視為影片的兩個關鍵點

在這次練習中，我發現許多動效實際上與我在剪輯視頻時所使用的“起點”和“終點”的概念非常相似。你要從哪種狀態變換至怎麼樣的結果。

例如，第一個 “Pay now” 按鈕就是這樣，它的起點是深藍色的背景，所以完成狀態要隱藏，反之亦然，最後再添加過渡效果即可完成簡單而出色的效果。

2. 善用Properties(組建屬性)、After delay(延遲) 來創建組件狀態

這兩種功能在動態設計中都非常有用。Properties大家應該都很熟悉，可以創建不同屬性去做切換；而After delay則可以在動畫中創造出很多有趣的玩法，比如影片中的影片中的“Loading animated status”：為加載中的三個點添加延遲，呈現錯開上下跳動的動畫。

3. 進階者，以上兩點做疊加練習

最後的例子，”Confirmation” 按鈕，就是將上述兩點疊加的結果。通過使用After delay來製作加載轉圈動效，並添加不同狀態的過渡即可實現效果。

4. 來看看結果吧！

或以下連結：https://vimeo.com/manage/videos/860843978

那麼下次見。
- - - - - - - - - - - - - -
我的Behance ｜Medium
- - - - - - - - - - - - - -
感謝你的閱讀及支持，任何問題都歡迎來信交流｜angelscs205@gmail.com