Axure8.0快速入门上手实战演示

Axure是产品经理工作必备的工具软件之一，本教程带你快速入门上手Axure 8.0，完成自己的第一个原型作品，模仿实现”百度搜索框“的效果。

工具/软件

硬件型号：华硕无畏15

系统版本：Windows7

所需软件：Axure RP

方法/步骤1：没有交互效果原型

第1步

在浏览器中打开百度首页，直接使用微信的截图将百度的logo截图下来。

第2步

打开Axure 8.0，新建文件，从左侧的元件库将图片元件拖放到中间空白的编辑区。

第3步

双击拖放到编辑区的图片元件，本地选取添加第1步得到的百度logo图片。

第4步

第1步截图的时候，可以看到图片在浏览器中显示的宽和高是210*68。

第5步

单击Axure中添加的百度logo，在右侧样式编辑栏调整图片尺寸，输入宽度210和高度68。

第6步

同样用截图工具可以看到文本输入框的宽和高是535*37，"百度一下"按钮的宽和高是102*37，文本输入框和百度logo间的垂直距离是28。在Axure中从元件库拖放一个矩形元件和一个文本框元件到编辑区，分别修改宽高为102*37和535*37。

第7步

移动文本框、矩形和百度logo到合适的位置。

第8步

在右侧样式编辑栏给102*37的矩形填充颜色，可以用取色器取色。同时将矩形边框修改成和填充色一样的颜色。

第9步

双击102*37的矩形，输入文字"百度一下"，然后在样式编辑栏修改字体大小到16，字体颜色为白色。

第10步

"百度一下"按钮左边还有个小相机的图标，Axure 8中有自带相机图标，不过和百度的样式差别比较大，我们从百度首页截图下来放入Axure中，要记得将相机图标置于顶层，不然会被文本框遮住。到这里，基本的原型就出来了，下面我们再添加一些交互效果。

方法/步骤2：添加交互效果

第1步

交互效果包含：鼠标移入"百度一下"按钮时，按钮的蓝色会变深；鼠标移入小相机图标时，图标变成蓝色；单击文本输入框，输入框边框变成蓝色，同时输入光标闪烁，我们按顺序做。

第2步

在右侧属性--交互，给"百度一下"矩形添加鼠标移入时事件，设置当鼠标移入矩形时，矩形状态为选中。

第3步

同样地，给"百度一下"矩形添加鼠标移出时事件，设置当鼠标移出矩形时，矩形状态为未选中。

第4步

成功添加完两个用例后，会在属性--交互中显示。

第5步

在属性--交互样式设置中，设置"百度一下"矩形在选中状态下的样式，设置选中时的填充颜色和线段颜色为较深的蓝色，同样可以用取色器。这时，预览后就可以看到当鼠标移入"百度一下"矩形时，矩形的颜色变深，鼠标移出时，颜色变浅。

第6步

对于鼠标移入小相机图标，图标变成蓝色。可以先将蓝色的小相机图标截图下来。然后用同样的方式添加鼠标移入时，鼠标移出时事件，区别在于，交互样式设置时，用截下来的蓝色相机图片作为选中时图片。

第7步

单击文本输入框，输入框边框变成蓝色，同时输入光标闪烁，这部分交互效果其实Axure的文本框元件本身的效果就比较接近了，我们就不做修改了。

第8步

好了，你的第一个带简单交互的原型就完成了，点击Axure右上方的预览，就能在浏览器里看到最终效果了。