从零开始学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学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 【译】学习Axure RP 8 Beta - 流程图改进

    From: Learn Axure RP 8 Beta: Flow Diagramming Improvements(http://www.axure.com/c/blog/161-learn-axure-rp-8-beta-flow-diagramming-improvements.html) 专题:Axure8.0 Axure RP 8 中在流程图部分做了部分…

    2015-08-20
  • 在线预览Axure文件,使用新浪SAE发布在线Axure文档

      俗话说,不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系,扯开了讲可是长篇大论,比如知乎上这个问题:IT 行业产品经理(尤其是创业的)需要懂技术吗?懂到什么程度?,以及这个:…

    2016-01-07
  • AxureRP8从8.0.0.3318改变了授权验证,教师与学生可以申请免费 key!

    #交互学堂##Axure#RP8.0.0.3318更改授权验证机制,旧的授权名以及密码将会失效。 划重点:个人用户除了购买正版软件,也可以暂时维持当前版本不做升级,当然这也是以失去软件的稳定性为代价。这也就意味着一段时间…

    2016-10-31
  • 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
  • axure7.0中文汉化包

    下载地址:axure7.0中文汉化包20150516 使用教程: Axure RP Pro 7.0 正式版 (不兼容 6 版) 简体中文语言包 本汉化包由小楼制作,我是UE网整理分享。 支持 Axure RP Pro 正式版 当前最新版本 7.0.0.3183 汉化方法:…

    2015-05-27
  • 【译】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
  • Justinmind 和 Axure谁更适合做原型?

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

    Axure 2015-08-25
  • Axure RP 8.0新功能解析

    这个版本强化了Axure的三个核心功能——原型、交付,和协作。 8.0 Beta版改动相当之大,且这几个月会有一些重要更新,我们一起期待吧 :) 用户界面 1.合并了三个部分:部件交互和注释、部件属性和样式、页面属性。将…

    2016-05-09
  • 分享AXURE注册码 AXURE序列号

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

    Axure 2015-04-17