我们经常看到别人分享一些很炫酷的交互原型，其实这些原型都是由一些很小的交互点来组成。这篇文章，作者分享了一些简单的交互操作，通过这些交互组合，你也可以做出很炫酷的交互原型。

产品经理的工作日常离不开画原型，原型图分为低保真、高保真，高保真图无疑是效果最好的，而且现在企业的要求多数比较高，需要制作高保真原型图，以动态的效果做展示汇报。

那么如何制作高保真原型呢？

本文将以AXURE工具为例，讲述一些交互效果的操作指导，希望能帮助到一些产品小白们。

一、密码登录

将用户名、密码、登录按钮以及透明提示框合并成组，在case1中设定条件，当用户名和密码文本框==值为，注意符合条件应该选择任何以下条件。然后添加动作—设置文本与“提示”矩形框—设置为富文本（富文本框控件，它能够处理有格式的文本，还可以显示字体、颜色、链接、嵌入的图像等。）点击图上右下角的编辑文本设置提示文字为：用户名或密码不能为空。然后设置显示“提示”矩形框。

设置case2，设顶为变量值！=局部变量的值还是选择添加动作—设置文本—选择“提示”矩形框设置为富文本然后编辑文本为：”用户名或密码错误“之后选择显示“提示”文本框即可实现。

设置case3，重复上述操作。

二、验证码倒计时

添加全局变量onloadvariable

设置鼠标点击时，当onloadvariable的值不等于0时设置：

步骤一：禁用“按钮”

步骤二：设置当前原件文本的值为“[[onloadvariable-1]]”秒后重新获取

步骤三：设置全局变量的值为“[[onloadvariable-1]]”

步骤四：添加等待2000毫秒

步骤五：添加“按钮”鼠标单机事件。

三、上下拖动

上下拖动页面需要添加动态面板，然后设置拖动为垂直拖动，并添加边界值设置界限

先要在最外面设置一个动态面板，作为拖动的外边框，再将需要拖动的内容组合命名也设置为动态面板。

一共设置两个动态面板，并命好名，方便后序的辨认。

选中外面一层开始设置交互： 添加了两个界限后，一个设置为顶部<=0，另一个需要打开函数设置界面设置函数。

四、轮播图

如下图所示，设置动态面板向左右拖动时候的效果。

我们所有的页面都是基于主动态面板完成的，实现动态面板之间的切换，所以所有的页面几乎都是在主的动态面板之下，要实现拖动以及轮播等效果就需要再次建立动态面板，所以需要动态面板套动态面板，需要功能越多，套的层数就越多，故动态面板需要命名规范，以及动态面板下的每一个面板都要命名规范，方便后期不会乱掉，同时思路得清晰，不能混乱，要理清楚哪一层是哪一层的动态面板。

绘图时也要尽量将每一个元件命名规范，一个页面尽量都组合在一起方便进行交互设计，不然很容易选错元从而达不到我们想要的操作。

比如密码登录就需要设置三种状态，账号密码为空、账号或密码输入错误以及登陆成功，每种状态下的值都要设置正确。

验证码倒计时使用了全局变量。全局变量，顾名思义是全局的，简单理解就是整个Axure文件中的不同页面，都可以访问使用。

因为我们知道在Axure建立多个页面后，在页面a，是无法直接改变页面b中元件的文本、选中状态、显示隐藏、移动等状态的。这个全局变量可以双击修改名称进行使用。

在没有添加新的全局变量之前，这个全局变量不能够被删除，因为在Axure中，系统要求一个项目文件中，至少有一个全局变量。

我们也可以点击加号“+”图标添加新的全局变量进行使用，并且可以在变量名称右侧，给变量添加默认值。

全局变量是Axure一个重要组成部分，其作用在交互效果是页面值传递的时候比较常见。

全局变量顾名思义是值在整个axure项目中生效，即A页面定义的全局变量在B、C中同样适用；说到全局变量就不得不说局部变量，局部变量仅对当前页面定义的变量范围生效。

用编程的思想来理解，即作用域不一样，全局变量作用域>局部变量作用域。

本文由 @晚迟 原创发布于人人都是产品经理。未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。