首页 > 编程知识 正文

axure实例教程,axure 8 教程

时间:2023-05-04 06:52:42 阅读:28687 作者:4646

Axure的基本介绍

Axure是专业的原型设计工具,负责需求设计的定义; 功能和界面人员可以快速设计所需产品,其中不仅包括对软件产品的界面、交互逻辑原型设计,还包括流程图; 网站线条图。 可以导出文档。 我会详细说明这个工具。

(1)界面介绍:下图为工作区的基本页面布局。 最上面的一般是我们的菜单,左边有设计界面,左下方有目录。 其中有我们需要的大多数控件和图标,其中一些还可以自定义组件。 中央最大的区域是我们门设计的界面,右边是所用组件的所有属性、交互事件和自定义说明。

站点地图是在页面导航面板中,可以添加、删除、重命名和组织设计的页面

组件面板具有有线框图组件和流程图组件,用这些组件进行线框图和流程图的设计。 这里显示了所有组件,后面的部分是流程图组件。

线块组件经常使用图像、文本块、矩形、占位符、形状按钮、图像投影区域和动态面板。 其中,在完成一些交互行为时,动态面板使用得最多。

使用组件:

用鼠标单击选择所有组件,然后将其拖到工作区。

在编辑组件时,除了设置交互组件之外,还可以设置这些组件的填充颜色和渐变、边框颜色和粗细以及编辑文本。

的操作比较简单。 双击以选择并打开一张图像即可。

需要重新添加图像的是双击选择原始图像。

这些组件很容易操作,因此可以直接拖动到工作区使用。

可以改变尺寸、颜色、边框,也可以输入文字。 因为Axure不支持中文,所以在矩形、占位符中输入中文时可能会出现问题。

有许多矩形、占位符和形状按钮可以改变形状或相互转换。

以下构件可以更改格式和形状:

的形状会发生变化。 其中,圆角的大小可以控制,使用不同的形状得到几种组合形状。

圆角大小可控制的矩形形状发生变化; 以不同的形状组合,可以得到几种组合形状。

模块是可重用的页面,如页面模板、导航栏、页眉和页脚。

使用模块的优点是,如果更改模块,原型中使用该模块的所有位置都会一起更改。 这样可以提高效率,便于管理。

模块的面板与站点地图有点类似。 可以添加、组织和编辑。

模块的行为通常有三种类型的自定义组件作为背景

通常:这是默认状态,修改模块将一起修改页面中引用的模块。

作为背景:在页面上调用模块时,将定位并锁定较低级别。

自定义:这样的模块可以在页面上进行修改,而无需修改其他模块。 和复印件相似。

在Axure中的交互大致有4种:

定义连接

设置动作

多个条件场景

页面上的交互

当前Axure RP支持的事件包括:

OnClick :鼠标点击

OnMouseEnter :鼠标指针移动到对象上

OnMouseOut :鼠标指针移动到对象之外

OnFocus :鼠标指针处于字符输入状态(获得焦点) )。

OnLostFocus :鼠标指针离开字符输入状态(不再聚焦) ) ) ) ) ) )。

OnPageLoad :加载页面或模块

OnKeyUp:释放按钮

如下图所示,可以很好地了解事件、场景、动作的关系。

定义链接后,当一个组件响应一个操作时,可以将其链接到其他页面,如鼠标单击或跳过。

Axure提供了四种链接方法:

1、链接到正在设计的页面

2、连接外部网址或文件

3、重新装入当前页面

4、返回上一页

创建类似WEB端按钮和超链接的时间处理,使用户有在实际系统中使用的感觉,如下所示。

除了定义链接外,Axure还可以具有丰富的操作。 在Axure中,可以在所有可以出发的事件上执行这些操作。

除了以上之外,还有几个实用的功能。

在当前窗口中打开链接:在当前窗口中打开页面

Open Link in Po

pup Window:在弹出的窗口中打开一个页面

Open Link in Parent Window:在父窗口中打开一个页面

Close Current Window:关闭当前窗口

Open Link in Frame:在框架中打开链接

Open Link in Parent Frame:在父框架中打开链接

Set Panel state(s) to State(s):设置动态面板的状态转换

Show Panel(s):显示动态面板

Hide Panel(s):隐藏动态面板

Toggle Visibility for Panel(s):切换动态面板的可见属性(显示/隐藏)

Move Panel(s):根据绝对坐标或相对坐标来移动动态面板

Bring Panel to Front:将动态面板置为最前端

Set Variable and Widget value(s) equal to Value(s):设定变量值或控件值

Open Link in Parent Frame:在父页面的嵌框架中打开一个页面

Scroll to Image Map Region:滚动页面到Image Map所在位置

Enable Widget(s):把对象状态变成可用状态

Disable Widget(s):把对象状态变成不可用状态

Set Focus on Widget:设置焦点

Wait Time(s):等待多少毫秒(ms)后再进行这个动作

Expand Tree Node:展开树状节点

Collapse Tree Node:折叠树状节点

Other:显示动作的文字说明

一个事件的发生在不同的场景中结果是不一样的,比如发送信息,发送失败和发送成功返回的结果是不一样的。

在Axure里,这样的多个场景的事件,可以通过条件设置来编辑,不同的条件会触发不同的场景。

在发送信息时,有“发送成功”和“发送失败”两个场景:对于“发送成功”来说,有这样的一连串事件:显示“正在发送”、输入框变为空白、等待一段时间后、显示“发送成功”。

类似的,发送失败时也有这样一串动作。

而判断消息发送是否成功则是根据实际应用中发送的情况而定。

Axure还支持页面层级的触发事件,当载入一个页面时,就会触发OnPageLoad事件。

OnPageLoad事件可以为我们设置页面在载入时的初始状态,并可以触发一些我们需要的场景的条件。

例如,一个导航会有一个初始状态和一个选中状态,当我们从一个入口进入到一个页面时,我们希望那个对应的导航按钮时处于选中状态,此时就需要使用OnPageLoad事件来设置。

Axure中很多的交互是由动态面板来实现的。

动态面板里面可以包含多个状态,所以通过一些事件可以对动态面板的状态进行切换,以此来实现交互效果。但任何时候都是只有一个状态是可见的,或者整个动态面板是被隐藏的。

双击动态面板的线框图,会有一个动态面板状态管理的对话框,在这里可以添加、删除、重命名、组织动态面板。

动态面板的第一个状态时它的默认状态。选择编辑之后可以对其进行设计,像画线框图一样。

动态面板的显示范围是在一个蓝色的虚线框内,这个也是动态面板对事件的响应范围。

动态面板管理面板。在这里也可以对动态面板进行添加、删除、组织等操作。双击可以对其进行编辑。

有时,动态面板较多时,在屏幕上的显示会让人觉得不方便,此时可以通过点击蓝色的方块对其取消显示(不会改变它的可见属性)

动态面板有6种动作:

设置动态面板的转换状态

显示动态面板

隐藏动态面板

切换动态面板可见属性

移动动态面板

将动态面板置为最前

其中前3个用到的最多。第5个经常配合“等待时间”一起使用。可以制作一些动态效果。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。