欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

Axure内这样制作弹窗,效率至少提升10倍

发布时间:2018:01:10 16:14:00 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1158个文字,预计阅读时间3分钟
导语
这是目前最高效的Modal实现方式,希望对你有用,enjoy~

  这是目前最高效的Modal实现方式,希望对你有用,enjoy~

  

Axure内这样制作弹窗,效率至少提升10倍

 

  Modal简介

  弹窗、对话框、浮层,我们在网页中会经常看到这些元件。这类元件统称为Modal(模态对话框)。Modal一般使用在如下场景:需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。

  特性

  如下图所示,这是一个最常规的Modal。

  

Axure内这样制作弹窗,效率至少提升10倍

 

  Modal通常呈现出以下几个特点:

  1、居中

  Modal居中显示,明确告知用户当前内容必须进行处理。

  2、遮罩

  将Modal外的内容遮罩,引导用户的视觉焦点到Modal上。

  3、需手动关闭

  Modal是模态对话框,是必须要用户做出操作才能继续进行下去的。

  原型设计

  在原型设计的过程中,pm能够高效地实现Modal的制作,是很重要的。

  高效的具体表现为:元件要少、用例要少、复用性高、逻辑清晰。

  如下图所示,这是一个Modal的高效实现方法。(预览地址:http://c5zu4k.axshare.com)

  

Axure内这样制作弹窗,效率至少提升10倍

 

  该方法使用了3个按钮,1个动态面板,,实现了3个Modal的。无论再添加几个按钮和Modal,始终只需要原来的一个动态面板,也无需添加新的用例。

  如何设置

  1、添加3个按钮,名称如下图。添加1个动态面板(设置为隐藏),设置4个状态,名称如下图。

  

Axure内这样制作弹窗,效率至少提升10倍

 

  2、右击动态面板,勾选“自动调整为内容尺寸”和”固定到浏览器“,设置见下图。

  

Axure内这样制作弹窗,效率至少提升10倍

 

  

Axure内这样制作弹窗,效率至少提升10倍

 

  3、为按钮添加用例

  

Axure内这样制作弹窗,效率至少提升10倍

 

  4、为动态面板添加用例

  

Axure内这样制作弹窗,效率至少提升10倍

 

  5、在动态面板的状态(除去State1)内添加内容,为操作按钮(确定、取消)添加用例。

  

Axure内这样制作弹窗,效率至少提升10倍

 

  

Axure内这样制作弹窗,效率至少提升10倍

 

  6、大功告成,在浏览器内预览即可查看效果。

  如何复用

  如需在此基础上添加更多的按钮和Modal,可以按一下方式操作:

  新增一个按钮,名称设置为Button4;复制动态面板的Button3状态,新的状态名称设置为Button4,修改Button4中的内容为自己想要的内容即可。

  这样的复用,无需新增动态面板,也无需新增用例,在添加多个Modal时会十分高效。

  知识点解析

  1、自动调整为内容尺寸

  动态面板的属性。动态面板内会有多个状态,每个状态内的内容大小不一,勾选此项后,动态面板能够根据当前的状态自动调整尺寸。

  2、固定到浏览器窗口

  动态面板的属性。设置此项后,动态面板能够脱离页面的限制,始终固定在浏览器的某个位置。弹窗提示、通知等元件,需要固定显示位置,使用此项能够完美实现需求。

  3、灯箱效果

  显示动态面板时的效果。设置此项后,动态面板在显示时,会自动将页面其余内容遮罩,能够实现弹窗的样式效果。

  好了,本文到此就全部完成了。这样的实现方式,是我目前找到的最高效的Modal实现方式。之前在不断探索的过程中,也使用了很多其他的方法,结果导致页面元件混乱、逻辑不清晰、复用性差,现在看来是比较可笑的。希望本文中的方法能够对大家有所帮助。

  (原型下载:http://pan.baidu.com/s/1snsPpSD)

  我目前专注于后台产品的设计,以后会逐步将自己的一些工作经验分享出来,也希望和大家一起讨论和成长。接下来的一篇,打算写一些表格的规范和设计。大家有想要了解的内容,留言哦!

  本文由 @流风 原创发布。未经许可,禁止转载。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:遭大规模审计后 苹果被迫在英国补缴1.9亿美元税款

下一篇:用好黄金比例,用协调自然的配比照亮你设计的UI

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信