前言--自学Axure--学会20%的功能，满足80%的日常使用（1）

1 放在前面说的话（前言…）

1.1 学习Axure目的

为什么要学Axure？
作为一个产品需求提出者，你需要一个可视化的界面来直观地表达你所想要达到的效果；
作为一个产出者，你可以设计一个平台来承载你的产出成果，它可以将你脑海中的一个无形的概念/想法，通过线框图跃然纸(ping mu)上，让他人可以通过视觉直观地理解你的想法和创意。
另外，只要有过微软系列等产品使用经验的人，对Axure都会容易上手。
由于工作需要，我接触了Axure，在自学过程中设计了多个产品原型，并在自学和设计中总结出一些学习经验，在这里分享给大家。

1.2 目标：学会20%的功能，满足80%的日常使用

本系列的目标是：学会20%的功能，满足80%的日常使用。就像你不必背下新华词典，才会知道如何说话。
一开始自学时，尝试过阅读Axure相应的工具书，枯燥得让人打瞌睡；尝试过观看关于功能点的教学视频，也因过于乏味而没有坚持下去。后来是通过直接实战，并且结合搜索引擎的充分使用，才得以将其灵活运用。
本系列我会将每次制作原型都会使用到的功能点，结合小案例进行说明和介绍，即可在实际操作中快速理解并使用相应的功能。只要学会应用这20%的功能，就可以快速地制作一个属于自己的原型了。
当然了，由于体会到了Axure带来的便捷，我还利用Axure来制作流程图、进行p图（快捷且简易地…）等操作。

1.3 介绍

当前我了解到的网络上对Axure8的介绍会比较多，而 Axure rp 9 的界面及功能位置都与Axure8不太一样，而后期对于Axure的介绍及分享，是基于 Axure rp 9，所以还没下载的胖友们要注意看看版本。

官网：Axure.com
破解/汉化的渠道就度娘吧。

1.3.1 主界面

1.3.1.1 整体界面介绍

下图为 Axure RP 9 的工作界面截图：

将其划分为6个区域：

1. 区域1: 工具栏
2. 区域2: 页面及元件的明细
3. 区域3: 元件库及母版管理
4. 区域4: 样式、交互设计及备注管理
5. 区域5: 预览、分享管理
6. 区域6: 画布

1.3.1.2 区域1：工具栏区域

工具栏里展示的是该软件的一些工具和命令，一些常用的命令展示在外面，如：

1. cut、copy、paste：剪切、复制、拷贝
2. selection mode：选择模式（Select Intersected 和Select Contained）

• select intersected：当你按住鼠标左键拖动选择时，只要元件任意一个部位在选择范围内的元件都会被选中
• select contained：当你按住鼠标左键拖动选择时，只有元件所有部位都在选择范围内的元件都会被选中

3. insert：插入（画笔、形状、线条、文本等）
4. 置顶、置底、组合、对齐
5. 底部-文本的样式设置：字体、大小、粗细、居中、颜色、边线、坐标、像素等

以上操作都较为普遍，稍微看一下混个眼熟即可。

1.3.1.3 区域2：页面及元件的明细区域

区域2是展示你的当前文件的页面情况及你每个页面使用的元件情况。

1. PAGES：
   默认打开就是一个页面，可以按需新增页面以及新增文件夹来归置页面。初期使用一个页面足矣。
   
2. OUTLINE:
   outline展示的是你当前页面使用的元件列表。如果你有两个页面，当你双击进入了page2，则outline展示的是page2的元件列表。
   下图我使用了一个矩形元件和一个椭圆元件，则outline展示了这两个元件列表，并且体现了这两个元件的前后顺序。这个和powerpoint同理，若两个元件有重叠，则在上方的元件会对下方的元件进行遮盖。
   

1.3.1.4 区域3：元件库及母版管理区域

1. 元件库
   软件自带的可使用的元件列表，类似powerpoint中的【形状】。自带的元件基本满足日常使用，另外网上也有许多的元件包给可以下载，并且通过右上角的【+】添加进元件库中使用（但是没有特殊情况的话，不太需要去扩充，因为在前期学习过程中，自带元件库的元件已经足够使用）。
   这里还推荐阿里巴巴的矢量图库，里面有大量的矢量小icon可以提供查询和下载，平时需要小图标制作ppt的时候也可以去这里下载：Iconfont
   
2. 母版管理

• 定义一个母版，就是在母版中设计元素和元件
• 使用一个母版，就是通过拖动母版进入一至多个页面中，进行重复使用。
  如果需要修改母版中的元素/元件，可以直接在MASTERS中修改，那么使用了该母版的一至多个页面就会与已修改的母版同步被修改，而不需要一个页面一个页面地去修改元素/元件。
  母版主要就是用来降低页面的修改成本和制作成本的。一般用于网页的顶部title、App的边框等重复性较高的元素。
  

1.3.1.5 区域4：样式、交互设计及备注管理区域

1. STYLE：样式
   用来设计元件、字体等属性的区域。基于页面的STYLE与基于元件的STYLE设置略有不同。

• 基于页面的STYLE如下，用来设置页面的长宽高及背景颜色。

• 基于元件的STYLE如下，用来设置：
  a. LOCATION AND SIZE:元件的位置、大小、透明度
  b. TYPOGRAPHY: 元件中文字的字体、粗细、颜色、大小、行间距、字间距、下划线阴影、排列方式
  c. FILL: 元件的填充
  d. BORDER: 元件的边框、粗细、颜色
  e. SHADOW: 元件的阴影、粗细、颜色
  f. CORNER: 元件边角的弧度、可见情况（数字越大，边角的弧度越大）
  g. PADDING: 元件中的文字距离元件边框的距离

2. INTERACTIONS：交互
设计元件交互的区域。可以说这里是Axure的灵魂所在吧。你设计的界面让用户可以用眼睛来感受，但是交互可以让你的产品和用户进行直接交流。

3. NOTES：备注
备注区域。这和写代码、写ppt一样，备注可以让别人更好地理解你在产品中的用意（如果它无法简单地通过界面/交互展现出来）。

1.3.1.6 区域5：预览、分享管理区域

点击预览，可以将你设计的线框图通过本地的浏览器来查看效果。
点击分享，可以将你的成果发布到云端，生成一个链接，来分享给其他用户查看。

下图为点击分享后的弹出框：你可以选择发布到云端生成链接分享给别人，也可以生成本地文件，将文件打包分享给他人。

1.3.1.7 区域6：画布区域

最后就是画布区域了。
界面设计的主要方法就是：通过拖动元件（1.3.1.4）至画布即可。
下图中，我拖动一个矩形和一个椭圆形到画布。

1.4 一些你需要记住的好习惯

为了提高原型设计的效率，以及便于为原型设计交互，希望在进行原型设计的时候能做到：

1. 为你的元件命名
2. 善用【组合】功能（想一想powerpoint）

那么了解了Axure的主要工作界面，接下来就可以原型设计了！下周再见~
赶紧先把软件下载安装了吧！