axure使用详解—24步

Axure的软件界面总的来说，可以分为9大模块

1. 菜单栏：和大部分的软件界面一样，都是一些常规的文件、编辑、视图……

2. 工具栏：是页面进行编辑的一些快捷操作，主要有字体设置、大小设置、页面显示大小和Axure本身自带的一些快捷操作等

3. 站点地图：呈树状结构、可以添加、删除页面、也可以对设计中的页面进行重命名操作

4. 部件区域：组件集中地带：矩形组件、图片组件、动态面板组件……使用方式是直接拖动部件到页面编辑区域

5. 母版区域：共用，复用

6. 页面编辑区域：拖动相关的部件进行线框图编辑和交互具体的实施

7. 页面交互区域：

8. 部件属性区域：组件的注视、组件的交互、组件的属性编辑

9. 动态面板区域：设置动态面板的可视与隐藏

二． 生成网页原型的三种方法

方法一：菜单生成法   

路径： 生成——原型——弹出框  如图：

方法二：工具栏，快速按钮生成法

方法三：快捷键生成法：直接按键盘F5，即可生成网页原型

 弹出框：无论使用上面哪一种方法生成原型，最终都会弹出以下这个弹出框（如图）

我们需要做三步动作：

1. 目标文件夹：即我们要生成的网页原型文件要存放的位置，默认存放在

  我的文档》我的AXURE RP原型  文件夹中，如果你不想放在默认的位置，也可以点击进行自定义存放。

 2. 选择浏览器或者不打开，一般选择默认浏览器

 3. 点击“生成”按钮，生成网页原型，生成过后，如果你选择了默认浏览器，软件会直接启动你的浏览器，并打开生成的原型页面，如图：

 一个简单的登录窗口，就生成了！你也试试吧！

三． 如何关闭IE浏览器在生成原型时候的安全警告

一般情况下，如果你的浏览器是IE的话，在每次生成网页原型的时候都会弹出如下安全警告，如图：

暂时性去除方法：单机鼠标右键，选择容许阻止内容

 彻底的方法：工具——internet选项——弹出窗口——选择高级——把允许活动内容在我的计算机上的文件中运行”，打上对勾点击“应用”即可。

四.在chrome中使用axure生成原型的问题

五. 站点地图区域

站点地图呈树状的，以主页为根节点，可以方便我们对网站整体模块和不同栏目、功能划分有一个很清晰的了解，同时也方便我们对网站整体页面进行管理（添加、删除、重命名、调整层级、调整顺序）

：选择一个节点，点击这个按钮可以实现在这个节点下面添加子页面

：首先选中一个页面，然后点击这个按钮，可以实现页面的删除，也可以单击右键选择删除

注：如果当前页面下含有子页面，Axure会自动提示当前页面有子页面，点击提示中的“确认”后会同时删除所有子页面

：选中一个页面，点击这个按钮可以向上调整页面的排序

：选中一个页面，点击这个按钮可以向下调整页面的排序

：选中一个页面，点击这个按钮可以调整页面的层级（降级）

 ：选中一个页面，点击这个按钮可以调整页面的层级（升级）

：选中一个页面，点击这个按钮可以进入页面编辑状态

：搜索页面，在页面过多的时候可以使用，平时用的少

 页面重命名：

将页面结构生成流程图：

 组件区域也叫做部件区域，英文为widgets，还有人称之为控件区域，组件是axure事先准备好的网站项目常用的零件，比如一些基本的页面元素

Axure默认存在2个组件库，分别为线框图和流程图。同时我们也可以自己去制作一些组件加载进来，或者从网络上下载一些其他网友制作的组件

六． 认识axure部件库中各个部件的属性

 在axure中每一个部件都有自己的属性，下面这个表格，我们就首先来了解认识一下！

我们在后面的组件使用中，都统一使用“从部件区域拖拽图片组件到页面区域中”

1. 图片载入

2.

 将图片组件拖拽到页面区域

 双击图片组件

 选择合适图片，点击打开

 载入图片时会询问是进行优化。

载入图片时会询问是否自动调整图片大小。

2. 图片尺寸大小调整

3. 悬停图片设置

以同样的操作方式，我们还可以设置鼠标按下图片、编辑选中图片、编辑禁用图片

4. 图片切割

选择图片，单机右键，选择切割图片

根据需要，可以选择 十字切割，横向切割，纵向切割

在图片切割状态下，按下键盘上的ESC键或者取消按钮，可以退出切割状态

 以上内容都比较简单，只需要每一个菜单都去尝试一下 就可以知道 具体怎么去使用了！一定要自己去尝试下！

 八.文本面板——axure线框图部件库介绍

文本部件用于在页面中显示文字，对于文字的格式可以随意的更改，设定不同的字体、尺寸和颜色。

特别注意：文本面板的高度无法直接调整，它的高度是随着字体的大小自动变化的

在版本中，对文本的排版都有2个位置，可以进行调整，如图所示，设置文本的字体：

 设置文本的字体、颜色、大小

2. 设置文本的行间距

     Axure 版本新增的属性：调整字体的行间距，当有多行文本的时候，我们可以像在word中一样去设置文本的行间距，这个是新增的功能，以往我们需要调整文本的行间距需要拖动多个文本面板进行布局！

3. 给文本设置超连接

在之前的版本都是有一个单独的超链接组件的，和文本组件最大的区别就是，超链接组件的颜色是蓝色的并且有下划线，版本后把这个组件融入到了工具栏中，不过个人认为这个组件的可用度并不大，因为axure本身提供了交互设置区域。

第一步：选择需要添加超链接的文本

第二步：单击工具栏的超链接按钮

第三步：在弹出的对话框中输入需要连接的地址，单击确定即可

九.矩形、占位符组件——axure线框图部件库介绍

 矩形组件和占位符没有太多的区别，这里我们主要讲解矩形组件的操作和使用，占位符的操作各位可以按照矩形的操作方法进行练习一下。

矩形组件是一个矩形，它可以用来做很多的工作，比如页面上需要一块蓝色的背景，就可以用一个填充为蓝色的矩形组件，我们还可以用它来做页面布局，是我们最常用的部件。

 1. 可以用来做页面布局

2. 可以变化成为其他的形状：三角形、圆形、椭圆等很多的形状

3. 可以填充颜色：用着背景和层次

4. 可以用来制作表格

5. 可以直接输入文字

6. 可以添加很多的交互

 首先我们将矩形组件拖动到页面编辑区域

1. 调整矩形的形状：单击鼠标右键》选择编辑按钮形状》选择形状》选择需要变换的形状

具体对应的每一种形状，自己尝试一下。比如我们在做导航的时候，就需要顶部是圆角的矩形。

2. 练习矩形的颜色填充和渐变

如果要出现那种很有质感的填充效果，必须选择线性渐变，并且在数值填充处输入90

3. 屏幕取色器的使用

 有时候，我们需要获取其他地方的颜色的16进制值，可以借助颜色取色器，通过直接在颜色输入宽输入数值的话会更加精准

 屏幕取色器下载

十.水平线、垂直线——axure线框图部件库介绍

1. 将水平线、垂直线拖动到axure页面编辑区域，如图：

 2. 水平线、垂直线相关属性设置

主要属性有、线条的颜色、粗细、线条的样式、箭头的样式

 十一. 图片热区——axure线框图部件库介绍

本文标签： axure , 图片热区

 首先，我们将图片热区组建拖动到axure页面编辑区域

1. 图片热区为页面图片或者其他部件添加热区，添加交互

  我们一般在做专题的时候，会遇到一些组合商品，但是又需要单独分别设置连接，如果是2张图片还好办点，可是如果和下图一样是集成在一张图片中的，可能就需要我们借用图片热区组件，给每一束鲜花添加热区，然后再设置交互，在新窗口打开链接地址。

我们为上面的图片添加热区，设置点击鲜花图片，单独开新的连接地址

2. 图片热区作为页面锚点的使用

我们经常在有些网站看到一些楼层快速直达的链接按钮,如图:

其实,使用axure的页面锚点功能我们也可以制作出类似的效果

 对于拖动出来的图片热区,我们必须首先给他设置标签,这样在设置交互的时候,我们才知道要滚动到哪一个锚点

 如果页面没有发生相应的滚动效果，可能是你的页面设置不够长，随便放上个组件，把页面撑长。

页面够长了，点击按钮时才能体现出滚动效果。

 十二. 文本框、文本编辑框、按钮——axure线框图部件库介绍

1. 与文本面板组合设计表单

文本框主要是在设计页面表单的时候，用的最多，通过与文本面板的组合使用，下面我们通过文本面板和文本框设计了一个简单的注册表单

对于，文本框中的文字，只需要双击即可编辑文字

 2. 注册表单中的密码遮罩设置

 选中需要设置密码隐藏的文本框，单击鼠标右键》选择编辑文本字段》选择隐藏文本（密码框）即可

3. 文本框、文本编辑框组合设计留言表单

 文本编辑框，适合做大面积内容输入的设计，比如一般的编辑器

十三. 如何安装（装载）axure组件（部件）

我们在网络上经常可以下载到很多网友精心设计的axure组件，这些组件给我们节省了很多的时间，方便了我们进行原型设计，可是对于很多刚刚接触axure的朋友就遇到了2个问题：

第一：到哪里去下载这些组件

1. 精选组件：（我会不断去搜索常用的组件供大家下载）

2. axure官方组件下载：（提示使用谷歌浏览器可以翻译英文）

精选组件下载：   （必须是会员，而且需要虚拟币）

第二：如何安装已经下载到本地的组件库

 1. 点击部件中的 线框图下拉，选择 载入部件库

2. 选择部件的所在位置，并选中

3. 载入后的效果，单击选中axure图标16*16，可到对应的组件库中

使用和线框图中的组件方法一样，都是直接点击选中然后直接拖拽到页面编辑区域，部分组件也可以进行相应属性的设置

十四. 动态面板——axure线框图部件库介绍

1、什么是Axure的动态面板

按照Axure官方网站的解释 ：动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理 解成一个的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。 像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。

简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态

     “动态面板组件式axure中功能最强大的部件，是一个化腐朽为神奇的组件。通过这个组件，我们可以实现很多其他原型软件不能实现的动态效果。”《网站蓝图axure》

        一直想把动态面板的内容，放在最后面才介绍，因为这个组件，在刚开始学习的时候，很难让人去理解。其实如果不考虑复杂的交互行为，这个动态面板不去搭理她，我们也能设计出满足我们需求的线框图，但是想交互更加完美就必须见识一下动态面板的魅力。

 2、Axure的动态面板可以用来做什么

1）tab式页签的切换效果：Axure的官方给出的实例就是这个

2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。

3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。

4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。

5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。

 3. 关于动态面板和其中状态的理解

其实动态面板，我们可以这样的去理解它，首先动态面板是一个大的容器，这个容器中可以有很多的状态，在每一个状态中，都可以放置一定的内容，然后我们通过事件来选择显示动态面板的相应状态

在默认的状态下，只有位置一的内容是可见的，其他的是隐藏的，如果你想其他状态可见，只需要把这个状态移动到最上面

4. 现实中关于动态面板不同状态的应用案例

以上摘取的使淘宝网2种不同登录方式的状态变化，使用动态面板就可以制作出来

十五. 单选按钮、复选按钮——axure线框图部件库介绍

有时候发现这做事情坚持下来是一件很不容易的，写教程也一样，不过听到很多朋友对我说 这个全部是图片的教程 对他们入门帮助很多，我就想想 在坚持坚持把基础部分先完善了！

1. 简单的问卷调查：

您的性别  答案：男   女

当然我们首先需要分析一下，这个问题，问性别 你只可能是男或者是女，2者只能是其一，不能即是男也是女是把，所以我们这个问卷调查的题目是一个单选题：

要设置这样的一个问题，其实学到这个教程这个阶段，很多人都很清楚该如何去做了，第一步是拖动你需要的单选按钮到页面编辑区域，和一个文本面板，分别双击设置对应的文字，如图：

您的爱好 篮球  足球  羽毛球  苍老师

同样我们也进行一下分析，一个人可以同时喜欢篮球 足球 羽毛球 还有苍老师（这个是世界的）所以啊，这个是一个多选题，只要你有精力 你可以全部喜欢

所以我们的问题设置，如图：

这样我们就简单的制作了问卷调研中最重要的2类题型。单选题，多选题

2.设定单选组问题

做好上面的单选题设置后，肯定很多人在设置原型后，发现了，为什么我的男、女都可以选中，不是说是单选题吗，为什么不能像正规网站一样，只能选中一个了，其实这里面我们忘记了一个设置，就是设置单选按钮组，我们必须保证这2个单选选项是一组的，这样才能实现我们想要的效果：只能选中男或者女，如图：

十六. 内部框架——axure线框图部件库介绍 

网页框架代码      看到上面这段代码，很多人肯定认出这是html语言中的框架引用，在axure中也可以实现这样的框架效果。可以在页面中引用另一页面的内容

 1. 内部框架引用外部网页

弹出链接属性对话框，如果只是是链接原型中页面   可以选择  第一个  ，这里面链接的是我的个人博客

2. 如何应用内部框架引用视频内容

如果只需要视频内容，不需要网页的内容，记得复制flash地址，框架的大小是视频播放的大小

十七. 菜单组件——axure线框图部件库介绍

软件类的教程，我写不出长篇大论，这里面的都是基础的操作，希望初学者，根据一个功能演示，可以自己测试其他功能菜单的效果！

Axure自带的菜单组件，我几乎没有用到过，做菜单导航，我第一时间想到的还是矩形组件，大家有兴趣可以看看我使用矩形制作的电商网站通用头部，其中就有矩形组件制作的导航菜单。

菜单组件的分类（横向、纵向）

菜单组件的相关设置

这里我们选择的是添加子菜单，具体的每个选项的作用，大家挨个尝试一下 就可以看到效果

十八．axure日常使用问题

1. axure生成的原型文件，如何自动隐藏sitemap和page notes

答：axure默认打开的都是index为索引的文件，我们只需要打开其他的页面文件，就可以自动隐藏sitemap和page notes

2. axure 版 如何让一个部件在页面向下翻滚时始终固定在顶部

答：下，将部件转换成动态面板，右击该动态面板，选择编辑动态面板 > 固定到浏览器即可

3. axure 版 可以添加GIF图片吗

答：可以，直接使用图片组件导入即可：十九.树——axure线框图部件库介绍

 终于到最后一个组件的介绍了！到这里基础的应用应该算完成了！

 1. 拖动树组件，到页面编辑区域

 2.添加节点，可以添加子节点也可以在该节点的前后添加平级节点

 3. 编辑节点图标

做好上面的那一步，图标还不会显示，还需要对树的熟悉进行编辑

效果图：

 二十.Axure自动备份功能，让失误不在可怕

忘记保存了

电脑意外重启了。。。。。。。。

不小心删除了。。。。。。。。。。。。。

每次做axure的时候，多有了太多的意外了！ 

1. 备份时间设置

默认备份时间是15分钟，你可以进行数值调整

 2. 从备份中恢复文件

第二步：选择你最近的文件名称，然后单击恢复，选择新的保存路径即可

二十一.axure母版（模板）区域介绍

axure的模板区域是非常重要的一个功能，网站的头部、尾部部分等很多页面同时用到的内容，都可以使用母版，因为在母版中只需要修改一次，就可以实现所有的页面更新，可以大大的加速原型的制作速度。需要重复理解复用的概念！

1. 母版图示介绍

2. 母版菜单工具操作介绍

：选择一个节点，点击这个按钮可以实现在这个节点下面添加子模板

：首先选中一个模板，然后点击这个按钮，可以实现页面的删除，也可以单击右键选择删除

注：

如果当前原型中下含有子母版，Axure会自动提示当前母版正在使用中，必须先删除页面中的母版才能删除母版本身

：选中一个模板，点击这个按钮可以向上调整模板的排序

：选中一个模板，点击这个按钮可以向下调整模板的排序

：选中一个模板，点击这个按钮可以调整模板的层级（降级）

：选中一个模板，点击这个按钮可以调整模板的层级（升级）

：选中一个模板，点击这个按钮可以进入模板编辑状态

3. 母版重命名

其他菜单，如：删除、添加、移动，和上面的工具菜单方式一直，大家可以尝试一下

4. 母版的三种行为：标准、放在背景中、自定义组件

标准：普通的母版，就是一般的复用母版、是默认创建的行为，不能在页面中进行直接修改

放在背景中：这类的母版是定位于页面的底层，并且锁定模板在中的坐标，这类复用经常用来创建head、foot等明确定位的复用模块

自定义组件：这类的模板类似于自创一个组件，在拖动到页面后，可以对其编辑修改，于母版了

二十二. axure制作项目符号列表样式

像这样的在文字前面添加项目符合列表，不只是在word中可以实现，在axure中也可以很方便添加

l  Axure rp 的软件安装、汉化与注册

l  认识Axure的软件界面

l  生成网页原型的三种方法

l  如何关闭IE浏览器在生成原型时候的安全警告

l  在chrome中使用axure生成原型的问题

l  站点地图区域

 操作步骤

1. 拖动文本面板到页面编辑区域

2. 点击工具栏的【项目符合列表】

 二十三.axure制作圆形组件——axure制作技巧

Axure本身是没有直接提供圆形组件的，所以很多朋友在微博上问，如何使用axure制作圆形，难道都要找美工……

Axure没有提供圆形组件，但是它提供了一个万能组件——矩形组件，只要有矩形组件，我们就可以制作出圆形，下面让我们看看具体的制作步骤：

1. 拖动矩形组件到页面编辑区域，并设置形状为椭圆

2.设置椭圆的尺寸w: 80 h：80

二十四. axure网格设置

Axure默认的界面是没有吧网格显示出来，没有网格在制作原型的时候，对齐方面不是很好，个人习惯还是把网格显示出来，便于组件对齐和布局。

其实本来这篇文章应该叫做网格与参考线，只是本人对参考线的应用还很局限，特别是栅格化应用。

1. 网格的显示与隐藏

2. 其他网格相关设置

最好在吧  对齐网格  同时勾选，这样在拖动组件的时候，可以让组件自动对齐到网格，使组件对齐更加智能化

把网格的间距设为5像素，更加利于组件的对齐，如图：