iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0
Modern Web

從UI/UX到實作:和我一起運用Bootstrap和jQuery打造互動式RWD網頁!系列 第 6

[UI/UX設計篇]使用Figma製作動畫效果

  • 分享至 

  • xImage
  •  
  • 為什麼要學習製作動畫效果呢?

   大家可能多少都會有點疑惑,為什麼要在設計中添加動畫效果呢?只是為了美觀嗎?實際上,當你在設計中嵌入動畫時,可以實現多重好處。首先,它使你更能夠與開發人員溝通、協同工作,同時,它也有助於更全面的理解使用者體驗,並提升其品質。常見的動畫效果,例如載入頁面時的動畫、按鈕點擊後的變化以及頁面的平滑淡入,這些都在使用者與網頁互動時扮演著重要的角色。就像電影的配樂一樣,它們可能不是主要的焦點,但卻在整個體驗中扮演了至關重要的角色。


  • 使用Figma實作動畫效果

今天會教大家使用Figma製作按鈕點擊後的變化效果!

  1. 首先打開昨天畫完Mockup的設計檔:
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190Zg8mjH26vP.png
  2. 開始進行按鈕點擊後的動畫效果:
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190KPdS4WcIFr.png
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190ZBw1NzzzV2.png
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190wZk9diejC2.png
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190naGGIQw22T.png
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190wpZ3iygZ6I.png
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190ozwvsnpiaZ.png
    https://ithelp.ithome.com.tw/upload/images/20230921/20152190mbirIgW7b6.png

上一篇
[UI/UX設計篇]使用Figma實作Mockup
下一篇
[UI/UX設計篇]使用Figma製作動態Prototype
系列文
從UI/UX到實作:和我一起運用Bootstrap和jQuery打造互動式RWD網頁!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言