从零开始学Axure原型设计(入门篇)

如果说Sketch是最美、最简洁的设计软件,那么Axure就是最强大的原型制作软件。Axure不仅能制作静态的视觉稿、页面,还能添加交互动作,是进行原型设计的最佳软件之一。虽然Axure的学习曲线比较陡峭,但是掌握之后可以很快实现我们脑海中的用户体验效果。

-20-20-1-20-2

Axure 8.0

笔者自学Axure有半年多的时间了。刚开始接触Axure的时候,逛过无数论坛、Axure的网站,也浏览了许多大牛录制的Axure视频课程。这些教程和资料非常完整地介绍了这款软件能够做什么,这款软件的界面如何,怎么样使用部件,如何创建交互等。但是在自学过程中,如何掌握学习的先后次序从而达到最佳的学习效果这方面我走了很多弯路。

写这篇文章就是想总结一路走来的经验教训,并且跟大家分享如何快速掌握Axure这款软件的使用,以及如何将自己的想法通过这款软件来实现,从而构建起自己使用这款软件的方法。希望对大家有帮助。

-18-18-1-18-1

从零开始学Axure原型设计(入门篇)

在入门篇中,主要讲解Axure的界面布局和部件库的使用。

快速入门Axure界面

-19-19-1-19-1

Axure界面,图片来自网络
  • 工具栏:类似office软件,可以对字体大小、背景填充、图形宽高以及位于工作区的位置(X\Y轴)进行修改;
  • 工作区:绘制产品原型的操作区域,所有的用到的元件都直接拖拽到里面就好了。
  • 页面导航:可以通过鼠标拖动调整页面顺序以及页面之间的关系,双击可以重命名。
  • 部件库:也叫组件库或元件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axure元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。大家可以点击放大镜图标,搜索自己需要的部件。
  • 母版:这里可以创建重复出现在每一个页面的元素,这样在制作时就不用再重复这些操作。通常用于页面头部、菜单栏等的制作。
  • 页面交互:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload。
  • 部件交互:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件。闪电样式的小图标代表交互事件。

部件库的构成

了解部件库的使用是Axure的基础,下面我们就来梳理一下Axure中的常用部件:

-21-21-1-21-2

Axure部件库

部件使用易错点

关于部件库的使用,新手特别容易出错的有以下几点:

  • 图片:图片拖拽进画布时如果选择“压缩图片大小”,gif文件会变成静态的图片形式。
  • 图片热区:图片热区可以用来创建自定义按钮上的点击区域。例如在一个区域中,既有图片部件又有文字部件,我们只需在这些部件上面覆盖一个图片热区并添加一次事件即可,无需在每个部件上都添加事件。反之,如果你想给一张图片上添加多个交互,也可以给图片的部分区域覆盖一块热区来实现。
  • 动态面板滚动栏:使用滚动栏给你的动态面板添加可滚动内容,在动态面板属性面板中选择,滚动栏下拉菜单并选择滚动栏的显示方式,为了让滚动栏正常显示,动态面板状态内中的内容必须比动态面板的边界轮廓大,并且不能勾选调整大小以适合内容。
  • 内部框架:你可以给内部框架的属性选项框中添加Axure内置的预览图片,如视频、地图,也可以自定义预览图片。注意:预览图片会在设计区域中显示,但不会在生成的原型中显示。
  • 列表选择框:在一个交互事件中同时读取或设置多个选项时,列表选择框部件只允许你读取或设置一个选项,即便你勾选了多选功能。
  • 提交按钮:提交按钮无法设置交互样式,如:选中/鼠标悬停/鼠标按下。提交按钮的填充颜色、边框颜色和其他大多数样式格式都被禁用了。取而代之的是生成原型后在浏览器中它会使用内建的样式。如果你想自定义你的按钮样式,请使用形状按钮“Shape button”。
  • 菜单部件:无法点击展开子菜单。菜单部件默认是鼠标悬停展示子菜单的。

特别提醒大家,在创建部件时,一定要养成给部件命名的习惯,因为无论是创建交互事件还是进行变量调用,都需要明确部件的名称。目前我使用的命名方法是“页面名称+部件功能”。

现在就去下载Axure,自己玩一遍这些萌萌的部件吧!在认识了部件库和界面之后,我们就可以自己用Axure画线框图了

原作者来自简书:http://www.jianshu.com/p/9ea3d25513bf#

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/12021/

(0)
iouedioued
上一篇 2016-01-06
下一篇 2016-01-06

相关推荐

  • 『全网汇总』验证可用axure注册码|axure激活码

    我是UE网的小编:WiKi  整理出了目前市面上所有的axure激活码,学习axure的小伙伴们赶快收藏起来吧! 如发现已经过期的请联系我们进行删除,谢谢!  Axure rp pro 7.0   用户名:3ddown 激活码:FiCGEezgdGoYI…

    2015-05-29
  • Justinmind 和 Axure谁更适合做原型?

    Justinmind 和 Axure 都是目前很强大的原型设计工具,被业界推为原型设计神器,在很多项目中起着不可估量的作用,但这两者的之间的作用是相互竞争还是相辅相成呢,我们应该客观地进行分析,使之更好地服务于我们的…

    Axure 2015-08-25
  • 如何用 Axure 制作类似的手机滑屏效果原型?

    不要太复杂: 1.设置2个动态面板 外面的是窗口 里面的是内容 图1:2个动态面板展示,记住这只是展示你不要放在一个层面上,应该是包含关系   图2:包含关系目录示意 2.设计交互事件   接下来看一下设计交…

    2015-07-21
  • Axure RP 8.0 + 汉化包下载

    官方下载地址: FOR WINDOWS BETA FOR Mac BETA 网盘下载地址: Win版下载地址 Mac版下载地址 Axure RP 8.0 汉化包下载: Win自动汉化Axure RP 8.0 安装文件 通用Axure RP 8.0 汉化文件 注意:Win自动汉化程序只支…

    2015-08-24
  • axure 7.0元件汉化

    补充原作者的Axure汉化文件未汉化的部分,不属于软件,是元件栏的两个默认元件库。这里放出汉化包。 安装说明在压缩包里。 axure7元件汉化

    2015-05-28
  • 分享AXURE注册码 AXURE序列号

    很多同学安装了Axure 7.0或者Axure 6.5,但找不到Axure注册码(axure license key)。今天就为大家分享一些Axure注册码,希望大家能够做出好的产品。 本站分享的Axure注册码来源于网络,本站不保证能长期使用,也不…

    Axure 2015-04-17
  • Axure RP 9 最新版汉化包下载-小楼

    【汉化包下载】Axure RP 9测试版汉化包V1.8版 For 3623下载 【使用方法】 1、将汉化压缩包解压缩。 2、将解压缩后的lang文件夹和dll文件全部复制粘贴到软件安装根目录下。 【Windows系统汉化路径】 以Win7-64位系统…

    Axure 2018-09-18
  • Axure RP 8.0 抽奖大转盘实例教程附.RP下载与视频演示

    原标题:【AxureRP8实现真正抽奖大转盘】 效果图: Demo地址:http://www.iaxure.com/share/luck/ (有广告) 视频: 实现过程: 1、生成一个0-360之间的随机数,保存至变量; 2、旋转转盘到达指定角度,案例中为3-…

    2015-08-24
  • Axure 8.0正式版发布,下载文件、汉化包、激活码在这里~!

    2016-10-31 更新:AxureRP8从8.0.0.3318改变了授权验证,教师与学生可以申请免费 key! https://www.iamue.com/18540 正式版已经发布,官方地址已经由:http://axure.com/beta,换成了:http://axure.com/features/n…

    2016-04-16
  • 【译】Axure RP 8 Beta 官方教程 - 钢笔工具

    From: Learn Axure RP 8 Beta: Pen Tool(http://www.axure.com/c/blog/160-learn-axure-rp-8-beta-pen-tool.html)   Axure RP 8 引入了一个新的钢笔工具功能用来绘制自定义形状。自定义形状是基于矢量的,这…

    2015-09-08