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

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

有時，我們可能誤會了原型設(shè)計。

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

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

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

好了，正式進(jìn)入主題。

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

1. 提示信息彈出窗口
2. 二次確認(rèn)彈出窗口
3. Toast窗口

點擊查看在線演示

一、提示信息彈出窗口

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

1. 界面元件說明

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

2. 交互設(shè)計

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

二、二次確認(rèn)彈出窗口

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

1. 界面元件說明

復(fù)制提示信息彈出窗口，再復(fù)制確定按鈕，修改標(biāo)題和樣式，動態(tài)面板名稱改為“二次確認(rèn)”。

2. 交互設(shè)計

• 同提示信息彈出窗口。
• 點擊確定后關(guān)閉彈出窗口，按鈕內(nèi)容顯示當(dāng)前選擇結(jié)果
• 點擊取消后關(guān)閉彈出窗口，按鈕內(nèi)容顯示當(dāng)前選擇結(jié)果

三、Toast 窗口

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

1. 界面元件說明

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

2. 交互設(shè)計

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

彈出窗口在應(yīng)用里幾乎到處都是，交互行為也多種多樣，例如微信的從屏幕下方彈出，微博APP上方的新消息數(shù)提示等，彈出、按鈕的樣式也千變?nèi)f化。

小結(jié)

這里想要說的是，在設(shè)計原型時，如果頁面流程有交互，盡量在頁面上要能體現(xiàn)出交互的流程，而不是完全的靜態(tài)頁面，或者靜態(tài)頁面加一堆的標(biāo)注。

本文由 @Axure原型設(shè)計工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議