交互软件axure—高保真原型

杰瑞教育 杰瑞教育     2022-08-24     593

关键词:

在上一篇文章中跟大家分享了Axure7.0 的简介、基本操作和原型图的制作,主要是应用元件库里的原件进行界面元素的搭建,直至完成原型图,在最后给大家展示了高保真原型图效果。而在本次分享中,主要带领大家来实现高保真原型图的制作过程,同时介绍一些其他工具的使用情况。

在讲解之前先跟大家回顾下交互设计,什么是交互设计

交互设计是指设计人和产品或服务互动的一种机制,以用户体验为基础进行的人机交互设计,是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。为此我们的Axure软件发挥着重要作用,作为专业的原型设计工具,它能快速、高效的创建原型,服务于我们的交互设计。

我们打开在上一章节完成的原型图,在它的基础上进行高保真原型制作。一开始介绍下母版的使用,母版主要应用于我们界面top和foot,更加方面二级页的调用。我们把top和foot做好的原型都选中,右击选择转化为母版,修改下名称为top和foot,这样母版就生成了,母版是可以再进行编辑的。

根据页面布局我们从上到下依次进行制作。

1、双击logo位置,直接就跳转到母版top的编辑,右击logo转化为图片,再双击,就弹出了图片的选择路径,选择logo图片,接着会弹出“自动调整尺寸对话框”,由于logo本身的属性,我们选择“是”,这样logo图片就导进来了。

 

依次同理把搜索图标和导航条色块导进来。这样top位置就完成了。

2、再回到首页面进行banner图制作,由于banner图要做交互效果,我们预留到最后讲解。

3、接下来制作关于我们栏目:用同样的方法把icon01转化成图片,双击选择切好的图片导进来。后面三个icon依次导进来图标图片。

在这里我们对每个图片做个鼠标悬停效果:

选中资质荣誉图标,找到右侧元件属性与样式,选择鼠标悬停,再选择image,导入图片即可。公司图片和员工风采同理可完成。

          

 

4、项目案例栏目:首先选择背景图,导入切好的图片,再依次导入案例三张图片,文字颜色改成白色,同样再做个鼠标悬停效果(方法与关于我们的图标导入、悬停方法一致)

5、新闻中心栏目:替换新闻图片,转化成图片,双击导入新图片即可

6、Foot替换方法与top一致

重点讲解Banner图制作:

1、把banner图右击转化为动态蒙版

2、双击动态面板,取动态面板名“banner图”,添加动态面板状态,state1,state2,state3

3、双击state1,进入状态页,拖动一个Image元件到状态1中,双击选择对应的banner图。选择自动调整图片大小,依次替换state2,state3。

 

4、拖动三个圆形放到banner图上方,双击第一个圆形,选择鼠标悬停导入圆图形。

5、选中第一个元件(添过图的),添加交互:鼠标移入时 —— 设置动态面板 —— banner —— State1。同步骤完成02和03.

最后生成原型,发布,查看效果!

 

 

高保真原型图:http://www.jredu100.com/web/prototypeHigh/index.html

原型设计工具

...发生重大失误,缺点是花费时间较低保真原型更多一些。高保真原型:几乎完全按照最终产品来制作的原型,细节丰富,包括了产品的所有功能以及详细的交互细节。制作高保真原型可以显著降低沟通成本,原型更精准和精美,... 查看详情

axure原型设计工具简单介绍和步骤描述

Axure原型设计工具l Axure使用者感受关键词:超大型;高保真度;可拓展控件;自定义库;适配;少交互;收费。 1.Axure介绍:AxureRP是一款专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是RapidProt... 查看详情

axure教程-新手入门基础(小白强烈推荐!!!)

...效果高,只有遵循一些可用性原创,很快模拟出高保真页面原型。​Axure中文学习网:https://www.axure.com.cn/​汉化包下载地址:http://www.chanpinban.com/downloads/##2.什么是原型原型(pr 查看详情

原型设计工具axure简介以及一些对原型设计的思考

...、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等诸多职位来说,Axure都是功能强大并且广受欢迎的原型设计软件。虽然官方不支持简体中文,但也可以通过手动安装汉化包进行汉化。并且Axure在支... 查看详情

axure如何获取控件的当前位置

...Aaxure原型可以做成线框的低保真原型和呈现出图文效果的高保真原型,如果产品经理需要通过颜色对比等来展现出原型设计的效果时,就需要使用高保真的交互原型了。同时,可以将axure的原型文件上传至蓝湖,可以实现手机上... 查看详情

axure中如何自己创建一个元件?

...Baxure原型可以做成线框的低保真原型和呈现出图文效果的高保真原型,如果产品经理需要通过颜色对比等来展现出原型设计的效果时,就需要使用高保真的交互原型了。同时,可以将axure的原型文件上传至蓝湖,可以实现手机上... 查看详情

dma与分区计量管理系统(axure高保真原型)

使用Axure制作的rp高保真原型***DMA与分区计量管理系统***可用于行业参考、实际业务需求开发、学习交流使用,本原型需求可以作为开发使用,业务需求均为作者本人行业经验。平台主要功能包含:DMA、远传表设备、... 查看详情

原型设计工具比较与实践

...点应用灵活,可拓展性强,拥有超级强大的交互制作能力高保真的原型设计工具,名声大,专业性高缺点规范性较差。编辑能力着实强大,变相导致规范性差,管理不便制作原型的速度比较慢(交互操作太多),常常耽误时间,... 查看详情

交互原型设计软件axurerp学习之路

  开始学习之前,请一定要明白:Axure是个极其极其极其简单的软件。因为你所做的就是拖部件,打字,拖部件,打字,最多加个对齐。如果你能把axure当作word或者ppt来用,那你就学会了axure。  AxureRP是一个专业的快速原型... 查看详情

常用快速原型设计工具大比拼,原型设计工具哪个好用

...可以说目前是国外发展最大的在线原型设计工具,主打“交互原型”和“协作”,支持sketch和ps设计稿导入做交互。近来出的Invisionstudio对标sketch,想满足更惊喜的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国... 查看详情

axure中移动端原型设计方法(附iphonex和iphone8最新模板)

...结构进行搭建;●标准化,非常方便进行编辑和维护;●高保真,可高度还原移动端交互效果;在本篇分享的结尾我会提供模板的Axure源文件下载,其中包含了最新的IPhoneX和IPhone8等多套IOS设备机型,以 查看详情

axure自定义文本框样式

...很有限,不能设置边框样式、阴影等,不能满足我们制作高保真原型的需求,本文给大家介绍一下结合矩形元件自定义文本框样式。(PS:此处的“高保真”指的是UI上的设计,对于原型保真程度的说明,请参考我的另一片文章... 查看详情

原型设计工具比较及实践

...操作流程简单,用户使用上手容易原型接近真实app交互的高保真,使得创意更直观团队协作沟通,文件管理等工作效率高,项目风险低缺点墨刀是一款线上产品设计工具,使用墨刀需要上网设计的产品也保存在云端,在墨刀数据... 查看详情

关于ui设计中的交互软件axure7.0运用

AxureRP是一个专业的快速原型设计工具。让负责定义需求和规格、设计功能和界面的人员能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支... 查看详情

axurerp从入门到精通(五十三)灵魂提问-画原型到底要不要加交互事件?(代码片段)

...交互方式。一般只有大公司才会有该职位。二:低保真和高保真原型的保真度一般体现在:内容、交互、视觉三个维度上,高和低就是成果物的质量程度,也就是保真度。低保真:一般 查看详情

rp文件怎么用墨刀打开

...设计!当然也是可以导入其它的软件的原型文件进来进行交互设计的,其中就包括有Axure原型文件!不少新手就有可能会问到了:Axure原型文件怎么导入墨刀里面?接下来小编就为大家分享一下:墨刀导入Axure原型文件的操作方法... 查看详情

从基础带你掌握axure

产品经理用Axure制作高保真原型or低保真原型,很多前辈大神都有各自的见解,这个不在咱们今天话题范围内,毕竟菜鸟一枚,能够利用休息时间和下班时间哼哧哼哧学习,去提升自己,这很重要。 今天咱们来说说快速学习Axure... 查看详情

网站蓝图axurerp高保真网页原型制作中文pdf扫描版[89mb]全彩版

AxureRP就是用来给网站画图纸的软件。它如同服装设计师的样衣,如同建筑师的图纸,如同电影导演的故事板,如同售楼处的样板间。总之,它能让你在真正付出时间和金钱来制作一个网站之前,能够完全了解到最终真正网站所... 查看详情