• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > 五分钟教你快速上手Axure交互设计

五分钟教你快速上手Axure交互设计

作者: @Milov 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure交互,axure交互原型设计,axure交互教程,axure交互效果,axure交互设计等相关知识, @Milov 希望在学习及工作中可以帮助到您

本教程适用于对Axure有一定了解但没有交互制作经验的新手们,不涉及动态面板。文中提到的部分概念均为作者总结而来,若有不妥之处敬请谅解,愿大家看完后有所收获。

jiaohusheji

第一分钟:理解交互样式

交互样式:在触发特定的事件时,用来控制元件部分样式的改变。在Axure 8.0中的面板如下:

交互样式

实例一:鼠标悬停时改变文字颜色和背景颜色

1.?选中带文本的矩形如图,点击交互样式面板中的“鼠标悬停”,弹出“设置交互样式”对话框;

我的收藏

2.?选中“字体颜色”和“颜色填充”,随便选两种颜色,点击确定;

交互样式

3.?点击预览,效果如下:

gif1

总结:交互样式触发的事件类型只有四个,控制的元件属性也比较少,知道它能在哪些情况下改变哪些样式就够了。

第二分钟:理解交互

交互:在由触发一个或多个事件而产生的某一场景内做出相应动作产生相应效果的过程。相当于广义化的交互样式,但不能代替交互样式,因为部分功能“如改变组件内文字的颜色等”只能通过交互样式来实现。在Axure 8.0中的面板如下:

交互

实例二:鼠标悬停时改变文字内容(该效果无法通过上述交互样式实现)

1.?选中文本标签如图,双击交互面板中的“鼠标移入时”,弹出“设置交互样式”对话框;

触碰

2.?依次点击“设置文本”,选择要设置文本的元件,编辑文本为“已触碰”,并点击确认,如图:

交互

3.?回到工作窗口中,双击交互面板中的“鼠标移出时”,与步骤2一样依次点击“设置文本”,选择要设置文本的元件,编辑文本为“未触碰”,并点击确认;

4.?点击预览,效果如下:

gif2

总结:交互的触发事件和动作效果比较繁杂,其中涉及不少与变量相关的问题,这个也视项目的复杂程度而定。交互很多情况下是在控制其他元件的变化,这是与交互样式最大的不同之处。

第三分钟:掌握交互联动(1)

交互样式与交互样式联动:两个元件中,在一个元件的交互样式产生效果的同时另一个元件的交互样式也随之产生效果

实例三:在实例1的基础上完成有断层的悬停效果

1.?在实例一中的矩形上叠加一个灰色带状的矩形如图:

9

2.?我们想要实现当鼠标悬停在大矩形的同时小矩形的填充色由灰色变成白色,这需要用到交互样式,所以我们按照实例一的方法设置好交互样式后,效果如下,可以看到当大矩形变蓝后小矩形还是灰色的:

gif3

3.?这时我们需要在两个矩形之间建立交互样式联动,那么我们将二者组合起来,并在组合上右键,点击“允许触发鼠标交互”;

组合

4.?点击预览,效果如下,可以看到二者已完美同步:

gif4

总结:交互样式与交互样式联动的关键只有两部:1.组合;2.允许触发鼠标交互。

第四分钟:掌握交互联动(2)

交互与交互联动:两个元件中,在一个元件的交互产生效果的同时另一个元件的交互也随之产生效果

实例四:在实例2的基础上完成不触碰文字就可改变文字内容的效果

1.?在实例二的基础上新增一个矩形如图,双击交互面板中的“鼠标移入时”,弹出“设置交互样式”对话框;

2

2.?依次点击“触发时间”,选择案例二中的矩形,选中“鼠标移入时”,并点击确认,使当前新矩形的“鼠标移入时”动作可以触发老矩形的“鼠标移入时”动作,如图:

1

3.?回到工作窗口中,双击交互面板中的“鼠标移出时”,与步骤2一样依次点击“触发时间”,选择案例二中的矩形,选中“鼠标移出时”,并点击确认。

4.?点击预览,效果如下:

gif5

总结:交互与交互联动的关键只有一个动作:“触发事件”。

第五分钟:掌握交互联动(3)

交互与交互样式联动:两个元件中,在一个元件的交互样式产生效果的同时另一个元件的交互也随之产生效果(这种情况其实没有最优解,它相当于情景一和情景二的结合体)

案例五:在案例四和案例五的基础上,实现当鼠标悬停于“我的收藏”矩形上时,改变背景颜色和文字颜色的同时也改变“触碰状态”矩形里的文字

1.?将案例四中对绿色矩形所做的全部操作应用到“我的收藏”矩形中;

2. 点击预览,效果如下:

gif6

总结:这个没什么要总结的,但是在最后要强调一点:做交互时一定要养成修改元件名称的好习惯!

您可能想查找下面的文章:

  • 五分钟教你快速上手Axure交互设计
  • Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)
  • 如何用Axure快速制作APP交互原型

相关文章

  • 2017-06-13自定义微信元件库:Axure基本元件的应用(下)
  • 2017-06-14Axure实战:滑动拼图解锁教程
  • 2017-06-14如何优雅的用Axure装逼?高保真原型心得分享
  • 2017-06-14Axure教程:手把手教你做截获鼠标指针(或鼠标变手型跟随)
  • 2017-06-13矩形框:深度理解和应用元件样式(二)
  • 2017-06-14用Axure8.0制作简单的登录窗口
  • 2017-06-13Axure教程:原型设计之多用户注册登录
  • 2017-06-14Axure 8.0 拖动滑块设置数字和日期
  • 2017-06-13Axure实例:制作一个通用的移动端内容滚动区
  • 2017-06-13Axure原型设计之轮播图

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:可使用的计算器demo制作(上)
    • Axure教程:滑动鼠标页面自动切换(一)
    • Axure教程 | 聊一聊原型组件化设计——从淘宝购物车按钮说起
    • Axure教程:可使用的计算器demo制作(下)
    • Axure教程丨制作自己的Axure元件库
    • Axure教程:微信聊天列表原型制作(一)
    • 三步教你 Axure 原型变身 EXE 程序
    • Axure教程:微信聊天列表原型制作(二)
    • 用Axure 实现“打飞机”,骚年,来一发(下)
    • Axure中继器:制作可交互的“APP音乐播放列表页”

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有