微信小程序--札记与贺卡项目前端页面UI设计实现

这周因为忙着开学准备以及开学之后的事情，所以没有多余的时间去学习另外的知识，只是在有限的时间内抓紧完成了这周布置的任务—札记与贺卡项目的UI设计。
主要是通过千图网和图怪兽寻找灵感进行素材的制作，或者采用现有的一些素材加上自己的想法进行制作。主要的设计和前端实现所需的素材在AI中完成，裁剪并导出为图片。

首页面

首界面主要是想介绍一下这个小程序能干嘛，是做什么的，给用户做一个引导和介绍。也因为后一个界面是选择图片界面，用户进入小程序后直接是选择界面也不大好看，所以需要一个前面的界面作为铺垫。了解过微信中类似的小程序后，发现几乎所有的类似小程序都是以分类界面为首页面的，展示了所有海报有多少分类可以供用户进行选择。而当前我们的项目以简单的功能为主，所以，取消分类界面而是采用介绍界面作为首界面。在之后的修改中，可能还会对UI设计进行调整，分类界面是否需要还要进行进一步的讨论。
界面中主要介绍了小程序名称，以及强调其可DIY性，根据自己选择的图片，所写的文字，文字样式，背景图片，布局等，制作自己独一无二的设计图片。点击开始制作按钮可以跳转到选择背景图片界面。

选择背景图片界面

上方提示语提示该界面的作用 ==》选择背景图片，该设计主要想实现通过左右按钮的点击切换我们预设的背景图片进行展示，点击下方确定图片按钮可以选中该图片作为自己设计的背景图片，之后再进行其他操作。另外，在左右切换按钮时，若出现下图所示图片时，用户可根据提示点击图片所在区域，在用户自己相册中选取图片进行裁剪用来当做背景图片。该想法目前只是设计出UI，具体是否可以实现，得等待负责前端页面实现的同学完成和反馈。

制作界面

接下来是最重要的制作界面，用户的主要的操作都在这里完成。本周主要是实现最简单的图片上传和加入文字，所以其他功能的UI，如文字样式，图片数量的选择还没有进行设计，所以该界面看起来会有一些单调。但选择背景图片界面选择图片之后，下图中的灰色长方形会替换成用户选择的图片。用户点击我们预先设计好的虚线区域，可以进行对应的操作，在对应的位置可以实现图片显示和文字加入。下方按钮可进行预览和最终图片的生成。点击按钮会出现弹窗展示图片，下面会说到。

预览效果

点击制作界面的预览位置时，会弹出最新修改的图片的效果，用户可以根据效果再进行修改。

生成效果

点击生成按钮，显示最终效果图并且有保存到本地按钮，点击按钮可将图片保存到本地相册。

以上是这周UI设计的主要内容，实现了项目的主要的功能，下周进行小组谈论后会再增加相关的功能使项目更加完善。
因为这周有各种事情，有点忙，所以除了完成UI设计任务之外，没有时间去学习另外的知识，在下周以及之后，有空闲时间以及完成项目任务的前提下，尽量去学习一些其他的知识。例如后端搭服务器，没有接触过，想一步一步开始慢慢学习。