2020软件工程作业3

------------恢复内容开始------------

这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/2018SE
这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/2018SE/homework/11354
所选题目 <阿里云APP>
开发工具 <墨刀>
码云地址 https://gitee.com/yi-yuqing/alicloud-prototype-design.git

本次作业我使用的的工具是墨刀,使用墨刀做了此次阿里云APP的原型仿写。以下为原型效果图和说明。

云产品界面


在做云产品界面之前,我先在墨刀的新手教程里面查看了简单操作的教学视频。首先我最先完成的就是此界面顶部搜索和底部导航界面。顶部搜索使用了素材库里的搜索模块,并进行相应修改。此界面使用了大量图标和文字组件。底部导航,我先设置了一个矩形组件,之后再加入三个文字组件分别是管控和云产品还有我的。添加完文字组件之后添加相对应的图片图标组件。此界面的底部导航我用到了墨刀里面的链接区域组件,将链接区域组件拖到管控和我的文字与图标那里,设置此链接区域之后可实现单击管控文字和图标则跳转到后面建立的管控界面,我的连接跳转到后面建立的我的界面。底部导航组件我将它设置为了母版组件,这样在后面几个所需底部导航的界面我只需要直接复制拖出母版组件即可。轮播图实现我使用了轮播图组件插入到界面中间,下面有轮播图实现具体说明。

轮播图实现





实现此轮播图我选择了素材库基础组件里面的轮播图组件,载入此组件之后,即可直接修改插入所需要轮播的五张图片,十分容易操作。

“我的”界面

我的界面所需要链接跳转登录注册的界面和通过底部导航进入三个不同界面。因为在云产品界面我已将底部导航设置成为了母版所以只需要在母版模块直接拖出此导航模板即可。再是点击上面的登录/注册那里我也选择的使用链接区域组块,单击链接区域控件左边的闪电标志,将其拖到需要跳转的后面的登录界面上去,就可跳转。

登录界面

登录界面的取消文字我使用链接区域使其能跳转到未登录的我的界面。用户名和密码我使用了两个单行输入组件,用户名的单行输入我设置成了文字类型,密码单行输入组件我设置成的密码类型。登录和快速注册我使用了按钮组件,并都使用链接区域使登录成功之后可进入已经登录界面,而点快速注册按钮则可进入注册界面。在底部使用两条直线组件,在两条组件直接输入文字组件"其他方式登录",界面最底部在图标库里找到淘宝和支付宝图标。
已经登录界面

注册界面

管控界面

已经登录界面和注册界面还有管控界面操作大致相似,都使用了矩形组件和相应图标,并使用大量文字组件修改成相应的文字,插入图案组件,使用区域链接实现界面的跳转。

个人总结
此次作业我看作业要求就看了好久才看懂。这次原型设计最大的难点在于之前完全没有使用过任何原型工具,所以一切都得重新学习与摸索。为了完成此次作业我去B站先学习了几个墨刀原型设计的视频。总的来说我使用的墨刀还是相对较为方便的。一开始最难的就是想每个界面所需要的组件都是什么。例如云产品界面一个顶部就要使用文字组件和搜索模块和两个小图标。在做顶部的时候得很小心的将几个组件排列好,做的过程中我总是不小心就把组件排歪了。云产品界面是我这次作业做的第一个界面,最头疼的有一点是此界面众多图标我一开始不知道怎么找到这些图标,后来想到了可以先将手机里阿里云APP已经设计好的图标截图,再在墨刀设计里面插入图案组件,将图案替换为阿里云的图标们。

再是底部的导航块,我摸索了很久该如何跳转到另外的界面,一开始在管控和我的文字组件还有图标组件那里每一个都设置了一个事件,将事件设置为单击跳转,后来发现链接区域组件可直接拉到对应所需单击跳转的区域,然后通过左边的闪电标志直接拉到需要跳转的新界面即可。


花费时间最久的是登录界面,其实做完想想觉得此界面也较为简单,纠结的点在于怎么输入用户名和密码。之后素材库组件里面看到了单行输入组件,就拉出来了两个相应的单行输入将用户名组件键盘类型设置为文字,将密码键盘类型设置为密码。登录和快速注册使用按钮组件,使用链接区域组件将登录跳转至已经登录界面,快速注册跳转到注册界面。最后是这个界面的底部设置第三方登录,我在设计的最开始并不知道可以直接搜索淘宝和支付宝的图标就可以了,后来发现之后拖出两个图标,直接拖出来的图标是黑白的,还需要进行底色和文字的颜色修改。






此次作业完成原型设计就用了快一整天,原以为写完原型设计之后提交就简单了,结果碰上了大问题。在码云创建仓库之后,下载好GIT之后先是找公钥一直找不到那个id_rsa.pub文件,找到之后去git bash里面输入克隆命令也一直报错,无法克隆也就无法做下面的操作,一个下午时间都在搜索和请教同学公钥和远程公钥不匹配该如何办。直到晚上才通过git彻底上传码云成功。



posted @ 2020-10-18 19:02  软工3班-易雨晴  阅读(60)  评论(0编辑  收藏