墨刀弹窗制作方法

墨刀弹出窗口制作

我们在画原型图的时候，经常会用到弹出这一个功能，如下图所示，点击+号就会在当前页面弹出另外一个菜单，这个菜单可以是全屏的，也可以是半屏的，也可以是压暗背景的，那么这个菜单如何制作呢？经过制作，发现其在墨刀里有两种实现的方式，两种方式各有利弊。
以下方法制作目标是点击按钮，弹出一个弹窗对话框，点击对话框外的任意地方，弹窗对话框收回。

方法一 直接制作

以开播弹窗为例，其思路是制作另外一个和当前页面A一模一样的页面B，在页面B里压暗背景，设置弹窗。

目标：搜索页面里制作开播弹窗，实现点击底部导航栏中间的开播按钮，出现开播方式。实现步骤如下
1.复制一个新的搜索页面B
2.然后在新的搜索页面B里拉取一个半透明度50%的矩形
3.在页面B的底部添加开播弹窗（弹窗设置可以是母版形式，也可以不是）
4.将导航栏的母版设置为开播按钮的状态（即开播按钮具有视觉上的点击反馈）
4.最后是交互设计

其中交互设计
1.未点击状态下，页面A的开播按钮连接到页面B。
2.点击状态下，底部导航栏的各个按钮连接到未开播的页面。
3.透明度50%的矩形框添加一个交互连接，其连接到页面A。目的是方便用户突然不想开播，点击矩形框也可以实现收回开播弹窗。

该方法的优点是
1.不用制作母版，不容易出错
2.在高度不一样的页面里可以根据需要实现弹窗后，背景压暗。
3.交互连接一目了然
而缺点是
1.由于没有制作母版，因此每一个页面都需要去适配，去复制。因此较为浪费时间去做重复的事情，也会导致页面过多，造成思绪混乱。
2.交互连接过于重复烦杂，让人感到做这个事情没有意义。

方法二 母版制作

第二种弹窗的制作的方式是母版法。先在母版里设置好各种页面以及交互连接，然后直接将母版拖到对应的页面，放置在对应的按钮处即可。
例如对于大家都较为熟悉的场景，当想要送礼给主播的时候，点击送礼的按钮，则会出现一个弹窗供用户选择礼物，下面我们就来演示一遍。
下图是一个直播页面，右下角有礼物按钮。

目标：点击礼物按钮出现弹窗，再次点击礼物按钮，弹窗收回。实现步骤如下
1.创建一个合适大小的新母版，母版背景为透明背景
2.母版的第一个状态，在合适的位置放置礼物按钮图标，如下图
3.母版的第二个状态，在合适的位置放置礼物图标，并且在相同位置设置礼物按钮点击视觉变化的图标，如下图。
4.设计交互。状态1的礼物按钮连接到状态2，状态2的礼物按钮连接到状态1。

制作完成之后，将母版拖到对应位置即可。

母版法的优点是
1.只需要制作一次母版，即可大规模应用
2.母版很容易修改，进入母版页面可以修改各个设置
而缺点是
1.母版不能根据页面大小需求进行设置
2.母版的绝大部分交互形式都是在母版内完成的，对操作人员的逻辑、思维要求较高。