Axure8.0快速入门上手实战演示(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快速入门上手实战演示(axure8.0教程)”的内容小渲今天就介绍到这里。希望这篇文章能够帮助到小伙伴们解决问题。如果觉得教程不详细的话。可以在本站搜索相关的教程学习哦！

以上是由资深渲染大师 小渲 整理编辑的，如果觉得对你有帮助，可以收藏或分享给身边的人