iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
自我挑戰組

UI/UX設計的初心者冒險之旅系列 第 14

DAY14#設計UI元件與製作表單

  • 分享至 

  • xImage
  •  

前面幾天學了很多有關於Figma的功能,今天就來嘗試看看設計UI元件,然後再製作表單試試看吧!

那就,https://ithelp.ithome.com.tw/upload/images/20240825/20168599AxyVKrzzhR.png


設計UI元件

  為了練習我這邊先設計可能會用到的元件,包含:Checkbox、Radio button、Switch button、Button與Input,至於主色調則是邊製作元件邊調整。
  設計好後再製作有「instance + word」的component,確認它的instance能如預期的做替換,同時,就算更改文字也方便維持一致性。
https://ithelp.ithome.com.tw/upload/images/20240825/20168599AdNmX44SCk.jpg


表單製作

  以Day7製作的wireframe為雛型,使用上面設計的UI元件來製作表單。這裡Frame的尺寸選擇使用iPhone13 mini,它的尺寸比較適合我作為練習使用。
https://ithelp.ithome.com.tw/upload/images/20240825/20168599rgUzsGecHi.jpg


一些廢話

Figma是什麼時間小偷嗎,好像碰一下而已時間就不見了。

參考資料

  1. 表單設計:掌握設計五要素,減少使用者填答時的不便與錯誤
  2. 利用Figma製作UI元件 | Form表單篇

上一篇
DAY13#Component的其他屬性介紹
下一篇
DAY15#Figma的Portotype介紹
系列文
UI/UX設計的初心者冒險之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言