从零开始学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

相关推荐

  • Justinmind 和 Axure谁更适合做原型?

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

    Axure 2015-08-25
  • 交互设计师成长分为三个阶段

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-18
  • Axure学习笔记:手机APP微信读书原型设计

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

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

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

    2016-10-31
  • 分享AXURE注册码 AXURE序列号

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

    Axure 2015-04-17
  • Axure新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

    2015-05-23
  • Axure 8.0 书籍阵营又添新员:《Axure RP8产品原型设计快速上手指南》产品经理产品设计原型制作APP -非原型不设计

    阿西推荐语『我是在"非原型 不设计"的博客与Q群认识的萧何,非常早期就在网易云课堂发布了 axure 的免费课程,自己博客发布的更早,对于很多早期学习 axure 的人来是遇到萧何这种共享知识的做法非常受益,我也被这…

    2016-12-19
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28
  • axure 7.0元件汉化

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

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

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

    2015-05-29