axure新手入门基础二

一、使用软件自带元件库

在AxureRP8.0中，软件自带了三个元件库。分别是：默认元件库、流程图元件库和图标元件库。下面我按照次要到重要的顺序来介绍这几个元件库。

• 图标元件库（Icons）

图标元件库是Axure团队基于FontAwesome图标字体中的各种图标制作发布的形状元件，直接拖拽到编辑区即可使用，无需安装FontAwesome字体文件。（图2-1）

（图2-1）

• 流程图元件库（Flow）

流程图元件库，包含的是各种流程图的形状，通过这些形状可以构建流程图。（图2-2）

（图2-2）

关于流程图形状的各种含义如下。

矩形：一般用来表示执行；

圆角矩形：表示程序的开始或者结束；

斜角矩形：不太常用，可以自定义；

菱形：表示判断；

文件：表示为一个文件；

括弧：注释或者说明；

半圆形：表示页面跳转的标记；

三角形：数据的传递；

梯形：表示手动操作；

椭圆形：表示流程的结束；

六边形：表示准备或起始；

平行四边形：表示数据的处理或输入；

角色：模拟流程中执行操作的角色是谁；

数据库：指保存数据的数据库；

页面快照：引用项目内某一页面的缩略图。

图片：表示一张图片。

流程图在使用时，各个形状之间的连线，需要在快捷功能中选择【连接】，通过这个连线工具绘制形状间的连接线。（图2-3）

（图2-3）

在选择【连接】开启连线工具之后，将鼠标指针指向形状的连接点，按下鼠标左键然后拖动到另一形状的连接点松开，即可完成连接。另外，点中或者双击某个连接线还可以为线段输入文字。（图2-4）

（图2-4）

连接线可以改变线段与两端箭头的样式，这个操作也在快捷功能中可以实现。（图2-5）

（图2-5）

• 默认元件库（Default）

默认元件库中包含了三种类型的常用的元件，在这里我做一下简要的说明。

• 基本元件

基本元件是搭建页面内容的形状、图片、线段、热区以及容器元件。（图2-6）

（图2-6）

形状：形状元件包括各种矩形、形状按钮和文本，常用于页面中的一些背景形状、文字标题与按钮。图2-6中的第1、2行元件除了图片都是形状元件。这些元件可以通过改变属性与样式进行互相转换。如果需要编辑这些元件上的文字，双击这些元件即可进入编辑状态，如果只是添加文字，也可以点中该元件直接输入文字。

图片：图片元件一般用于在为页面添加各种图片或图标，双击该元件即可导入默认显示的图片。如果需要为图片元件添加文字，可以点中该元件直接输入文字。修改已有的文字可以在元件上点击<鼠标右键>，菜单中选择【编辑文本】的选项，即可进入编辑状态。

线段：包括水平线和垂直线，常用于页面中的一些分隔线。这两个元件可以通过改变角度互相替代。另外，线段与形状也可相互转换。

热区：热区是一个透明元件，我们最常利用的就是它透明的特性，比如在一张图片中的两个位置上添加点击的交互，就可以在这两个位置上放置两个热区，然后为热区添加点击的交互。

动态面板：容器类元件，在之后将有详细的说明。

内联框架：容器类元件，简称框架，可以在页面的某个区域嵌入项目中的其它页面或某个URL指向的网页，还可以嵌入一些多媒体文件，例如：MP3、AVI、SWF等文件。

中继器：容器类元件，在之后将有详细的说明。

基本元件使用非常广泛，常见的页面基本上都可以用这些元件完成搭建。

• 表单元件

表单元件是用来获取用户输入的元件。在前端开发中，通过此类元件可以制作各类表单，并通过提交按钮，将用户输入的内容提交至服务器。（图2-7）

（图2-7）

文本框：单行文本框和多行文本框用于获取用户输入的文字。

列表框：下拉列表框和列表框用于获取用户选择的选项。元件默认的选项可通过鼠标双击元件，在弹出的窗口中进行设置。

单选按钮：具有选中与未选中两种状态。一般在使用中会有多个单选按钮，并属于互斥关系，只允许用户选择其一。

复选框：具有选中与未选中两种状态。可单独使用，也可多个一起使用，一般表示用户可自由选择或者取消选择。

提交按钮：在编程开发中，该元件被点击时，能够将用户填写完成的表单数据提交到服务器。但是，在原型制作中不涉及与服务器的交互，所以显得多余，特别是它的样式不能调整又只有几种简单的交互触发，所以一般我们都会用基本元件中的形状按钮或图片按钮来代替它。

• 菜单与表格元件

菜单与表格元件在搭建对样式无要求或要求较低的线框图时，使用起来比较方便。（图2-8）

（图2-8）

                   树状菜单：垂直方向的菜单，节点可以展开与折叠。

表格：可以添加行与列，但不可合并多个单元格。

水平菜单与垂直菜单：可以添加菜单项和子菜单项。

菜单与表格元件的常用操作，例如添加删除行、节点或菜单项等，可以在节点、单元格、或者菜单项上点击<鼠标右键>，在弹出的菜单中完成。

• 标记元件

标记元件主要是用来进行功能标注或者展现界面业务流程的元件。（图2-9）

（图2-9）

                   页面快照：能够指向项目中的某个页面，呈现该页面的缩略图。

除页面快照之外的元件都是形状或线段元件，这些元件均可使用基本元件通过改变样式制作出来。

如果发现并排的形状或图片元件之间的边框比较粗。可以在导航菜单【项目】的选项列表中，选择【项目设置】，在弹出的窗口中，将{边框对齐方式}选择为【边框重合】。（图2-10）

（图2-10）

二、使用自定义元件库

如果需要使用其它元件库，可以在元件库面板中点击功能列表按钮，在打开列表中选择【载入】元件库。（图2-11）

 （图2-11）