如何用axure做动态交互效果

晚迟
0 评论 1956 浏览 7 收藏 8 分钟
🔗 B端产品经理需要更多地关注客户的商业需求、痛点、预算、决策流程等,而C端产品经理需要更多地关注用户的个人需求

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

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

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

本文将以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协议。

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

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
12858人已学习14篇文章
数字营销有着精准度高、成本较低、效果可量化等优点,很多企业都尝试了数字营销。本专题的文章分享了数字营销的相关内容。
专题
12802人已学习14篇文章
对电商行业的从业者们而言,GMV这个概念估计都不陌生,不少人也开始拿GMV作为评判各家电商平台市占率的指标之一。本专题的文章分享了GMV破亿的经验总结。
专题
45441人已学习10篇文章
什么是社群运营?社群运营怎么做?社群运营哪些坑?
专题
11868人已学习13篇文章
激活是指用户通过完成关键行为,真正成为产品的用户,而提升新用户激活则是留存用户的第一步。本专题的文章分享了如何做好新用户激活。
专题
14506人已学习12篇文章
在职场中,跨部门沟通是一个非常重要的软技能,不管是要完成日常项目,还是接手新的业务,都需要有良好的跨部门沟通能力。本专题的文章分享了如何做好跨部门沟通。
专题
33826人已学习17篇文章
作为产品经理,你真的懂什么是敏捷开发吗?