之前我给自己定了一个目标，就是想在不久的将来想当产品经理，那么产品经理最基本的得会一个工具，Axure！不然当不了产品经理，所以，最近一段时间学习了Axure，那么今天来写一篇有关Axure的文章 - 初级篇。

        我学习的版本是Axure RP 8，以上就是我们这个Axure的基本页面，下面让我们先来初步的介绍一下Axure每一块的详细的情况。在这边先说下个人的感觉啊，由于我之前是做技术的，开发和设计我都学过，所以学Axure对我个人来说，难度其实并不是很大，基本的线框图其实稍微摸索一下就会了。当然，如果没有设计基础的，或许学起来会有点困难。

废话不多说，进入正题首先是页面这一块：

        先看页面对过去的三个小标签，分别是添加页面，添加文件夹，搜索页面，下面这一块就是页面的结构，当然我们也可以对这个页面结构进行一些修改。下面我们暂时用微信来做一个例子，来进行一下学习

比如我们修改一个页面的名字，以index为例：

        右键点击会出来一个菜单栏，点击重命名，输入微信结构，我们就可以看到页面被修改了：

        以同样的方式我们去修改下面的三个页面，就能够得到以下结果：

        这个时候我们发现少了一个我这个页面，那如果添加页面呢？有两个方法，第一个方法：在页面对过去的地方，点击纸张带加号的按钮。

然后就会生成一个页面：

方法二：点击微信修购，还是右键，出现菜单栏，添加–> 子页面：

    在添加了之后，就会在微信结构下面出现一个新的页面，然后命名为“我”。

        然后我们来添加下文件夹：添加文件夹同样有两个方法，方法一：

    以同样的方式我们往里面添加子页面作为测试：

点击三角的符合，还能够将文件夹收起来：

方法二：页面对过去的第二个小按钮，同样也可以有这个功能。

        如果我们在实际过程中，需要在中间插入一个页面，这也很简单，比如，我们现在要在微信和通讯录的地方插入一个新的页面，同样有两种方法：

方法一：点击微信，添加 -> 下方添加：

        我们就会发现在中间多了一个文件夹：

    方法二相同，点击通讯录，添加 -> 上方添加：

        添加的方法其实很简单，下面我们来说下移动：移动菜单有四个选择，分别是上移，下移，降级，升级。

        上移，下移应该不比多说，就是讲页面的位置进行调换。我们以通讯录为例，将其上移：

显示的结果为：

下移也是如此：

由于这边通讯录是第一个页面，所以上移的按钮就被置灰了。

    升级，降级可以会稍微困难一些，我们用下面的文件夹来举例子，往文件夹内添加一些页面，用一级页面，二级页面来表示，如图：

注意：页面也可以添加子页面。

        我们以二级页面2为例子，我们先来给它做一个升级：

这个时候，二级页面2就和一级页面1和一级页面2是同一个级别的了，只不过顺序在两个页面之间。

    同样的，我们依旧以二级页面2为例，给它做一个降级处理：

得到的结果就是这样的：二级页面2又回到了一级页面1的组里面去，并且排队排在最后一个。

接下来是复制，复制其实很简单，一个是单独的页面复制，一个是页面连同分支一起复制，这个大家自己尝试一下就行。

        下面说的是流程图，我们还是以之前的微信页面为例，来生成一张流程图：

        点击生成流程图，在我们的操作页面会出来这样的一个弹框，选择图表的方向，这边点击乡下，确定。

        这样，一张微信结构的流程图就已经生成了，非常的方便快捷。

        并且在右下角的概要页面这边，还出现了结构图，这个我们放在后面说。

        现在我们开始说下元件库，这个是我们操作的主要工具，也是整个Axure的核心，基本上所有的工作都是从这里展开的。

        我们可以看到，现在元件库分为4个大类，基本元件，表单元件，菜单和表格，标记元件，当然这些元件是基础元件，如果工作上有需要，我们还可以从外部去导入其他我们工作中所需要的元件去进行操作。

        基本元件包括以下这些：

表单元件包括以下这些：

菜单元件包括以下这些：

标记元件包括以下这些：

下面介绍一下元件的基本使用方法(由于元件太多了，所以这边只介绍矩形元件)，选择所需要的元件，然后直接拖入操作页面中即可。比如我们现在需要使用矩形，那么就选择矩形元件，直接拖拽入白色的操作画布中。

        矩形元件一共有三种，第一种黑框白底矩形1，第二种无框浅灰色底矩形2，第三种无框深灰色底矩形3。在做基础的操作练习的时候，我们以第一个黑框白底的矩形1为例。首先我们单击选中矩形，

我们会发现之前黑色的框变成了绿色的线段框，这就表示该元件已经被我们选中了，然后我们又发现该矩形的左上角有个倒三角形，右上角有个圆。倒三角的作用是设置矩形的角度现在是直角，当我们从左往右拖拽这个三角形的时候就会发现，该矩形的角度发生了变化，

在倒三角上门的灰色框中，表示的是矩形现在角度的数值。当我们确定后，点击空白处，一个有弧度的矩形就完成了。

        然后我们说一下圆点，先选中矩形框，然后单击圆点，会出现一个框，这个功能是可以将矩形转换成其他形状：

        比如我们点击下那个人形状，矩形就变成人形了。

        再切换回矩形，当我们选中矩形的时候，有好多个地方可以对该矩形进行编辑，最常用的有三个地方，第一个，顶部的工具栏，第二个，右边的属性 + 说明 + 样式，第三个鼠标右键。

        现在我们一个个的来，首先，先从顶部栏开始说起。

        这个就是我们的顶部的工具栏，最左边的Box 1是属性，点击下拉框，选择Box 2

这个时候，我们就会发现无框浅灰色低的矩形2的形状了，用来改变元件的属性。

这一条是对元件内部文字的设置，我们输入双击矩形，输入Axure，选中，将Arial字体修改成Bell

MT，这时候，我们会发现矩形内部的Axure字体也变了。

边上的是字体的类型，有正常，有加粗，有斜体，产品经理可以根据需求去进行设置，再边上的时候字号，普通正文一般选择12-14号字体。

这边三个很好理解，分别是加粗，斜体，下划线。

这个是项目符号，一般有多个点需要称述的时候会用到：

内部文字左中右，上中下对其

修改背景色：

之前是白色底，现在选择蓝色，就能够修改成蓝色的底：

再后面一格是阴影，勾选阴影框，这样可以做出一个投影，给人一种浮在上面的感觉。

下面是设置矩形线框和线段：

再来是位置和尺寸

以左上角为顶点（0，0）,在画布上，现在是X轴200，Y轴100

然后我将两个轴都设置（0，0）

下面是长和宽，

，如果点击下中间的【】，那么就是等比例缩放长和宽，

点击后中间有个蓝色的小矩形。

再来是选择：相交选择

包含选择

这个是选择元件时使用的，相交选择，只要选择框一部分选中该元件就算选中了，包含选择，选择框必须全部选中该元件，才算选中。

相交：

包含：

下面开始介绍一下连接，首先从基本元件中拖出一个矩形1，将尺寸从（300,170）修改为（150,85），然后这边介绍一个小技巧，选择矩形框，按住ctrl键，直接拖动矩形框，就能复制出一个相同的矩形框来，这样复制两个，按照以下位置排列：

        然后再选择连接工具

四个画×的地方是连接点，红色圆圈出可以直接拖出连接线，现在将左边两个框上都脱出线去连接到右边的那一个框中去：

        在一般情况下，都是这样去使用连线工具。

        下面是钢笔，这个跟PS里面的钢笔非常像，可以按照个人的想法，随意勾勒出想要的图像：

        比如说这样的图，可以有直角，也可以有曲线，完全按照自己的意图去勾勒，当然，这个工具基础用法简单，要用的得心应手，还得下点功夫，毕竟当初我刚刚学PS的时候，钢笔工具去抠图就练习了好久。

        下面这个一套工具组一起讲，同样，这套工具也是跟PS里面的非常相像：

这边先画两个矩形：

我们可以很明显的看到，蓝色的矩形在下面一层，粉色的矩形在上面一层，如果我们选中蓝色矩形，点击顶层，就会出现如下效果：

        同理，如果再这个时候选择蓝色矩形，点击底层，那么蓝色矩形就会到下面去了。

        当然，顶层和底层还有一个小技巧这个也介绍一下：

        在概要也这边，会有两个与之对应的矩形，为了分辨清楚，我们将其重命名一下，分别用蓝色和粉色去命名。

        现在我们在概要页面拖动粉色的那个矩形，将它拖到蓝色的矩形上面去：

我们会看到有一条加粗的蓝色的线，线的最左端还有一个蓝色的圈，然后放开：

粉色的矩形就跑到蓝色的矩形上面去了，跟PS是同样的道理。

        下面来说下组合，我们同时选中两个矩形，点击组合：

会看到以下情况，这个时候，如果我们任意选中两个矩形中一个，那么另一个也会出于被选中的状态，拖动其中一个，另一个也会跟着一起动。

        点击取消组合，两个矩形的状态又回到了独立状态，跟之前一样。

        接着开始介绍对齐，先拖出一个矩形1，将尺寸从（300,170）修改为（200,113），并且按照我下面的方式去排布：

然后再来一个框，选择全部三个矩形，在对齐处选择左对齐

就会出现如下效果：

        下面是居右边对齐，先选择右下角的矩形，然后再依次选择剩下的两个矩形：

居中对齐也是如此，先选择中间的矩形，然后再依次选择两天边的矩形，最后选择居中对齐。这里的规则是，要按照什么方式对齐，第一个选择的就是参考物，后面选择的是移动物，根据第一个选择的参考去进行移动。

分布和对齐差不多，先把这三个矩形打乱顺序，如下图：

        然后全选，再点击

得到如下结果：

锁定就比较简单了，字面意思，选择一个元件，锁定后，该元件无法移动，且外框变成红色：

取消锁定则变回原来的样子。

        当我们作图非常复杂，且不需要用到左右两侧工具栏的时候，我们可以通过暂时关闭的方式，将两侧的工具栏暂时关闭，按钮为：

原图：

关闭后：

        在实际工作中，如果我们需要反复使用一个相同的图像，而这个图像又比较复杂，并且在我们的元件库里面又没有，那么怎么办呢？

        母版出现了！这个功能可以很好的解决我们的重复使用的问题。比如，我们要做手机APP那么手机的底是我们经常需要用到的，像这样，我画了一个手机的图：

        好，现在我们来将其制做成母版，首先，将上面所需要的元件全选，然后单击右键，选择转为母版：

        名称给它命名为手机母版，拖放行为一般选择任何位置，特殊的时候需要选择固定位置：

        然后我们的手机会变成粉色：

        在母版这边，会多出来一个手机的母版，当我们需要使用的时候，跟元件的使用方式一样，直接拖拽到所需要的地方

        当需要重新编辑使用的时候，就选择脱离母版，然后就可以对该元件进行单独操作了

        母版顶部栏的功能和页面一样，可以添加，可以查询，这边就不做过多的赘述了。

        好，现在我们双击页面中的微信，新开一个页面，单击空白处一下，我们可以对背景色进行一些设置，先查看下右边的检视：页面

        我们来设置一下背景色，将它修改为浅蓝色：

这个时候我们会发现整个背景色都变了：

再来切换一张图片，点击导入，选择准备好的图片（由于我非常喜欢刘亦菲，所以，用她做为案例），点击打开，然后我们的图片就变成了背景色：

下面也快进入尾声了，同样也是元件设置比较重要的一个部分，元件的属性设置。我们重新拖入一个矩形元件，并且将视线聚焦到右侧的检视这块中：

我们发现有三个重要的页面，分别是属性，说明，还有样式。下面我们一个个来讲解。

        属性这边，我们第一个讲的是交互，点击创建连接，选择微信结构：

        这个时候我们会发现矩形框上面多了一个1：

        如何去使用这个功能呢？很简单，点击顶部菜单栏的

预览：

我们的浏览器会弹出这样的一个页面，且在左侧树形结构上，当前显示的页面是微信，然后点击矩形框：

会跳转到微信结构的页面，并且出现了微信结构中所做的内容。

        下面是文本连接，双击矩形框，在内部输入百度两个字，并且选中，然后点击文本连接：

链接到页面这个这个我们之前做过了，这边就不再做了，现在我们连接到网站，点击第二个圆圈，链接到url，并且输入百度的地址，点击确定。

        用同样的方式点击预览：

        然后再点击蓝色的百度字：

百度的页面就被我们嵌套进来了。

        形状这个在最开始介绍过，直接点击元件右上角的园圈即可。

        交互样式设计我想在后面中篇或者高级篇中介绍，在初级篇中就暂时不说了。

        元件提示这个作用不是很大，仅作为提示使用，举个小例子，双击矩形元件，输入学习编程四个字，然后再元件提示中输入hello word！再点击预览，这个时候，我们将鼠标移动到矩形框内，会发现hello

word！的字样：

        下面我们来讲下说明，将页签点到说明这块，然后再对话框种输入test，再点击预览

然后我们会发现，矩形元件上多了一个蓝色的小框，中间还有三条白色的线

点开蓝色的框，又弹出一个框，显示test：

        下面我们开始讲最重要的一块，样式！位置，尺寸，角度的那块，之前在上面的菜单栏已经说过了，现在我们来讲一下后面四个的按钮

        先说水平翻转和垂直翻转，我们再拖一个元件出来，然后把形状切换成箭头，再点击水平翻转：

翻转前：

翻转后：

        翻转也是同理，翻转前：

翻转后：

        再后面两个是自适文本宽高，主要用于当框太大，文字太少的时候，直接缩小框的大小，刚刚和字一样，缩小前：

缩小后：

        下面说下元件管理样式

        点击，最右边的按钮，会弹出一个菜单栏，左边是每个元件的名称，右边是所对应的样式，当然可以增加，删除，排序，复制样式。右边是具体的每个样式，可以在这边进行详细的设置：

        颜色，阴影，边框之前都说过了，这边不做过多赘述，都一样的。

        但是，这边多了点东西，我们可以设置某条边框的存在与否：

        比如我上面这条框不要了，那么就单击上面这条线：

        然后我们就发现我们的矩形上面这条线不见了：

        下面是箭头，箭头对很都不起作用，我们在元件库中找到水平线，拖到画布中，这个时候，箭头就可以选择了，我们可以选择各种箭头的样式，以实现实际的需求：

圆角半径，也是之前说过的，输入所需要的角度即可实现。

        不过这里多了点东西，就是可以选择部分圆角：

        去掉左上角的圆角，效果：

        字体，行间距，项目符号，对齐，这个之前也是说过的，这里也不做赘述：

        这里重点说下填充，这个对于大段的文字有用：

        我们先在元件库中找到文本段落的元件，将其拖到画布中：

        现在是文本段落的初始效果：

下面我们将填充的上下左右都填写上一个数值10：

这个时候，我们就会发现，文本段落的上下左右都出现了边距。

        Axure的初级篇今天我就写到这里，中级篇和高级篇我下次再写，中级篇我其实已经学会了，但是高级篇我暂时还学的一知半解的，希望早点学完吧。

        下周我是这样想的，前段时间，MY的蚂蚁不是被四大部门约谈了么，那么对于蚂蚁的操作行为到底会引发什么样的后果，我想分析一下。不过我有点不太一样，前段时间很多的分析文章我也看了，都多多少少的有些偏激，要不就是无脑的赞同，要不就是无脑的反对，这次我打算从中立的角度来分析分析，期待我后两周的分析吧，哈哈~