Axure使用教程

Axure使用教程
Axure使用教程

1介绍

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

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

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

纸笔:简单易得,上手难度为零。有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。

Word:上手难度普通。可以画wireframe,能够画页面流程,能够使用批注与文字说明。但是对交互表达不好,也不利于演示。

PPT:上手难度普通。易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。但是不利于大篇幅的文档表达。

Visio:功能相对比较复杂。善于画流程图,框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。

Photoshop/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的认识,

一、界面与功能

二、工具栏

三、站点地图

四、组件与使用方法

五、复用模板与使用

六、交互功能与注释

七、实例

2界面与功能

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

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

一、欢迎界面与功能

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

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

功能区2:认证区,这个区域显示注册信息。

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

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

功能区3:Axure RP学习中心。主要包括在线学习、帮助文档、问题反馈三个环节。

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

video tutorial:点击后进入视频学习中心,可以通过观看相关的flash教程学习Axure RP,不过都是e文解说。

online community:进入Axure RP的官方讨论组,在线讨论学习。

Axure blog:进入Axure的官方论坛,了解最新资讯。

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

c、问题反馈,通过点击链接可以发邮件到support@https://www.360docs.net/doc/049696553.html,,以寻求获得帮助。

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

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

二、软件主界面与功能

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

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

a、wireframe:线框,包含所有画原型线框图的相关命令。

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

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

功能区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距离。通过使用上下左右键,结合这个信息栏,你可以一步一步将它移动到你想去的地方。有意思吧?

3文档管理

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

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

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

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

4模板复用

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:使用报告,点击后弹出面板,显示所有使用了此复用模板的

列表,显示的是文件名称,通过双击文件名,可以在工作区打开,直接编辑。5widgets工具(上)

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

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

wireframe线框图工具:基本上对应着web页面中的各种图形。针对页面中交互行为的表达,Axure RP专门增加了image map region 图像映射区、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、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、menu(vertical/horizontal)水平/垂直菜单:用于制作水平或者垂直的菜单,可以添加漂浮的的子菜单,添加方法很简单,就是选择所要添加的菜单项,添加submenu。

6widgets工具(下)

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 用例,模拟流程中执行操作的角色是谁。需要注意的时,角色并非一定是人,有时候是机器自动执行,有时候也可是是模拟一个系统管理。

axure8基础培训

Axure8.0基础教程手册 目录 基础1.添加元件到画布 ------------------------------------------------------------------------------- 4 基础2.添加元件名称 ---------------------------------------------------------------------------------- 4 基础3.设置元件位置/尺寸--------------------------------------------------------------------------- 5 基础4.设置元件默认角度 ---------------------------------------------------------------------------- 6 基础5.设置元件颜色与透明 ------------------------------------------------------------------------- 6 基础6.设置形状或图片圆角 ------------------------------------------------------------------------- 7 基础7.设置矩形仅显示部分边框 ------------------------------------------------------------------- 7 基础8.设置线段/箭头/边框样式 ------------------------------------------------------------------- 8 基础9.设置元件文字边距/行距 --------------------------------------------------------------------- 8 基础10.设置元件默认隐藏 -------------------------------------------------------------------------- 9 基础11.设置文本框输入为密码 -------------------------------------------------------------------- 9 基础12.设置打开选择文件窗口 ------------------------------------------------------------------ 10 基础13.限制文本框输入字符位数 --------------------------------------------------------------- 11 基础14.设置文本框提示文字 --------------------------------------------------------------------- 11 基础15.设置文本框回车触发事件 --------------------------------------------------------------- 11 基础16.设置鼠标移入元件时的提示------------------------------------------------------------- 12 基础17.设置矩形为其他形状 --------------------------------------------------------------------- 12 基础18.设置自定义形状 --------------------------------------------------------------------------- 13 基础19.设置形状水平/垂直翻转 ----------------------------------------------------------------- 14 基础20.设置列表框的内容 ------------------------------------------------------------------------ 14 基础21.设置元件默认选中/禁用 ----------------------------------------------------------------- 14 基础22.设置单选按钮唯一选中 ------------------------------------------------------------------ 15

Axure RP 8.0函数大全 Axure函数手册用法及说明

Axure RP 8.0函数大全Axure函数手册用法及说明Axure RP 8.0函数大全是根据小楼老师的《Axure RP 8 函数速查表》整理而来,方便大家查询。这些函数不用去记,大概了解他们的用途即可。需要的时候再来查一下就可以了。 在做课件的时候,将所有的函数用途和参数注解,整理了一份表格资料。后来,觉得这个东西挺有用,所以,分享给大家当做参考资料。 函数能够提高原型的制作效率,但也容易导致画蛇添足。如果是单纯的学习,建议通过一些有趣味的原型,多加锻炼使用。这样在实际应用中,才能够手到拈来,随心所欲。如果是用于工作,在不熟悉函数使用的情况下,尽量避免纠结于某个函数的使用,以免影响工作效率,得不偿失。扎实学习,灵活使用。这句话不仅适用于函数,也适用于Axure以及其他的任何工具。 Axure函数的基本语法 在axure交互设计时,函数可以用在条件公式和需要赋值的地方,其基本语法是用双方括号包含,变量值和函数用英文句号连接。 例如:[[LVAR. Width]] 表示变量LVAR的宽度。 [[This. Width]] 当前元件的宽度 元件函数 This用途:获取当前元件对象。当前元件是指当前添加交互动作的元件。 Target用途:获取目标元件对象。目标元件是指当前交互动作控制的元件。 x用途:获取元件对象的X轴坐标值。

y用途:获取元件对象的Y轴坐标值。 width用途:获取元件对象的宽度值。 height用途:获取元件对象的高度值。 scrollX用途:获取元件对象的水平滚动距离(当前仅限动态面板)。scrollY用途:获取元件对象的垂直滚动距离(当前仅限动态面板)。text用途:获取元件对象的文本文字。 name用途:获取元件对象的自定义名称。 top用途:获取元件对象的上边界坐标值。 left用途:获取元件对象的左边界坐标值。 right用途:获取元件对象的右边界坐标值。 bottom用途:获取元件对象的下边界坐标值。 opacity用途:获取元件对象的不透明比例。 rotation用途:获取元件对象的旋转角度。 鼠标指针函数 Cursor.x用途:鼠标指针在页面中位置的X轴坐标。 Cursor.y用途:鼠标指针在页面中位置的Y轴坐标。 DragX用途:鼠标指针沿X轴拖动元件时的瞬间(0.01秒)拖动距离。DragY用途:鼠标指针沿Y轴拖动元件时的瞬间(0.01秒)拖动距离。TotalDragX用途:鼠标指针拖动元件从开始到结束的X轴移动距离。TotalDragY用途:鼠标指针拖动元件从开始到结束的Y轴移动距离。DragTime用途:鼠标指针拖动元件从开始到结束的总时长。

小楼axure 图文教程(十六)摇一摇效果

小楼axure 图文教程(十六)微信摇一摇效果 作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-22 21:43?6没有评论编辑本教程axure原型百度云盘下载:小楼原创原型-微信摇一摇效果 本文出自诉客?产品经理的心声,转载时请注明出处及相应链接。 本来是想借着这个axure原型效果写一下拖动面板后通过变量让其他面板联动的的效果,结果做到一半,想起来,这个联动效果不用拖的,而是移动面板,糗P了。既然做了,就做下去吧,结果又碰到了一个软件的bug。我勒个去! 说一下这个axure6.5中的bug,就是无论你在动态面板的哪个事件(拖动开始,拖动时,拖动结束)中,只要设置了变量值,那么在这些事件中的内部框架加载页面就会失效。本来简单实现的功能,又不得不在框架上加了一个动态面板状态。 其实在这个效果中,实现方法没什么值得过多说的,不过有些值的我们注意的地方是很有价值的。 先说实现过程: 我的想法是这样的,先说内容页,内容页在主页加载时就要加载到内部框架里,但是不能动,当摇动结束时,重新加载内容页,这时候再让它动。为了实现这个效果就要加个变量作为开关,主页加载时没有变量,这时候加载内容页就可以通过内容页的onloadpage事件判断变量没有值不作任何动作。当摇动结束时,给变量赋值,并且重新加载内容页,这个时候在内容页的onloadpage事件中就能判断变量被赋值,执行动态的效果。 那么过程就应该是在主页放上手机外壳元件,里面放个框架,然后把他们一起转换成动态面板,在打开主页时,就把摇一摇的界面加载到框架里,在拖动这个动态面板时,让面板可以随意拖动(摇一摇),当拖动结束时,给指定的变量复制,并把内容页重新加载到框架。、

Axure基本使用教程+示例

Axure使用介绍文档 目录 一、Axure rp 的界面 (2) 二、Axure rp的线框图元件 (3) 三、Axure rp的元件触发事件 (4) 四、Axure rp的条件生成 (6) 五、系统函数与变量 (8) 六、动态面板的使用 (14) 七、母版的使用 (20) 八、中继器的使用 (28)

一、Axure rp 的界面 (界面显示各个区域可在主菜单工具栏-视图中找到) 1、菜单工具栏:同大部分软件类似,可选择Axure各个功能的工具区。 2、操作界面:绘制产品的操作区,所有元件、部件可拖与此区域操作。 3、站点地图:页面文件存放区域,可增加、删除、修改、查看页面;可设置页面级别。 4、元件库(部件库):主要分为流程图和线框图;可拖动元件库里的元件到操作界面进行产品绘制;为提高效率,元件库也可自行导入已经可使用的元件。 5、母版:母版的使用主要针对于顶部导航、底部导航,多个页面中重复出现的元素,可先绘制与母版中,再拖动到需使用的页面(比起重复操作,修改扩展行也更强)。 6、页面属性:可设置当前页面的注释、交互、与样式。 7、元件交互与注释:可对操作页面中用到的元件或元件与元件之间的交互事件进行设置(如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等)。8、元件属性和样式:可设置选中元件的基本样式与属性。

9、部件管理(动态面板管理):该区域可对已设置的动态面板状态进行操作,可添加、删除、进行排序,也可双击动态面板进入编辑。 二、Axure rp的线框图元件 1、图片:图片元件拖入编辑时,可双击载入本地磁盘的图片,载入图片是Axure 会自动提示将大图进行优化,避免原型文件过大;载入的图片可以选择原图大小也可以保持元件大小。 2、文本:标题1、标题2、单行文本、多行文本都属于文本类型的元件,在网页中的名称为lable,主要用于文字描述、文本链接等功能 3、矩形:矩形可用作背景、按钮等元件使用;双击矩形可输入文本;拖入矩形时默认是直角矩形,可通过左右拖动左上角的黄色小三角来改变圆角半径;也可通过右键选择形状来改变当前形状。 4、占位符:顾名思义,主要用于替代一些没有交互或交互比较简单的区域。

Axure教程axure新手入门基础(一)

Axure?教程axure??础(1)名词解释: 线框图:一般就是指?产品原型,比如:把线框图尽?快画出来和?把原型尽快?做出来是一?个意思。 axure?元件:也叫axu?re组件或?axure?部件,系统自带了?一部分最基?础常用的,网上也有很?多别人做好?的,软件使用到?一定阶段可?以考虑自己?制作元件,以便提高产?品原型的制?作速度。 生成原型:是指把绘制?好的原型通?过axur? e rp生成静?态的htm?l页面,检查原型是?否正确,同时,方便演示。建议生成时?选择用谷歌?浏览器打开?(第一次会有?提示安装相?关插件),ie会每次?都有安全提?示,不如谷歌浏?览器方便。 (一)Axure?rp的界面?

1-主菜单工具?栏:大部分类似?offic?e软件,不做详细解?释,鼠标移到按?钮上都有对?应的提示。 2-主操作界面?:绘制产品原?型的操作区?域,所有的用到?的元件都拖?到该区域。 3-站点地图:所有页面文?件都存放在?这个位置,可以在这里?增加、删除、修改、查看页面,也可以通过?鼠标拖动调?整页面顺序?以及页面之?间的关系。 4-axure?元件库:或者叫ax?ure组件?库、axure?部件库,所有软件自?带的元件和?加载的元件?库都在这里?,这里可以执?行创建、加载、删除axu?re元件库?的操作,也可以根据?需求显示全?部元件或某?一元件库的?元件。 5-母版管理:这里可以创?建、删除、像页面头部?、导航栏这种?出现在每一?个页面的元?素,可以绘制在?母版里面,然后加载到?需要显示的?页面,这样在制作?页面时就不?用再重复这?些操作。 6-页面属性:这里可以设?置当前页面?的样式,添加与该页?面有关的注?释,以及设置页?面加载时触?发的事件o?npage?load。 7-元件属性:这里可以设?置选中元件?的标签、样式,添加与该元?件有关的注?释,以及设置页?面加载时触?发的事件; A-交互事件:元件属性区?域闪电样式?的小图标代?表交互事件?;

axure新手入门基础

axure新手入门基础 名词解释: 线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思。 axure元件:也叫axure组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的,软件使用到一定阶段可以考虑自己制作元件,以便提高产品原型的制作速度。 生成原型:是指把绘制好的原型通过axurerp生成静态的html页面,检查原型是否正确,同时,方便演示。建议生成时选择用谷歌浏览器打开(第一次会有提示安装相关插件),ie会每次都有安全提示,不如谷歌浏览器方便。 (一) Axurerp的界面 1-主菜单工具栏:大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示。

2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域。 3-站点地图:所有页面文件都存放在这个位置,可以在这里增加、删除、修改、查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库:或者叫axure组件库、axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axure元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。 5-母版管理:这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素,可以绘制在母版里面,然后加载到需要显示的页面,这样在制作页面时就不用再重复这些操作。 6-页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload。 7-元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件; A-交互事件:元件属性区域闪电样式的小图标代表交互事件; B-元件注释:交互事件左面的图标是用来添加元件注释的,在这里我们能够添加一些元件限定条件的注释,比如:文本框的话,可以添加注释指出输入字符长度不能超过20。 C-元件样式:交互事件右侧的图标是用来设置元件样式的,可以在这里更改原件的字体、尺寸、旋转角度等,当然也可以进行多个元件的

小楼axure教程(五)动态面板的使用

小楼axure教程 (五)动态面板的用途 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24?61条评论编辑 小楼axure教程 (五)动态面板的用途 写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的交互效果。所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响,那么动态面板都能做什么呢?主要有以下几个方面: 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。那通过这几个属性都能实现什么样的功能呢?简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候,需要点击按钮后出现一些界面上没有的元素,比如:

登录功能在不填写用户名时点击登录按钮,显示出要求用户填写用户名的提示。 情景B: 当我们需要在用户的某一个操作时,弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示,可以通过右键单击动态面板—编辑选项—设为显示(或)设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同,动态面板的滑动效果一般是通过其他交互事件来激发的,可能是点击某个按钮,也可能是页面加载时实现。比如: 情景A: 情景B: 点击登录按钮,登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程,比如通过页面的onpageload事件。现在,在此不做过多讲解,以后通过案例来进行介绍,则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果,对于移动互联网产品原型来说是必须的,主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A: 手机的滑动解锁功能。

Axure学习教程

Axure教程 axure新手入门基础(1) 2013-08-19 21:43Nairo分类:原型设计微信二维码 首先做个声明:此次教程里为了快速完成,借用了一些网上已有教程的图文,不是剽窃,只图方便。另外,因为汉化版本可能功能名称等略有差别,请自行理解。 名词解释: 线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思。 axure元件:也叫axure组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的,软件使用到一定阶段可以考虑自己制作元件,以便提高产品原型的制作速度。 生成原型:是指把绘制好的原型通过axure rp生成静态的html页面,检查原型是否正确,同时,方便演示。建议生成时选择用谷歌浏览器打开(第一次会有提示安装相关插件),ie会每次都有安全提示,不如谷歌浏览器方便。 (一) Axure rp的界面

1-主菜单工具栏:大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示。 2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域。 3-站点地图:所有页面文件都存放在这个位置,可以在这里增加、删除、修改、查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库:或者叫axure组件库、axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axure元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。

5-母版管理:这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素,可以绘制在母版里面,然后加载到需要显示的页面,这样在制作页面时就不用再重复这些操作。 6-页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload。 7-元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件; A-交互事件:元件属性区域闪电样式的小图标代表交互事件; B-元件注释:交互事件左面的图标是用来添加元件注释的,在这里我们能够添加一些元件限定条件的注释,比如:文本框的话,可以添加注释指出输入字符长度不能超过20。 C-元件样式:交互事件右侧的图标是用来设置元件样式的,可以在这里更改原件的字体、尺寸、旋转角度等,当然也可以进行多个元件的对齐、组合等设置。 8 动态面板:这个是很重要的区域,在这里可以添加、删除动态面板的状态,以及状态的排序,也可以在这里设置动态面板的标签;当绘制原型动态面板被覆盖时,我们可以在这里通过点击选中相应的动态面板,也可以双击状态进入编辑。 Axure rp的界面就介绍到这里,界面中的各个区域基本上在做产品原型的过程中,使用都很频繁,所以建议不要关闭任何一个区域。如果不小心关闭了,可以通过主菜单工具栏—视图—重置视图来找回。

axure案例

axure案例 【篇一:axure案例】 下面是近收集到的最好的网页设计资源,希望大家能够喜欢。网页模板macbook pro retina 15 mockup (psd).stationary mockup templ 【篇二:axure案例】 用axure写产品需求文档实例-axure中文网 axure中文网axure官 方正版 快速原型设计工具 2015-12-22 分类:阅读(21824) 评论(10) 说来有些惭愧,写这篇文章是用来教大家写需求文档的。但其实, 我很少会写传统意义上的产品需求文档;甚至,我连word都很少用。用惯了axure的任意布局方式,再用word感觉非常别扭,尤其是 在添加图片时,简直感到捉急。当然,这不是我不用word写需求文档的根本原因。 简单来谈一下,为什么软件开发项目中,需要需求文档这么个东西?在稍微大一点的开发团队中,产品经理未必能向所有开发人员,传 达具体的产品开发需求。这时就需要一份文档来供所有的项目参与 人员阅读。而产品经理又常常爱拍脑袋、容易变卦,所以文档也是 开发人员约束产品经理的一项武器。在产品上线前的测试环节,测 试人员也同样会拿产品需求文档来验收产品质量。当团队进入新人时,文档也可以让新人更快地了解产品。 总的来说,产品需求文档有三个核心作用: 传达产品开发需求;保证各部门沟通有理有据产品质量控制有具体 标准由此可见,产品需求文档是必不可少的。那一份好的需求文档,就应该能准确传达出产品的开发需求。那么产品需求文档该用什么 方式写,才能更好地传达出产品开发需求呢? 就我所见,行业大多产品经理都是用word axure原型的方式组成产 品需求文档。那这种方式,是否真的能方便地表达出产品需求?我 问了很多程序猿,他们在开发时,一般都是看着效果图和原型图写 代码,只有在遇到问题时,才会查看word文档。也就是说,开发需要一边写代码,一边看效果图,一边看原型,还要时不时查看文档。而且,大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那 产品经理写word真的合适吗?这样的用户体验真的好吗?花费大量时间写word真的有价值吗?在axure画原型的同时,我们为什么 不能直接在旁边标注呢?这样岂不是方便快捷很多吗?

小楼axure 图文教程(十一)新手入门基础(3)

小楼axure 图文教程(十一)新手入门基础(3)作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-15 22:29?6没有评论编辑 本文出自诉客-产品经理的心声,转载时请注明出处及相应链接。 (三)Axurerp元件的触发事件 l OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发。比如点击按钮。 l OnMouseEnter(鼠标移入时): 鼠标进入到某个元件范围时触发,比如当鼠标移到某张图片时显示该图片的介绍。 l OnMouseOut(鼠标移出时): 鼠标离开某个元件范围时触发。比如鼠标离开图片时,图片介绍消失。 l OnKeyUp(按键弹起时): 文本框(单行与多行)编辑时,键盘按下某一个按键松开时触发,不支持其他axure元件。比如统计文本框输入的字数。 l OnFocus(获取焦点时): 当一个元件通过点击或切换获取焦点时触发。比如搜索框编辑时,清空“请输入关键字”的提示。 l OnLostFocus(失去焦点时): 当一个组件失去焦点时触发。比如用户名、密码的验证。 l OnChange(选中项改变时):下拉列表框或列表框的选中项改变时触发,不支持其他元件。比如选择地址时,选择不同的省份,显示对应的省内城市。 动态面板专属事件 l OnMove(移动时):当动态面板移动时触发。是指通过其他事件的触发控制面板移动时,比如当进度条移动时,进度比例的变化。

l The OnShow and OnHide events(显示或隐藏时):当动态面板隐藏或显示时触发。比如图片显示时按钮文字是关闭图片,图片隐藏时按钮文字变为打开图片。 l OnPanelStateChange(状态改变时):当动态面板更改面板的状态时触发。 比如通过改变动态面板状态实现的进度条效果,当状态改变时改变相应的进度比例。 l OnDragStart: Occurs when the drag begins(开始拖动面板时):当开始拖动动态面板时触发。比如在动态面板拖动开始时,显示“拖动开始”的文字提示。 l OnDrag: Occurs as the panel is dragged(面板拖动时):动态面板拖动时触发,比如拖动一块动态面板另外一块跟随移动。 l OnDragDrop: Occurs when the panel is dropped(面板拖动结束时):当拖拽结束时触发。比如滑动解锁,面板拖动结束时根据滑块的位置设置相应的效果。

小楼axure 图文教程(七)日历元件的制作(图像热区效果)

小楼axure 图文教程(七)日历元件的制作(图像热区效果) 作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-11 22:48 ?6没有评论编辑示例原型下载:小楼原创元件-日历 实现目标: 1、点击日历图标出现日期选择面板,点击其中一个预先设定好的日期,日期在文本框显示。 2、点击日历图标中的清空,则删除文本框中的日期。 3、点击今天则文本框日期显示为当前日期(通过变量实现,未接触过变量的同学可略过)。 4、点击关闭,则关闭日期选择面板。 最终效果如下:(看不到动态效果时,请点击图片。) 实现过程: 首先,准备一个文本框,一个日历图标,一个动态面板,一个日期选择面板的图片(示例用图是从百度图片下载的),把这些元件的标签都设置好(不会设置标签参看教程:小楼axure rp教程(一)文本框焦点效果)。 准备好这些,我们就可以开始制作了。

1、双击动态面板,再双击打开状态1,然后,把日期选择图片粘贴到里面,并拖动到左上角的位置,点右键—顺序–设置为最底层。 2、从元件库里面拖出四个图片热区,分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上。 3、分别设置每个热区的鼠标点击事件。 A点击清空上的热区时,删除日期文本框的文字。

B点击今天上的热区时,调用系统日期变量[[Year]]-[[Month]]-[[Day]],将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽,当天是月初1号,就是[[Year]]-[[Month-1]]-[[Day-1]]。然后设置动态面板隐藏,可以加上500毫秒淡入淡出的动画效果。 (设置动态面板隐藏的图就不截了,不会的参照C步骤) C点击关闭上的热区时,设置隐藏动态面板。 D点击日期数字上的热区时,直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板。

axure7.0教程(图文案例)

作者:陪学地址:https://www.360docs.net/doc/049696553.html,分类:axure交互设计 初学axure时会想如何快点实现做交互的效果,做交互要对部件的属性和axure 的基础功能有认识和了解才能更快的实现,我介绍这个案例主要用到的部件是“动态面板”需要对动态面板的属性有所了解。 切换面板在网页中算是非常常见的,如视频网站的电视剧分类标签、资讯网站的资讯分类等,当鼠标移入到这个标签的时候显示的内容会相应的变化,同时标签的样式也会发生变化;这些交互效果都可以利用动态面板的几个状态来进行相互切换得来。 步骤1:从部件库中拖拽一个动态面板到线框图编辑区中,并在“部件交互和注释”窗口中命名为“通知” 步骤2:双击动态面板“通知”,打开 动态面板管理窗口,点击“+”按钮,新增4个状态,并将状态命名为:公告、规则、论坛、安全、公益

步骤3:在“通知”动态面板管理窗口中,双击“公告”状态,打开“公告”状态,在公告状态中输入公告的内容 步骤4:选中公告中的文字,在“部件属性和样式”窗口中,点击“鼠标悬停时”,打开“设置交互样式”窗口,设置鼠标悬停时字体颜色:#FF4400;切换到标签“鼠标按键按下时”,设置字体颜色:#FF4400。 小技巧:经常看到在网页中,当鼠标悬停时两个或多个部件(例如图片和文字)的样式同时发生变化,要实现这个效果只要把要改变样式的两个部件放在动态面板同一个状态中,设置它的交互样式,同时在动态面板属性中勾选“触发鼠标交互

样式”这样就可以实现了 步骤5:打开“公告”状态,选中“公告”,在“部件交互和注释”窗口中,双击“鼠标移入时”事件,打开用例编辑器 步骤6:在用例编辑器中,第二步:点击新增动作—— 选择“动态面板”;第四步:配置新动作—— 勾选中“通知(面板状态)”,在“选择状态”后下拉选择“公告”;点击“确定”,保存设置,并关闭用例编辑器。

Axure 基础教程

Axure8.0基础教程 基础1. 添加元件到画布 在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。(图1-1) 基础2. 添加元件名称 文本框属性中输入元件的自定义名称,建议采用英文命名。 建议格式:PasswordInput01或Password01 名称含义:序号01的密码输入框 格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。(图1-2)

基础3. 设置元件位置/尺寸 元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。(图1-3) x:指元件在画布中的x轴坐标值。 y:指元件在画布中的y轴坐标值。 w:指元件的宽度值。 h:指元件的高度值。 在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。(图1-4) 基础4. 设置元件默认角度 方式一:选择需要改变角度的元件,按住键的同时,用鼠标拖动元件的节点到合适的角度。(图1-5)

方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置。(图1-5) 基础5. 设置元件颜色与透明 选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。(图1-6) 基础6. 设置形状或图片圆角 可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。(图1-7)

基础7. 设置矩形仅显示部分边框 在Axure RP 8的版本中,矩形的边框可以在样式中设置显示全部或部分。(图1-8) 基础8. 设置线段/箭头/边框样式 线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。(图1-9) 基础9. 设置元件文字边距/行距 在元件样式中可以设置元件文字的【行间距】与【填充】。(图1-10) 行间距:是指文字段落行与行之间的空隙。 填充:是指文字与形状边缘之间填充的空隙。

小楼axure教程(五)动态面板的使用

小楼axure教程(五)动态面板的用途 作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24 ?61条评论编辑小楼axure教程(五)动态面板的用途 写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而 忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的 交互效果。所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响, 那么动态面板都能做什么呢?主要有以下几个方面: 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。

那通过这几个属性都能实现什么样的功能呢?简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候,需要点击按钮后出现一些界面上没有的元素,比如: 情景A:登录功能在不填写用户名时点击登录按钮,显示出要求用户填写用户名的提示。 情景B:当我们需要在用户的某一个操作时,弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示,可以通过右键单击动态面板—编辑选项—设为显示(或)设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同,动态面板的滑动效果一般是通过其他交互事件来激发的,可能是点击某个按钮,也可能是页面加载时实现。比如: 情景A:网站上的一些滚动文字的效果。 情景B:点击登录按钮,登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程,比如通过页面的onpageload事件。现在,在此不做过多讲解,以后通过案例来进行介绍,则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果,对于移动互联网产品原型来说是必须的,主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A:手机的滑动解锁功能。 情景B:手机页面的纵向浏览功能。 情景C:手机页面的横向换页功能。

小楼axure 图文教程(二十)动态面板拖动效果(函数DragX,DragY)

作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-31 12:00 ?6没有评论编辑今天是axure rp6.5新手教程的最后一节了,写了这么长时间,也不知道给大家帮上忙 了吗?在这最后一节,把之前没有讲的两个特殊函数说一说。至于在这20章教程里面没有 写到的东西,将会在axure7.0的教程里慢慢补全,敬请期待! 本教程案例原型下载:小楼axure 图文教程(二十)动态面板拖动效果(函数DragX, DragY) 今天的教程示例如下: 如图,是通过拖动任意一个面板,让另外一个面板镜像移动。 看似有些复杂的效果,其实非常简单就实现了。 首先介绍两个函数: DragX:获取被拖动面板左右瞬时挪动的距离; DragY:获取被拖动面板上下瞬时挪动的距离; 我们只需要在两个动态面板里各写上两个动作就好了。 左面的面板,我们当面板拖动时,将它设置为拖动状态,这样就能随意拖动了; 然后,让左面面板拖动的时候,右面的面板移动相对距离,因为我们是让两个面板上下 方向(Y轴)同方向移动,而左右方向(X轴)朝相反的方向移动。所以在相对距离里面X

轴我们要把DragX前面加上负号,这样就是反方向移动了。Y轴就直接获取DragY的函数值就可以了。 同理,我们在右边的面板上,也写上这两个动作,这样拖动右面板的的时候左面板也镜像移动了。

好了,让我们看看效果! 呵呵,axure 6.5教程完结,这周末之前,axure7.0教程就要开始和大家见面了,敬请期待! 我一定会回来的!!!!!!!!!!!! 本文出自诉客?产品经理的心声,转载时请注明出处及相应链接。

小楼axure 图文教程(八)带遮罩层的弹出框

小楼axure 图文教程(八)带遮罩层的弹出框作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-12 22:58 ?6没有评论编辑 本文出自诉客-产品经理的心声,转载时请注明出处及相应链接。 示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1、点击按钮弹出带遮罩层的对话框; 2、页面上下左右滚动时,弹出的对话框水平和垂直始终居中。 实现步骤如下: 1、拖入编辑区2个矩形,并点右键—转换—转换为动态面板; 2、双击其中一个动态面板设置标签为“遮罩层”(看个人喜好随便命名),并双击状态1进入编辑;

3、点击状态1里面的矩形,设置大小与网站页面大小相同,以便完全遮盖;然后,设置矩形边框为“无”;最后设置填充色的透明度为50%(看个人喜好),并选择填充色为灰色(看个人喜好); 4、关闭状态1编辑页面,选择另外一个动态面板,按照第2步命名并进入编辑; 5、设置里面的矩形为合适大小,并拖入一个按钮(或者矩形/文本面板)作为关闭按钮;设置按钮onclick事件为隐藏遮罩层和当前编辑的这个动态面板;

6、关闭当前的编辑页面,再次选择作为对话框的这个面板—右键—编辑选项—固定到浏览器…; 7、勾选固定到浏览器窗口,水平和垂直都选择居中,并勾选“保持在前面”; 8、拖入一个按钮(或者矩形/文本面板)到编辑区,双击输入文字“登录”;然后点右键—顺序—置于底层; 9、按着ctrl选择两个动态面板(或者挨个设置),点右键—编辑选项—设为隐藏。 10、好了,生成原型就能看到效果了。

扩展:固定到浏览器选项可以让动态面板无论页面怎么滚动,总是停留在一个位置,那么网站两侧的对联广告,或者浮在页面上的一些按钮、图片等,都能用这种方式来实现。

Axure教程(四)示意图和批注

Axure教程(四)示意图和批注 axure发表于240天8小时57分钟前 来源:https://www.360docs.net/doc/049696553.html,标签:Axure教程axure批注axure 今天来谈谈Axure的示意图及相关批注的功能,主要从五个方面进行阐述: 1.定义Sitemap企划一个网站或Web AP,在动手开始绘制网站页面的示意图(Wireframe)或流程图之前,您应该事先思考网站架构,并决定信息内容与层级。当您心中已经有了明确的网站架构,接下来就可以利用Sitemap窗格来定义您所设计的网站页面。

Sitemap窗格是用来管理设计中网页的工具,您可以在Sitemap 窗格中可以新增、 删除和调整网页层级。 新增/删除网页: 想要新增网页的话,请点选Sitemap 工具列上的【Add Child Page】钮。 在网页上按鼠标右键,然后选择「Rename Page」或慢慢的在网页上连续按鼠标左键两下可编辑网页名称。 想要删除网页的话,请点选想要删除的网页,然后按下Sitemap 工具列上的【Delete Page】钮,或是在网页上按下鼠标右键,然后选择「Delete Page」。 调整网页层级: 您可以将网页从Sitemap 中拖曳到目标母网页中来移动网页位置,您也可以使用Sitemap 工具列上的箭头按钮来上下移动网页,或改变网页的阶层。 开启网页: 在Sitemap中的任一网页上连续按鼠标左键两下,网页会在Wireframe 窗格中开启。 -------------------------------------------------------------------------------- 2. 以介面物件(Widgets)绘制示意图(Wireframe) 介面物件(Widget)是用来设计Wireframe的使用者介面元素,您可以在Widgets 窗格中找到一些常用的Wireframe Widget,例如:Button、Image和Text Panel。 Axure RP 各种Widgets呈现效果,请参考Widgets效果总览

小楼axure_图文教程(十八)邮件验证-条件+循环遍历字符串验证

小楼axure 图文教程(十八)邮件验证-条件+循环遍历字符串的组合验证 作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-29 12:00 本文出自诉客?产品经理的心声,转载时请注明出处及相应链接 本教程元件下载:小楼原创axure元件-邮箱验证 最近经常看到关于用axure实现邮件验证求助,本来没太在意,前两天闲着没事,就决定做一个邮件验证的axure元件。结果,做是做出来了,过程的曲折,真是搞的蛋都快碎了。因为,在这次元件制作的过程中,又碰到了axure的bug。 还是先讲思路,希望大家能够适应我使用mindmanager的脑图来展现:

如上图所示,我们先准备使用的2个元件,建好5个变量。这些就不细说了。 准备好之后,我们开始实现过程: 1、在文本框获取焦点的时候,相关提示要清空,文本框失去焦点时,要提示请输入邮箱地址。这个动作在之前的教程《小楼axure教程(一)文本框焦点效果》里面讲过,这里就不赘述了; 2、每次输入邮件验证都是一个新的验证过程,所以我们要在获取焦点时,将每个变量做一次初始化,把这些变量的初始值设为0; 3、到这里获取焦点的事件就写完了,下一步就是文本框失去焦点时的事件了,如脑图所示:我们使用用条件编辑器,先通过“包含”来判断用户输入的邮件地址是否含有@和.这两个必须的字符,再来通过“是-之一”subsrting(0,1)判断是否邮件地址首位是@或.,通过substring(length-1,length)来判断邮件地址末尾是不是@或.。只要有一个验证符合条件,就在文本框给出错误提示。 4、上面的条件判断完成后未报错的情况下,进入循环判断,一个字符一个字符的验证邮件地址的合法性,循环通过切换面板的可见性来实现,面板显示时我们来执行验证判断,一个字符判断不合法时跳出判断并提示错误,字符合法时通过切换面板可见性将动态面板转为隐藏,当面板隐藏时不做任何动作,直接通过设置切换面板可见性,再将动态面板设置为显示状态进行第二轮判断,这样就形成了所谓的玄幻判断。 5、既然循环判断是一个字符一个字符的验证,那么就需要我们对字符进行截取,这个时候我们就需要使用变量来记录,我们的截取位置到哪里了。函数substring(from,to)的用法是截取第一个字符是substring(0,1)就是从第0个位置截取到第1个位置,截取第二个字符就是substring(1,2)以此类推;那么怎么动态的依次截取每个字符呢?我们可以使用变量,会变才能动态嘛。

小楼axure教程(五)动态面板的使用

小楼axure教程(五)动态面板的用途小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22: 24?61条评论编辑小楼axure教程(五)动态面板的用途写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解。 关于动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的交互效果。 所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响,那么动态面板都能做什么呢?主要有以下几个方面: 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果以上这些效果都在移动面板的元件属性里面体现。 那通过这几个属性都能实现什么样的功能呢?简单的举几个例子。 1、显示隐藏效果我们经常在做原型的时候,需要点击按钮后出现一些界面上没有的元素,比如: 情景A: 登录功能在不填写用户名时点击登录按钮,显示出要求用户填写用户名的提示。 情景B:

当我们需要在用户的某一个操作时,弹出一个提示框。 当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示,可以通过右键单击动态面板—编辑选项—设为显示(或)设为隐藏来实现。 2、动态面板的滑动效果与显示隐藏效果不同,动态面板的滑动效果一般是通过其他交互事件来激发的,可能是点击某个按钮,也可能是页面加载时实现。 比如: 情景A: 网站上的一些滚动文字的效果。 情景B: 点击登录按钮,登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程,比如通过页面的onpageload事件。 现在,在此不做过多讲解,以后通过案例来进行介绍,则更易懂一些。 3、动态面板的拖动效果,对于移动互联网产品原型来说是必须的,主要用于APP的产品原型。 用来实现面板被拖动时产生的一些效果。 情景A: 手机的滑动解锁功能。 情景B:

相关主题
相关文档
最新文档