认识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页面时元件右上角有蓝色标记，点击，弹窗显示说明
页面概要区域
- 展示当前页面所有元件、元件状态
网友评论