UI: Carousel 計時切換設計 • Figma 教學
1.3K views · 2024-09-13
Interaction & UXUI Design
今天這集我們來看，如何製作出像Apple iPhone產品頁面的產品Carousel。
這集我們會學到如何利用網頁的Inspect Tool來檢視設計，下載SVG，跟讀取顏色或空間等設計數值。
我們也會製作出Progress bar跑動計時的感覺。最後會加上稍微複雜的動態效果，利用到多重的After Delay來達成動畫的切換。
Apple 範例: https://www.apple.com/iphone-16/
此教學的設計檔下載: https://drive.google.com/file/d/1GpJCMRuhlnYO5X4Sk4rEm9AmShEgph_k/view?usp=drive_link
0:00 設計範例
0:24 下載SVG
1:51 顏色設定
4:00 Icon 按鈕製作
7:36 操控軸＆原形製作方式
9:39 操控軸小圓點製作
19:33 小圓點結合成操控軸
23:45 操控軸Variants
27:13 整體播放操控軸製作
38:36 Carousel 圖片設定
42:16 Carousel 圖片滑動製作
47:30 Carousel 圖片+操控軸
49:55 整體Variants＆動態製作
1:09:28 最終效果呈現
1:11:31 額外可能出現的問題
#CarouselTimer #CarouselApple #Carousel製作 #Figma教學 #圖片轉動軸 #UI教學
這集我們會學到如何利用網頁的Inspect Tool來檢視設計，下載SVG，跟讀取顏色或空間等設計數值。
我們也會製作出Progress bar跑動計時的感覺。最後會加上稍微複雜的動態效果，利用到多重的After Delay來達成動畫的切換。
Apple 範例: https://www.apple.com/iphone-16/
此教學的設計檔下載: https://drive.google.com/file/d/1GpJCMRuhlnYO5X4Sk4rEm9AmShEgph_k/view?usp=drive_link
0:00 設計範例
0:24 下載SVG
1:51 顏色設定
4:00 Icon 按鈕製作
7:36 操控軸＆原形製作方式
9:39 操控軸小圓點製作
19:33 小圓點結合成操控軸
23:45 操控軸Variants
27:13 整體播放操控軸製作
38:36 Carousel 圖片設定
42:16 Carousel 圖片滑動製作
47:30 Carousel 圖片+操控軸
49:55 整體Variants＆動態製作
1:09:28 最終效果呈現
1:11:31 額外可能出現的問題
#CarouselTimer #CarouselApple #Carousel製作 #Figma教學 #圖片轉動軸 #UI教學