Axure教程:使用动态面板实现iOS开关效果

1 评论 5168 浏览 11 收藏 5 分钟

本篇文章将详细地展示了如何使用动态面板实现iOS开关特效,enjoy~

最终效果

知识点

动态面板;

交互 – 设置动态面板;

交互 – 移动;

交互 – 隐藏。

制作过程

首先我们创建一个动态面板,名称定义为“按钮背景”,将面板尺寸设置为50 x 30,并且点击“+”按钮,新增2个不同的面板,名称分别为“open”和“close”,同时我们双击open和close面板,在面板中分别绘制2个背景色块(可以见事例):

下一步,我们在主页面绘制效果所需的元件,并且将白色元件,定义名称为“白色按钮”:

将显示内容,定义名称为“打开内容”:

下一步,我们来创建交互动作,选择“按钮背景”动态面板,双击“鼠标单击时”,打开交互面板,首先我们来添加一个条件判断,点击“添加条件”按钮,打开条件设立面板,如图所示进行设置:

创建完成后,我们为“打开内容”元件来添加交互,如图所示:

下一步,分别为“白色按钮”添加移动的特效,如图所示:

并且为“按钮背景”动态面板进行设置。

至此,我们完成了点击开关按钮后,内容元件隐藏的特效。

下面我们来创建,再次点击按钮,内容元件显示的效果。

选择“按钮背景”动态面板,双击“鼠标单击时”,打开交互面板,添加case2,同样我们先添加条件,将面板状态设置为“close”。

下一步,为内容元素添加显示的特效:

并且为“白色按钮”元件,增加移动的特效:

最后,将动态面板“按钮背景”设置面板为“open”:

全部设置完成后,点击键盘“F5”按键,进行预览。

源文件下载

https://pan.baidu.com/s/1mHJLeC0K6vvoFt5aFOZScQ

 

作者:ZQZ原型师,专注原型设计/交互设计

本文由 @ZQZ原型师 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 不错,学习了

    来自广东 回复
专题
30492人已学习19篇文章
2018年过去了,你都收获了什么?新的一年,你需要如何前行?
专题
17667人已学习17篇文章
随着互联网的不断发展,不少产品开始了适老化改造,帮助老年人更好地融入智能生活。本专题的文章分享了适老化的设计思路。
专题
13025人已学习14篇文章
各种大模型和AI绘画的产品层出不穷,在各行业也在尝试进行应用。在这个阶段,AIGC能实现些什么?本专题的文章分享了AIGC的应用。
专题
14511人已学习12篇文章
数据库对于产品经理来说是一个既熟悉又陌生的概念,虽然产品设计中的数据基本都要与数据库交互,但平时的工作中也很少接触到数据库的具体操作和细节。本专题的文章分享了数据库的基础知识。
专题
15463人已学习12篇文章
本专题的文章分享了交互设计文档的撰写指南。
专题
53352人已学习14篇文章
标题党,又爱又恨。但是如果你是运营,连标题都起不好,那就呵呵哒了。