Axure工具简介

工具简介

主要介绍axure的基本元件使用，熟悉该软件的各个功能区。

1.添加元件到画布

    在打开axure软件之后，添加元件到画布，在左侧元件库中选择要使用的元件，按住鼠标左键不放，拖到画布适合的位置后松开鼠标，如下图所示：

2. 添加元件名称

在检视面板的元件名称文本框输入元件的自定义名称，这样方便后面制作原型的过程中，设置元件属性等时便于查找元件，如下图所示：

3.设置元件位置/尺寸

元件的尺寸与位置可以通过鼠标拖拽，也可以在快捷功能或元件样式中进行输入调整。

x：指元件在画布中的x轴坐标值。

y：指元件在画布中的y轴坐标值。

w：指元件的宽度值。

h：值元件的高度值。

在输入数值调整元件尺寸时，可以在样式中设置，让元件保持宽度比例，如下图所示：

4.设置元件默认角度

方式一：选择需要改变角度的元件，按住<ctrl>键的同时，用鼠标拖动元件的节点到合适的角度。

方式二：在元件样式中进行角度的设置，元件的角度与元件文字的角度可以分开设置，如下图所示：

5.设置元件颜色与透明

选择要改变颜色的元件，但击快捷功能区中的背景颜色设置按钮，选取相应的颜色，或者在元件样式中进行设置，如下图所示：

6.设置形状或图片圆角

可以通过拖动元件左上方的圆点进行调整，也可以在元件样式中设置圆角半径来实现，如下图所示：

7.设置矩形边框粗细，颜色，实/虚线

矩形的边框可以在样式中设置显示全部或者部分及颜色实线/虚线，如下图所示：

8.设置线段/箭头

线段，箭头的样式可以在快捷功能或者元件样式中进行设置，如下图所示：

9.设置元件文字边距/行距

在元件样式中可以设置元件文字的行间距与填充。

行间距：指文字段落行与行之间的空隙。

填充：指文字与形状边缘之间填充的空隙。

如下图所示：

10.设置元件默认隐藏

选择要隐藏的元件，在快捷功能或者元件样式中勾选隐藏选项，如下图所示：

11.设置文本框输入为密码

文本框的属性中选择文本框的类型为密码，如下图所示：

12.限制文本框输入字符位数

在文本框属性中输入文本框的最大长度为指定长度的数字，如下图所示：

13.设置文本框提示文字

在文本框属性中输入提示文字，提示文字的字体，颜色，对齐方式等样式可以单击提示样式进行设置。

提示文字设置主要在用户开始输入时，提示文字消失，或者鼠标进入文本框时提示文字消失，如下图所示：

14.设置文本框回车触发事件

文本框回车触发事件是指在文本框输入状态下按回车键，可以触发某个元件的鼠标点击事件，只需在文本框属性中提交按钮的列表中选择相应的元件即可，如下图所示：

15.添加判断条件

在case编辑界面中单击添加条件按钮进行添加条件，如下图所示：

16.设置条件逻辑关系

设置一个执行动作必须同时满足多个条件，或者仅需满足多个条件中的任意一个，需要在添加条件界面进行设置，如下图所示：

17.case条件转换

为多个条件判断关系时，只需要在相应的case名称上单击鼠标右键，选择切换if或else if，如下图所示：

18.载入元件库

如果要使用自己的元件库，用户可以自己进行本地载入，在元件库点击载入元件库即可，如图所示：

19.切换元件库

在元件库功能面板中，可以通过点击元件库列表，选择不同元件库进行使用，如下图所示：

20.设置页面居中

在页面样式设置中选择页面居中的按钮，页面居中是指在浏览器中查看原型时页面内容居中显示，如下图所示：

21.设置页面样式

可以设置页面背景颜色，背景图片，草图，黑白，如下图所示：

22.全局变量设置

全局变量是一个数据容器，就像一个U盘，可以把需要的资料存入，随身携带，在需要的时候读取出来使用，全局变量的设置在项目——全局变量中，如下图所示：

23.局部变量设置

局部变量在编辑值/文本的界面中进行创建，通过在插入变量或函数列表中选取使用。

局部变量能够在创建时获取多种类型的数据，如下图所示：

24.公式的格式及类型

设置格式为[[公式内容]]，公式内容可以进行计算，例如：[[3*18]]，获取结果为：54；公式运算结果自动与公式外的内容连接在一起，形成一个字符串，例如：[[3*18]]名同学，获取的54名同学。变量和函数需要写在一个公式里面[[]]，才能正确获取变量值或者函数运算结果，如下图所示：

25.文件备份与恢复

开启软件自动备份功能，可以有效地帮助我们降低因误操作，软件崩溃，断电等异常时，未保存或者损坏文件的风险，文件的备份与恢复在文件菜单中进行相关操作，如下图所示：

26.设置自适应视图

自适应视图是指编辑多种分辨率的原型，设备中查看时，系统会根据自身分辨率，自动与分辨率相适合的原型进行匹配，并显示出来，自适应视图在项目，自适应视图中进行设置，如下图所示：

27.设置元件的不同交互样式

单击元件属性中各个交互样式的名称，即可设置元件在不同状态时呈现的样式，这些样式在交互触发时，就会显示出来，如下图所示：

28.切割/裁剪图片

在图片的元件属性中，设有切割和裁剪功能的图标，也可以使用快捷键Ctrl+6切割，Ctrl+7裁剪.

切割：将图片进行水平与垂直的切割，将图片分开。

裁剪，将图片中的某一部分取出来。

如下图所示：

29.嵌入多媒体文件/页面

基本元件中的内嵌框架可以插入多媒体文件与网页，双击元件或者在属性中点击框架目标页面，在弹出界面进行设置URL地址或文件，如下图所示：

30.快速预览原型

预览原型的快捷键为F5，或者单击快捷功能中的预览图标进行预览，导航菜单，发布-预览选项中进行预览的设置，如下图所示：

31.生成HTML查看原型

生成原型的快捷键为F8，或者单击快捷功能中的生成图标，选择生成HTML元件进行生成，还可以通过导航菜单，发布-生成HTML文件，中进行生成，如下图所示：

生成的HTML需要存放在文件夹中，如下图所示：

32.生成HTML部分页面

可以只生成原型中的部分界面，如下图所示：

33.标志

标志设置，可以为原型添加图片标识或者文字标题，原型发布后会显示在工具栏的页面面板中，如下图所示：

34.发布到AxShare

发布到AxShare时指将做好的原型发布到Axure官方提供的空间中，通过自动生成的网址进行访问，快捷键为F6，发布需要先注册账号，注册地址为：https://share.axure.com，如下图所示：

点击发布到AxShare后，弹出如下设置界面：

点击发布后，成功发布会自动生成一个网站，如下图所示：

35.Web字体设置

当原型使用一些特殊字体时，在没有安装该字体的设备上将无法正常显示，Web字体可以较好地解决这个问题，Web字体使用包含两种方式。

方式一，连接css文件，设置简单，需要网络以及在校css文件支持。

方式二：@font—face，支持本地字体与在线字体，设置有点复杂。

选择@font-face

36.总结

通过对本章的了解，初学者都可以设计基本的原型界面以及发布原型了。