图文详解制作快速响应的Axure原型

Posted 2020-08-08

一般在Axure中制作的原型打开页面或者链接时，会出现一段空白页等待的情况，这个Axure学习教程将教大家学会利用动态面板状态和动态面板显示边界特性，让原型演示时可以快速响应，流畅且不卡顿。

原理说明

动态面板具有状态和边界的特点，状态即在不同的条件控制下，可以让动态面板呈现不同的内容；边界特性即在动态面板内，超出边界（蓝色虚线框）的内容将不会显示在动态面板中。

利用动态面板的这种特性，我们可以得到两种快速响应的原型交互设计方法：

1.当不同内容位置不发生移动特效时，我们可以利用动态面板的状态特性实现；

2.当不同内容位置存在移动特效时，我们可以利用动态面板的边界特性，手动添加移动效果。

实例教程说明

仿照微信制作一个简单的线框原型用于说明制作方法和效果。

导航栏

导航栏位置固定，没有移动效果，存在切换效果，这里可以利用动态面板的状态特性，建立5种不同情况的状态。双击动态面板，可以调出动态面板管理器，动态面板管理器中可以对动态面板状态进行增加、删除、复制、调整顺序等操作。

依次为A，detail，B,C,D

标签栏与内容

由于聊天界面（detail）会覆盖标签栏（ABCD）,所以将标签栏置入内容的动态面板。设置一个动态面板，大小为375X603，在这个动态面板中添加5个动态面板，如下图所示，依次为A、detail、B、C、D。A与detail大小均为375X603，BCD均为375X554;他们的顺序为由底到顶，即图中最左边为最底层，最右边为最顶层，从左至右依次升高。除了A在（0,0）以外，其他的动态面板（detail、B、C、D）均在（500,0）。

交互设置

第一个交互为，点击首页聊天条，载入聊天界面（detail）。具体设置为将导航栏状态设置为detail，利用淡入淡出500ms，并移动detail到（0,0），使用缓慢退出500ms。具体效果为：点击聊天条之后，导航栏变为聊天状态，聊天主界面从屏幕右侧滑入，并覆盖的标签栏。【节省时间，可以设置所有聊天条为一样的界面和效果。】

交互设置

第一个交互为，点击首页聊天条，载入聊天界面（detail）。具体设置为将导航栏状态设置为detail，利用淡入淡出500ms，并移动detail到（0,0），使用缓慢退出500ms。具体效果为：点击聊天条之后，导航栏变为聊天状态，聊天主界面从屏幕右侧滑入，并覆盖的标签栏。【节省时间，可以设置所有聊天条为一样的界面和效果。】

detail界面返回主界面

第三个交互为，按标签栏调出不同界面。具体设置为，设置A鼠标单击时，移动detail,B,C,D到（500,0）,设置导航栏为首页状态，淡入淡出500ms。移动detail,B,C,D不设置动画，即可以直接显示指定页。B,C,D的设置和A相似。

标签A交互

标签B交互

标签C交互

标签D交互

效果与总结

由于我们的交互都在同一个界面内完成，虽然原型演示时，需要打开其他界面，但实际上他们都在同一个界面内运行，完全可以快速响应，不会因为原型界面载入而影响了测试者的体验，可以让原型演示更加真实自然。

原文来自：简书／Micro井