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

相关推荐

  • 成为设计师不是不可能!

      前言:本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设…

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

    前面咱们学过了怎么新建项目,怎么发布项目,怎么在手机端预览;接下来我们开始真正去使用画布制作原型,那么第一步,你先要会使用这些元件,我们按照官方软件自带元件库的顺序一个一个的讲解,全面了解之后你也许…

    2015-08-31
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • 【Mockplus教程】MAC 安全提示无法安装怎么办?

    在 Mac 上安装时可能会出现上图中的提示导致无法安装。 这个时候,只需要按住 Control 键,然后点按该程序的图标,选择打开。就可以安装了。

    2015-08-12
  • Axure新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

    2015-05-23
  • 干货:关于响应式布局

    【导读】响应式布局是在如今屏幕尺寸越来越多样化趋势下的解决之道,但是该如何去做响应式布局呢? 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局类型

    2015-03-19
  • 【Mockplus教程】标尺和参考线

    每个页面都拥有单独的标尺和参考线,可以用于辅助组件的对齐以及尺寸调整。   1. 使用标尺   新建页面之后,在主菜单中选择“显示标尺”即可看到工作区左边和上边显示出 标尺。标尺有两种显示方式:百分比…

    Mockplus 2015-08-31
  • 交互设计师成长分为三个阶段

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-18
  • [官方]mockplus视频教程:10分钟玩转mockplus

    官方出品教程,10分钟快速了解一下mockplus软件操作基础。 视频免费播放地址

    2015-06-30
  • Axure元素库 - icons_64x64 for Axure.rplib and PSD

      Hi,下载地址在这里!记得关注哦

    2015-07-21