新手教程 从零开始学Axure原型设计
关关 2018-07-05 来源 : 阅读 1122 评论 0

摘要:如果你熟悉了Axure的部件库,那么你可以得心应手地画出心目中产品的线框图;如果你会用Axure的母版、动态面板功能,那么你应该能够画出一些简单网站的原型图;但只有你精通了Axure的条件逻辑、变量、函数等高级交互,才能将心中的产品形态恣意地通过这款软件表现出来。

如果你熟悉了Axure的部件库,那么你可以得心应手地画出心目中产品的线框图;如果你会用Axure的母版、动态面板功能,那么你应该能够画出一些简单网站的原型图;但只有你精通了Axure的条件逻辑、变量、函数等高级交互,才能将心中的产品形态恣意地通过这款软件表现出来。

下面就给大家仔细梳理一下Axure的高级交互内容,以及如何运用Axure这款软件自带的界面规范文档来提高交付的原型在开发和设计阶段的精准度。

条件生成器

条件逻辑

if (condition 1) {

当 condition 1 为 true 时执行的动作};else if (condition 2) {

当 condition 2 为 true 时执行的动作};else {

当 condition 1 和 condition 2 都不为 true 时执行的动作};

在Javascript语言中的if-then-else语句是最常见的条件逻辑。

And和Or是条件运算符,用于连接两个或两个以上的句子。

在用例编辑器顶部有『新增条件』的选项,点击后进入条件生成器。

当我们进入条件生成器对话框时,首先看到的是满足以下『全部』或『任意』一个条件,在描述框中我们可以看到,如果选择『全部』则是『And』,如果选择『任意』则是『Or』。

 条件生成器允许用户创建条件表达式,将你需要满足的条件通过填空的形式告诉Axure。

条件案例实战——用户登录框

1. Step 1
以简书的登录框为例,截图登录框,并拖入『单行文本框』覆盖掉原有的两个文本输入框,分别命名为『用户名输入框』和『密码输入框』,将『密码输入框』的属性设置为密码,这样输入密码时会自动变成不显示的状态;拖入图片热区,完全覆盖掉原有的登录按钮,并命名为『登录按钮』。

-Step 2

假设用户名为zongxiaomiao,密码为123456。点击『登录按钮』部件,建立两个条件用例:

因为我们需要同时满足用户名和密码都正确才能登录,所以连接两个条件的是and而不是or,也就是满足全部条件而不是任意条件。

1. Step 3
如果两个条件中有一个条件不满足,则在登录框上显示如下字样:

我们将这个图片置于设计区域,将其设置为隐藏状态(右键——设为隐藏),并命名为『登录失败提示』。

同时新增用例2,设置else if true时触发的动作时显示(我们默认加载页面时会隐藏它)提示登录失败的字样,并且加入淡入淡出的动画,动画时间为500毫秒,这样加载时不会太生硬。

变量

Axure中的变量

· 局部变量:顾名思义,局部变量即在局部的动作中生效。

· 全局变量:在整个原型中都有效。当一个数据从页面A传递到页面B时就需要全局变量。
因此,局部变量可以有相同名称,而全局变量不能重复名称。默认情况下有一个叫『OnLoadVariable』的变量。变量名的命名规则是字母或数字,少于25字符,不包含空格。

变量实战案例:全局变量在页面间的动态面板交互

做出心理测试的页面间跳转的效果(具体效果可参照文末的原型展示),可以运用『全局变量』+『动态面板』来实现。大家可以先去网站做一下这个心理测试,然后构思一下如何用全局变量和动态面板在两个页面之间完成这个交互。

. Step 1
在Axure中创建两个页面Home和Page 1,在Home页面中导入测试所需的图片,并拖入下拉列表框,在下拉列表框中设置『第一张』到『第九张』的选项。注意,要想默认选项为空,则新建一个选项,输入空格键即可。

. Step 2

选中下拉列表框,点击『当选项改变时』新建用例1,新增条件为当选中项值的选项为『第一张』时(也就是用户在下拉列表中选择了第一张这个选项)。

然后退出条件设置对话框,在用例编辑器中选择『设置变量值』,在配置动作一览中新增变量『MyChoice』,并将MyChoice这个变量的值设为『第一张』

以此类推,新增9个用例,分别对应9个选项。

. Step 3

在Page 1页面中创建动态面板,拖入多行文本框,将每个选项对应的测试结果输入其中。

· Step 4

在页面交互栏新增用例『页面载入时』,设置动态面板状态,在状态下拉列表框中选择状态『Value』,并点击『名称或状态』旁的函数fx,选择我们之前设置好的全局变量『MyChoice』即可。

函数

理解了变量和条件逻辑,再来学习函数就不难了。Axure中的函数类型非常多,一共有10类,并且每一类下面还有很多细分。

除了条件逻辑、变量和函数之外,Axure还有一个特别强大的部件叫做『中继器』。但是中继器这个部件的使用频率并不是很高,在这里就不详细展开了。

简单来说,中继器扮演的是一个『数据库』的角色,但这不是一个真正存在的数据库,你可以对中继器数据集中的数据按条件进行增加、删除、修改、排序和过滤等操作。中继器用来显示重复的文本、图片和链接。

中继器由项和数据集组成。在数据集中可以填充我们预先准备的数据,这些数据可以是文字也可以是图片(右键数据输入框可导入图片)。

因为中继器是部件,所以也需要通过添加用例交互来控制动作。同时,通过变量、函数来控制其展示的数据。

Axure从入门到精通需要大量的实战练习。软件本身是不断变化的,掌握其根本的原理,融会贯通,多思考和练习就能让这款软件为你发挥最大的功效。


本文由职坐标整理并发布,了解更多内容,请关注职坐标常用软件Axure频道!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程