Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
我们可以在Axure官网( https://www.axure.com/ )下载到Axure的windows或Mac的最新版本,但是由于这是一个收费工具,初次下载时输入邮箱可以获得一个30天的试用时间。
现在Axure已经更新至Version 9.0.0.3646 (PC & Mac),但是本篇文章中使用的是团队版Team Edition 8.1.0.33
为了进行团队作业,团队的每一个成员都需要注册一个账号。首次登录时,我们需要在程序的右上角点击login,接着点击CREAT ACCOUNT,输入用户名和密码,创建账户。
*特别注意:注册的时候一定不能使用QQ邮箱,会收不到邀请码!!!
这个容易懂,就是新建项目、打开项目、保存项目之类的。不仅是个人项目,团队项目也可以在这里
复制、粘贴、全选、替换、撤销等。用掉的地方不是很多,毕竟大家都对复制粘贴的快捷键非常熟悉。
主要是对整个程序界面的设置,比如可以设置工具栏有哪些工具等。
可以在这里设置项目相关的东西,比如字体风格、页面风格等。
可以设置原件图层的前后、对齐方式等等。在工具栏的中间也有同样的功能,直接点那里会方便很多。
(点这里也可以设置图层前后、对其方式等)
可以你做好的页面的预览、把做好的页面上传到团队共享上等。
预览界面不同的浏览器可能会造成效果的不同,推进Chrome、Firefox等。
团队项目相关的都在这里了~可以把现有的项目变成团队项目,也可以把团队共享中的项目下载到本地,可以把本地项目更新成团队共享中的项目等等。
Account可以注销当前账号的登录状态,Help可以检查更新等等。
这俩都是平时用不太到的~~就放一起了
在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。
点击元件,在右上角文本框中输入元件的自定义名称,建议采用英文命名。随着项目的进行,后期会有多个元件,如果不命名的话会很难分清楚,所以建议一定要给每一个元件命名。
(我把一个box命名为Background)
元件的位置与大小可以通过鼠标拖拽调整,但通常情况下很难调整到具体大小,因此也可以在右上角、或者Style中调整具体数值。x代表横坐标,y代表纵坐标,w代表元件的宽,h代表元件的高。
(两处都可以调整,我把元件Background的大小改为640*960,并放在(0,0)处)
如果想要改变元件的颜色,可以点击工具栏中的小方块,也可以在右上角元件的Style中修改
点击元件后,选中右上角的Hidden,元件就会被隐藏。
通常情况下,元件隐藏后会变成淡黄色~
(两处都可以~)
先点击元件,再点击右上角的Add Case,可以添加交互。
双击OnClick、OnMouseEnter、OnMouseOut 也可以达到相同的效果,这三个按钮分别表明“当鼠标点击时”、“当光标移动到当前元件上时”、“当光标不在当前元件上时”
(这里是当鼠标点击该元件时,页面跳转到Page3)
当我隐藏了某一个元件后,可以通过Add Case达到“点击某一按钮就让该元件显示”的功能。
(我隐藏了一个元件name,并添加了一个SHOW的按钮 ButtonShow)
(设置点击按钮后显示被隐藏的元件name)
(点击SHOW之前)
(点击SHOW之后,被隐藏的name出现了!)
中继器是一个非常有用的功能,学习它有助于我们快速设计一些复杂的交互界面。
*下面是一个使用中继器的例子。
a).新建一个页面,把模板拖入页面
b).在上方拖入一个BOX,一个箭头,一个hotspot,一个中继器组件,命名为“读书列表”
c). 打开中继器,编辑列名和内容,
d).插入图片
e). 将原来的矩形框删除,添加1个Box2作为底色,添加1个Heading1、4个label,一个image分别命名为:标题、内容、日期、评分、封面,并调整其位置、文字大小、颜色等,最后在底端添加一条水平线分割数据行。
f). 此时,返回“读书”页面,效果如图所示。
g). 在“读书”页面设置触发事件,OnPageLoad中添加Case1,选择Set Text ,设置“标题”的值(value)为 “[[item.title]]”。用同样的方法设置其他字段。图片选择Set Image,设置“封面”Default的Value为“[[item.pic]]”。
h). 预览
由于很多情况下,由于ICON太小,手指太大,不太好点中按钮,所以可以使用Hot Spot扩大选区。
(Hot Spot)
(可以直接在Hot Spot 上设置交互,以扩大可以点击的区域)
我们可以用Snapshot查看设计页面的缩略图,点击后还可以进入相应页面。如果页面有所改变,那Snapshot也会跟着改变。
(拖入后双击)
(拖入了三个)
(点击这里的Connect可以连线~)
(连完就是这样的)
(可以插入这里的贴纸,表明页面之间是如何交互的~)
很多情况下我们的项目都是团队合作的,因此可以使用团队项目。
A) 首先登陆https://share.axure.com/
B) 点击项目后的小齿轮,点击FILE+SETTINGS
C) 然后我们就可以看到项目的详情了,可以设置项目名称和密码。
D) 将URL复制到其中,就可以get到团队项目了~
E) 为了避免多人同时操作一个页面,对页面操作前首先需要对页面Check out,否则无法修改
F) 同样,修改完后需要Check in
在上学期的移动应用开发基础中,我们曾学过Axure的一些基本知识,看到这次作业后,我又在网上找了一些Axure的学习资料,学习了一些新的知识。
① 优点:
② 缺点:
原文:https://www.cnblogs.com/wenjieding/p/10783459.html