[转载]Axure微信手机界面案例教程（七）如何实现微信界面左右滑动效

如何实现微信界面左右滑动效果

方法一：

一、    界面设计

1、在微信界面设计页面添加“动态面板”设置标签“微信提示页面”

 

2、编辑“动态面板”

3、 添加“动态面板”设置标签“提示信息页面”

 

4、进入编辑页面-拖入母版页—矩形元件-文本元件

5、最终效果图：

 

6、微信提示页面显示

 

二、    界面交互

交互设计用例图：

 

 

 

详细交互设计：

1、设置变量

2、 选中“信息提示页面”

3、 OnSwipeLeft（向左滑动时）所有其他用例方法如上。

4、OnSwipeRight（向右滑动时）所有其他用例方法如上。

 

方法2：

一、       界面设计修改

1、在“提示信息页面”中添加两个“动态面板”标签设为“第一条提示信息”及“进入微信”效果如下：

 

二、       界面交互

交互设计用例图：

 

详细交互设计：

1、选中“提示信息页面”，OnSwipeLeft（向左滑动时）

2、选中“提示信息页面”，OnSwipeRight（向右滑动时）用例设计方法如上。