【Figma 網頁教學】動態按鈕設計,製作流暢的轉場效果!
4.6 هزار بار بازدید -
5 ماه پیش
-
▬▬▬▬▬ 🏆️ 精選系列 🏆️ ▬▬▬▬▬如何架站系列
▬▬▬▬▬ 🏆️ 精選系列 🏆️ ▬▬▬▬▬
如何架站系列 ➜ 自架網站系列
優質主機挑選 ➜ 優質主機系列
-
網頁設計中,通常都會包含一到多個按鈕,像是上傳、下載按鈕或是送出表單按鈕等...,可以有多種功能。
建議在設計按鈕時,可加入一些動態變化效果,讓用戶與按鈕互動時,可以輕易理解當下的狀況,創造良好的使用體驗!
優質的按鈕設計,還能吸引用戶目光,促使用戶想要點擊按鈕,提升轉換率!
今天將教大家如何使用 Figma,設計一個簡單的下載按鈕,再加入流暢的轉變動畫,像是加載進度條、載入完成的動態效果等...。
步驟簡單,新手也能輕鬆學會,快跟著影片一起操作吧~
影片時間軸
00:00 開頭展示
00:32 製作按鈕初版
04:53 後續製作 &Prototype 連線
08:10 套用元件&成品一覽
09:22 結尾分享
▬▬▬▬▬ 💬 關注我們 💬 ▬▬▬▬▬
犬哥網站 ➜ https://frankknow.com/
犬哥數位(網頁設計&主機代管服務)➜ https://frankknow.co/
犬哥星球 ➜ https://frankknow.net/
犬哥 IG ➜ Instagram: wp.dog
犬哥 FB 社團 ➜ Facebook: frankknow
#網頁設計 #uiux #ui #website #websitedesign #設計教學 #figma #figma教學 #motion #網站架設
如何架站系列 ➜ 自架網站系列
優質主機挑選 ➜ 優質主機系列
-
網頁設計中,通常都會包含一到多個按鈕,像是上傳、下載按鈕或是送出表單按鈕等...,可以有多種功能。
建議在設計按鈕時,可加入一些動態變化效果,讓用戶與按鈕互動時,可以輕易理解當下的狀況,創造良好的使用體驗!
優質的按鈕設計,還能吸引用戶目光,促使用戶想要點擊按鈕,提升轉換率!
今天將教大家如何使用 Figma,設計一個簡單的下載按鈕,再加入流暢的轉變動畫,像是加載進度條、載入完成的動態效果等...。
步驟簡單,新手也能輕鬆學會,快跟著影片一起操作吧~
影片時間軸
00:00 開頭展示
00:32 製作按鈕初版
04:53 後續製作 &Prototype 連線
08:10 套用元件&成品一覽
09:22 結尾分享
▬▬▬▬▬ 💬 關注我們 💬 ▬▬▬▬▬
犬哥網站 ➜ https://frankknow.com/
犬哥數位(網頁設計&主機代管服務)➜ https://frankknow.co/
犬哥星球 ➜ https://frankknow.net/
犬哥 IG ➜ Instagram: wp.dog
犬哥 FB 社團 ➜ Facebook: frankknow
#網頁設計 #uiux #ui #website #websitedesign #設計教學 #figma #figma教學 #motion #網站架設
- #education
- #
- #ui
- #
- #
5 ماه پیش
در تاریخ 1402/12/22 منتشر شده
است.
4,673
بـار بازدید شده