三個常見的彈出窗口原型，分別是提示信息彈出窗口、二次確認彈出窗口、Toast窗口，以下，本文將從這三方面分別進行介紹。

經?？吹揭恍┰晚撁?，只是一些靜態頁面羅列，每一個頁面里沒有任何的交互行為，交互原型所說的“交互”體現在哪里？我們只是點開每個頁面向別人介紹我們的業務流程嗎？不排除一些畫的非常好的原型，頁面布局合理，界面整潔干凈，然而找不到半點“可交互”的行為。

有時，我們可能誤會了原型設計。

當然，一個靜態的原型、頁面流程也沒有什么問題，也沒什么對錯之分，別人似乎也能理解，特別是一些原型兩邊加了滿滿標注的，看起來非常的專業。

然而這并不是我期望看到的原型，竊以為這是一個沒有“靈魂”的原型，沒有體現出原型的真正價值，如果進一步能配合交互行為，就更好了。

說了這些，這里以簡單的彈出窗口為例，說明如何設計一個更好的，具備交互性的原型，借以拋磚引玉。

好了，正式進入主題。

下面會設計三個常見的彈出窗口原型，分別是

1. 提示信息彈出窗口
2. 二次確認彈出窗口
3. Toast窗口

點擊查看在線演示

一、提示信息彈出窗口

提示信息是指有一個確定按鈕，一段提示文字，用于告之用戶一些信息，例如表單提交成功后的提示。

1. 界面元件說明

• 背景，350*200，圓角大小6，背景顏色為白色，添加了陰影效果(X=0，Y=0，模糊=5)
• 標題欄，和背景一樣的形狀，灰色背景，調整一下高度，圓角可見性里只保留上方兩個，這樣上邊緣和背景能無縫重合，文字內容為“提示信息”
• 提示文字內容是文字段，示例文字為“您已成功開啟消息通知服務！”
• 確定按鈕，是一個矩形框，大小300*45，綠色白字
• 選中所有元件，轉成動態面板，命名為“提示信息”

2. 交互設計

• 動態面板固定到瀏覽器，水平居中和垂直居中。
• 點擊按鈕顯示彈出框口，顯示效果為燈箱效果，配合淡入動畫。
• 點擊確定后關閉彈出窗口。

二、二次確認彈出窗口

二次確認窗口是在類似購買商品、訂閱業務等之前的提示，需要用戶選擇確定或取消。

1. 界面元件說明

復制提示信息彈出窗口，再復制確定按鈕，修改標題和樣式，動態面板名稱改為“二次確認”。

2. 交互設計

• 同提示信息彈出窗口。
• 點擊確定后關閉彈出窗口，按鈕內容顯示當前選擇結果
• 點擊取消后關閉彈出窗口，按鈕內容顯示當前選擇結果

三、Toast 窗口

Toast是一個短暫的提示性窗口，一般是一行文字，并且在幾秒種后自動消失。

1. 界面元件說明

• 添加一個矩形框，黑色半透明背景，圓角
• 文字顏色為白色

2. 交互設計

• 點擊按鈕顯示Toast
• 2秒后自動消失

彈出窗口在應用里幾乎到處都是，交互行為也多種多樣，例如微信的從屏幕下方彈出，微博APP上方的新消息數提示等，彈出、按鈕的樣式也千變萬化。

小結

這里想要說的是，在設計原型時，如果頁面流程有交互，盡量在頁面上要能體現出交互的流程，而不是完全的靜態頁面，或者靜態頁面加一堆的標注。

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議