结合了一些最新版本的样式,以微信读书为标本做了Axure原型学习,enjoy~
首先要感谢人人都是产品经理专栏作家@杨文强Kpaladin 老师,无私奉献了微信读书原型教程。杨老师的原文链接:http://www.woshipm.com/rp/231529.html
在新手学习Axure的这条路上,个人认为一定要选择一个简单易懂的原型坚持练习,在练习的过程中遇到的困难再去学习,这样逐步深入会对Axure的学习有更大的帮助,实践出真知嘛。
我做的基本和杨老师的原型一样,但是结合了一些最新版本的样式,由于时间问题有些界面的改的有些混乱,但毕竟也只是为了学习Axure,相同的做法我基本都放弃了。
杨老师在文中写的教程我就不再写了,建议大家多多学习,然后我选择几处做的时候认为不好理解的:
一. 底边栏切换
教程中的内容我没看懂,就用了最笨也最好理解的方式实现的,将底边栏每个模块转换成动态面板,设置属性如有图即可,右图我选择了想法的设置。
因为不清楚实际的产品经理会不会这么做,希望能有高人指点一下这个切换的做法。
二. 内容上下滑动并自动回弹
第二步:放到合适的位置再次转换成动态面板,注意是转换了两次,区分为:内容展示窗口(第二次转换的动态面板名称)和内容(第一次转换的动态面板名称)。所以设置内容展示窗口的动态面板大小只是调整展示窗口的大小。
第三步:设置局部变量
解释一下我设置的内容,showyinsi=内容展示窗口(动态面板),Daoyan=内容(动态面板)
再加一个左右滑动的回弹设置,同理,只是把Y坐标换成X坐标就行了。
三. 点击后置灰
四. 滑动的小按钮
我不知道有没有简单的做法,这个挺麻烦的,用一个圈和一个条形框组合而成,但是如果熟练使用动态面板的话也是很好实现的。
和内容上下滑动回弹一个原理,但是这次需要将小圆圈和条形框分别转换成动态面板,分别设置两层(蓝色和灰色),当点击时切换效果。
总结来说,在学习使用的过程中,动态面板的使用非常重要,方便叠加和切换;另外还有热区的使用,左右翻页和点击弹出我几乎都是使用的热区点击实现的。
本文演示地址:https://sfk07q.axshare.com
原型文件下载地址:https://pan.baidu.com/s/1ySV6SKPr0hbRpEfsJLfreQ
密码: baqi
以上是作为新手的练习内容,做的不太好,也不太成熟,希望大家多多指正,有问题可以直接留言。