2020软件工程作业03
| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/zswxy/2018SE |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/zswxy/2018SE/homework/11354 |
| 这个作业的目标 | 从仿写《阿里云APP》、《去哪儿官网》中选择其一来完成本次原型设计 |
| 码云地址 | https://gitee.com/Shoo1er/prototype |
工具和题目的选择
此次作业我选择了Axure Rp 9作为作业的工具，并选择了去哪儿官网进行仿写。
思路
第一个功能 实现动态导航栏功能
（通过悬浮到不同的导航项上显示不同的信息）
由于是第一个，之前从来没有用过这个软件并且对原型图的概念不是很了解。通过在网上查阅资料和视频才有了一定的认识。一开始还在犹豫打开这个工具是否要设置尺寸，尺寸该如何把握呢？为此还专门找了资料进行查询 https://www.zhihu.com/question/21338578
不过真正去使用工具的时候发现对尺寸的把握对于我们初学者来说不是那么严谨，但是相对于专业的来说，这是非常重要的细节，关乎到对用户使用感的舒适度。
导航栏的设计就是依靠一些基本图形来实现的，关键是如何交互，比如在选中导航栏中某一项时会颜色加深表示被选中以及弹出二级菜单栏。由于初学只会用一些很笨的方法，比如选中一个菜单将二级菜单显示（在此之前隐藏），当鼠标移动到其他项的时候就会隐藏。这样做的话如果导航栏有10个项，那么除了它自己本身之外都要增加一个项，变得十分繁琐，并且二级菜单没有实现交互。使得在导航栏下面有很多被隐藏的菜单。后面才知道其实可以设置一个动态面板呈现多个状态，这样在交互的时候会更方便了。
第二个功能 实现轮播图功能
由于加载有限 右边链接查看详情 https://gitee.com/Shoo1er/imgstock/raw/master/img/效果2.gif
轮播图的话，因为第一天学的时候对一些原件的功能还不理解，不断深入学习和看视频之后，发现动态面板真是个好东西。什么是动态面板？用来做什么？
动态面板就是多个页面按照“状态划分”合成一个元件，然后通过某种“动作”驱动展示。
这张图是Axure中动态面板的图标，非常贴切。
有三个状态（states）的面板“灰黑蓝”，通过动作（Action）来控制具体展示哪个状态。
所以：动态面板 = 状态面板 + 动作
首先构建一个动态面板，设置大小之后，构成4个状态，每一个状态放一张海报。在这个动态面板中设计交互，载入时的切换加循环。下面4个按钮则是也是用动态面板，画出四个圆圈，被选中的呈现红色，其余为灰色，每个状态放一组圆圈，同时设计为载入时的切换加循环。 在每一个圆圈加一个图像热区，热区的意思就是使用热区元件来区分一个图片中的不同交互区域。在图片的不同区域上添加热区元件，这样就可以给这些区域添加交互了。每一个热区增加点击事件会切换对应的状态图。
第三个功能 页面至少包含2个或以上的酒店/度假信息
（单击能够实现页面 跳转到指定的页面）
由于加载有限 右边链接查看详情 https://gitee.com/Shoo1er/imgstock/raw/master/img/效果3.gif
做第三个的时，因为前面两个功能让我对这个软件有了大概的认识，所以上手起来还是比较顺的。在悬浮会显示对应的页面 本来想着用一个图片 根据触发事件显示 但是考虑到多个页面则会不同的图片信息在同一个地方 而热区得不到响应 故想到了用动态面板 动态面板有多个状态 而且对应的状态不会相冲突。由于设置图像热区被选中后跳转其他页面都会有边框显示，故给热区设置了一个透明事件处理，这样选中某一项就不会有边框显示了。
总结
从拿到任务是10.16，也就是作业发布的晚上到作业结束的晚上（10.18），学习一个新的东西用了三天的时间，三天时间很短，都是边学习边查资料边看视频边完成作业这样的一个过程。三天并不能把一个新的东西完全的学明白，但是通过这三天的学习，对自学又有更深的理解了。
从拿到题目开始对原型图概念的检索，以及寻找axure使用方法，如何使用，第一天通过自行查阅资料学习axure 发现老师给我们布置的作业，用自己的话来说是产品经理去设计UI界面，当然这个UI界面不是我们理解的就像HTML的一些效果图。原型图的意思就是UI界面并且该界面是能够交互的，具有独特的完整的功能，相当于一个成型的应用软件或者APP，也就是壳子（网站的图纸）。不过在民政学习的时候只接触软件开发，当时觉得UI界面，就只能是静态的页面，也就是一些效果图。通过原型图我发现，一个软件的开发他是有很多个过程进行分工的。就像原型图，就是PM（产品经理）负责。
而在第二天，我对原型图的概念又有新的看法，每一次看法都是建立在现有的基础上迭代更新，我看到了《网站蓝图：Axure RP高保真网页原型制作》这本书高保真的原型是给客户看的，所以在特效上花功夫是有一定意义的。就拿做一个网站原型图来说，用Axure是相对最快的，你代码能力和设计能力再强也没有Axure来的效率。而原型图如果是给团队人员看的，交互不必弄的太花哨，逻辑功能表述清楚就行了。并且在现有的时间内在auxre.com官网发现了一些针对初学者比较友好的视频，如下
同时在知乎也看到了一些实用的经验贴，比如
https://www.zhihu.com/question/21252792
还有还有万能的哔哩哔哩学习网站
第三天基本就是对前面两天所遇到的问题进行整理并尽可能实现更圆满的效果。基本上Axure可以实现大多数你见过的交互，这个自己以后可以多研究下动态面板和变量的使用，复杂的交互实现起来需要严谨的逻辑，一般要多考虑层级、变量条件和触发条件。遇到自己不知道如何下手的交互，就到网上找实例，看看别人怎么做的，看得多了就通了，其实原理就一个：通过触发条件响应事件，后面就没有什么交互能难倒自己了，当然有些交互用Axure实现成本比较高。所遇到的问题以及一些解决办法在上述的功能实现中已经提到就不阐述了。
最后说说我对原型图的理解
画原型的作用不仅仅是快速传递需求，表达想法。其实画原型也是产品经理验证自己想法的一种方式，你在实现原型的时候可能会发现自己没有考虑全或者想法有错误的地方，这样解决完以后就能避免在开发过程中遇到这些问题。
不过不一定非要用Axure，画图、excel、手绘等都能实现原型，就像杨过学习独孤前辈的剑法，从巨剑、铁剑、木剑到最后的无剑，掌握了思路和核心，功力到了，随手的都是工具。
不滞于物,草木竹石均可为剑。自此精修,渐进于无剑胜有剑之境！
其实任何工具学起来都不难，只要你用，不断地用，不会的就找例子参考，如果感兴趣的话更好了，就像这三天我用Axure实现了一个看似复杂的交互不知道多有成就感，心里还是美美的。
快速学习的高效方法就是，模仿+阶段性的成就感～
学习的过程就是由简变繁，由少变多 。一开始对一项新事物不了解的时候，主动去寻找资料，不断地学习。虽然一开始的方法很笨，但是随着学习的深入，掌握的方法会更多或者说在处理同一件事上你发现有更好更优的解决办法，这就是学习的过程，就和学数学一样。
浙公网安备 33010602011771号