第一章 元件功能概述
1.1 鼠标的操作
元件拖到画布,小圆点选图形,边缘节点调整宽高,小三角改变圆角半径
![](https://upload-images.jianshu.io/upload_images/6315694-27d0ec20b73f2dfa.png?imageMogr2/auto-orient/strip|imageView2/2/w/504/format/webp)
![](https://upload-images.jianshu.io/upload_images/6315694-87520ad85d8f9fb2.png?imageMogr2/auto-orient/strip|imageView2/2/w/390/format/webp)
![](https://upload-images.jianshu.io/upload_images/6315694-ea2e9c56cdbf225b.png?imageMogr2/auto-orient/strip|imageView2/2/w/275/format/webp)
1.2 元件的使用
默认元件库、流程图元件库、图标元件库
1.2.1 默认元件库
1、基本元件
搭建页面内容的形状、图片、线段、热区、容器元件。
![](http://upload-images.jianshu.io/upload_images/6315694-55f26609ee18147d.png?imageMogr2/auto-orient/strip|imageView2/2/w/539/format/webp)
形状:矩形、形状按钮、文本。双击元件可编辑文字。常用于页面中的一些背景形状、文字标题、按钮。
图片:双击元件可导入默认显示的图片,单击元件可直接输入文字。一般用于为页面添加各种图片或图标。
线段:水平线、垂直线。常用于页面中的一些分隔线。
热区:透明元件。最常用的是它的透明特性。
动态面板:容器类元件。
内联框架:容器类元件。可以在页面的某个区域嵌入项目中的其他页面或某个URL指向的网页,以及一些多媒体文件(如 MP3、AVI、SWF等)。
中继器:容器类元件。
2、表单元件
获取用户输入的元件
![](http://upload-images.jianshu.io/upload_images/6315694-a6f34bfcf871abc5.png?imageMogr2/auto-orient/strip|imageView2/2/w/537/format/webp)
文本框:单行/多行文本,获取用户输入的文字。
列表框:下拉列表框/列表框,获取用户选择的选项。双击元件进行设置。
单选按钮:选中、未选中。互斥。
复选框:选中、未选中。自由选择。
提交按钮:编程中,表示将用户填写完成的表单数据提交到服务器。
3、菜单和表格元件
在搭建对样式无要求或要求较低的线框图时,使用起来比较方便。
![](http://upload-images.jianshu.io/upload_images/6315694-700a915cc1387498.png?imageMogr2/auto-orient/strip|imageView2/2/w/287/format/webp)
树:垂直方向的菜单,节点可以展开与折叠。
表格:可以添加行与列,但不可以合并多个单元格。
水平/垂直菜单:可以添加菜单项和子菜单项。
4、标记元件
进行功能标注或展开界面业务流程。
![](http://upload-images.jianshu.io/upload_images/6315694-24ad3bf53f63fcf3.png?imageMogr2/auto-orient/strip|imageView2/2/w/526/format/webp)
页面快照:指向项目中某个页面,呈现该页面的缩略图。
形状/线段元件:通过基本元件可制作。
第2章 查看原型
2.1 本机预览
以web服务的方式,在浏览器中查看原型,是本机的IP地址和页面路径的组合。
![](https://upload-images.jianshu.io/upload_images/6315694-da607284008256d5.png?imageMogr2/auto-orient/strip|imageView2/2/w/743/format/webp)
2.2 共享发布
注册Axure Share账号,单击【共享】,设置访问密码,登录http://share.axure.com进行管理。成功发布一个项目后,通过自动生成的URL地址访问查看原型。
![](http://upload-images.jianshu.io/upload_images/6315694-fe49be8ba53158d9.png?imageMogr2/auto-orient/strip|imageView2/2/w/988/format/webp)
2.3 在线反馈
在预览原型时,工具栏带有“讨论”功能。
![](http://upload-images.jianshu.io/upload_images/6315694-9f9f1cac1581ec63.png?imageMogr2/auto-orient/strip|imageView2/2/w/564/format/webp)
第3章 元件常用属性
3.1 元件属性
1、文本框
![](https://upload-images.jianshu.io/upload_images/6315694-396eabf7f6c77264.png?imageMogr2/auto-orient/strip|imageView2/2/w/650/format/webp)
![](https://upload-images.jianshu.io/upload_images/6315694-db9f99593d90ce0f.png?imageMogr2/auto-orient/strip|imageView2/2/w/557/format/webp)
2、图片
除了导入图片的设置,其他设置都和形状一样。
· 双击实现导入更快。
· 【属性】-【清初】恢复元件原来的样式。
![](https://upload-images.jianshu.io/upload_images/6315694-2e32a212d6c3f503.png?imageMogr2/auto-orient/strip|imageView2/2/w/527/format/webp)
3、单选按钮
![](https://upload-images.jianshu.io/upload_images/6315694-19cfd989ef59354c.png?imageMogr2/auto-orient/strip|imageView2/2/w/449/format/webp)
为这些单选按钮添加相同的组名称,即可设置多个单选按钮中某一个被选中。
4.组合属性
![](http://upload-images.jianshu.io/upload_images/6315694-088b3647bd5ab8d4.png?imageMogr2/auto-orient/strip|imageView2/2/w/35/format/webp)
3.2 元件交互
设置每一个交互时,需要遵循的过程:
![](http://upload-images.jianshu.io/upload_images/6315694-5f1abd162d572b44.png?imageMogr2/auto-orient/strip|imageView2/2/w/548/format/webp)
例子:单击按钮等待3秒后打开百度
![](http://upload-images.jianshu.io/upload_images/6315694-b372bd951e39a787.png?imageMogr2/auto-orient/strip|imageView2/2/w/1162/format/webp)
![](http://upload-images.jianshu.io/upload_images/6315694-8b28cf25cb4a53a9.png?imageMogr2/auto-orient/strip|imageView2/2/w/872/format/webp)
第4章 母版管理
通过母版解决多个页面重复内容的编辑问题,如果母版中的内容发生了改变,页面中的内容也会同步改变。
![](http://upload-images.jianshu.io/upload_images/6315694-50fe8e401841f6e2.png?imageMogr2/auto-orient/strip|imageView2/2/w/549/format/webp)
1、新建:单击母版面板-【新建】
2、重命名:右键该母版-【重命名】
3、编辑:双击该母版,则画布编辑母版的编辑区,像页面一样编辑。编辑后拖放在要用的页面即可。
4、删除:先将母版从所有关联的页面中移除。右键该母版-【使用情况】,可以看到用到该母版的页面。
第5章 标注与流程
5.1 页面快照
把每个页面分别放在不同页面中制作,再在一个页面中通过页面快照完成统一展示。
1、在不同的页面中绘制线框图
2、在汇总的页面中放入页面快照元件,再双击该元件,分别指向不同页面
3、将页面快照元件设置与页面内容相同的宽高比,勾选适应比例并将边界值设为0
![](http://upload-images.jianshu.io/upload_images/6315694-d3e919943b181ce6.png?imageMogr2/auto-orient/strip|imageView2/2/w/821/format/webp)
参考自:https://www.jianshu.com/p/6dc413c6feab