【01】Axure8.0工具栏与元件库

认识Axure8.0

由下图所示，Axure8.0主要的7个区域组成：

【1】工具栏区: 对页面进行编辑的一些快捷操作，比如复制粘贴、撤销、页面显示大小、对齐方式、字体等

【2】站点地图区:呈树形结构，可以清晰地看到当前已创建的页面以及页面间的层级关系，也可以添加、删除、重命名页面

【3】元件库区:包括有基本元件、表单元件、菜单和表格、标记元件、Flow、Icons

【4】母版区:默认为空，用于放置公用、复用的元件组

【5】检视区:包含属性设置、说明编辑、样式设置

【6】概要区:显示页面中使用到的所有元件以及相关状态

【7】页面编辑区 :承载元件，可以通过拖动元件设计页面

image

工具栏

1.钢笔、更多

• 钢笔工具可以自定义形状

• 更多：边界点、切割、剪裁、连接点、

  边界点用于设置钢笔工具绘制图形的转折点位置

  切割和剪裁作用于图片

  连接点用于调整元件连接点的位置

  格式刷：选中元件》在“更多”找到“格式刷”》选中想要复制的样式进行复制》选中元件点击应用

2.选择

• 相交选中：选中与选取相交的所有元件

image

• 含选中：选中在选区内的元件

image

3.连接

选中“连接”之后，点击元件的连接点，拖动到另一元件的连接点，将元件相连，用于实现线框图、流程图

image

4.图层顺序、组合、锁定

图层顺序：通过置于顶层|底层调整图层，或者在概要区域上下拖动进行调整、右击》上|下移一层

• 组合：应用于两个或两个以上的元件，可以给组合命名

• 对齐：选中两个及以上元件可以进行对齐操作

• 分布：应用于两个及以上元件，实现水平和垂直分布

• 锁定：选中元件锁定之后就不可拖动（比如确定页面背景大小和位置之后，可以进行锁定避免被拖动）

站点地图

• 调整页面层级关系（新增|删除页面）

• 选择主页，复制（包括分支）实现分支和页面的复制

元件库

1.选择元件库、加载元件库

• 可以打开菜单载入元件库（可以在网上下载元件库，也可以自定义）

2.创建元件库、编辑元件库、卸载元件库

• 菜单》创建元件库》输入元件库名称》新建元件》保存

• 菜单》编辑元件库》添加元件（类似于添加页面的操作）

3.改变元件大小、位置

• 改变x、y设置左边距、上边距，改变w、h设置与元件大小

4.填充元件、改变边框样式

• 选中元件设置填充颜色（可以使用取色器），同样可以添加阴影、设置线段颜色、线宽、线段类型

• 在取色盘可以点击更多，添加到自定义颜色

5.改变元件形状

• 点击元件上方的灰色小圆点选择形状，还可以通过更多选择边界点改变形状

• 点击元件上方灰色小三角可以个改变设置矩形、图片圆角大小

6.元件的交互样式、文本交互与样式

选中元件》右击》交互样式》设置鼠标悬停、鼠标按下、选中、禁用等的样式（例如鼠标移入显示图片，其中不同元件样式可能会不同）

7.占位符、热区

• 占位符：用于为不确定的元件占位

• 热区：实现局部可点击（透明可点击区域）,例如用于地图上方区域点击

8.内联框架、下拉列表框

• 内联框架类似于iFrame，从元件库中选中元件，可以引用任何以http开头的URL所展示内容。碘酒内联框架，选择链接到URL或者当前项目页面

• 在元件库找到表单元件，拖入下拉列表框元件之后，选中双击添加下拉列表项（勾选一个作为默认选项）

image

9.单选按钮、复选框

右击设置为单选按钮组，选中一个作为默认（一定要设置单选按钮组才能实现单选效果）

image

10.动态面板

• 动态面板实现Tab切换

  将设计好的tab 和内容框选中》右击转换为动态面板》重命名动态面板和状态》复制状态》修改复制状态的样式》在状态1设置tab的点击事件（设置面板状态，选择需要显示状态即可）》同样在状态2设置tab的点击事件

11.中继器

• 将中继器拖动到页面（重复器，是树级容器，包括了6个中继器动作和5个数据集动作），可以实现导入图片和数据，在交互上可以新增、删除标记行

• 在检视区找到样式属性，在中继器列表中设置行列以及列名（不能使用中文作为列名），新增列之后，要打开中继器元件复制矩形放到新增列的位置，并给矩形进行命名

• 在检视中打开用例，设置文本，添加动作为“设置文本"，在右侧选中新增的矩形，设置值为fx：插入变量或函数，选择中继器数据集（新增列名）

母版

• 可以重复使用的区域，比如说页面的导航

• 类似于页面可以拖动、设置子母版等

• 右击直接添加到页面或者从页面中移除

检视区域——页面属性、说明、样式

• 不选中元件时，检视区显示的就是页面属性——页面载入时、窗口尺寸改变时、窗口滚动时

• 编写的页面说明在HTML左边导航NOTES中显示；还可以在说明中“自定义说明字段”自定义和删除说明标题

• 可以在样式中设置背景等

检视区域——元件属性、说明、样式

• 选中元件，监事去显示元件属性，道理同上，只不过针对的对象是元件

• 选中文本——点击文本链接实现页面跳转

• 元件的说明：在预览HTML页面时元件右上角有蓝色标记，点击，弹窗显示说明

页面概要区域

• 展示当前页面所有元件、元件状态