您的位置:知识库 » 其他分类

交互原型设计软件Axure中文教程

来源: ued163  发布时间: 2010-03-29 23:50  阅读: 14212 次  推荐: 2   原文链接   [收藏]  
[1] 交互原型设计软件Axure中文教程
[2] 交互原型设计软件Axure中文教程
[3] 交互原型设计软件Axure中文教程

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

masters的英文直译是主人或雇主,但是我认为这里可以叫做模板,或者复用模块。masters的文件,是页面中重复的模块,由于在不同页面中这些模块是一样的,所以拿出来作为一个模块编辑,然后在不同页面中进行调用。

这个功能类似于网页程序开发中的程序复用,不同页面中调用同一段程序,一般把这段程序单独做成一段页面程序,然后用include命令进行调用。master的文件就相当于这段被调用的页面程序。dreamweaver也有类似的功能,就是template,可以参照理解。

一、功能条

master的功能条功能基本和sitemap一模一样,功能也基本一样。唯一不同的是master可以创建文件夹,可以通过文件夹收纳不同的文件,因此唯一不同的就是第一个功能按钮,功能作用是增加一个文件夹。

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

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

而masters的文档组织结构主要依靠文件夹完成,页面文件之间不存在父子关系。这是文档操作与组织中与sitemap的最大不同。

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

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

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

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

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

  1. normal:普通文件。就是一般的复用文件。是默认创建的复用文件。
  2. place in background:定位的复用模板,这类模板的特点是定位于页面的底层,并且锁定模板中的widgets在他原来创建的位置。这类复用模块主要用于创建head、foot、侧边栏等明确定位的复用模块。
  3. custom widgets behavior:自定义模块。这类模块就类似于自创了一个widgets。

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

而自定义模块与页面中被复用的模块是母子关系。自定义模块只决定了模块的功能和位置,但是进入到特定的页面中,模块中的各自部分的说明和功能可以重新定义。

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

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

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

4、5功能是对应的。前者是将所选模板文件批量运用于页面,后者是将所选模板文件,批量从页面中去除。通过选择此功能,会弹出sitemap文件的树形目录,你可以通过选择需要添加模板的页面,从而完成模板使用或移除。

check all:选择所有页面
uncheck all:所有页面都不选择
check all children:选择所选页面以及其所有子页面
uncheck all children:不选择所选页面以及其所有字页面

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

position中有两个命令
place in blackground:将文件至于页面背景
specify location:是特殊定位,可以通过设置距离左侧和上边的距离,来将模板文件放入特定的位置。 

options里的多选框的意思是“只有页面中没有此模板时才置入”,默认是选择的。如果不选择而置入页面,就会出现如果页面中已经有模板,模板被再次置入的情况。当然如果有特殊需要的模块,就可以这么使用了。

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

widgets工具

AxureRP的widgets工具栏,就是我们用来画线框图wireframe、流程图flow的工具,也可以说是组成我们最终输出图表的零件。好比我们小时候玩的组装积木,这些工具就是组装积木里的一个个小部件,组成什么?组合得怎样?完全依靠个人的经验和智慧。因此,熟悉每一个工具的用法和用途,才能随心所欲的画出脑海中的图形。

Widgets工具栏,下分两类工具:

wireframe线框图工具:基本上对应着web页面中的各种图形。针对页面中交互行为的表达,Axure RP专门增加了image mapregion 图像映射区、dynamic panel动态面版、menu(vertical/horizontal)水平/垂直菜单等几个特殊的工具。

Flow工具:流程图所需的基本图形框架。

我们先谈wireframe线框图工具。学习这部分工具,如果事先有html基础,或者对web页面元素有比较充分的理解,就很容易入手。以下我根据图片中的编码,依次讲解。

  • 1、image图片:给wireframe中插入一个图片站位,也可以直接置入真实的图片。
  • 2、text panel文本:插入文本。相当于插入了一个< text >标签。是不带链接的文本。但是其实也可以带链接,在interactions中我们会提到。
  • 3、hyperlink超链接:插入带链接的文本。相当于插入了一段带< a >标签的文字。但其实在Axure中它与普通文本除了外型不同,没有本质区别。
    之所以将两类文字区分开来,目的还是为了在视觉表达中让人直观的理解链接文本和普通文本,而这对于设计人员理解也非常重要,因此建议画图时尽量标准的区分链接文本和普通文本。
  • 4、rectangle矩形:插入一个矩形。可以对其进行图形样式编辑。此图形通畅被用来表达板块的边界。
  • 5、placeholder占位符:插入一个占位符。占位符通常用来表达在页面中某些特殊区域,比如情况复杂,或者在系统升级中不需要修改,又或者无关紧要的区域等等。作者需要结合说明文字,进行对应的详细表达。
  • 6、button按钮:插入一个按钮,相当于< button >标签。按钮一般结合表单使用,当然也可以作为强化的提示链接使用。
  • 7、teble表格:插入一个表格。Axure的表格使用起来不是很方便,增加行、列,修改行、列宽度都不方便,算是一个败笔。期待在下一个版本的时候能够有更好的进步。与标准化制作网页一样,表格的使用在画wireframe的时候就应该明确其作用,是用来作为数据列表展示使用,而不是作为网页布局的控件。
  • 8、text field文本输入框:结合表单使用。一般用作表单中提交数据。比如搜索框、用户登录框、注册信息填写框等。用作字段提交或单行数据提交。
  • 9、text area文本区:结合表单使用。一般用作大段文字编辑、提交。比如文章编辑、留言等板块。
  • 10、droplist下拉列表框:结合表单使用。一般用作下拉菜单或者下拉列表选项,比如在搜索中,可以通过下拉列表框来定位搜索分类的范围。也有人用它来做友情链接,可以通过下拉选择直接进行页面跳转。
  • 11、listbox列表选择框:结合表单使用。通过文本框列表选项,通常使用在多项列表选择,比如在填写简历表的时候,选择你所感兴趣的行业,会提供列表选择框。不过列表选择框都会结合按钮使用。
  • 12、checkbox多项选择:多项选择通常使用在表单中,以提供多项选择。比如在有些有些注册要求用户选择兴趣爱好,会提供十多个选项,因为选项可以并列进行,因此使用的是多项选择。
  • 13、raido button单项选择:在一组选择中选择适合选项,选项关系非此即彼。比如在填写性别的时候提供男女选择,用户非男即女,只取一项。当然,不排除再多提供一个双性选择,这样就是三选一,但是同样是非此即彼的单一选择。
  • 14、15、horizontal line水平线、vertical line垂直线:用以分割页面中的不同板块区域。由于web页面中只能存在垂直与水平线,为了系统生成用于演示的html文件,特将两种线条分开使用。
  • 16、button shape形状按钮:相当于图形按钮,多用于导航,或者多帧切换的版面切换按钮。可进行边角编辑。
  • 17、image mapregion图像映射区:它用于在web页面中制造一片不可见的区域,一般是图片的部分区域,相当于图片的热区,从而添加说明与互动。在现实的网页中经常会有一张大图中有某个区域是触发按钮,而图像映射区就可以用来说明这个区域的的功能和互动内容。
  • 18、inline frame框架:类似于html中的< iframe >对象。用于在页面中制造页面框架,每个框架中嵌入不同的页面。我们经常看到后台系统分左右两栏,一般都是使用了框架,左侧载入的是导航页面,右侧是载入的管理页面。
    Axure的缺点是,暂时不支持百分比,因此iframe都是按像素度量的,和实际页面效果还是有差距。
  • 19、dynamicpanel动态面版:是Axure为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构。它是不同的state叠加的一个动态区域,默认显示其中一个state,当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state。不同state的关系,类似于photoshop的层,也类似于html中的css属性layer。
    我们可以通过右击dynamic panel进行state编辑,然后通过打开对应state进行编辑,编辑方式和编辑页面相同。
  • 20、21、menu(vertical/horizontal)水平/垂直菜单:用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加submenu。
  • Axure RP pro 的widgets工具栏,另一个重要的工具组就是flow,流程工具。

    对于画流程图,是我们经常会遇到的问题。我们和程序工程师沟通,用再多的口水,也无法挑明的事情,画一张简明的流程图,就能很直白的说明关键问题。

    有时候你可能会懊恼,因为程序员的思维犹如计算机,你告诉他为什么没有用,你就告诉他该怎么做,是左是右,是0是1就好了。这个时候,产品经理需要的是理性思维,清晰的思路,如果你不清晰,工程师大多数会跟着你的思路乱做一团。所以多画几个流程,多根据页面需求画清晰的流程,就能解决实际的问题。

    话不多说,本章主要介绍flow里面的工具,因为图形其实很好介绍,简单的英文翻译就好了,所以也顺带说说这些图形在流程里的作用。方式还和以前一样,编号,对号入座,咱们来一个萝卜,一个坑:

    1. rectangle:矩形
      作用:一般用作要执行的处理(process),在程序流程图中做执行框。
      在axure中如果是画页面框架图,那么也可以指代一个页面。有时候我会把页面和执行命令放在同一个流程中做说明,这个时候将两类不同的矩形做色彩区别,然后做说明就好了。
    2. rounded rectangle:圆角矩形或者扁圆
      作用:表示程序的开始或者结束,在程序流程图中用作为起始框或者结束框。
    3. beveled rectangle:斜角矩形
      作用:斜角矩形我几乎不使用,可以视情况自行定义。或者在其他的流程图中,有特殊含义,暂不知晓,也希望有识之士指点一二。
    4. diamond:菱形
      作用:表示决策或判断(例如:If…Then…Else),在程序流程图中,用作判别框。
    5. file:文件
      作用:表达为一个文件,可以是生成的文件,或者是调用的文件。如何定义,需要自己根据实际情况做解释。
    6. bracket:括弧
      作用:注释或者说明,也可以做条件叙述。一般流程到一个位置,做一段执行说明,或者特殊行为时,我会用到它。
    7. semicircle:半圆形
      作用:半圆在使用中常作为流程页面跳转、流程跳转的标记。
    8. triangle:三角形
      作用:控制传递,一般和线条结合使用,画数据传递。
    9. trapezoid:梯形
      作用:一般用作手动操作。
    10. ellipse:椭圆形或圆形
      作用:如果画小圆,一般是用来表示按顺序数据的流程。
      如果是画椭圆形,很多人用作流程的结束。如果是在use case用例图中,椭圆就是一个用例了。
    11. hexagon:六边形
      作用:表示准备之意,大多数人用作流程的起始,类似起始框。
    12. parallelogram:平行四边形
      作用:一般表示数据,或确定的数据处理。或者表示资料输入(Input)。
    13. actor:角色
      作用:来自于use case 用例,模拟流程中执行操作的角色是谁。需要注意的时,角色并非一定是人,有时候是机器自动执行,有时候也可是是模拟一个系统管理。
    14. database:数据
      作用:就是指保存我们网站数据的数据库。
    15. image:图片
      作用:表示一张图片,或者置入一个已经画好的图片、流程或者一个环境。

    基本上,axure讲基本流程图、页面框架图、use case 用例图涉及到的一些关键图形都囊括在flow流程工具中,模糊了流程图的区别,而尽量贴近交互设计时的工作内容。

    流程图无疑只是一个表达的工具,我们在使用的时候应该根据自己的实际情况使用,而不应该死钻牛角尖,非要知道某个图形的通用标准。理解和沟通是第一位的。而对于某些具有标准性含义的图形,大家人所共知,则我们应该遵循共同的准则,这样就能达到表达的目的。

    其实axure里面由于不涉及到具体的程序流程,所以有些标准的图形并没有提供,如不规则图形、侧面双矩形等,大家可以自己google一下或者baidu一下很容易就知道。大多数情况下,还是自己自定义一下自己的符号标准,就跟prd文档加上名词解释一样,才是解决方法。

    2
    0

    其他分类热门文章

      其他分类最新文章

        最新新闻

          热门新闻