Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

弹出面板,是我们经常使用的组件。今天,就来说说关闭弹出面板的事儿。

内容相对不那么好玩,但是挺重要,所以你需要了解。耐心阅读下,你发现并不复杂,同样是简单的。

一、自动关闭

默认情况下,弹出面板弹出后,系统在一定策略下,会自动关闭它。

试试:弹出面板弹出后,你在它的外部位置点击一下,它会自动关闭。这就是自动关闭策略在起作用。

如果你只是做一般的草图或线框图,只是有一些基本交互需要,到这里,基本就可以打住不看了。因为已经够用了。

如果还有需要,往下继续:

自动关闭策略一共有三种,分别是:

“无”:无论点击哪里,都不会自动关闭(除非你自己设置了关闭命令)。这个对于关闭的限制最强。

“点击外部”:点击弹出面板的内容区域的外面,就自动关闭。这个限制中等。

“点击所有区域”:不管点击哪里,都会自动关闭。这个限制最松。

默认地,弹出面板的关闭策略是“点击外部”自动关闭。如图:

Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

很方便,不是吗?

这里稍微要理解下:所谓弹出面板内容区域,是个虚拟的矩形区域范围。那么这个范围有多大呢?回答是:它的大小正好可以装下弹出面板中的所有组件。超过这个区域之外,就是“外部”。见本文最后的附图。

如果你没有更多的其它要求,看到这里,可以不再继续了。

但是,不少时候,我们需要根据自己的需求,来关闭弹出面板(比如点击弹出面板中的一个指定的按钮,才关闭弹出面板),这个时候,你需要多做一点事儿了。

往下看。

二、自己设置关闭

自己设置关闭弹出面板,有两个方法,一个是“拖”,一个是“加”。

1. “拖”

如图所示,三步:

A. 双击进入弹出面板,选定一个组件(比如按钮)。

B. 拖拽它的链接点,移动到弹出面板自己“身上”(图中的背景红框)。

C. 在交互面板上,选择“弹出状态”的参数“关闭”。

Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

2. “加”

顾名思义,就是把弹出面板作为关闭的目标对象,加上。然后对它施加关闭。

如图所示,三步:

A. 先选中弹出面板中的一个组件(比如按钮)。

B. 在交互面板上点击加号,在弹出的交互目标树中,选择“弹出面板”,双击确定。

C. 在交互面板上,选择“弹出状态”的参数“关闭”。

Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿
好了,我们已经介绍了关闭弹出面板的全部操作。

感谢你看完。关于交互的介绍,目前,这篇是打字最多的了。

===============================================

附图,弹出面板的内容区域:

Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/16190/

(0)
yanz kontolyanz kontol
上一篇 2016-07-07
下一篇 2016-07-07

相关推荐

  • Justinmind v6.7新功能:直接调用 ILLustrator 修改 SVG 格式的矢量图形

    原文标题:利用Justinmind 6.7 新功能编辑、制作、使用矢量图标 Justinmind 6.7 提供了对 ILLustrator 矢量图形编辑、复制粘贴的支持,便得在Justinmind中使用高保真图标成为很容易的事情。下面,介绍如何利用网上…

    JustinMind 2015-08-25
  • 关于使用Principle的一些小建议

    在日常的设计工作中,难免会遇到一些制作可交互原型的工作。可交互的原型对比于静态原型来说,直观是最大的优点。其次,在研究一些动效的时候,直接调好参数给工程师,会比口述来得更加简单粗暴,效率更好。现在的…

    2016-10-28
  • 阿西JUSTINMIND学习日记:justinmind官方公布的快捷键列表(全部)

    常规快捷键 Windows OS X 剪切 Ctrl + X ⌘ + X 复制 Ctrl + C ⌘ + C 粘贴 Ctrl + V ⌘ + V 副本(复制) Ctrl + D or Ctrl + Click 并拖动 ⌘ + D or ⌘ + Click 并拖动 删除 Delete 或 退格键 Delete 或 退格键 撤销 …

    2015-06-16
  • 设计师你的创作工具如何让你的2016充满惊喜?Chapter 1

    IAMUE官方微博正在送书活动:点这里参加 搜@IAMUE 原标题:如何让你的2016充满惊喜?|Chapter 1                                                                                                             …

    交互设计 2016-02-20
  • 新书:JUSTINMIND权威指南 作者:阿西UED

    《Justinmind权威指南》是国内第一部专著介绍Justinmind交互式原型设计的技术与技巧,讲述如何从确切的需求和期望出发,用最简单的方法创建易用、有效而且让用户愉悦的原型设计。书中从软件基础组件、工作方式、跨…

    2015-07-31
  • 以简书为案例讲述「尼尔森十大可用性原则」

    尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。 1995年以来,他通过自己的 Alertbox 邮件列表以及 useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,…

    原型设计教程 2014-10-09
  • Mockplus 的主要应用人群

    Mockplus Mockplus 是最好的原型设计工具之一。 http://www.mockplus.cn 简洁高效,是它的主要产品特点。 关注设计,而非工具,是它带给设计人员的理念。 Mockplus的主要价值是:在正式制作真实软件产品前,通过原…

    Mockplus 2015-03-16
  • 用动态影像如何提升网页魅力?

    来源:腾讯ISUX 作者:sisi 科技越发达、人类越懒惰。当我们在信息大爆炸的网络中疲倦于文字和图片,动态影像通常令人为之振奋。UGC短视频社区的红火,说明用户渐渐喜爱自产视频记录和表达;即时通讯软件功能从单一…

    2014-09-27
  • 在熟练使用2B铅笔前,请不要打开Axure

    在互联网产品领域,Axure已成为产品经理、产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品;但从另一方面讲,Axure绑架了我们的思维,让很多产品经理和设计师养成了“无Axure不设计”的恶习,忽略了用户故事、功能规格和信息架构,甚至走入“为了用Axure而用的误区”,导致了资源的大量浪费和产品的硬伤。因此,提醒为Axure着迷的产品经理:在熟练使用2B铅笔前,请不要打开Axure。

    2015-01-01
  • Justinmind权威指南:​基础-Justinmind基本元件的使用-2

    ​上一节说了文本、多行文本、图片、线段元件的使用方式,这一节会讲解最常用的矩形、椭圆、三角形、标注 矩形 这个是最常用的没有之一,原因是因为我们设计产品的基本架构都是方形的,这个大概与硬件的制约有关系,…

    2015-08-31