从零开始学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文件,使用新浪SAE发布在线Axure文档

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

    2016-01-07
  • 【译】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
  • Axure RP 8.0新功能解析

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

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

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

    2015-08-24
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • 【译】学习Axure RP 8 Beta - 编组功能

    原文标题《【译】学习Axure RP 8 Beta - 编组功能》 From: Learn Axure RP 8 Beta: Groups 在Axure RP 7中,当多个部件被编组后,点选编组中的某个部件时,选中的是整个编组。而在Axure RP 8中,编组中的部件可通过…

    2015-08-19
  • 团队项目现已在Axure RP 9中提供

    团队项目现在可以在最新版本的Axure RP 9 beta中获得!请查看以下步骤以开始使用。 在RP 9中创建一个新的团队项目 转到文件>新团队项目或团队>从当前文件创建团队项目。 为团队项目命名。 为团队项目创建新工…

    2019-04-04
  • 交互设计师成长分为三个阶段

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

    2018-04-18
  • Axure RP 8 BETA

    新一代的Axure 8.0 现在推出 beta版本   [button type="danger" text="官网下载beta版本" url="http://www.axure.com/beta" open_new_tab="true"] 快速下载地址: Win版下载地址:http://pan.baidu.com/s/1o6p…

    2015-08-13
  • axure7.0中文汉化包

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

    2015-05-27