第3章 元件功能概述
第1节 鼠标的操作
第2节 元件的使用
第1节 鼠标的操作
麦子：老师，老师！
小楼：干吗，干吗？
麦子：不......
小楼：呃......
麦子：我想做一个页面，但是那些元件都怎么用啊？
小楼：点住了拖到画布里面用呀！
麦子：我知道是拖进去，但是我想要一个向左倾斜的圆形。
小楼：你是仇人派来玩儿我的吗？圆形怎么倾斜？
麦子：对不起，老师！少打个“椭”字。
小楼：艹。
在Axure中，如果需要一个椭圆形，可以放入一个矩形元件到画布中，然后，点击矩形元件右上角的圆点，在弹出的形状列表中选择圆形，就能够得到一个椭圆形。在这个列表中除了圆形，还为我们提供了很多其它形状。（图3-1）
（图3-1）
椭圆的宽高，可以通过拖拽形状的边缘节点调整。（图3-2）
（图3-2）
如果想让一个形状倾斜或者说旋转一定的角度，如果不要求角度很精确，我们可以按下<Ctrl>键，同时，拖拽形状的边缘节点调整。（图3-3）
（图3-3）
麦子：对不起，老师！
小楼：怎么又对不起？
麦子：我其实想要个圆角矩形……
小楼：啊！！！！！
如果需要一个圆角矩形，可以直接使用形状按钮元件，也可以通过修改一个矩形为圆角矩形。在形状的左上角有一个三角形，水平拖拽这个三角形就能改变矩形的角部为圆角。在拖拽过程中，会时时显示一个数字。这个数字是圆角半径，一个圆角其实是四分之一圆，圆角半径指的就是圆的半径。（图3-4）
（图3-4）
麦子：对不起，老师！
小楼：（离线）
第2节 元件的使用
麦子：老师！老师！
小楼：怎么老是你！
麦子：老师你别发火嘛！我就再问一个问题就好啦！
小楼：快问！
麦子：元件库里那些元件，都是干什么用的？
小楼：你管这叫一个问题？？？！！！
一、使用软件自带元件库
在AxureRP8.0中，软件自带了三个元件库。分别是：默认元件库、流程图元件库和图标元件库。下面我按照次要到重要的顺序来介绍这几个元件库。
图标元件库（Icons）
图标元件库是Axure团队基于FontAwesome图标字体中的各种图标制作发布的形状元件，直接拖拽到编辑区即可使用，无需安装FontAwesome字体文件。（图3-5）
（图3-5）
流程图元件库（Flow）
流程图元件库，包含的是各种流程图的形状，通过这些形状可以构建流程图。（图3-6）
（图3-6）
关于流程图形状的各种含义如下。
矩形：一般用来表示执行；
圆角矩形：表示程序的开始或者结束；
斜角矩形：不太常用，可以自定义；
菱形：表示判断；
文件：表示为一个文件；
括弧：注释或者说明；
半圆形：表示页面跳转的标记；
三角形：数据的传递；
梯形：表示手动操作；
椭圆形：表示流程的结束；
六边形：表示准备或起始；
平行四边形：表示数据的处理或输入；
角色：模拟流程中执行操作的角色是谁；
数据库：指保存数据的数据库；
页面快照：引用项目内某一页面的缩略图。
图片：表示一张图片。
流程图在使用时，各个形状之间的连线，需要在快捷功能中选择【连接】，通过这个连线工具绘制形状间的连接线。（图3-7）
（图3-7）
在选择【连接】开启连线工具之后，将鼠标指针指向形状的连接点，按下鼠标左键然后拖动到另一形状的连接点松开，即可完成连接。另外，点中或者双击某个连接线还可以为线段输入文字。（图3-8）
（图3-8）
连接线可以改变线段与两端箭头的样式，这个操作也在快捷功能中可以实现。（图3-9）
（图3-9）
默认元件库（Default）
默认元件库中包含了三种类型的常用的元件，在这里我做一下简要的说明。
基本元件
基本元件是搭建页面内容的形状、图片、线段、热区以及容器元件。（图3-10）
（图3-10）
形状：形状元件包括各种矩形、形状按钮和文本，常用于页面中的一些背景形状、文字标题与按钮。图3-10中的第1、2行元件除了图片都是形状元件。这些元件可以通过改变属性与样式进行互相转换。如果需要编辑这些元件上的文字，双击这些元件即可进入编辑状态，如果只是添加文字，也可以点中该元件直接输入文字。
图片：图片元件一般用于在为页面添加各种图片或图标，双击该元件即可导入默认显示的图片。如果需要为图片元件添加文字，可以点中该元件直接输入文字。修改已有的文字可以在元件上点击<鼠标右键>，菜单中选择【编辑文本】的选项，即可进入编辑状态。
线段：包括水平线和垂直线，常用于页面中的一些分隔线。这两个元件可以通过改变角度互相替代。另外，线段与形状也可相互转换。
热区：热区是一个透明元件，我们最常利用的就是它透明的特性，比如在一张图片中的两个位置上添加点击的交互，就可以在这两个位置上放置两个热区，然后为热区添加点击的交互。
动态面板：容器类元件，在之后将有详细的说明。
内联框架：容器类元件，简称框架，可以在页面的某个区域嵌入项目中的其它页面或某个URL指向的网页，还可以嵌入一些多媒体文件，例如：MP3、AVI、SWF等文件。
中继器：容器类元件，在之后将有详细的说明。
基本元件使用非常广泛，常见的页面基本上都可以用这些元件完成搭建。
表单元件
表单元件是用来获取用户输入的元件。在前端开发中，通过此类元件可以制作各类表单，并通过提交按钮，将用户输入的内容提交至服务器。（图3-11）
（图3-11）
文本框：单行文本框和多行文本框用于获取用户输入的文字。
列表框：下拉列表框和列表框用于获取用户选择的选项。元件默认的选项可通过鼠标双击元件，在弹出的窗口中进行设置。
单选按钮：具有选中与未选中两种状态。一般在使用中会有多个单选按钮，并属于互斥关系，只允许用户选择其一。
复选框：具有选中与未选中两种状态。可单独使用，也可多个一起使用，一般表示用户可自由选择或者取消选择。
提交按钮：在编程开发中，该元件被点击时，能够将用户填写完成的表单数据提交到服务器。但是，在原型制作中不涉及与服务器的交互，所以显得多余，特别是它的样式不能调整又只有几种简单的交互触发，所以一般我们都会用基本元件中的形状按钮或图片按钮来代替它。
菜单与表格元件
菜单与表格元件在搭建对样式无要求或要求较低的线框图时，使用起来比较方便。（图3-12）
（图3-12）
树状菜单：垂直方向的菜单，节点可以展开与折叠。
表格：可以添加行与列，但不可合并多个单元格。
水平菜单与垂直菜单：可以添加菜单项和子菜单项。
菜单与表格元件的常用操作，例如添加删除行、节点或菜单项等，可以在节点、单元格、或者菜单项上点击<鼠标右键>，在弹出的菜单中完成。
标记元件
标记元件主要是用来进行功能标注或者展现界面业务流程的元件。（图3-13）
（图3-13）
页面快照：能够指向项目中的某个页面，呈现该页面的缩略图。
除页面快照之外的元件都是形状或线段元件，这些元件均可使用基本元件通过改变样式制作出来。
麦子：老师，我大概对这些元件有了些印象，但是怎么通过这些元件搭建页面还是没有什么概念。
小楼：好吧！我来找个页面，指出里面都能用哪些元件来完成页面的构建，给你参考。（图3-14）
（图3-14）
麦子：老师，为什么中间那么粗啊？
小楼：什么中间那么粗？你……你怎么知道的？
麦子：我是说，为什么两个矩形并排放一起中间那么粗啊？
小楼：吓我一跳……这个跟元件的边框对齐设置有关系。
如果发现并排的形状或图片元件之间的边框比较粗。可以在导航菜单【项目】的选项列表中，选择【项目设置】，在弹出的窗口中，将{边框对齐方式}选择为【边框重合】。（图3-15）
（图3-15）
二、使用自定义元件库
麦子：老师，老师！
小楼：您好，我现在有事不在，一会再和您联系。
麦子：老师，老师！我知道你在呢！我看见你在另外一个群说话呢。
小楼：女侠，你就放过我吧！
麦子：老师，你别这样嘛！我就是想问问你怎么用别的元件库。
小楼：点这里，想用哪个选哪个！（图3-16）
（图3-16）
麦子：老师，这个我会！我是想问问你怎么用别的元件库，比如你网站上分享的那些。对了，就像你截图中后一个元件库，是怎么弄到软件的元件库列表中的？
小楼：这个只需要载入就可以啦。
如果需要使用其它元件库，可以在元件库面板中点击功能列表按钮，在打开列表中选择【载入】元件库。（图3-17）
（图3-17）
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/36260/
