iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
自我挑戰組

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

DAY16#將表單成果製作成Portotype

  • 分享至 

  • xImage
  •  

還記得我在DAY14那天用Figma設計了UI元件與表單,既然都有一個比較完整的設計稿了,不如直接拿它練習製作成Portotype吧!

開練開練,https://ithelp.ithome.com.tw/upload/images/20240827/20168599WseWq97hxp.png


Prototype實作

  這次實作最深刻的感想,就是體會到DAY6那天描述的Logic Flow重要性,在只有基本想像的情況下去做Portotype,很容易在設定Interations時會有bug在,常常要反覆調整,雖然不排除是我經驗太少

  總之從Figma的介面來看,可以看到每條連線代表一種互動方式:
https://ithelp.ithome.com.tw/upload/images/20240827/201685999ggSucLVL3.jpg

  今天的設定方式多數只是選擇「On click/Navigate to」,點選後可以出現預期中的畫面而已,像這樣:
https://ithelp.ithome.com.tw/upload/images/20240827/20168599rDsOlvJNdU.jpg

Portotype展示

表單Portotype練習
在登入畫面勾選checkbox的時候會有微妙的位移感,但回頭檢查位置都是正確的(直接複製來的),註冊頁就沒事 (º﹃º)。


一些廢話

深刻體會到要做一個想像中的Portotype需要靠學習和經驗來完成。

參考資料

沒有:)


上一篇
DAY15#Figma的Portotype介紹
下一篇
DAY17#Prototype常見互動製作
系列文
UI/UX設計的初心者冒險之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言