Axure图文详细教程.docx

Axure图文详细教程.docx

《Axure图文详细教程.docx》由会员分享，可在线阅读，更多相关《Axure图文详细教程.docx（28页珍藏版）》请在冰豆网上搜索。

Axure图文详细教程

Axure详细教程

1Axure介绍

互联网行业产品经理的一项重要工作，就是进行产品原型设计（PrototypeDesign）。

而产品原型设计最基础的工作，就是结合批注、大量的说明以及流程图画框架图wireframe，将自己的产品原型完整而准确的表述给UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改prototype直至最终确认，开始投入执行。

进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的AxureRP，是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。

同时，此软件也在产品经理圈子中广为流传。

之所以AxureRP得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。

在正式谈AxureRP之前，我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。

纸笔：

简单易得，上手难度为零。

有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。

但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。

Word：

上手难度普通。

可以画wireframe，能够画页面流程，能够使用批注与文字说明。

但是对交互表达不好，也不利于演示。

PPT：

上手难度普通。

易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。

但是不利于大篇幅的文档表达。

Visio：

功能相对比较复杂。

善于画流程图，框架图。

不利于批注与大篇幅的文字说明。

同样不利于交互的表达与演示。

Photshop/fireworks：

操作难度相对较大，易于画框架图、流程图。

不利于表达交互设计，不擅长文字说明与批注。

Dreamweave：

操作难度大，需要基础的html知识。

易于画框架图、流程图、表达交互设计。

不擅长文字说明与批注。

以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototypedesign的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。

比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。

而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。

而ppt自然是演示时更好。

visio则可以适用于各种流程图、关系图的表达，更可通过画usecase获取用户需求。

PS/FW是图片处理的工具，DW则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。

其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。

因为每个工具的产生，都是为了满足人类的某一方面需求。

比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。

但是不同的工具都有自己的工作领域，在其他领域它并不擅长。

而以上的软件在创造的初期，并非为了帮助产品经理、ue完成产品原型设计，因此他们都不能在prototypedesign这件工作上得心应手。

而AxureRP正是在互联网产品大张其道的前提下，为满足prototypedesign创建的需求，应运而生。

AxureRP能帮助网站需求设计者，快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发。

没错！

AxureRP的特点是：

●快速创建带注释的wireframe文件，并可根据所设置的时间周期，软件自动保存文档，确保文件安全。

●在不写任何一条html与javascript语句的情况下，通过创建的文档以及相关条件和注释，一键生成htmlprototype演示。

●根据设计稿，一键生成一致而专业的word版本的原型设计文档。

说到这里相信很多人已经激起了兴趣，但是在开始学习之前，我认为我们还是有必要先了解一下软件短短的历史，创造这一软件的公司—AxureSoftwareSolutions,Inc.该公司创建于2002年五月，AxureRP是这一软件公司的旗舰产品，2003年一月AxureRP第一版本上线发表，至今已经正式发行到了第四个版本，而我提笔写到这里的时候，Axure5.0版本beta版本已经正式提供下载试用，虽然我已经下载使用，但是我想，写教程还是应该先从稳定的4.6版说起，至于5.0版，我们可以伴随着软件一起成长。

接下来我会结合图片，分几个步骤分享我对Axure的认识，

一、界面与功能

二、工具栏

三、站点地图

四、组件与使用方法

五、复用模板与使用

六、交互功能与注释

七、实例

2界面与功能

不论学习什么，打基础是很重要的。

关于基础练习，我印象最深的故事是王羲之练习书法的故事，将一池水染黑，需要怎样的毅力？

再有就是达芬奇与鸡蛋的故事，一个简单的鸡蛋，达芬奇画了无数次。

我相信正是他们的一步一个脚印，才让他们有了后来伟大的成就。

故事老套，道理浅显，可是我认为很重要。

学习软件，应该先熟悉每个面板，每个基础功能，才能够真正谈到运用。

所以我的学习方法是了解软件的基础功能开始。

一、欢迎界面与功能

运行AxureRP后，首先弹出的是欢迎界面，它拥有的功能和其他软件的欢迎界面没有什么特别的不同。

功能区1：

文档区，这个区域显示用户最近打开的AxureRP文件，用户可以快捷的打开之前编辑的文件。

同时也提供快捷按钮，可以创建新文档与打开AxureRP默认文件夹。

功能区2：

认证区，这个区域显示注册信息。

已经注册的用户，显示注册者名称，与已经获得认证的图标。

未注册用户，显示注册链接，引导用户完成注册注册。

功能区3：

AxureRP学习中心。

主要包括在线学习、帮助文档、问题反馈三个环节。

a、在线学习提供了三个链接：

videotutorial：

点击后进入视频学习中心，可以通过观看相关的flash教程学习AxureRP，不过都是e文解说。

onlinecommunity：

进入AxureRP的官方讨论组，在线讨论学习。

Axureblog：

进入Axure的官方论坛，了解最新资讯。

b、帮助文档也提供了两个链接，但是其实起到的是一样的效果，都是打开帮助文档，只是跳往不同的章节罢了。

c、问题反馈，通过点击链接可以发邮件到support@，以寻求获得帮助。

在欢迎界面中，Axure还提醒用户，用4.6高版本的软件创建保存的Axure文件，无法用以前的低版本查看。

同时，如果我们不希望下次打开软件再看到这个面板，我们可以通过选择“Don'tshowthisatstartup”实现。

二、软件主界面与功能

关闭欢迎界面后，我们进入软件的主界面，淡蓝色调的ui，并不是很张扬。

功能区1：

命令区，和我们操作的所有office软件一样，包含文件、编辑、查看和帮助，这些功能大抵是差不多的。

table也很容易理解，就是对表格编辑的命令。

而Axure特有的几个特殊的命令栏目是

a、wireframe：

线框，包含所有画原型线框图的相关命令。

b、object：

包含所有对工作区物体的操作命令，操作放入工作区的所有widgets，包括组合、排序、锁定以及脚注命令等。

c、generate：

自动生成html演示文件、word说明文档，以及对生成规则进行自行编辑、定义。

功能区2：

工具栏，基本和office风格一模一样，功能也很容易上手。

功能区3：

工作区，这就是我们平常操作工具，创建prototype的舞台，将自己的构思在这里释放，将自己的想法在这里展现。

工作区的上部显示打开的文件名，可同时打开多文档，进行操作。

功能区4：

站点地图，AxsureRP创建的文件是模拟真实网站页面关系的，sitemap就是通过树形目录关系，管理所有的站点页面文件与流程图文件。

科学的文件关系结构，对有效的演示文档与生成易读的说明文档相当重要。

我的操作习惯是先画流程图，然后根据流程图构建页面文件框架，最后才开始页面的具体设置。

期间可以将文件分为LOFI（低保真）与HIFI（高保真）两个部分进行分别展示，有利于不同的需求者使用。

功能区5：

器具箱，囤积了所有用来画wireframe与流程图的对象。

我们可以通过拖拽的方式将小图形放入工作区，进行操作。

对于这里面的对象，我们有必要一一详细了解。

功能区6：

复用模块区，这里创建的页面文件和sitemap的页面相似，唯一不同的是，master的每个文件，可以当作一个整体，被sitemap反复调用。

这个功能就相当于程序开发中的程序复用，用好这个功能，可以减少我们很大一部的工作量。

也更容易理解网页文件的关系，了解网页设计师、程序员是怎么构建网站的页面的。

功能区7：

页面笔记，用来对当前创作页面进行注释与说明。

同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。

功能区8：

页面载入时的交互功能。

通过在这里设置，不同条件下，页面初次打开时的状况。

功能区9：

注释与交互区。

这个注释和交互和7、8不同，7、8针对的是页面，而9针对的是页面中的元素，也就是一个个widgets。

功能区的上面部分设置交互条件。

通过鼠标点击、滑入、滑出，设置触发的事件，与对应widgets相应的变化。

这一部分对没有程序基础的人可能会有一点难度，我稍后会做详细解释。

功能区的下面部分是注释部分，用户可以对选定的对象进行详细的注释。

Axure已经设置了几个默认的注释字段，但是其实这些默认的注释字段，大家完全可以不使用，因为它可能和你要说明的东西风马牛不相及。

那么该怎么办呢？

Axure提供了自主设置字段，只要你自己设置好自己常用的字段，然后按照自己的习惯编写就可以了。

比如说你要说明对象的功能、优先级、参数，那么你在设置中加入这三个字段就好了。

Axure最大的优势就是你设置的这些注释，在生成说明文档时，Axure自动帮你生成PRD规格的表格文档，你可以省去相当大的编号工作，与文档工作。

这些我在之后也会做说明。

这些就是Axure的主要功能区，但是其实还有两个小的角落大家可能会忽略，那就是6、7、8区下面的一行系统信息，这里显示的信息很重要，但是一般人却经常会忽视。

我只所以说重要，因为我们在给ui设计师wireframe的时候他们总会问，这里多少像素，那里多少像素，可是我们在画wireframe的时候却无法度量。

Axure创建的wireframe，完全可以生成html，因此我们可以在画的时候就度量好每个像素距离。

但是我们要怎么做呢？

这就需要利用到下面这行小信息栏了。

信息栏左边显示的是文档保存情况。

而右边呢，当你将一个widgets放入工作区，并选择这个widget时，这里就有用了，它显示的是你所选择widget的高宽，以及距离页面顶部和左边的px距离。

通过使用上下左右键，结合这个信息栏，你可以一步一步将它移动到你想去的地方。

有意思吧？

3文档管理

开章要说的是文档管理。

文档管理看似简单，但是这是从操作功能上来说的，而我在说功能上的时候，想把我对文档管理的理解也一并说一下。

文档管理的目的，其实是为了有一个清晰的产品思路。

刚开始工作的时候，我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的，我也不例外。

没有好的整理习惯，这直接导致每次寻找先前的文档都要花费相当长的时间，甚至不小心误删，如果恰好有事请假，别的同事也无法接手工作。

所以，做一个prototype需要首先构建一个清晰的文档关系，这样一方面能够让自己清楚文件关系与位置，更主要的是让开发者与接受者能清晰理解你的思路，生成更合理的产品说明word文档。

AxureRP的sitemap