2020软件工程作业03
2020软件工程作业3
| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/zswxy/2018SE |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/zswxy/2018SE/homework/11354 |
| 这个作业的目标 | 原型设计：使用原型工具仿照阿里云APP画出基本的页面布局 |
| 其他参考文献 | 无 |
| 码云地址 | https://gitee.com/zheng-fei/codes/vgo0b47miwp92zhjcf1ae81 |
一、选题与工具
- 选择的题目：仿写《阿里云APP》
- 采用的原型开发工具：墨刀
二、思路说明
1. 登录功能
登录页面通常有名为登录的标题，由账户、密码、输入框、登录和注册按钮、忘记密码构成，可加入其他的登录方式。制作流程是先做顶部底部，然后进行中间部分创作。
效果图：
2. 轮播图功能
要实现图片的滚动，横向滚动或纵向滚动。制作轮播效果，收集图片素材放入轮播图中。
效果图：
3. 底部导航栏功能
底部导航栏功能是通过点击导航项图标来显示不同的页面信息，分为以下三个页面，分别是：
①发现页面
发现页面要有搜索栏，有阿里云APP的特色内容，页面底部的图标可以点击跳转到对应的页面。制作流程先做顶部底部再做中间部分。
效果图：
②“我的”页面
此页面在没有登录用户的情况下一般有“登录/注册”文字，底部图标点击可跳转到对应页面。制作流程：顶部-底部-中间部分。
效果图：
③管控页面
与发现页面的顶部底部基本一致，中间部分主要的是“登录/注册”按钮，点击可以跳转到登录页面。制作流程：顶部-底部-中间部分。
效果图：
三、个人总结
设计部分
1. 登录功能：
首先要对整个页面进行布局，从顶部的状态栏（墨刀创建新项目会自带），标题栏，到中间的内容部分，以及底部的框架都用组件中的“矩形”
布置好。接着添加文字“登录”和“取消”，一开始我有纠结“取消”是用文字还是用按钮，最后我选择了文字。点击“取消”会自动跳转回上一页面，比如通过管控页面进入登录页面则跳回管控页面。（将其他跳转页面做好之后再做链接事件。）中间内容该写文字的地方使用组件中的“文字”
，像是账户、登录密码、忘记密码等等，直接将“文字”拖入，输入即可。账户和密码后面要使用组件“单行输入”
，单行输入的文字颜色修改为比较淡的灰色，图标在
里面，可以自己找寻合适的图标。登录通常是用按钮做，拖入一个按钮组件
，编辑好文字和颜色即可，免费注册也是由按钮组件实现的。底部的实现是由两条线条、一处文字、两个图标（支付宝和淘宝）制成，分别使用线条组件
，文字组件和图标。
2. 轮播图功能：
一开始我以为轮播图功能会太好做，但墨刀这个工具有这个功能，实现起来就很容易了，也是使用内置组件，如下图所示：
将轮播图拖入页面，在右侧可以设置要轮播的图片和图片个数，如下图所示：
3. 发现页面：
和登录页面一样，分为三部分，顶部，中部，底部，先构造框架，再做顶部底部和中间部分。底部主要由三个图标构成，管控、发现和“我的”，因为是发现页面，所以发现图标做的是橙色的。管控图标和“我的”图标分别链接对应页面，如下图所示：
顶部有文字，图标和搜索框，搜索框的制作是先拖入一个矩形，将矩形的外观圆角部分调高，我调的是18，使框框看起来圆润一些，再给它加点阴影使其更立体，然后拖入搜索的图标和一个单行输入，搜索框就完成啦。中间部分从上到下分别是轮播图，八个图标，一个内含文本的矩形，一个“视频专区”文字和一个“更多”文字，一张直接从APP里截下来的图片。
4. “我的”页面：
和发现页面一样的制作步骤，“我的”页面的底部是将管控和发现图标链接到对应页面，“我的”图标是橙色的。顶部和中部做法都差不多，特别要强调的是这个页面的顶部有一个头像框，我是拖入图片然后用圆形裁剪，如下图所示：
我将头像框和它旁边的文字以及图标组合在一起链接到登录页面，因为在使用阿里云APP时点击这些组件都会跳转到登录页面，链接事件如下图所示：
5. 管控页面：
管控页面底部是将发现和“我的”图标链接到对应页面，管控图标是橙色的。顶部和发现页面顶部一样，只是修改了文字，多添加了一个图标。中间部分主要的是“登录/注册”按钮，点击可以跳转到登录页面。
遇到的问题及解决方法
1. 测试时发现无论是从管控页面还是“我的”页面进入登录页面，点击“取消”都会自动跳转回“我的”页面，而要实现的是点击“取消”跳转回上一个页面。
解决方法：链接不对，目标链接不应该是“我的”页面，而是“链接上一页”，如下图所示：
2. 底部有问题，中间内容和底部重合了，如下图所示：
解决方法：给底部加个底框，即矩形组件，如下图所示：
3. 点击底部导航栏某个图标的时候切换到对应页面但是图标不变色
解决方法：好像墨刀没有这种功能，一开始是想怎么点击变颜色，然后看交互动画的视频发现设置状态1.2，将此页面的状态1变成2，设置方式如下图所示：
尝试后发现状态1变成状态2图标颜色变了但没跳转到对应图标的页面，效果如下图所示：
然后我将状态2的图标链接到对应页面，但是需要点击图标两次才能达到想要效果，如下图所示：
又思考片刻，点一下图标状态要变，页面也要变，不妨直接把要跳转的页面的图标颜色改变，比如我要在管控页面点“我的”图标跳转到“我的”页面，那我们就把“我的”页面的图标变成橙色。然后在阿里云上仔细看了看变化，发现其实每在一个页面，对应的图标颜色就是橙色的图标，完全可以在对应页面直接将图标颜色改了，尝试之后效果如下图所示：
想得到的效果得到了，成功！
4. 往下拖发现红框内的部分并不和背景颜色一个颜色，如下图所示：
解决方法：
进行测试，测试1 如果想让背景拖动时没有白色部分，是否可以设置固定位置，让某部分相对固定，设置如下：
测试效果：
说明不是内容固定不固定的问题，试试固定背景框！固定方法：选择背景框，选择相对顶部固定，相对底部应该也可以。
测试效果：
体会与收获
- 头一次使用原型开发工具做APP的页面，刚开始使用的时候花费了好多时间，看似无用功，但随着不断的试错，对这个工具的基本功能也算是了解了，知道了大多数组件的位置和使用方法，不过我觉得还有很多可能性等待我探索，我对这个工具莫名的感兴趣。
- 做页面就像搭房子，搭房子先用钢筋水泥搭出毛坯房，再布置室内家具，做APP、网站、页面都要先搭框架再布置里面内容。比如做一个页面，至少要先画出三个大框架，顶部底部和中间部分。
- 前期的试错使我记忆更深刻，有助于我学习这款工具，也能稍微的提高耐心吧。
- 做完APP的页面之后，一定要多测试一下，测试有助于页面功能的完善，而且有时候一开始做的是对的但是可能不小心碰到某个组件就被改变了但自己不知道，所以一定要测试。
- 不论是做APP还是网站，排版真的很幸苦，需要很有细心和耐心，不容易！
