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右上方的预览，就能在浏览器里看到最终效果了。
注意/提示
好了，以上就是“Axure8.0快速入门上手实战演示”这篇文章全部内容了，小编已经全部分享给大家了，还不会的小伙伴们多看几次哦！最后，希望小编今天分享的文章能帮助到各位小伙伴。如果大家想更深入了解Axure RP那么点击这里了解学习更多课程。
相关文章
