Axure交互技巧:控制弹框的可见性,这一个动作就够了

前言

今天和大家聊一聊如何利用Axure实现弹框的显示与隐藏。在学习制作弹框交互之前,我们先了解下常见的弹框有哪几种。通常互联网产品的弹框有三种:提示弹框、模态弹框、toast弹框。

提示类弹框主要向用户展示一些提示信息,或者需要用户进行一些确认操作;模态弹框需要用户处理事务,用户需要输入信息执行操作;toast弹框则是一种轻量级的提示,用户只需要知晓即可,无需进行任何操作,通常toast提示的信息比较简短。下面我们就来分析下如何实现这3类框的显示与隐藏。

提示弹框


提示弹框示意图

首先我们将弹框转换为动态面板,利用动态面板的位置固定属性,将弹框设置为上下居中、左右居中,这样可以确保弹框始终显示在窗口的中间位置。

固定弹框位置

显示弹框:为触发显示弹框的按钮添加鼠标单击事件,添加动作“显示”,显示的对象为弹框,在动作配置中可以根据我们的需要,添加一个逐渐显示的动画,动画时间为500毫秒,将弹框置于顶层,选择“灯箱效果”为页面增加一个遮罩层,当然我们还可以为遮罩层选择背景颜色,默认情况下为灰色,一般使用默认颜色即可。

显示提示弹框

隐藏弹框:为弹框中的两个按钮添加鼠标单击事件,添加动作“隐藏”,隐藏对象选择弹框,隐藏时设置一个逐渐隐藏的动画效果,动画时间为500毫秒。隐藏的动画时间与显示的动画时间尽量保持一致。弹框中确定按钮与取消按钮的交互配置是一样的。

隐藏提示弹框

模态弹框

模态弹框的交互配置过程与提示类弹框基本相同,一般模态类弹框会额外增加一个关闭按钮,关闭按钮的配置与确定按钮相同。一般实际开发过程中,确定按钮还会检查输入信息的合法性,这里我们主要讲解弹框的显示与隐藏,输入信息的判断就不在这里讲解了,通常原型不需要检查信息的合法性。

模态弹框示意图

toast弹框


toast弹框示意图

与提示类弹框相同,首先需要将弹框内容转换为动态面板,并利用动态面板的位置固定属性,将弹框固定在屏幕窗口的中间位置。

固定弹框位置

为触发显示弹框的按钮添加鼠标单击事件,添加动作“显示/隐藏”,显示toast弹框,动画效果设置为逐渐显示,动画时间为500毫秒;添加第二个动作“等待”,等待时间设置为1000毫秒(1秒);添加第三个动作“显示/隐藏”,隐藏toast弹框,动画效果设置为逐渐隐藏,动画时间为500毫秒。

toast弹框的显示与隐藏



关注并转发后,可私信关键字“弹框”可获取本节课案例的源文件。

【Axure原型设计】专注分享Axure基础教程、交互案例以及经验技巧,并不定期赠送各种资源福利,包含:系统组件库、页面模板、实战案例等。

推荐阅读更多精彩内容