本篇文章,是作者想要了解下产品常用工具Axure。Axure看似简单 ,实则也非常考察逻辑能力。我计划做一个微信原型,但无从下手,开始只找到一篇三年前的文章:
虽然过去了很长时间,但作者在里面表达的原型,实现的交互,还是让我惊讶:
(点击上文蓝色标题,可阅读原文。)而作者说出视频教程,也没有后话,想来也是太忙了吧。
然后在人人都是产品经理网站找到了另一篇教程:
可做上手练习之用。所以在我练习之后,写下这边文章,一来表达感谢,二来说出感悟,以便探讨。建议读者若也是Axure新手,可以上述文章为参考制作,以此文为
一、照做是必须的,而后再思考体会
第二篇文章共分为三次发布,里面大多是操作步骤,而无前因后果的分析,不过确实很详细,大家一步一步执行完了之后,再回头看时,就会明白其中的原理,也能推出前因后果。
二、有舍有得,不必死缠烂打
有几次,我感觉自己明明是按照步骤来的,但实现的交互效果却跟作者显示的有很大不同。比如,Axure教程:微信聊天列表原型制作(一)中末尾部分,使用了[[window.top-window.bottom]]函数,我找了好一会也没 找到,文章底下第一条评论也提出了这个疑问。最后不放弃,看了第二篇教程:Axure教程:微信聊天列表原型制作(二) 才明白原来作者使用了自定义的函数。所以遇到不懂的,暂时放弃,不要纠结,因为此时你还在跟着作者思路走,没有自己的想法,不明白,不会都是正常的。所以参考第一条。
三、反思
原型制作(一)文章下,有人与作者探讨,在拉动聊天列表时,使用函数添加回弹效果,交互更逼真,但我并没有采取这种方式:
第一,太复杂,易出错
作为新手,练习是第一目的,这样复杂的的操作,一般只能了解目的,但具体函数理解不了,容易给你造成挫败感。而且我在尝试的过程中,觉得作者的函数有误。
第二、微信的交互已经发生改变
今日(2018-3-17 版本:6.6.3)微信聊天列表下拉出现小程序入口,吸引商家入驻,渴望开辟一个新的桌面应用时代;下拉至底,不会出现回弹效果,应该是很少用户会删除所有对话框,更少会沿着69个对话框,一直往下拉,如果找很久没有联系的人,也只会通过搜索进行,所以用户几乎没有拉到底的场景。
所以,我也只是使用了简单的方式,设置边界,并且是用数字而不是函数来界定底部边界。
四、原文的几点补充
1 一个小错误
3.拖一个81*24的文本框,作为姓名框,标签名称设置为Name,字体颜色黑色,字体大小20。
4.拖一个57*16的文本框,作为消息内容快照,放到姓名框下面,标签名设置为Msg,字体颜色999999,字体大小为14。
消息内容快照框显示消息部分内容,显然是比姓名框要长的。所以57*16需改为57*380
2一个补充 state2的编辑
2. 将四种未选中状态的图标均匀分布在menu上,以微信图标为例,右键未选中状态的微信图标,选择转换为动态面板,然后将动态面板标签名设置为menu_weixin,双击该动态面板,添加state2,将选中状态的微信图标拷贝到state2中。其他三种导航图标同样,以此设置为menu_tongxunlu、menu_faxian、menu_wo。
上段文字我也弄了半天才弄明白,就是这样的 四个截图均匀分布。。。。然后再逐个编辑state2,在编辑state2时,将相应的截图放进虚框内即可。此项操作最好在窗口动态面板内操作,不用新建页面,否则最后还得全选复制过来。
五、一点思考
我在练习的过程,多次思考:实际中,画原型,应该是从无到有,从抽象便具体的一个过程,那我做这么复杂的模仿步骤,有用吗?有多大用?
最后给出自己的答案:我的目的是熟悉Axure,以提高自己的业务能力。所以答案是这样的练习是能都帮到我的,但幅度有限。
下面放上自己做的,还不够好,只有聊天界面的一点交互。