天天看点

软件原型设计工具Axure软件工程实践——软件原型设计工具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

软件原型设计工具Axure软件工程实践——软件原型设计工具Axure
  • 注册账号:

为了进行团队作业,团队的每一个成员都需要注册一个账号。首次登录时,我们需要在程序的右上角点击login,接着点击CREAT ACCOUNT,输入用户名和密码,创建账户。

*特别注意:注册的时候一定不能使用QQ邮箱,会收不到邀请码!!!

二、菜单栏

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

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

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

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

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

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

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

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

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

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

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

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

  • Publish

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

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

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

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

软件原型设计工具Axure软件工程实践——软件原型设计工具Axure
  • Account & HELP

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

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

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

三、原件

  • 添加元件到画布

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

软件原型设计工具Axure软件工程实践——软件原型设计工具Axure
  • 添加元件名称

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

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

(我把一个box命名为Background)

  • 设置元件位置与大小

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

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

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

  • 设置元件的颜色

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

软件原型设计工具Axure软件工程实践——软件原型设计工具Axure
软件原型设计工具Axure软件工程实践——软件原型设计工具Axure
  • 设置元件隐藏

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

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

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

 (两处都可以~)

四、交互

  • Add Case

先点击元件,再点击右上角的Add Case,可以添加交互。

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

双击OnClick、OnMouseEnter、OnMouseOut 也可以达到相同的效果,这三个按钮分别表明“当鼠标点击时”、“当光标移动到当前元件上时”、“当光标不在当前元件上时”

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

(这里是当鼠标点击该元件时,页面跳转到Page3)

  • 显示隐藏的元件

当我隐藏了某一个元件后,可以通过Add Case达到“点击某一按钮就让该元件显示”的功能。

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

(我隐藏了一个元件name,并添加了一个SHOW的按钮 ButtonShow)

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

(设置点击按钮后显示被隐藏的元件name)

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

(点击SHOW之前)

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

(点击SHOW之后,被隐藏的name出现了!)

五、其他实用功能

  • 中继器

中继器是一个非常有用的功能,学习它有助于我们快速设计一些复杂的交互界面。

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

*下面是一个使用中继器的例子。

a).新建一个页面,把模板拖入页面

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

b).在上方拖入一个BOX,一个箭头,一个hotspot,一个中继器组件,命名为“读书列表”

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

c). 打开中继器,编辑列名和内容,

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

d).插入图片

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

e). 将原来的矩形框删除,添加1个Box2作为底色,添加1个Heading1、4个label,一个image分别命名为:标题、内容、日期、评分、封面,并调整其位置、文字大小、颜色等,最后在底端添加一条水平线分割数据行。

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

f). 此时,返回“读书”页面,效果如图所示。

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

g). 在“读书”页面设置触发事件,OnPageLoad中添加Case1,选择Set Text ,设置“标题”的值(value)为 “[[item.title]]”。用同样的方法设置其他字段。图片选择Set Image,设置“封面”Default的Value为“[[item.pic]]”。

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

h). 预览

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

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

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

(Hot Spot)

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

(可以直接在Hot Spot 上设置交互,以扩大可以点击的区域)

  • SnapShot(Storyboard)

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

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

(拖入后双击)

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

(拖入了三个)

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

(点击这里的Connect可以连线~)

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

(连完就是这样的)

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

(可以插入这里的贴纸,表明页面之间是如何交互的~)

  • 团队项目

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

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

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

B) 点击项目后的小齿轮,点击FILE+SETTINGS

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

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

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

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

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

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

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

F)  同样,修改完后需要Check in

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

六、总结

在上学期的移动应用开发基础中,我们曾学过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人民币不等。
      软件原型设计工具Axure软件工程实践——软件原型设计工具Axure

转载于:https://www.cnblogs.com/wenjieding/p/10783459.html

继续阅读