iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Mobile Development

30天零負擔輕鬆學會製作APP介面及設計系列 第 11

30天零負擔輕鬆學會製作APP介面及設計【DAY 11】

  • 分享至 

  • xImage
  •  

大家好,我是YIYI,今天我要利用MARVEL將前面三個介面做出連結。

製作介面連結

首先,先進入昨天的介面,並且將滑鼠放在HOMEPAGE的頁面上,就會看到PROTOTYPE,點下這個按鍵。
https://ithelp.ithome.com.tw/upload/images/20210920/20140979ywdZsIrLLt.png
就可以進入到工作頁面了~如下圖所示
https://ithelp.ithome.com.tw/upload/images/20210920/20140979TckF0eksHQ.png
按照上圖所示,先將滑鼠移到頁面上框出點擊的範圍,框出來後會跳出下方的頁面,選擇點擊後要跳轉的頁面位置,最後按下CLOSE即可完成。
https://ithelp.ithome.com.tw/upload/images/20210920/20140979Qe2McwlsG4.png
剛才是點擊左上角的LIST,上圖是點擊右上角的CAMERA。
一樣的操作就可以完成CAMERA的頁面跳轉。
https://ithelp.ithome.com.tw/upload/images/20210920/20140979or3ST1Gawf.png
https://ithelp.ithome.com.tw/upload/images/20210920/20140979g73IE2npnl.png
上面兩張圖是LIST頁面跳轉至HOMEPAGE的操作。
https://ithelp.ithome.com.tw/upload/images/20210920/201409791cYavKmT3l.png
最後就是由CAMERA跳轉至HOMEPAGE的操作
完成後點擊右上角的DONE,就可以儲存並回到上個頁面。
https://ithelp.ithome.com.tw/upload/images/20210920/20140979K2tbEoyGuK.png
點擊右上角的PLAY就可以看到DEMO頁面啦/images/emoticon/emoticon42.gif
https://ithelp.ithome.com.tw/upload/images/20210920/20140979Ui3wJYGUT8.png

DEMO

這邊給大家看一下到目前為止的DEMO~
DEMO影片

預告

明天將製作HOMEPAGE中MONTH與TODAY的切換以及右下角的加號點擊後的畫面。
謝謝大家的閱讀/images/emoticon/emoticon29.gif


上一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 10】
下一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 12】
系列文
30天零負擔輕鬆學會製作APP介面及設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言