精彩Axure教程中文汉化版Word格式.docx
- 文档编号:22519341
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:46
- 大小:1.53MB
精彩Axure教程中文汉化版Word格式.docx
《精彩Axure教程中文汉化版Word格式.docx》由会员分享,可在线阅读,更多相关《精彩Axure教程中文汉化版Word格式.docx(46页珍藏版)》请在冰豆网上搜索。
而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的认识。
一、界面与功能
二、工具栏
三、站点地图
四、组件与使用方法
五、复用模板与使用
六、交互功能与注释
七、实例
PartII:
界面与功能(Interface&
Function)
一、软件主界面与功能
关闭欢迎界面后,我们进入软件的主界面,淡雅的色调,并不是很张扬。
功能区1:
命令区,和我们操作的所有office软件一样,包含文件、编辑、查看和帮助,这些功能大抵是差不多的。
table也很容易理解,就是对表格编辑的命令。
而Axure特有的几个特殊的命令栏目是
a、线框图:
线框,包含所有画原型线框图的相关命令。
b、对象:
包含所有对工作区物体的操作命令,操作放入工作区的所有组件,包括组合、排序、锁定以及脚注命令等。
c、生成:
自动生成html演示文件、word说明文档,以及对生成规则进行自行编辑、定义。
功能区2:
工具栏,基本和office风格一模一样,功能也很容易上手。
功能区3:
工作区,这就是我们平常操作工具,创建模型的舞台,将自己的构思在这里释放,将自己的想法在这里展现。
工作区的上部显示打开的文件名,可同时打开多文档,进行操作。
功能区4:
站点地图,AxsureRP创建的文件是模拟真实网站页面关系的,站点地图就是通过树形目录关系,管理所有的站点页面文件与流程图文件。
科学的文件关系结构,对有效的演示文档与生成易读的说明文档相当重要。
我的操作习惯是先画流程图,然后根据流程图构建页面文件框架,最后才开始页面的具体设置。
期间可以将文件分为LOFI(低保真)与HIFI(高保真)两个部分进行分别展示,有利于不同的需求者使用。
功能区5:
器具箱,囤积了所有用来画线框图与流程图的对象。
我们可以通过拖拽的方式将小图形放入工作区,进行操作。
对于这里面的对象,我们有必要一一详细了解。
功能区6:
复用模块区,这里创建的页面文件和网站地图的页面相似,唯一不同的是,模块的每个文件,可以当作一个整体,被网站地图反复调用。
这个功能就相当于程序开发中的程序复用,用好这个功能,可以减少我们很大一部的工作量。
也更容易理解网页文件的关系,了解网页设计师、程序员是怎么构建网站的页面的。
功能区7:
页面笔记,用来对当前创作页面进行注释与说明。
同时可以在这里对页面里的关键字段和特殊问题进行详细的描述。
功能区8:
页面载入时的交互功能。
通过在这里设置,不同条件下,页面初次打开时的状况。
功能区9:
注释与交互区。
这个注释和交互和7、8不同,7、8针对的是页面,而9针对的是页面中的元素,也就是一个个组件。
功能区的上面部分设置交互条件。
通过鼠标点击、滑入、滑出,设置触发的事件,与对应组件相应的变化。
这一部分对没有程序基础的人可能会有一点难度,稍后会做详细解释。
功能区的下面部分是注释部分,用户可以对选定的对象进行详细的注释。
Axure已经设置了几个默认的注释字段,但是其实这些默认的注释字段,大家完全可以不使用,因为它可能和你要说明的东西风马牛不相及。
那么该怎么办呢?
Axure提供了自主设置字段,只要你自己设置好自己常用的字段,然后按照自己的习惯编写就可以了。
比如说你要说明对象的功能、优先级、参数,那么你在设置中加入这三个字段就好了。
Axure最大的优势就是你设置的这些注释,在生成说明文档时,Axure自动帮你生成PRD规格的表格文档,你可以省去相当大的编号工作,与文档工作。
这些在之后也会做说明。
这些就是Axure的主要功能区,但是其实还有两个小的角落大家可能会忽略,那就是6、7、8区下面的一行系统信息,这里显示的信息很重要,但是一般人却经常会忽视。
之所以说重要,因为我们在给ui设计师线框图的时候他们总会问,这里多少像素,那里多少像素,可是我们在画线框图的时候却无法度量。
Axure创建的线框图,完全可以生成html,因此我们可以在画的时候就度量好每个像素距离。
但是我们要怎么做呢?
这就需要利用到下面这行小信息栏了。
信息栏左边显示的是文档保存情况。
而右边呢,当你将一个组件放入工作区,并选择这个widget时,这里就有用了,它显示的是你所选择widget的高宽,以及距离页面顶部和左边的px距离。
通过使用上下左右键,结合这个信息栏,你可以一步一步将它移动到你想去的地方。
有意思吧?
PartIII:
文档管理(Document)
开章要说的是文档管理。
文档管理看似简单,但是这是从操作功能上来说的,在说功能上的时候,把对文档管理的理解也一并说一下。
文档管理的目的,其实是为了有一个清晰的产品思路。
刚开始工作的时候,很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的,没有好的整理习惯,这直接导致每次寻找先前的文档都要花费相当长的时间,甚至不小心误删,如果恰好有事请假,别的同事也无法接手工作。
所以,做一个模型需要首先构建一个清晰的文档关系,这样一方面能够让自己清楚文件关系与位置,更主要的是让开发者与接受者能清晰理解你的思路,生成更合理的产品说明word文档。
AxureRP的网站地图,与windows的树形目录相似,是以父子关系构建页面关系的,每个页面既可以是一个页面page,也可以是一个流程图流程图。
一、工具功能条
1、增加一个子页面:
为所选择的页面创建一个子页面。
2、页面上移:
同等级的页面中,将所选页面的上下排列次序,上移一个位置。
3、页面下移:
同等级的页面中,将所选页面的上下排列次序,下移一个位置。
4、页面降序:
将所选页面等级降序,作为原等级中,排列在所选页面上方之页面的子页面。
5、页面升序:
将所选页面等级升序,将所选页面的页面等级,升序为父页面的同等级页面。
6、删除页面:
将所选页面删除,同时删除其子页面。
7、编辑页面:
在工作区打开所选择页面,进行编辑。
二、右键—增加为鼠标右击文件所显示命令,下同。
同一,1。
(表示和第一大点,第1小点功能相同,以下同此)
2、在所选页面之上增加一个同等级页面。
3、在所选页面之下增加一个同等级页面。
三、右键—移动
1、页面上移:
同一,2。
2、页面下移:
同一,3。
3、页面降序:
同一,4。
4、页面升序:
同一,5。
四、右键—复制
1、复制页面:
复制所选页面,作为同级页面显示在所选页面下方。
不包含所选页面子页面。
2、复制分支:
复制所选页面以及子页面,作为同级分支显示在所选页面分支下方。
五、右键—页面类型
1、线框图:
页面类型定为线框图,文件图标显示页面图标。
2、流程图:
页面类型定位流程图,文件图标显示流程图标。
六、右键—其他
1、删除页面:
同一、6。
2、重命名页面:
为所选页面重命名。
3、编辑页面:
同一、7。
4、生成流程表:
将所选页面以及其子页面关系,生成流程图。
生产图有两种页面布局方式可选。
标准模式,页面按照父子关系从上自下排列;
阶梯模式,页面按照父子关系从左上至右下,以阶梯方式进行排列。
5、复制页面链接到剪切板。
以上就是网站地图所有命令,其实这些命令都很简单,也很容易理解,关键在于怎么去使用。
由于页面有两种类型,线框图与流程图,所以要善于用这两种标记页面,从而让人理解你的意图。
总结大致这两种标记可以如下利用。
流程图图为父页面,线框图图为子页面:
先画流程图,然后根据流程图构建页面关系。
这样在流程图的指引下结构页面关系,可以更清晰的理解页面框架。
线框图为父页面,流程图为子页面:
为页面线框图中的特殊部分做流程解释。
可以对页面的细节部分进行详尽的解释。
当然,这两种结构方式要活学活用,在复杂的产品页面结构中,他们完全是你中有我,我中有你的。
PartIV:
模板复用(Templates)
站点地图和网站地图面板很相似,文档操作也一样,它们的本质区别是,网站地图里的文件是最终展示页面,站点地图里的文件却只是一个模块,是页面的一个部分。
站点地图的英文直译是主人或雇主,这里可以叫做模板,或者复用模块。
站点地图的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。
这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。
模块的文件就相当于这段被调用的页面程序。
dreamweaver也有类似的功能,就是template,可以参照理解。
一、功能条
模块的功能条功能基本和网站地图一模一样,功能也基本一样。
唯一不同的是模块可以创建文件夹,可以通过文件夹收纳不同的文件,因此唯一不同的就是第一个功能按钮,功能作用是增加一个文件夹。
二、右键单击文档——增加
增加功能的功能模块功能除了增加文件夹其他和网站地图相同,大家可以参考教程三中的二大条。
而站点地图的文档组织结构主要依靠文件夹完成,页面文件之间不存在父子关系。
这是文档操作与组织中与网站地图的最大不同。
三、右键单击文档——移动
文件移动功能基本上也和网站地图完全相同,但是父子关系的文档移动是文件相对于文件夹完成,而不是相对于文件进行。
功能,基本上也可以参考教程三的第三点。
四、右键单击文件——文件身份“行为”
这个功能是axure升级到4版本后加入的,是针对模块的不同使用情况而添加的一个功能,也是要重点介绍的功能。
1、正常(N):
普通文件。
就是一般的复用文件。
是默认创建的复用文件。
2、作为背景(B):
定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的组件在他原来创建的位置。
这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。
3、自定义组件(C):
自定义模块。
这类模块就类似于自创了一个组件。
这类模块与其他类型的复用模块的不同在于,其他模块与复用到页面的模块是完全相同的,模块的功能设置是什么,功能说明是什么,页面中的模块设置和功能说明就是什么。
而自定义模块与页面中被复用的模块是母子关系。
自定义模块只决定了模块的功能和位置,但是进入到特定的页面中,模块中的各自部分的说明和功能可以重新定义。
充分理解三种不同类型的复用模块的区别,根据不同环境有效的选择,也是非常重要的。
五、右键单击文件——其他
1、2、3功能都是文档文档操作功能,和网站地图一样,分别是删除、重命名和编辑模块。
4、5功能是对应的。
前者是将所选模板文件批量运用于页面,后者是将所选模板文件,批量从页面中去除。
通过选择此功能,会弹出网站地图文件的树形目录,你可以通过选择需要添加模板的页面,从而完成模板使用或移除。
在4中有特殊的position设置和options命令,
position中有两个命令
placeinblackground:
将文件至于页面背景
specifylocation:
是特殊定位,可以通过设置距离左侧和上边的距离,来将模板文件放入特定的位置。
options里的多选框的意思是“只有页面中没有此模板时才置入”,默认是选择的。
如果不选择而置入页面,就会出现如果页面中已经有模板,模板被再次置入的情况。
当然如果有特殊需要的模块,就可以这么使用了。
6、使用报告,点击后弹出面板,显示所有使用了此复用模板的列表,显示的是文件名称,通过双击文件名,可以在工作区打开,直接编辑。
PartV:
Widget工具
AxureRP的组件工具栏,就是我们用来画线框图、流程图的工具,也可以说是组成我们最终输出图表的零件。
好比我们小时候玩的组装积木,这些工具就是组装积木里的一个个小部件,组成什么?
组合得怎样?
完全依靠个人的经验和智慧。
因此,熟悉每一个工具的用法和用途,才能随心所欲的画出脑海中的图形。
组件工具栏,下分两类工具:
线框图线框图工具:
基本上对应着web页面中的各种图形。
针对页面中交互行为的表达,AxureRP专门增加了imagemapregion图像映射区、dynamicpanel动态面版、menu(vertical/horizontal)水平/垂直菜单等几个特殊的工具。
流程图工具:
流程图所需的基本图形框架。
我们先谈线框图线框图工具。
学习这部分工具,如果事先有html基础,或者对web页面元素有比较充分的理解,就很容易入手。
以下我根据图片中的编码,依次讲解。
1、图片:
给线框图中插入一个图片站位,也可以直接置入真实的图片。
2、文本快:
插入文本。
相当于插入了一个<
text>
标签。
是不带链接的文本。
但是其实也可以带链接,在interactions中我们会提到。
3、超链接:
插入带链接的文本。
相当于插入了一段带<
a>
标签的文字。
但其实在Axure中它与普通文本除了外型不同,没有本质区别。
之所以将两类文字区分开来,目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要,因此建议画图时尽量标准的区分链接文本和普通文本。
4、矩形:
插入一个矩形。
可以对其进行图形样式编辑。
此图形通畅被用来表达板块的边界。
5、占位符:
插入一个占位符。
占位符通常用来表达在页面中某些特殊区域,比如情况复杂,或者在系统升级中不需要修改,又或者无关紧要的区域等等。
作者需要结合说明文字,进行对应的详细表达。
6、按钮:
插入一个按钮,相当于<
button>
按钮一般结合表单使用,当然也可以作为强化的提示链接使用。
7、表格:
插入一个表格。
Axure的表格使用起来不是很方便,增加行、列,修改行、列宽度都不方便,算是一个败笔。
期待在下一个版本的时候能够有更好的进步。
与标准化制作网页一样,表格的使用在画线框图的时候就应该明确其作用,是用来作为数据列表展示使用,而不是作为网页布局的控件。
8、文本输入框:
结合表单使用。
一般用作表单中提交数据。
比如搜索框、用户登录框、注册信息填写框等。
用作字段提交或单行数据提交。
9、文本区:
一般用作大段文字编辑、提交。
比如文章编辑、留言等板块。
10、下拉列表框:
一般用作下拉菜单或者下拉列表选项,比如在搜索中,可以通过下拉列表框来定位搜索分类的范围。
也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转。
11、列表选择框:
通过文本框列表选项,通常使用在多项列表选择,比如在填写简历表的时候,选择你所感兴趣的行业,会提供列表选择框。
不过列表选择框都会结合按钮使用。
12、多项选择:
多项选择通常使用在表单中,以提供多项选择。
比如在有些有些注册要求用户选择兴趣爱好,会提供十多个选项,因为选项可以并列进行,因此使用的是多项选择。
13、单项选择:
在一组选择中选择适合选项,选项关系非此即彼。
比如在填写性别的时候提供男女选择,用户非男即女,只取一项。
当然,不排除再多提供一个双性选择,这样就是三选一,但是同样是非此即彼的单一选择。
14、15、水平线、垂直线:
用以分割页面中的不同板块区域。
由于web页面中只能存在垂直与水平线,为了系统生成用于演示的html文件,特将两种线条分开使用。
16、形状按钮:
相当于图形按钮,多用于导航,或者多帧切换的版面切换按钮。
可进行边角编辑。
17、图像映射区:
它用于在web页面中制造一片不可见的区域,一般是图片的部分区域,相当于图片的热区,从而添加说明与互动。
在现实的网页中经常会有一张大图中有某个区域是触发按钮,而图像映射区就可以用来说明这个区域的的功能和互动内容。
18、框架:
类似于html中的<
iframe>
对象。
用于在页面中制造页面框架,每个框架中嵌入不同的页面。
我们经常看到后台系统分左右两栏,一般都是使用了框架,左侧载入的是导航页面,右侧是载入的管理页面。
Axure的缺点是,暂时不支持百分比,因此iframe都是按像素度量的,和实际页面效果还是有差距。
19、动态面版:
是Axure为了表现多帧区域内容而制造的一个工具。
它的图标很形象的说明了它的结构。
它是不同的state叠加的一个动态区域,默认显示其中一个state,当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state。
不同state的关系,类似于photoshop的层,也类似于html中的css属性layer。
我们可以通过右击dynamicpanel进行state编辑,然后通过打开对应state进行编辑,编辑方式和编辑页面相同。
20、21、水平/垂直菜单:
用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加submenu。
AxureRPpro的组件工具栏,另一个重要的工具组就是流程图,流程工具。
对于画流程图,是我们经常会遇到的问题。
我们和程序工程师沟通,用再多的口水,也无法挑明的事情,画一张简明的流程图,就能很直白的说明关键问题。
有时候你可能会懊恼,因为程序员的思维犹如计算机,你告诉他为什么没有用,你就告诉他该怎么做,是左是右,是0是1就好了。
这个时候,产品经理需要的是理性思维,清晰的思路,如果你不清晰,工程师大多数会跟着你的思路乱做一团。
所以多画几个流程,多根据页面需求画清晰的流程,就能解决实际的问题。
话不多说,本章主要介绍流程图里面的工具,因为图形其实很好介绍,简单的英文翻译就好了,所以也顺带说说这些图形在流程里的作用。
方式还和以前一样,编号,对号入座,咱们来一个萝卜,一个坑:
1、矩形
作用:
一般用作要执行的处理(process),在程序流程图中做执行框。
在axure中如果是画页面框架图,那么也可以指代一个页面。
有时候我们会把页面和执行命令放在同一个流程中做说明,这个时候将两类不同的矩形做色彩区别,然后做说明就好了。
2、圆角矩形或者扁圆
表示程序的开始或者结束,在程序流程图中用作为起始框或者结束框。
3、斜角矩形
作用:
斜角矩形平时几乎不使用,可以视情况自行定义。
或者在其他的流程图中,有特殊含义,暂不知晓,也希望有识之士指点一二。
4、菱形
表示决策或判断(例如:
If...Then...Else),在程序流程图中,用作判别框。
5、文件
表达为一个文件,可以是生成的文件,或者是调用的文件。
如何定义,需要自己根据实际情况做解释。
6、括弧
注释或者说明,也可以做条件叙述。
一般流程到一个位置,做一段执行说明,或者特殊行为时,会用到它。
7、半圆形
半圆在使用中常作为流程页面跳转、流程跳转的标记。
8、三角形
控制传递,一般和线条结合使用,画数据传递。
9、梯形
一般用作手动操作。
10、椭圆形或圆形
如果画小圆,一般是
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 精彩 Axure 教程 中文 汉化