Axure的基本介绍及其使用


Axure的基本介绍

Axure是一款专业的原型设计工具, 让负责定义需求设计;功能和界面的人员能快速设计出所需产品,其中不仅包含了对软件产品的界面,交互逻辑的原型设计,还包含了流程图;web网站的线框图,并且能导出说明文档。下面将对该工具进行详细介绍:

(1)界面介绍:下图即为工作区的基本页面布局。顶部的一般就是我们的菜单,左部是设计的界面,左下方是元件库,里面有我们需要的大部分控件和图标,其中还可以自定义组件,中部最大区域就是我门的设计界面,右边是用到的组件的所有属性,交互事件,和自定义说明。

 

站点地图是一个页面导航面板, 在这里面可以对所设计的页面进行添加、删除、重命名和组织 

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

线框图组件中,常用的有图片、文本块、矩形、占位符、形状按钮、图片影射区域、动态面板。其中,在完成一些交互动作时,动态面板用的最多。
组件的使用:
  所有的组件都是用鼠标单击选中后拖入到工作区域.
  对组件的编辑除了交互动作的设置之外,还可以对这些组件进行填充颜色或渐变、设置边框颜色或粗细、以及编辑文字。

 

 

 

图片的操作比较简单,双击,选择一张图片打开即可。
    需要重新添加图片是,在原来的图片上双击再选择。

这几个组件的操作都比较简单,直接拖入到工作区域使用即可。
    可以改变尺寸、颜色、边框,可以输入文字。由于Axure对中文支持不好,所以有时在矩形、占位符里输入中文时会出现问题。
    矩形、占位符、形状按钮都有很多形状可以变化、彼此之间也可以相互转换。

下面的构件可以对格式以及形状进行修改。

 

矩形的形状变化,其中,圆角的大小是可以控制的,使用不同的形状得到一些组合形状。
 

 

矩形的形状变化,其中,圆角的大小是可以控制的; 使用不同的形状进行组合可以得到一些组合形状。

 

 

 

 

 模块是一种可重复利用的页面,比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过模块来调用。
   使用模块的好处是:修改模块时,原型中所有使用该模块的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。
   模块的面板和站点地图有点类似。可以添加、组织、编辑。

 

 

模块的行为有三种:正常、作为背景、自定义组件
正常:这是默认状态,就是修改模块时,引用到页面的模块会跟着一起修改。
作为背景:当把模块调用到页面时会放置底层并且锁定。
自定义:这种模块可以在页面中进行修改而不会引起其他模块变化,类似于复制。

 

 

Axure里的交互大致有四种:
     ① 定义连接
     ② 设置动作
     ③ 多个条件场景
     ④ 页面上的交互

目前Axure RP  支持的事件如下:
  OnClick:鼠标点击
  OnMouseEnter:鼠标的指针移动到对象上 
  OnMouseOut:鼠标的指针移动出对象外 
  OnFocus:鼠标的指针进入文字输入状态(获得焦点) 
  OnLostFocus:鼠标的指针离开文字输入状态 (失去焦点) 
  OnPageLoad:页面或模块载入
      OnKeyUp:   释放按键

 

 

如下图,可清晰看出事件、场景和动作的关系。

 

 

 

 

 

定义链接可以让一个组件响应一个动作时(如鼠标点击、飘过)链接到其他页面。
在Axure里提供了四种链接方式:
1、链接到设计中的页面
2、连接到外部网址或文件
3、重新载入当前页面
4、返回上个页面
 

 

 

 

 如下所示,即可创建类似于我们在WEB端的按钮或者超链接的时间处理,让用户能有类似在实际系统中使用一般。

 

 

除了定义链接之外,Axure里还可以设置丰富的动作,在Axure里,任何可以出发的事件中都可以执行这些动作。

 

 

 

 

 除以上之外,还有一些可以比较实用的功能。

Open Link in Current Window:在当前窗口打开一个页面
Open Link in Popup 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个经常配合“等待时间”一起使用。可以制作一些动态效果。

 

 

 

 

 

 

 

 

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM