2020软件工程作业3

这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/2018SE
这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/2018SE/homework/11354
这个作业的目标 <使用原型工具仿写《阿里云APP》完成本次原型设计>
其他参考文献
码云地址 https://gitee.com/full-heart/work/tree/master/

1.登录页面截图

2.用户页面截图

3.设计思路
(1)设计过程截图

在设计当中:
1.底部栏模块,输入表单模块,底部模块,在顶部模块中以矩形组件为底,将矩形置于底层,然后在矩形上面加入文字组件输入标题,和返回的图标。
2.表单设计是通过左右两边设计,左边的账号和登陆密码是文本组件,右边是表单单行输入组件。密码行的眼睛样式的图标是隐藏或者显示输入密码的功能图标。
3.底部 是用了分别触发登录和注册功能两个按钮组件

4.总结
刚开始看到作业内容的时候觉得实在是有点无从下手,后来经过询问同学,有了头绪并开始制定初步计划。首先是选择了软件——墨刀,选择它的理由是操作简单,界面干净且是中文软件,使用起来更得心应手,其中最值得夸奖的还是能不下载直接在线使用,省去了不少下载时间。接下来便是着手制作登录注册、轮播、我的、管控等页面,其中稍难一点的便是轮播和界面跳转功能。但介于此款软件甚是方便,直接使用轮播组件,和链接拖拽功能便实现了,完成了此次作业。
设计的思路,首先实现账户登录注册页面,仿照阿里云中登录注册页面进行布局,从上到下的顺序依次设置标题栏,用两个矩形设置大小、背景色,两个按钮,两张图片设置圆角,背景颜色是一个矩形设置颜色大小并置于底层,布局相对简单;
第二步,实现我的页面,仿照阿里云中我的页面进行布局,布局的时候也同样按照从上到下的原则进行小区域划分,一步步实现页面效果,刚开始以为>是尖括号,后来找图标的时候发现了类型的图标,觉得用这个图标形状更合适,便全部换成了这个图标;第三步,实现管控页面,仿照阿里云中管控页面进行布局,截取了原来阿里云软件中的一张图片,登录/注册按钮可以跳转到登录注册页面,页面布局相对简单;第四步,实现发现页面,仿照阿里云中发现页面进行布局,发现页面是相对而言较复杂的页面,包括轮播图,左右滑动效果,上下滑动效果,添加视频这些其他页面未曾有的内容。轮播图实现方法,添加轮播图组件,替换图片,也可以设置轮播的间隔时间、滚动方向等;左右滑动效果实现方法如下,选中这些需要滚动的组件,点击工具右侧面板中的添加组件状态,这时就变成了动态组件,退出编辑状态,然后缩写它的尺寸大小即可实现左右滚动效果;上下滑动效果,实现方法只要拉长页面大小即可;添加视频的实现方法,只要添加网页组件,输入视频的地址即可。

posted @ 2020-10-18 20:43  全心蓓  阅读(27)  评论(0编辑  收藏