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

相关推荐

  • 如何用 Axure 制作类似的手机滑屏效果原型?

    不要太复杂: 1.设置2个动态面板 外面的是窗口 里面的是内容 图1:2个动态面板展示,记住这只是展示你不要放在一个层面上,应该是包含关系   图2:包含关系目录示意 2.设计交互事件   接下来看一下设计交…

    2015-07-21
  • 苹果用户怎么部署Axure环境-imac&axure

    iMac安装各种必备软件,当然少不了Axure这个吃饭的软件 下载地址在页面底部 ★ 汉化方法: 首先退出正在运行中的 Axure (如果您正在使用). 将 lang.rar 文件解压, 得到 default 文件. ★ Windows版 ① 复制 default 文…

    2014-12-10
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • 10个在线原型设计软件推荐

    现在,基于云端的软件渐渐成为主流,而网站原型设计工具当然也不例外。在线原型工具相比于桌面版有得天独厚的优势,它不需要安装、不限制地点、不限制操作系统,无论你使用的Linux,Solaris, Mac 还是Windows,你都…

    原型设计教程 2015-08-25
  • 跳出思维圈,“类H5”助你市场推广一臂之力

    HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二是查看方便。H5近年来…

    2023-03-03
  • Mockplus原型交互跟我做之8 - 使用交互状态,快速搞定简单交互

    Mockplus交互 = 页面链接 + 组件交互 +交互状态。

    2016-02-18
  • 使用Mockplus的九大理由

    作为交互师什么工具最得心应手尼?我用过了很多原型设计工具。最后发现单单一个工具不能满足所有需求,所以我根据项目来选择不同工具。比如客户要求高保真,要真机演示,我会考率Justinmind和 Mockplus,前者是国外…

    Mockplus 2015-03-17
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • 国外设计师眼中的原型工具Mockplus

    今天,我们评述一款新型设计工具,Mockplus,专为设计师而打造的创新性原型设计工具。Mockplus适合于各种应用软件的制作,无论是手机应用,网页应用,亦或是桌面应用,方便快捷。让我们先来看一看为什么说Mockplus…

    2015-10-21
  • 【译】学习Axure RP 8 Beta - 流程图改进

    From: Learn Axure RP 8 Beta: Flow Diagramming Improvements(http://www.axure.com/c/blog/161-learn-axure-rp-8-beta-flow-diagramming-improvements.html) 专题:Axure8.0 Axure RP 8 中在流程图部分做了部分…

    2015-08-20