计算机软件及应用Axure基本使用指南.docx

资源描述

计算机软件及应用Axure基本使用指南.docx

《计算机软件及应用Axure基本使用指南.docx》由会员分享，可在线阅读，更多相关《计算机软件及应用Axure基本使用指南.docx（32页珍藏版）》请在冰点文库上搜索。

计算机软件及应用Axure基本使用指南.docx

计算机软件及应用Axure基本使用指南

Axure基本使用指南

原型工具的选择1

axure文件的使用2

axure文件的制作与生成4

文档管理（Document）6

模板复用（Templates）10

Widget工具14

注释annotations19

交互interactions26

AxureRPPro5.5中文翻译教程30

原型工具的选择

纸笔：

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

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

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

　　Word：

上手难度普通。

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

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

Excel：

上手难度普通。

易于画表单类的页面，易于做批注，但演示效果一般。

　　PPT：

上手难度普通。

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

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

　　Visio：

功能相对比较复杂。

善于画流程图，框架图。

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

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

　　Photshop/fireworks：

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

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

　　Dreamweave：

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

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

不擅长文字说明与批注。

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

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

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

而excel在处理表单类和包含计算公式类的报表页面时，较其它工具方便。

而ppt自然是演示时更好。

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

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

axure文件的使用

一个最简单的axure原型可能会产生如图中所示的几个文件

点击红框中的两个文件都会打开同一个页面。

如下图。

由三个区域组成，1、文档结构区。

显示所有你设计的页面。

点击closeframes可以关闭。

2、主操作区。

所有的设计只能在在这个区域显示。

3、pagenotes。

对当前区域的解释说明，可以由用户自行添加文字，默认显示当前页面的名称。

一个设计实例

点击closeframe之后的效果。

当然，closeframe起到了个导航的作用，帮助你进行页面切换。

实际上，当你点击closeframe是跳转到了另外一个页面，一个非index.html，和当前页面_start.html之外的页面，即当前页面.html。

axure文件的制作与生成

你需要到axure的官网上下载一个最新的axure文件（）目前最高版本5.6。

但是如果没有注册码，使用的版本只可以使用15天。

所以你还需要在网上搜索一个注册码，这个很多，而且一个注册码可以适用于多个版本。

安装过程很简单，下一步就行，有安装不上的朋友请联系我。

打开axure，你看到的界面上的区域可以如图从左到右，从上到下的被划分为：

1、工具栏

2、文档结构区：

以树形结构来表达层级关系

3、组件面板：

最常用的区域之一，所以的控件全部都摆放在这儿了。

你可以通过这个面板把组件拖拽到主操作区中。

4、模板面板：

模板可以说是自定义的组件区域。

你可以通过组件之间的排列组合得到你自己的常用的设计，把它保存到模板区域，就可以多次复用了。

5、主操作区。

摆放你设计的地方。

6、面板注释及动作区：

不是特别常用的一个区域，基础操作完全可以收起。

事实上，我们也不经常在这个区域添加注释。

但是可能会需要直接在页面上而不是组件上添加动作。

7、交互动作面板：

也是最重要最常用的区域。

这个面板的所有的动作都需要加载到组件上。

也就是这个面板必须与组件（条目3）配合使用。

8、注释说明面板：

也不是特别常用。

除非你需要在组件上添加说明文字，但是没办法收起它。

除非关闭动作面板。

9、动态图层面板：

最重要面板之三。

但是你需要先了解axure比较复杂的一个组件dynamicpanel才能使用这个面板。

ctrl+s保存axure文件，选择一个目录，就可以生成一个.rp文件。

但是真正的原型文件是前文介绍过的html文件。

.rp文件只不过是生成那个html文件的源文件。

下面介绍如何生产html文件。

如图所示，你必须单击F5或者单击图中所示的图标，之后弹出下面的这个页面

选择你本机的任何一个文件，之后点击generate，出现如图的页面，生成完毕后，浏览器会自动打开这个html文件，然后你可以检查自己的设计。

恭喜你，完成这步，你就可以开始你的axure原型之旅了。

文档管理（Document）

　　开章要说的是文档管理。

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

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

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

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

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

　　AxureRP的sitemap，与windows的树形目录相似，是以父子关系构建页面关系的，每个页面既可以是一个页面page，也可以是一个流程图flow。

一、工具功能条

　　1、增加一个子页面：

为所选择的页面创建一个子页面。

　　2、页面上移：

同等级的页面中，将所选页面的上下排列次序，上移一个位置。

　　3、页面下移：

同等级的页面中，将所选页面的上下排列次序，下移一个位置。

　　4、页面降序：

将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。

　　5、页面升序：

将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。

　　6、删除页面：

将所选页面删除，同时删除其子页面。

　　7、编辑页面：

在工作区打开所选择页面，进行编辑。

二、右键—增加为鼠标右击文件所显示命令，下同。

　　1、增加一个子页面：

同一，1。

（表示和第一大点，第1小点功能相同，以下同此）

　　2、在所选页面之上增加一个同等级页面。

　　3、在所选页面之下增加一个同等级页面。

三、右键—移动

　　1、页面上移：

同一，2。

　　2、页面下移：

同一，3。

　　3、页面降序：

同一，4。

　4、页面升序：

同一，5。

四、右键—复制

　　1、复制页面：

复制所选页面，作为同级页面显示在所选页面下方。

不包含所选页面子页面。

　　2、复制分支：

复制所选页面以及子页面，作为同级分支显示在所选页面分支下方。

五、右键—页面类型

　　1、wireframe：

页面类型定为线框图，文件图标显示页面图标。

　　2、flow：

页面类型定位流程图，文件图标显示流程图标。

六、右键—其他

　　1、删除页面：

同一、6。

　　2、重命名页面：

为所选页面重命名。

　　3、编辑页面：

同一、7。

　　4、生成流程表：

将所选页面以及其子页面关系，生成流程图。

生产图有两种页面布局方式可选。

标准模式，页面按照父子关系从上自下排列；阶梯模式，页面按照父子关系从左上至右下，以阶梯方式进行排列。

　　5、复制页面链接到剪切板。

　　以上就是sitemap所有命令，其实这些命令都很简单，也很容易理解，关键在于怎么去使用。

　　由于页面有两种类型，wireframe与flow，所以要善于用这两种标记页面，从而让人理解你的意图。

我总结大致这两种标记可以如下利用。

　　flow图为父页面，wireframe图为子页面：

先画流程图，然后根据流程图构建页面关系。

这样在流程图的指引下结构页面关系，可以更清晰的理解页面框架。

　　wireframe为父页面，flow为子页面：

为页面线框图中的特殊部分做流程解释。

可以对页面的细节部分进行详尽的解释。

　　当然，这两种结构方式要活学活用，在复杂的产品页面结构中，他们完全是你中有我，我中有你的。

模板复用（Templates）

　　masters和sitemap面板很相似，文档操作也一样，它们的本质区别是，sitemap里的文件是最终展示页面，masters里的文件却只是一个模块，是页面的一个部分。

　　masters的英文直译是主人或雇主，但是我认为这里可以叫做模板，或者复用模块。

masters的文件，是页面中重复的模块，由于在不同页面中这些模块是一样的，所以拿出来作为一个模块编辑，然后在不同页面中进行调用。

　　这个功能类似于网页程序开发中的程序复用，不同页面中调用同一段程序，一般把这段程序单独做成一段页面程序，然后用include命令进行调用。

master的文件就相当于这段被调用的页面程序。

dreamweaver也有类似的功能，就是template，可以参照理解。

一、功能条

　　master的功能条功能基本和sitemap一模一样，功能也基本一样。

唯一不同的是master可以创建文件夹，可以通过文件夹收纳不同的文件，因此唯一不同的就是第一个功能按钮，功能作用是增加一个文件夹。

二、右键单击文档——增加

　　增加功能的功能模块功能除了增加文件夹其他和sitemap相同，大家可以参考教程三中的二大条。

　　而masters的文档组织结构主要依靠文件夹完成，页面文件之间不存在父子关系。

这是文档操作与组织中与sitemap的最大不同。

三、右键单击文档——移动

　　文件移动功能基本上也和sitemap完全相同，但是父子关系的文档移动是文件相对于文件夹完成，而不是相对于文件进行。

　　功能，基本上也可以参考教程三的第三点。

四、右键单击文件——文件身份“行为”

　　behavior是行为的意思，这个功能是axure升级到4版本后加入的，是针对master的不同使用情况而添加的一个功能，也是要重点介绍的功能。

　　1、normal：

普通文件。

就是一般的复用文件。

是默认创建的复用文件。

　　2、placeinbackground：

定位的复用模板，这类模板的特点是定位于页面的底层，并且锁定模板中的widgets在他原来创建的位置。

这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。

　　3、customwidgetsbehavior：

自定义模块。

这类模块就类似于自创了一个widgets。

　　这类模块与其他类型的复用模块的不同在于，其他模块与复用到页面的模块是完全相同的，模块的功能设置是什么，功能说明是什么，页面中的模块设置和功能说明就是什么。

　　而自定义模块与页面中被复用的模块是母子关系。

自定义模块只决定了模块的功能和位置，但是进入到特定的页面中，模块中的各自部分的说明和功能可以重新定义。

　　充分理解三种不同类型的复用模块的区别，根据不同环境有效的选择，也是非常重要的。

五、右键单击文件——其他

　　1、2、3功能都是文档文档操作功能，和sitemap一样，分别是删除、重命名和编辑master。

　　4、5功能是对应的。

前者是将所选模板文件批量运用于页面，后者是将所选模板文件，批量从页面中去除。

通过选择此功能，会弹出sitemap文件的树形目录，你可以通过选择需要添加模板的页面，从而完成模板使用或移除。

　　checkall：

选择所有页面

　　uncheckall：

所有页面都不选择

　　checkallchildren：

选择所选页面以及其所有子页面

　　uncheckallchildren：

不选择所选页面以及其所有字页面

　　在4中有特殊的position设置和options命令，

　　position中有两个命令

　　placeinblackground：

将文件至于页面背景

　　specifylocation：

是特殊定位，可以通过设置距离左侧和上边的距离，来将模板文件放入特定的位置。

　　options里的多选框的意思是“只有页面中没有此模板时才置入”，默认是选择的。

如果不选择而置入页面，就会出现如果页面中已经有模板，模板被再次置入的情况。

当然如果有特殊需要的模块，就可以这么使用了。

　　6、usagereport：

使用报告，点击后弹出面板，显示所有使用了此复用模板的列表，显示的是文件名称，通过双击文件名，可以在工作区打开，直接编辑。

Widget工具

　　AxureRP的widgets工具栏，就是我们用来画线框图wireframe、流程图flow的工具，也可以说是组成我们最终输出图表的零件。

好比我们小时候玩的组装积木，这些工具就是组装积木里的一个个小部件，组成什么？

组合得怎样？

完全依靠个人的经验和智慧。

因此，熟悉每一个工具的用法和用途，才能随心所欲的画出脑海中的图形。

　　Widgets工具栏，下分两类工具：

　　wireframe线框图工具：

基本上对应着web页面中的各种图形。

针对页面中交互行为的表达，AxureRP专门增加了imagemapregion图像映射区、dynamicpanel动态面版、menu（vertical/horizontal）水平/垂直菜单等几个特殊的工具。

　　Flow工具：

流程图所需的基本图形框架。

　　我们先谈wireframe线框图工具。

学习这部分工具，如果事先有html基础，或者对web页面元素有比较充分的理解，就很容易入手。

以下我根据图片中的编码，依次讲解。

　　1、image图片：

给wireframe中插入一个图片站位，也可以直接置入真实的图片。

　　2、textpanel文本：

插入文本。

相当于插入了一个标签。

是不带链接的文本。

但是其实也可以带链接，在interactions中我们会提到。

　　3、hyperlink超链接：

插入带链接的文本。

相当于插入了一段带标签的文字。

但其实在Axure中它与普通文本除了外型不同，没有本质区别。

之所以将两类文字区分开来，目的还是为了在视觉表达中让人直观的理解链接文本和普通文本，而这对于设计人员理解也非常重要，因此建议画图时尽量标准的区分链接文本和普通文本。

占位符通常用来表达在页面中某些特殊区域，比如情况复杂，或者在系统升级中不需要修改，又或者无关紧要的区域等等。

作者需要结合说明文字，进行对应的详细表达。

　　6、button按钮：

插入一个按钮，相当于