交互软件Axure—高保真原型

2024-06-03 21:12:10

在上一篇文章中跟大家分享了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

转载于:https://www.cnblogs.com/jerehedu/p/6534428.html

交互软件Axure—高保真原型相关推荐

【Axure高保真原型】日期时间选择器
今天和大家分享日期时间下拉列表选择器的原型模板,该模板用中继器结合时间函数制作,所以可以获取真实的日历效果,具体包括哪一年二月份有29天,几号对应星期几,都是真实的.这个原型用Axure原生元件组成, ...
【Axure高保真原型】多选树形表格
今天和大家分享多选树形表格的原型模板,可以点击点击展开或者收起子级内容,也可以点击多选按钮,选中或取消选中,包含全选.全部取消,能自动根据子级选中的数量反选父级.这个原型模板是用中继器制作的,所以使用 ...
【Axure高保真原型】下拉分级选择器
今天和大家分享下拉分级选择器的原型模板,该原型模板由中继器制作,使用时只需要填写好中继器表格,即可自动生成交互效果 [原型预览] 用电脑点击左下方阅读原文或复制打开下面的原型预览地址 https:// ...
【Axure高保真原型】柱状-折线组合图表原型模板
今天和大家分享柱状-折线组合统计图表的原型模板,该模板用Axure原生元件制作而成,所以样式交互都可以任意修改.该模板用中继器制作,所以使用方便,在中继器表格中填写数据以及坐标最大值,既可以自动生成柱 ...
【Axure高保真原型】中继器版PDF阅读卡片
今天和大家分享中继器PDF卡片的原型模板,该原型模板由中继器制作,使用时只需要填写好中继器表格,即可自动生成交互效果 [原型预览] https://axhub.im/ax9/b8494994420ee ...
【Axure高保真原型】能增删改的环形图
今天和大家分享能自增删改的环形图模板,这个原型模板是用中继器调用echarts图表制作的,所以具有高保真效果,包括增加.修改.删除表格数据,会自动生成对应的环形图.这个模板使用也简单,在中继器表格里填 ...
【Axure高保真原型】能增删改的柱状图模板
今天和大家分享能增删改的柱状图模板,该原型模板用中继器制作的,通过js调用echarts的饼图,使用时只需在中继器表格里填入数据,即可自动生成柱状图并包含增删改的交互效果. [原型效果] [Axure ...
【Axure高保真原型】自动设置页码的中继器表格模板
今天和大家分享自动设置页码的中继器表格模板原型模板,该原型模板由中继器制作,使用时只需要填写好中继器表格,即可自动生成交互效果,包括增.删.改.查.筛选.分页.翻页.统计等高保真交互效果,页码能根据表 ...
【Axure高保真原型】汇缴学费原型案例模板
今天和大家分享汇缴学费原型案例模板,里面包含缴费信息.缴费详情.支付订单.订单明细页面,具有高保真高交互的效果. [原型效果] [Axure高保真原型]汇缴学费原型案例模板 [原型预览及下载地址] h ...
【Axure高保真原型】刮奖原型
今天和大家分享刮奖的原型模板,鼠标移入刮奖区域后,可以通过拖动鼠标进行刮奖.这个原型刮奖区域的图案和金额都是随机抽取和生成的,中奖图案也是随机抽取的,所以每次刮开的内容都不一样,中奖金额能够自动根据刮 ...

最新文章

热门文章