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模拟(一):如何进行微信聊天列表已读、未读的标记?... 从零开始学运营,10年经验运营总监亲授,2天线下集训+1年在线学习,做个有竞争力的运营人。 了解详情 本文和大家交流一下微信聊天页面中的已读、未读标记的原型效果的实现方法。 微信是很多人模拟的第一个产...
Axure RP 8 入门手册 – 第6章(一) 第 6 章 概要与检视功能 第 1 节 概要功能 第 2 节 检视功能 – 页面样式 第 3 节 检视功能 – 页面说明 第 4 节 检视功能 – 页面属性 第 5 节 检视功能 – 元件命名 第 6 ...
Axure基础 目录 ( 使用微信自带页面搜索功能 ) 第一章 使用元件 基础1. 添加元件到画布 基础2. 添加元件名称 基础3. 设置元件位置/尺寸 基础4. 设置元件默认角度 基础5. 设置元件颜色与透明 基础6....
Axure8.0优秀作品案例儿童打地鼠在线小游戏原型图设计教程... 阅读:1 0 这已经是第二篇关于 axure游戏原型 制作的文章了,上一章可看 《方块移动拼图游戏》 。这一篇讲的 打地鼠游戏 其实比拼图游戏难很多,起码在逻辑上是这样的。为什么?因为上一篇讲的 拼图游戏 的所有游戏动作都...
产品新人如何用做产品的方法制作Axure元件库... 作为刚入职的产品新人,目前的主要任务是熟悉业务。当然leader也布置了任务,其中频率最高的就是制作元件库。我已经做了两套元件库,一套用于PC端,一套用于移动端。作为一个在制作元件库上已经非常“有经验”的人,我想跟大家分享一下产品新人如何用...