iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Mobile Development

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

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

大家好,我是YIYI,今天我要來製作HOMEPAGE中MONTH與TODAY的切換以及右下角的加號點擊後的畫面。

HOMEPAGE的切換

在HOMEPAGE的設計上我打算設計三種模式,分別為TODAY、WEEK、MONTH。
之前做好的HOMEPAGE是WEEK的樣式。(如下圖)
https://ithelp.ithome.com.tw/upload/images/20210921/20140979peY6WRojPf.png

製作TODAY、MONTH

我利用之前做好的HOMEPAGE-WEEK為底當作TODAY、MONTH的初始圖,在利用PHOTOPEA做調整。調整完後如下圖。
https://ithelp.ithome.com.tw/upload/images/20210921/20140979LzP79vNy9G.pnghttps://ithelp.ithome.com.tw/upload/images/20210921/201409791LAvVuGgBl.png

製作HOMEPAGE按下右下加號鍵後的介面。

首先,利用前面文章說過的OVERLEY放到PLUS的介面上。
https://ithelp.ithome.com.tw/upload/images/20210921/20140979SLMWORxczi.png
並拉出圖片右下方的ICON。要特別注意,要在加號上再放一個加號,因為被OVERLEY遮住的會看不清楚。
https://ithelp.ithome.com.tw/upload/images/20210921/20140979iipX6LFAY8.png

將圖片匯出後,利用PHOTOPEA調色,完成後如下圖。
https://ithelp.ithome.com.tw/upload/images/20210921/201409793CedoZ4rp4.png

接下來將調整好的圖片放到WHIMSICAL,並拉出關聯。
https://ithelp.ithome.com.tw/upload/images/20210921/20140979PQxLq1j9EJ.png
今天就到這邊~/images/emoticon/emoticon42.gif
謝謝大家的閱讀/images/emoticon/emoticon29.gif


上一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 11】
下一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 13】
系列文
30天零負擔輕鬆學會製作APP介面及設計30

尚未有邦友留言

立即登入留言