墨刀彈出視窗製作

我們在畫原型圖的時候，經常會用到彈出這一個功能，如下圖所示，點選+號就會在當前頁面彈出另外一個選單，這個選單可以是全屏的，也可以是半屏的，也可以是壓暗背景的，那麼這個選單如何製作呢？經過製作，發現其在墨刀裡有兩種實現的方式，兩種方式各有利弊。 以下方法制作目標是點選按鈕，彈出一個彈窗對話方塊，點選對話方塊外的任意地方，彈窗對話方塊收回。

方法一 直接製作

以開播彈窗為例，其思路是製作另外一個和當前頁面A一模一樣的頁面B，在頁面B裡壓暗背景，設定彈窗。 例如要在下圖搜尋頁面裡製作開播彈窗，實現點選底部導航欄中間的開播按鈕，出現開播方式。

需要 1.複製一個新的搜尋頁面 2.然後拉取一個半透明度50%的矩形 3.再新增開播彈窗 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.母版的絕大部分互動形式都是在母版內完成的，對操作人員的邏輯、思維要求較高。