Axure|微信原型制作

本篇文章，我近几日在为找产品经理的工作做准备，需要了解下常用工具Axure，但说来惭愧，Axure看似简单 ，实则也非常考察逻辑能力。我计划做一个微信原型，但无从下手，开始只找到一篇三年前的文章：

原创视频|手把手教你用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，好在提高自己的业务能力，而不是既没有经验，又没有尝试地去做，空喊着要做产品经理。所以答案是这样的练习是能都帮到我的，但幅度有限。

下面放上自己做的，还不够好，只有聊天界面的一点交互，后续再更新吧。

  该原型连接为https://r7clkh.axshare.com

第二版 https://c3tldf.axshare.com