做前端工程师有一段时间,从前做网页交互方面的时候,一直用visio与onenote,最近再研究Axure RP5这个相当不错的原型设计软件.
废话少哆嗦,直接看招:
一、软件下载
官方下载: /downloads.aspx (速度有点慢,建议选国内下载)
国内下载:/soft/41842.html (速度还可以,版本是:5.1.0)
二、教程目标
希望有幸阅读此篇教程的朋友能够在交互设计方面,利用此软件有所进步。
三、教程内容
Part I:介绍Axure RP
认识下LOGO:
Axure RP 能帮助网站需求设计者,快捷而简便的创建 基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页,并可自动生成用于演示的网页文件和word文档,以提供演示与开发。
Axure RP 的特点是:
快速创建带注释的wireframe文件,并可根据所设置的时间周期,软件自动保存文档,确保文件安全。 在不写任何一条html与javascript语句的情况下,通过创建的文档以及相关条件和注释,一键生成html prototype演示。 根据设计稿,一键生成一致而专业的word版本的原型设计文档
相信以上几个Axure RP的特点,应该能够让设计者们产生兴趣,但,遗憾的是,目前在国内众多的互联网产品公司,用到Axure软件的公司很少,比较有名的:、、 等.关于Axure的历史,我想各位简单了解下:Axure Software Solutions, Inc.该公司创建于2002年五月,Axure RP是这一软件公司的旗舰产品,一月Axure RP第一版本上线发表(有6年的时间了),至今已经正式发行到了第5个版本,迄今为止,最稳定的是4.6版,有朋友该说了,为啥不在4.6版本上讲解呢?本人对软件工具历来采用的态度是:用最新版,至于其中的原由,我想各位应该能够想到,在此不必废话了。
一路next安装后,直接选择启动Axure RP5 此时会有注册页面弹出,如下图:
个人建议没有必要去找些注册码之类的,试用版本有30天的时间期限,如果您想要对Axure 有更加深层次的了解并熟练掌握,那么,30天的时间,足够了。
Part II 界面与功能
让我们来看看欢迎界面有哪些东东。
功能区1:文档区,这个区域显示用户最近打开的Axure RP文件,用户可以快捷的打开之前编辑的文件。同时也提供快捷按钮,可以创建新文档与打开Axure RP默认文件夹。
功能区2: 认证区,这个区域显示注册信息,有激活码的,发来共享下啊.^_^.
功能区3: Axure RP学习中心。主要包括在线学习资源、社区讨论、关于Axure的博客资源等.
功能区4:帮助文档也提供了两个链接,但是其实起到的是一样的效果,都是打开帮助文档。
功能区5:问题反馈,通过点击链接可以发邮件到support@,以寻求获得帮助。
这里要注意的是, 欢迎界面会随着软件的每次启动而弹出,我们可以选择:"don't show this at startup.来禁止这样的操作.
Part III 主界面与功能
(便于浏览,我把主界面控制在700*620的大小)
欢迎界面关闭后, 就是我们在以后的应用过程中经常适用的界面UI, 淡蓝色的基调,很清爽,但,个人觉得每个功能类的名称字体颜色,需要改进些,看不太清。
Z1:菜单栏,包含文件、编辑、查看和帮助,特别之处是:Wireframe、object、Share这三栏,具体的应用,会在接下来的讲解中提到。
Z2:工具栏,太熟悉了,觉得有必要讲吗?不会的,多去玩玩word.
Z3:站点地图,Axsure RP创建的文件是模拟真实网站页面关系的,sitemap就是通过树形目录关系,管理所有的站点页面文件与流程图文件。科学的文件关系结构,对有效的演示文档与生成易读的说明文档相当重要。
Z4:窗体部件,囤积了所有用来画wireframe与流程图的对象。我们可以通过拖拽的方式将小图形放入工作区,进行操作。
Z5:复用模块区,这里创建的页面文件和sitemap的页面相似,唯一不同的是,master的每个文件,可以当作一个整体,被sitemap反复调用。这个 功能就相当于程序开发中的程序复用,用好这个功能,可以减少我们很大一部分的工作量。也更容易理解网页文件的关系,了解网页设计师、程序员是怎么构建网站的 页面的。
Z6:这个就不用讲了吧, Axure所有的操作与界面搭建,就是在这里完成的。
Z7: 页面描述,用来对当前创作页面进行注释与说明。同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。
Z8:交互条件区。这个注释针对的是页面中的元素,也就是一个个widgets。
Z9:注释部分,用户可以对选定的对象进行详细的注释。Axure已经设置了几个默认的注释字段,但是其实这些默认的注释字段,大家完全可以不使用.
以上就是软件主界面的布局设计,随着使用的加深,各位会相当熟悉,这里要注意的一点是:在Z5、Z7、Z9 的下面有一行系统信息,这个是很重要的,千万不要忽略.
干吗用的?我们在给ui设计师wireframe的时候他们总会问,这里多少像素,那里多少像素,可是我们在画wireframe的时候却无法度量。Axure创建 的wireframe,完全可以生成html,因此我们可以在画的时候就度量好每个像素距离。但是我们要怎么做呢?这就需要利用到下面这行小信息栏了,信息栏左边显示的是文档保存情况。而右边呢,当你将一个widgets放入工作区,并选择这个widget时,这里就有用了,它显示的是你所选择 widget的高宽,以及距离页面顶部和左边的px距离。通过使用上下左右键,结合这个信息栏,你可以一步一步将它移动到你想去的地方。