微信 Aure 原型练习（Android 版）

2017-01-10 10:57:00

最近刚开始接触 Axure，所以做了个案例练练手，同时把过程记录了下来，希望能给新手带来一些帮助，我觉得如果想要快速学会这个软件，不要跟着教程按部就班的去学，而是尽快摸熟基本操作和概念后直接案例操作，不懂得再回过头去查去学习

1：
拖入内部框架 (w:273 x h:482)，设置从不显示滚动条和隐藏边框，并链接到主页页面
拖入顶部状态栏 (w:273 x h:20)

slides.001.png

2：
拖入动态面板 (w:1092 x h:385)，名称为内容区
要注意 y 轴坐标下移 20px 留给步骤 1 的顶部状态栏

slides.002.png

3：
在内容区（动态面板）中设置4个内部框架 (w:273 x h:386)，设置从不显示滚动条和隐藏边框，并分别链接到微信页面、通讯录页面、发现页面、我页面

slides.003.png

4：
回到主页页面下，将底部四个 menu（微信、通讯录、发现、我）交互样式设置为当按钮被选中后状态替换为绿色图标，并将微信 menu 默认选中

slides.008.png

底部四个 menu 的部件交互如下图

slides.009.png

5：
微信主页-->微信（动态面板）-->微信（中继器）
中继器项目交互：判断 talk 文字长度大于 20 时，截取第 0-20 位字符显示并在后面加上"..."，如果小于 20 就直接全部显示
Length 函数：可返回字符串中的字符数目
Substr 函数：从起始索引号提取字符串中指定数目的字符

slides.010.png

6：
拖动动态面板时
用例 2：y 轴下拉一旦超出了 100 则无法继续下拉
用例 3：模拟拖动过程中的“不跟手”效果，根据当前 y 轴坐标，每次移动的瞬间，向反方向移动回 2/3 的距离
用例 4、5 则是向上拖动的效果，根据用例 2、3 类推
注：红框区域是隐藏了的 Label
DragX 函数：获取被拖动面板左右瞬时挪动的距离；
DragY 函数：获取被拖动面板上下瞬时挪动的距离；

slides.011.png

7:
4个面板左右切换的交互
在左右拖动的过程中，需要判断是快速拖动(=500ms)
慢速拖动：在结束拖动的时候，通过“慢速拖动”判断动态面板拖动位置是否超出页面的一半(中轴)，如果超出则切换到下一页，如果没有超出则停留在当前页并回到原先的位置上
快速向左拖动：如果右边界>273，说明面板目前处于第1、2、3屏之一，而 TotalDragX<0 为负值，则可以向左拖动。
DragTime 函数：获取拖动面板的时长，精确到毫秒
This x 函数：获取当前 X 轴坐标
Math.min 函数：返回一个最小数值，使用方法[[Math.min(1,5,5.3,2,4)]]，返回值1；
toFixed 函数：指定数字的小数点位数
TotalDragX 函数：从拖动面板到松开面板时，面板在 X 轴方向移动的距离，左和上为负值，右和下为正值

slides.012.png

这里在主页的内部框架里头加了一个宽度1092的矩形，遮挡住了内部框架，如果不加的话，会与在步骤6中设置了内部框架中的四个页面纵向沿 Y 轴移动的效果产生冲突，无法实现横向沿 X 轴移动的效果，也就是说鼠标只有在绿框的1号区域内才能实现左右横向移动，且移动的才是主页页面，而要纵向移动鼠标要在2号区域内

slides.013.png

还有个细节补充一下，当你拖动到相应的面板时，底部的 menu 也要随之选中，所以我加了一个 menu 条，这里面的“移动”交互指的是当你移动动作开始的时候接触的部件，所以在移动过程中，当 menu 条接触“微信”时，选中通讯录，以此类推

slides.014.png

8：
通讯录的交互
图1：通讯录动态面板沿 Y 轴拖动
图2&图3：右侧字母索引，当鼠标移入到某字母上时，则将索引滚动到相应的位置，并显示中心的圆角矩形字母(圆角矩形要固定到浏览器)

slides.015.png

9：
通讯录详细资料交互
图2：数据集中如果 photocount(相片数量) 为0，则将 photo 动态面板收起。
如果数据集中 p3 相片为空则隐藏 p3 相片部件，否则则将 p3 的图片填充到 p3相片部件中，p2、p1也是如此。

slides.016.png

联系人名称的显示形式调整一下，之前是 Label ，改到白底矩形部件中去，并且左填充42，这样做的原因是当我们点击矩形部件的时候就可以直接获取矩形上的文字，从而作出判断。
交互动作：
图1：先添加一个全局变量 "clickname"，鼠标单击时将当前部件的 text 赋值给全局变量 "clickname"，并在父框架中打开详细资料(中继器)。
图2：给中继器添加了一个名为“详细资料”的过滤器，过滤规则是“[[item.name == clickname]]”，这样就可以只显示和"clickname"名称相同的联系人中继器，从而实现点击哪个联系人就显示哪个联系人的详细资料