30天零负担轻松学会制作APP介面及设计【DAY 17】

大家好，我是YIYI，今天我要来制作记帐和报表的页面。

记帐页面

和制作前面的页面一样，先将BACKGROUND放入WHIMSICAL中，并拉ICON到手机框里~
记帐页面WHIMSICAL能处理的大概到这个部分~(如下图)

接下来放入PHOTOPEA做编辑以及调色~
因为这边的色块主要有三大块，分别是原本的BACKGROUND、备注框、数字框。
我认为如果都用浅紫色看起来会有点怪，所以数字框不向前面的键盘用浅紫色，而是用ICON的颜色代替。
加上文字後如下图所示~

接下来要制作一个输入页面(已输入)
这是为了让後面报表有数字所设计的。

记帐的部分到这边先告一段落~
再来是报表的部分。

报表

用WHIMSICAL拉出的框框如下图~

设计成能够查看收入与支出、并能一目了然损益的页面~
并在下排加入与主页相同的ICON，以便回到主页。
放入PHOTOPEA後调色、加入文字後如下图所示~

预告

明天将制作月事的页面~
谢谢大家的阅读