Axure教程：微信聊天列表原型制作（二）

作者： @有趣的程序员字体：[增加减小] 来源：互联网时间：2017-06-13

本文主要包含axure原型图教程,axure app原型教程,axure原型设计教程,axure制作app原型教程,原型工具axure教程等相关知识, @有趣的程序员希望在学习及工作中可以帮助到您

本文是微信原型制作练习的第二章，上一篇文章（点击查看）发出后，很多朋友进行了反馈，提出了一些修改意见，收益匪浅，这也是我分享练习过程的原因，共同进步，如果你想跟着一起操作，首先你需要按照第一章的练习先制作出原型。

首先，在开始今天的练习之，前对第一篇文章，留言提出了不使用“添加边界”来约束移动范围，而是设置判断条件，在范围内进行拖动，超出范围则还原到边界，并通过动画效果最大限度模拟微信的意见，我进行了原型修改，对比下效果十分更加接近真实产品。

使用条件判断，模拟边界限制

在上一章中，对于聊天列表拖动的边界限制直接使用了交互效果里的“添加边界”，文章发布后有朋友留言提出，边界限制不能完全真实模拟微信的动画效果，应该使用条件判断来实现。原理是，设置三种状态，在滑动范围内正常拖动，超出上下界限后，触发条件判断，设置动作，将超出范围的聊天列表移动到边界内，并配合“动画效果”，从而达到更逼真的原型模拟。

1. 选择窗口动态面板，删除第一章添加的“拖动时”的交互动作。首先设置第一种条件，在正常拖动范围内：添加case1–>编辑条件–>选择值后，单击fx。这里需要用到消息列表动态面板的top值，通过添加局部变量msglist，等于元件，选择消息列表动态面板。然后通过msglist得到top值。范围条件为msglist.top>=0，第一章中进行过说明，消息动态面板的坐标是一窗口动态面板的顶端为0 的。

同样的方法，得到msglist.bottom。范围条件为msglist.bottom<=window.bottom-window.top，window是窗口动态面板，设置方法同msglist一样。

条件设置好以后，添加动作–>移动消息列表动态面板–>垂直移动，无动画也不需要设置边界。

2. 设置第二种条件，当聊天列表动态面板的top进入了窗口动态面板的边界时，触发动作，将其还原到边界位置，从而实现边界约束。同1，设置变量msglist，设置条件msglist.top>0时，移动消息列表动态面板到绝对位置（0,0），动画为缓慢退出，时间500毫秒。

3. 设置第三种条件，此处直接“else if true”即可，其他设置均与上述步骤相同，设置聊天动态面板移动到边界位置，并设置动画效果。此处要稍作说明的是，消息动态面板移动到绝对位置（0，[[window.height-msglist.height]]），当将移动聊天面板的bottom移动到窗口动态面板的下界限时，移动动态面板的top比窗口动态面板的上界限高出距离为msglist.height-window.height，因此绝对位置的y坐标需要移动到[[window.height-msglist.height]]

设置完成后，预览原型效果，发现比上篇文章使用的”添加边界”效果，确实稍好一些。

下面开始本章的练习，接着上篇文章的原型，继续丰富原型功能，本篇要实现导航列表的切换，即能够切换“微信”“通讯录”“发现”和“我”四种页面。

第一步：制作导航菜单栏

1. 制作一个长480，宽65的矩形框，保留下边框，下边框颜色为CCCCCC，标签名设置为menu，四个导航图标，直接截取微信的原图即可，没种导航需要截取选中和未选中两种状态。

2. 将四种未选中状态的图标均匀分布在menu上，以微信图标为例，右键未选中状态的微信图标，选择转换为动态面板，然后将动态面板标签名设置为menu_weixin，双击该动态面板，添加state2，将选中状态的微信图标拷贝到state2中。其他三种导航图标同样，以此设置为menu_tongxunlu、menu_faxian、menu_wo。