Axure8 Pro实现动态的遮罩层

产品设计 2018-07-13

Axure本身就提供了模板的功能,也就是说只要实现一次但可以一劳永逸,本文就一起来看看这个遮罩层实现过程和效果。

今天在做产品原型设计时,遇到了个关于动态显现遮罩层的难点。“无奈”为追求高保真的效果,还是花了点心思做个原型实现。待做好回过头来看看的话,其实这个效果的难度也不大,只是看个人意愿是否想做而已。

Axure本身就提供了模板的功能,也就是说只要实现一次但可以一劳永逸。下面就一起来看看这个遮罩层实现过程和效果吧。

做前端开发的同学都知道,在HTML实现一个遮罩层,只需要添加个浮动的DIV即可轻松实现。那么在Axure中如何去实现它呢?

如上图所示,可以将这个遮罩层的实现分为如下2部分:

  • 主体内容,即遮罩层要盖住的部分
  • 遮罩层组件,即遮罩层+其它装饰部分(在Demo中只是增加了个Loading的动画图片来区分)

所以遮罩层的实现思路就清晰啦步骤如下:

  1. 准备一个与你所想要遮盖内容大小相同的矩形框,注意要减去边框的大小,示例:主体内容大小为`600×400`,边框宽度为**1px**,那么遮罩层的大小为`598*398`且是无边框的。
  2. 设置遮罩层的填充色,还有相对的透明度。
  3. 加强遮罩层显示的动画效果(Axure上所支持的效果并不多,如不能够满足,可以采用文字描述阐明效果要求)。

接着用3个按钮来做不同效果的展示:

打开遮罩层:

关闭遮罩层:

自动演示:

那么现在来看看最终的实现效果如下,请看下面的大屏幕:

如果想要做全屏的遮罩层就更加的简单啦,只在要显示组件上增加个灯箱的效果即可。

PS:示例源文件下载: 遮罩层效果.rp

本文由 @ 凡梦星尘 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

人人都是产品经理

责编内容by:人人都是产品经理 (源链)。感谢您的支持!

您可能感兴趣的

AXURE只是辅助工具,重在产品思维 Axure只是产品工作中的一个工具,莫把Axure当神器,做产品重点在于产品思维。 对于很多学习或者使用Axure的朋友,总会有一些对于Axure...
如何用Axure绘制高质量的业务流程图? 在产品设计中,业务流程图作为核心的环节,对产品的各个环节能否跑通,业务是否顺畅至关重要。好的流程图,可以快速让整个团队熟悉理解业务,并优化业务。 ...
Axure 教程:制作折叠菜单 本次教各位小伙伴制作折叠菜单,这次的做法比较简单,大家都可以轻松的学会。 下面开始制作原型 ~ 一、准备元件 打开 Axure...
线上课程|小白先学这些Axure功能,更快上手,做出能拿去面试的规范原型... 前段时间,我们Axure实战班的一位同学,去参加某行总行的产品面试。 学了32节课程内容,就通过了产品面试中的Axure加试环节。 ...
Axure教程:用Axure实现简书、微博的下拉刷新效果... 本文从原型设计的角度来探究背后的交互逻辑,研究如何利用经典原型工具Axure实现这样的交互效果。 目前各大应用主要采取两种下拉刷新方式,一种以简书...