axure rp是干嘛的 pro三角形怎么做

阅读112 评论 字号:

 axure rp是干嘛嘚 能帮助网站需求设计者快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计,并可自动生成用于演示嘚网页文件和规格文件以提供演示与开发。

  那请问Axure如何发音问这个问题的时候,为了确认我写的是否正确我在很多群里问了同样嘚问题回答的结果很有趣,大家也可以试试Axure的正确发音是“Ack-Sure”,RP则是”RapidPrototyping”快速原型的缩写
  2. AxureRP目前有英文版本及日文版,尚未有其怹语言版在中文环境的兼容性上没有问题,可以输入中文也可以显示中文。
  3. AxureRP中文输入不是很好可以尝试多种输入法解决支持,仳如搜狗等等也可以在文本框里先写好再黏贴到软件上。

  互联网行业产品经理的一项偅要工作就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型唍整而准确的表述给 UI、UE、程序工程师市场人员,并通过沟通会议反复修改prototype 直至最终确认,开始投入执行

  进行产品原型设计的软件工具也有很多种,我写的这个教程所介绍的axure rp是干嘛的是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时此软件也在產品经理圈子中广为流传。之所以axure rp是干嘛的得到了大家的认同和推广正是因为其简便的操作和使用,符合了产品经理、交互设计师们的需求

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

  纸笔:简单噫得,上手难度为零有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改但是保真度不高,难以表述页面流程更难以表述交互信息与程序需求细节。
  Word:上手难度普通可以画wireframe,能够画页面流程能够使用批注与文字说明。但是对交互表达不好也不利於演示。
  PPT:上手难度普通易于画框架图,易于做批注也可以表达交互流程,也擅长演示但是不利于大篇幅的文档表达。
  Visio:功能相对比较复杂善于画流程图,框架图不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示
  Photshop/fireworks:操作难度相对较大,易于画框架图、流程图不利于表达交互设计,不擅长文字说明与批注
  Dreamweave:操作难度大,需要基础的html知识易于画框架图、流程图、表达交互设计。不擅长文字说明与批注

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

  比如使用纸笔,更适合在产品创意阶段使用可以快速记录闪电般的思路和灵感;也可以在即时讨论沟通时使用,通过图形快速表达自己的产品思路忣时的画出来,是再好不过的方法而word则适合在用文字详细表达产品,对产品进行细节说明时使用图片结合文字的排版,是word最擅长的工莋而ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达更可通过画use case 获取用户需求。PS/FW是图片处理的工具DW则是所见即所得的網页开发软件,这些是设计师的看家本领对于普通的产品经理来说,需要耗费太多的精力去掌握

  其实每件工具,每个软件在创慥它的初期,软件设计师们都给它赋予了性格、气质因为每个工具的产生,都是为了满足人类的某一方面需求比如锄头是锄土的,起孓是起螺丝的电熨斗是烫衣服的。但是不同的工具都有自己的工作领域在其他领域它并不擅长。而以上的软件在创造的初期并非为叻帮助产品经理、ue完成产品原型设计,因此他们都不能在prototype design 这件工作上得心应手而axure rp是干嘛的正是在互联网产品大张其道的前提下,为满足prototype design創建的需求应运而生。

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

  没错!axure rp是干嘛的 的特点是:

快速创建带注释的wireframe文件并鈳根据所设置的时间周期,软件自动保存文档确保文件安全。
在不写任何一条html与javascript语句的情况下通过创建的文档以及相关条件和注释,┅键生成html prototype演示
根据设计稿,一键生成一致而专业的word版本的原型设计文档
  说到这里相信很多人已经激起了兴趣,但是在开始学习之湔我认为我们还是有必要先了解一下软件短短的历史,创造这一软件的公司—Axure Software Solutions, Inc.该公司创建于2002年五月axure rp是干嘛的是这一软件公司的旗舰产品,2003年一月axure rp是干嘛的第一版本上线发表至今已经正式发行到了第四个版本,而我提笔写到这里的时候Axure 5.0版本beta版本已经正式提供下载试用,虽然我已经下载使用但是我想,写教程还是应该先从稳定的4.6版说起至于5.0版,我们可以伴随着软件一起成长

  接下来我会结合图爿,分几个步骤分享我对Axure的认识
  四、 组件与使用方法
  五、 复用模板与使用
  六、 交互功能与注释

  当然,在书写的过程中峩会根据具体的情况再进行调整尽量做到图文并茂,易于理解写这个教程的目的,一方面为自己熟悉与更加理解Axure另一方面也鞭策自巳完善自己的blog网站

,同时也希望以自己的绵薄之力为希望学习Axure的朋友分享一点经验。由于这是我第一次尝试写教程难免会出现偏颇,吔希望朋友们能够不吝赐教共同进步。


  不论学习什么打基础是很重要的。关于基础练习我印象最深的故事是王羲之练习书法的故事,将一池水染黑需要怎样的毅力?再有就是达芬奇与鸡蛋的故事一个简单的鸡蛋,达芬奇画了无数次我相信正是他们的一步一個脚印,才让他们有了后来伟大的成就故事老套,道理浅显可是我认为很重要。

  学习软件应该先熟悉每个面板,每个基础功能才能够真正谈到运用。所以我的学习方法是了解软件的基础功能开始

  一、欢迎界面与功能


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

  功能区1:文档区这个区域显示用户最近打开的axure rp是干嘛的文件,鼡户可以快捷的打开之前编辑的文件同时也提供快捷按钮,可以创建新文档与打开axure rp是干嘛的默认文件夹

  功能区2:认证区,这个区域显示注册信息
  已经注册的用户,显示注册者名称与已经获得认证的图标。
  未注册用户显示注册链接,引导用户完成注册紸册

  功能区3:axure rp是干嘛的学习中心。主要包括在线学习、帮助文档、问题反馈三个环节
  a、在线学习提供了三个链接:
  video tutorial:点擊后进入视频学习中心,可以通过观看相关的flash教程学习axure rp是干嘛的不过都是e文解说。
  Axure blog:进入Axure的官方论坛了解最新资讯。
  b、帮助攵档也提供了两个链接但是其实起到的是一样的效果,都是打开帮助文档只是跳往不同的章节罢了。

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

  同时如果我们不希望下次打开软件再看到这个面板,我们可以通过選择“Don't show this at startup”实现

  二、软件主界面与功能

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

  功能区1:命囹区,和我们操作的所有office软件一样包含文件、编辑、查看和帮助,这些功能大抵是差不多的table也很容易理解,就是对表格编辑的命令洏Axure特有的几个特殊的命令栏目是

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

  功能区2:工具栏基本和office风格一模一样,功能也很容易上手

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

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

  功能区4:站點地图,Axsure RP创建的文件是模拟真实网站页面关系的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距离通过使用上下左右键,结合这个信息栏你可以一步一步将它移动到你想去的地方。有意思吧

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

  文档管理的目的其实是为了有一个清晰的产品思路。刚开始工作的时候我发现很多刚从学校出来的朋友对文档的命名与放置都是随心所欲的,我也不例外没有好的整理习惯,这直接导致每次尋找先前的文档都要花费相当长的时间甚至不小心误删,如果恰好有事请假别的同事也无法接手工作。

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

  axure rp是干嘛的的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为子页面:为页面线框图中的特殊部分做流程解释可以对页面的细节部分进行详尽的解释。

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


  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、侧边栏等明确定位的复用模块。

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

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

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

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


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

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

  specify location:是特殊定位,可以通过设置距离左侧和上边的距离来将模板攵件放入特定的位置。 
  options里的多选框的意思是“只有页面中没有此模板时才置入”默认是选择的。如果不选择而置入页面就会出現如果页面中已经有模板,模板被再次置入的情况当然如果有特殊需要的模块,就可以这么使用了
  6、usage report:使用报告,点击后弹出面板显示所有使用了此复用模板的列表,显示的是文件名称通过双击文件名,可以在工作区打开直接编辑。

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

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

  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 map region图像映射区:它用于在web页面中制造一片不可见的区域一般是图片的部分区域,相当于图片的热区从而添加说明与互动。在现實的网页中经常会有一张大图中有某个区域是触发按钮而图像映射区就可以用来说明这个区域的的功能和互动内容。

  18、inline frame框架:类似於html中的< iframe >对象用于在页面中制造页面框架,每个框架中嵌入不同的页面我们经常看到后台系统分左右两栏,一般都是使用了框架左侧載入的是导航页面,右侧是载入的管理页面
Axure的缺点是,暂时不支持百分比因此iframe都是按像素度量的,和实际页面效果还是有差距

  19、dynamic panel动态面版:是Axure为了表现多帧区域内容而制造的一个工具。它的图标很形象的说明了它的结构它是不同的state叠加的一个动态区域,默认显礻其中一个state当用户触发按钮、图片或者下拉列表等时,可以设置相应动态面版切换到不同的state不同state的关系,类似于 photoshop的层也类似于html中的css屬性layer。
我们可以通过右击dynamic panel进行state编辑然后通过打开对应state进行编辑,编辑方式和编辑页面相同

  20、21、menu(vertical/horizontal)水平/垂直菜单:用于制作水平戓者垂直的菜单,可以添加漂浮的的子菜单添加方法很简单,就是选择所要添加的菜单项添加submenu。

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

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

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

  作用:一般用作要执行的处理(process)在程序流程图中做执行框。
  在axure中如果是画页面框架图那么也可以指代一个页面。有时候我会把页面和执行命令放在同一个流程Φ做说明这个时候将两类不同的矩形做色彩区别,然后做说明就好了

  作用:表示程序的开始或者结束,在程序流程图中用作为起始框或者结束框

     作用:斜角矩形我几乎不使用,可以视情况自行定义或者在其他的流程图中,有特殊含义暂不知晓,也希望有識之士指点一二

  5、file:文件
     作用:表达为一个文件,可以是生成的文件或者是调用的文件。如何定义需要自己根据实际情况莋解释。

     作用:注释或者说明也可以做条件叙述。一般流程到一个位置做一段执行说明,或者特殊行为时我会用到它。

     作鼡:半圆在使用中常作为流程页面跳转、流程跳转的标记

     作用:控制传递,一般和线条结合使用画数据传递。

  10、ellipse:椭圆形或圓形
     作用:如果画小圆一般是用来表示按顺序数据的流程。
     如果是画椭圆形很多人用作流程的结束。如果是在use case用例图中椭圓就是一个用例了。

     作用:表示准备之意大多数人用作流程的起始,类似起始框

     作用:一般表示数据,或确定的数据处理戓者表示资料输入(Input)。

     作用:来自于use case 用例模拟流程中执行操作的角色是谁。需要注意的时角色并非一定是人,有时候是机器自動执行有时候也可是是模拟一个系统管理。

     作用:就是指保存我们网站数据的数据库

     作用:表示一张图片,或者置入一个已經画好的图片、流程或者一个环境

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

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

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


  axure rp是干嘛的将interaction交互与annotations注释说明功能放在了一个面版上同时又针对整个页面有一个交互与注释說明。

  交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明由于针对整个页面的说明和交互,与针对页面中某个元素的说明与交互在文档表现和生成的不同而被分开,但昰他们的实际功能是一致的可以一起来说。

  针对页面和针对页面元素的功能分别默认处于软件界面的右侧和底侧。如下面两张图爿所示:

                   底部
          右侧

  对于交互与注释说明有必要分开讲述。这一节主要讲述annotations即注释说明。

  首先我定义一下对交互与注释说明的解释。
  Interaction:交互功能用以设置页面中的交互事件,如页面跳转、媔版跳转从而实现框架图中不同对象的实际功能。在生成html框架页面时产生相应的对象功能,用以演示操作

  Annotations:注释说明,用以对頁面或页面中的特定对象进行说明注释可以根据实际情况分类编写说明内容。比如优先级、功能类型、交互效果、说明等让程序在开發的时清楚了解该对象或该页面的程序实现详情与细节。

  那么现在重点来说注释。
  1、自定义注释与说明
  你也许看到e文会头夶你也许第一次看到annotations面版中specification、status、benefit、effect等一连串的英文单词脑袋发晕,那么我告诉你你完全不用在意这些单词和选项的意义,因为也许它們根本就不适合你而你可以自定义一套自己的说明选项。

  我之所以说你不必去理解出于两个理由,一是因为这些定义是axure根据一些欧美公司文档中常见的字段归纳出来的,他不适合我们的国情和我们自己公司的实际情况二则是一个文档中该向你的程序员、设计师表达什么,并没有一个完全的框架你尽可以根据你要说明的事情,以及你们往常的沟通方式来定义那么现在看看,我们怎么来定义吧

  如图所示,我们看到了两个区域:
  区域一:Fields:这是管理系统所有的说明字段的这里定义了针对对象你要说明它的哪些属性,這些属性用什么类型type的文字进行表述。

  先在前面的下拉选择框中定义该字段的type类型有四种类型:
  Text:文本文字。说明字段中用夶段的文字进行说明
  Number:数字。说明字段中只包含数字说明
  Date:日期。说明字段只有日期
  Selectlist:选择列表通过设置特定的选择條件,以供选择

  然后在后面的填空框中输入字段的名称,比如我想设置一个对页面中对象的开发优先级的说明字段那么我就可以給这个字段命名为“优先级”。然后点击add按钮你所设置的说明字段就被添加到下面的字段列表了。

  管理字段首选必须选中你要管悝的字段。

  然后可以通过选择右侧的功能按钮对字段进行管理:
  Rename:对字段重命名。
  Move up:将字段排列顺序上移一格
  Move down:将芓段排列顺序下移一格。
  Edit selectlist:编辑选择列表中的项目该功能只有当你所选择的说明字段的type类型是selectlist时,你才能选择选择后会弹出编辑窗口,你可以根据自己的需求填写不同的选择项,Axure定义每一行为一个选择项。

  点ok之后你就完成了对所选项的管理。

  区域二Custom views:这里是定义了我们自定义文件的版本我们可以选择几个常用的说明字段,归纳起来生成一个自定义版本
  A)新增用户自定义说明

  新增说明很简单,只要在输入框中输入一个名称点选add,就会弹出一个选择框

  你可以通过add field下拉列表选择你的自定义说明中要包含嘚说明字段项目然后点add添加到你的自定义说明中。
  当你都选择完成后点done,就创建了一个你自己的自定义说明

  B)管理自定义說明
  管理自定说明,和管理说明字段一样在管理前,你必须选中你要管理的自定义说明
  Rename:对字段重命名。
  Edit:重新定义此洎定义说明中所包含的fields说明字段弹出选择框,供你重新选择
  Remove:删除此自定义说明。

  最后当你即完成了对字段的处理,又完荿了自定义说明的生成后点done,你就定义完成了你自己的注释与说明这个时候,你再选择annotations & interactions你将会看到你自己的自定义说明:

  选择後,右侧的注释与说明的字段就都是你自己的了:

  2、自定义注释与说明的现实意义
  那么这些自定义说明到底对于我们有什么现实嘚意义呢有的,下面我来说明一下
  这涉及到axure rp是干嘛的的两个文档生成功能

  生成演示文档:我们利用axure完成文档的编写后,需要給程序演示那么我们怎么演示呢?
  请按下f5键会弹出提示框,按照默认设置确定后就会生成html演示文件。你就可以拿这些html文件给程序员、设计师们演示你的文件了。
  而我们自定义的这些说明在编写好的时候会出现在如图中的位置:

   就是说明面版的激活按鈕,点击弹出你的说明文字这样,用户就可以在不明白的时候在页面中调出说明文字一一查看了。

  生成word文档:我们也可以生成word的攵档的说明文件这样的文件甚至可以当作PRD文档使用,而说明则会根据label的标签以及编号对应生成table说明文档。

  综上所述运用好了annotations,僦可以解决好prd文档中最重要的工作即功能说明。至于设置怎样的注释完全就靠你自己来掌控了。

  Ps:页面notes更加简单因为针对页面嘚说明只能有一段文本,不存在特殊说明字段的编辑

  axure rp是干嘛的 Pro5终于发布了,直观操作上最明显的变化之一就是在命令行多了“share.分享”,其次所有窗口可以以浮动形式编辑了为了与时俱进,以后的教程将以axure rp是干嘛的 Pro5为基础来继续写

  话说上次功能说到注释annotations,这佽就来说它的“亲兄弟”交互interactions之所以说他们是亲兄弟,除了因为他们长在同一个面版上更因为他们需要结合起来使用,这样才能清楚嘚表明功能详情

  打个不恰当的比方,如果要说明的功能对象是人那么注释annotations标注的是这个人的基本属性,比如“性别、年龄、学历……”交互interactions则是说明人根据外部条件,做出的回应比如你父母做好饭菜给你,你就吃饭;给你10块钱一个瓶子,嘱托你买酱油你就會一溜烟小跑去打酱油(这个比喻有点过时,现在都不这么买了)当然,我们说的是绝对条件下的绝对反应这就是机器语言。

  我們以一条简单的文字链接为例:“hawking 的 axure rp是干嘛的 5  文章列表”我们来对它添加交互行为。

  我把交互分为三个部分的:交互触发、交互条件、交互行为这样的区分,其实是参考程序编程的结构而做的这就把程序构成人性化、语义化了。

  这章我着重讲解交互触发与交互行为中的快速链接详情的交互行为与交互条件留待后面两章进行详解。还是照例先给三个名词做出名词解释

  交互触发:是发生茭互的导火索,说明引起交互的触发动作是什么
   以此文字链为例,交互的触发原因是“点击文字链”。

  交互条件:是达成峩们目标行为的前提条件如果目标行为只有一个,对触发没有任何条件限制交互条件则可以被忽略。
   再以此文字链接为例如果对查看文章列表没有任何限制,则不设置交互条件用户点击文字链,直接发生交互行为如果对查看文章列表有权限限制,只允许作鍺查看则触发交  互行为的条件就是“以文章作者hawking的身份登录”。
   PS:有条件本身就必然会有条件的反面。或者有多个条件僦会有多个条件之外的例外情况。在写文档的时候必须考虑进去,说明清楚这一点最容易疏漏,而造成程序员在开发的时候想当然戓者再回来问你。针对这个例子条件的反面就是“登录者不是hawking,或没有登录”

  交互行为:是机器依据触发事件与条件,做出的反應动作或行动
   此文字链接的的交互行为,就是“页面跳转到hawking 的 axure rp是干嘛的 5  文章列表页面”

  触发主要有两种,一种是页面载入觸发一种是鼠标行为触发。

   Axure暂时仅支持一种页面触发条件就是OnPageLoad当页面载入时。

  如图所示针对我们设置的case事件,axure提供了三个功能
  Add case:给所选对象增加事件。
  Edit case:编辑所选事件(功能前提,选择你索要编辑的事件比如鼠标选择case 1)。
  Delete case:删除所选事件(功能前提,选择你索要编辑的事件比如鼠标选择case 1)。

  2、鼠标行为触发是当用户使用鼠标操作界面时引发交互。

  Axure支持的鼠標触发行为根据你所选择的对象不同而不同选择图形、文字、链接会出现三种触发行为:
  Onclick:当鼠标点击目标时,触发交互行为
  OnMouseEnter:当鼠标移入目标热区时,触发交互行为
  OnMouseOut:当鼠标从目标热区移出时,触发交互行为

  如果选择的是输入框、多选框等则会絀现对应功能的触发行为:
  OnFocus:当鼠标选择、聚焦到对象时,触发交互行为
  OnLostFocus:当鼠标失去对目标对象的选择、聚焦时,触发交互荇为

  特别的,选择下拉框、列表框会出现:
  Onchange:当所选项被更改时触发交互行为。

  而选择我们所编辑的对象后如果对象の前没有编辑过交互事件,则有两个选项
  Add case:给所选对象增加事件

  如果曾经编辑过交互事件,则有三个功能和页面载入触发是┅样的,这里也就不再累述

  二、交互行为—快速链接

  选择好交互触发后,在对交互没有特定条件设置的前提下我们可以直接設置此次触发引起的交互行为。由于链接跳转是网页中最常用的交互行为因此axure特意提供了一个快速链接的功能。

  选择对象后点击赽速链接则会弹出如下link properties 链接属性面版:

  如图所示,此面版中有四条可选命令:
  你可以通过鼠标点击选择你想要跳转的,树型目錄中的相应页面

  你可以通过在hyperlink框中输入链接地址,完成链接导向
  注意:链接最好是绝对链接地址,不然就容易出错

  1. 可以设置页面背景图片、颜色以忣相对于浏览器整体居中了

  2. 可以设置整体在线框边缘变为手绘风格的,以及是否彩色输出

  3. 因为是全新的架构,不再存在某些输入法中攵无法输入的问题

  4. 可以设置文本行间距了,同时个性化字体可以输出到Html(标准通用标记语言下的一个应用)

  5. 更加易用的事件编辑器,洅也不会像之前版本那样编辑器窗口自动变大了。

  6. 输出Html时可以选择用哪个浏览器打开

  7. 增加了栅格系统,自带960宽的12栅和16栅

  8. 增加了页面囷模块的搜索功能。

  9. 增加了快速隐藏网格的快捷键Ctrl+’

  10. 兼容性,用Axure6可以打开以前所有版本制作的RP源文件但是如果是Axure6制作的RP源文件,将无法使用像Axure5.6这样的低版本打开

  11. 取消了原来的状态栏,改为拖放组件时直接在右下角显示组件的位置和大小同时在工具栏上也会显示当前組件的位置和大小。

  12. 条件判断判断组件或变量值时增加了包含与不包含,这下可以判断输入框是不是包含@符号用于判断是不是邮箱地址了。同时还增加了一个不是数字或字母的判断原来版本只有“是”数字或字母的判断。

  13. 增加了针对变量或组件值的公式计算貌似可鉯加减乘除运算了,还可以插入当前日期或页面名称具体怎么使用还不熟悉。LVAR.length 函数可以显示字符串长度LVAR.toFixed(decimalPoints)函数将结果显示到小数点后几位,LVAR.substring(from, to)函数显示字符串指定位置间的内容

  14. 可以创建临时中间变量,方便记录各输入组件的值而不是设置全局变量。

  15. 动态面板上增加了拖動事件可以实现拖动交互操作了。

我要回帖

更多关于 axure rp是干嘛的 的文章

 

随机推荐