代码改变世界

Axure交互效果1

2024-11-25 00:37  书书书书君  阅读(91)  评论(0编辑  收藏  举报

--本篇导航--

给文本框设置提示文字
文本框的清除按钮
灯箱效果
APP底部弹出菜单
鼠标悬停显示另一面板
显示推拉效果
二级菜单展开
轮播图
全屏与浏览器等宽显示
滚动弹幕效果
返回顶部按钮
商品详情页拖动鼠标查看效果
单选按钮组
下拉列表树
关联二级下拉列表
步进器
旋转暂停
内嵌视频


交互

使用方法:给目标元件添加各种交互,交互中设置动作执行条件和动作。

  1. 同一个元件可以有多个交互动作;
  2. 交互执行顺序是从上到下依次执行;
  3. 元件1的交互可以控制元件2执行交互动作;
  4. Axure中的元件、属性、交互都是可以复制粘贴的。

交互添加方法

添加情形条件

Axure中可以给交互添加各种前置判断条件,组成复杂的If...Else的逻辑判断。


实例

给文本框设置提示文字

利用[文本框]元件的提示文本来显示提示的文字,还可以设置工具提示来提供悬停的提示文字。

文本框的清除按钮

在文本框中输入内容,显示出清除按钮;

点击清除按钮,清除文本框内容。

灯箱效果

利用元件【显示/隐藏】的显示效果的灯箱效果来实现。

APP底部弹出菜单

灯箱效果,会有一指定颜色的背景,再次点击背景区域时,会触发隐藏。

弹出效果,没有背景,当鼠标移出显示元件之外,则会自动隐藏显示元件。

推动效果,会在触发元件的位置上推出隐藏的元件,隐藏元件则需要再添加其他的交互。

使用推动时,需要注意方向是下方还是右侧,这个对收起弹出的界面有影响。否则被弹出界面挤出去的部分不会回复到初始位置。

鼠标悬停显示另一面板

显示推拉效果

二级菜单展开

使用上述的方式,可以使用【显示/隐藏】的推拉、拉动动作,做到二级菜单的折叠、展开交互。

1、载入页面时,二级菜单默认收起(隐藏)。

2、点击一级菜单后,二级菜单可以展开、折叠起来。

轮播图

轮播图就是用左右、1、2、3来切换动态面板(不同的图)的状态。

1、制作动态面板、设置好按钮图标。

2、点击左右按钮切换。将动态面板的状态改成上一项下一项,记住要勾选向前/后循环

3、点击1、2、3来切换

4、在图片上拖动鼠标切换

全屏与浏览器等宽显示

页面载入时,将元件的宽度设置成页面窗口的宽度。

滚动弹幕效果

弹幕滚动就是页面载入的时候,弹幕内容自动向上、向左滚动。也就是需要对动态面板的2个状态做横向滚动,并设置为循环动画即可。

返回顶部按钮

原理:利用动态面板的固定到浏览器位置的特点,将返回顶部按钮转成动态面板,再固定到浏览器的某一位置上。之后再去做页面滚动显示按钮、点击按钮返回顶部的交互。

1、下滑滚动鼠标,显示出返回顶部的按钮

2、点击返回顶部的按钮,将页面返回到顶部

商品详情页拖动鼠标查看效果

Axure中元件的坐标是左上角开始,所以要实现此效果,则需要将鼠标指针的位置设置到矩形元件的中心,也就是需要将鼠标指针的位置减去矩形元件一半的宽高值。

单选按钮组

将多个单选按钮选中,右键[指定单选按钮的组],这样才会出现仅有一个单选按钮被选中。

通过选中和取消选中,来控制另一个元件。

下拉列表树

添加的列表树,可以对每一个节点添加点击交互,从而来切换如动态面板、其他内嵌页面等。

关联二级下拉列表

通过下拉列表1来显示下拉列表2的选项内容,因此下拉列表2会有多个状态,也就是下拉列表2是动态面板。

通过判断下拉列表1当前选项的状态,来改变下拉列表2动态面板的状态页。

步进器

点击+按钮,增加数字;点击-按钮,减少数字。

但起始为1时,-按钮应该是禁用状态。此处则需要做条件判断。

旋转暂停

通过控制全局变量的值来做交互。

内嵌视频

使用[内联框架]元件可以内嵌其他网页的视频、底图、Axure中其他页面的缩略图。