软件原型设计工具Axure

软件工程实践——软件原型设计工具Axure

 

一、Axure简介

• Axure简介：

Axure RP是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

• Axure下载：

我们可以在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邮箱，会收不到邀请码！！！

 

二、菜单栏

 

• FILE

这个容易懂，就是新建项目、打开项目、保存项目之类的。不仅是个人项目，团队项目也可以在这里

 

 

• Edit

复制、粘贴、全选、替换、撤销等。用掉的地方不是很多，毕竟大家都对复制粘贴的快捷键非常熟悉。

 

• View

主要是对整个程序界面的设置，比如可以设置工具栏有哪些工具等。

 

• Project

可以在这里设置项目相关的东西，比如字体风格、页面风格等。

 

• Arrange

可以设置原件图层的前后、对齐方式等等。在工具栏的中间也有同样的功能，直接点那里会方便很多。

 

（点这里也可以设置图层前后、对其方式等）

 

• Publish

可以你做好的页面的预览、把做好的页面上传到团队共享上等。

预览界面不同的浏览器可能会造成效果的不同，推进Chrome、Firefox等。

 

• Team

团队项目相关的都在这里了~可以把现有的项目变成团队项目，也可以把团队共享中的项目下载到本地，可以把本地项目更新成团队共享中的项目等等。

 

• Account & HELP

Account可以注销当前账号的登录状态，Help可以检查更新等等。

这俩都是平时用不太到的~~就放一起了

 

三、原件

• 添加元件到画布

在左侧元件库中选择要使用的元件，按住鼠标左键不放，拖动到画布适合的位置上松开。

 

• 添加元件名称

点击元件，在右上角文本框中输入元件的自定义名称，建议采用英文命名。随着项目的进行，后期会有多个元件，如果不命名的话会很难分清楚，所以建议一定要给每一个元件命名。

 

（我把一个box命名为Background）

 

• 设置元件位置与大小

元件的位置与大小可以通过鼠标拖拽调整，但通常情况下很难调整到具体大小，因此也可以在右上角、或者Style中调整具体数值。x代表横坐标，y代表纵坐标，w代表元件的宽，h代表元件的高。

 

 

（两处都可以调整，我把元件Background的大小改为640*960，并放在（0,0）处）

 

• 设置元件的颜色

如果想要改变元件的颜色，可以点击工具栏中的小方块，也可以在右上角元件的Style中修改

 

• 设置元件隐藏

点击元件后，选中右上角的Hidden，元件就会被隐藏。

通常情况下，元件隐藏后会变成淡黄色~

 （两处都可以~）

 

四、交互

• Add Case

先点击元件，再点击右上角的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). 预览

 

 

 

• Hot Spot

由于很多情况下，由于ICON太小，手指太大，不太好点中按钮，所以可以使用Hot Spot扩大选区。

 

（Hot Spot）

 

 

（可以直接在Hot Spot 上设置交互，以扩大可以点击的区域）

 

 

• SnapShot（Storyboard）

我们可以用Snapshot查看设计页面的缩略图，点击后还可以进入相应页面。如果页面有所改变，那Snapshot也会跟着改变。

 

 

（拖入后双击）

 

 

 

（拖入了三个）

 

 

（点击这里的Connect可以连线~）

 

 

（连完就是这样的）

 

 

 

（可以插入这里的贴纸，表明页面之间是如何交互的~）

 

 

• 团队项目

很多情况下我们的项目都是团队合作的，因此可以使用团队项目。

A） 首先登陆https://share.axure.com/

 

B） 点击项目后的小齿轮，点击FILE+SETTINGS

 

 

C） 然后我们就可以看到项目的详情了，可以设置项目名称和密码。

 

D） 将URL复制到其中，就可以get到团队项目了~

 

E） 为了避免多人同时操作一个页面，对页面操作前首先需要对页面Check out，否则无法修改

 

 

F）  同样，修改完后需要Check in

 

 

六、总结

在上学期的移动应用开发基础中，我们曾学过Axure的一些基本知识，看到这次作业后，我又在网上找了一些Axure的学习资料，学习了一些新的知识。

①    优点：

• • 总的来说，我觉得Axure还是一个比较不错的原型设计软件，功能强大，可以比较完整地展示页面，制作storyboard也非常的方便，“自由度”非常高，可以从无到有的设计页面。更有比较完整的团队管理功能，支持团队合作，共同作业。
  • 对于高保真原型，大多数PM的首选都是AXURE，因为在墨刀中能带来的效果并不是很多。 另外因为高保真原型因为涉及条件判断等情况比较多，因此AXURE在这里可以做到，但是墨刀是没有条件判断，只有他通过状态来进行切换。

②    缺点：

• • 但是他也有缺点，就是使用共享的时候会非常的卡！尤其是Check out和Check in 的时候，有时候（常见于晚上）速度非常之慢，原因未知，网上搜索后也不知道原因，这对于团队项目来说是非常麻烦的，当有团队的其他队员想要修改你正在修改的页面时，你却不能check in，导致队员无法对其进行操作。
  • 另外，Axure能画出的图形太少了，只能勉强画出基本图形，很多图形最后我都是通过Photoshop画出来之后以图片的形式导入到Axure中使用。在查阅资料后，得知大部分PM都会在AXURE原型库、素材库去寻找相应的第三方素材库，进行载入，这个工作还是会比较费时间的。
  • 最后就是Axure是一款付费软件，并且它的价格也是比较昂贵的。按月订阅的话，Axure RP PRO 专业版的售价是人民币290元/每月/每套。也可以购买终身使用权限，根据版本的区别，价格也在5000-10000人民币不等。