iT邦幫忙

2023 iThome 鐵人賽
DAY 6
0
Modern Web

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

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

15th鐵人賽
1027 瀏覽

  • 分享至 

  • 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 篇
  1. 26
    [實作RWD網頁篇]實作前的回憶錄
  2. 27
    [實作RWD網頁篇]HTML創建網頁骨架
  3. 28
    [實作RWD網頁篇]CSS及Bootstrap製作網頁樣式(1)
  4. 29
    [實作RWD網頁篇]CSS及Bootstrap製作網頁樣式(2)
  5. 30
    [實作RWD網頁篇]
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22201 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙