在產(chǎn)品設(shè)計(jì)中遇到關(guān)于是彈窗還是頁(yè)面的選擇問題，在網(wǎng)上查找了一些資料娄琉，加上我自己的理解次乓，總結(jié)一下吓歇。
- 彈窗的特點(diǎn)
- 可將用戶注意力吸引至彈窗內(nèi)容
- 用戶不易迷失，彈窗覆蓋在原頁(yè)面上票腰，但并不完全遮蓋原有內(nèi)容（這一點(diǎn)有可能在未來的設(shè)計(jì)趨勢(shì)中有改變）城看，用戶清楚自己“身在何方”
- 相對(duì)獨(dú)立，不影響原頁(yè)面布局
- 沒有中斷感杏慰，可隨時(shí)返回主流程测柠，不影響原任務(wù)，原頁(yè)面中的操作和信息仍然保留
- 響應(yīng)速度快逃默，出現(xiàn)和消失的響應(yīng)速度都比較快鹃愤，不會(huì)讓用戶等待
- 空間有限，可容納的信息量較少
- 如果是非用戶期待的彈窗（如廣告完域、居高臨下的警示等）软吐，容易引起用戶反感
由此可見，彈窗適合于非主流程的一些簡(jiǎn)單吟税、臨時(shí)凹耙、突發(fā)、補(bǔ)充性的信息展示和操作肠仪。
- 彈窗的主要使用場(chǎng)景
先導(dǎo)性的信息和操作
如新手引導(dǎo)肖抱、操作示例、進(jìn)入下一步驟前的預(yù)操作（例如要?jiǎng)?chuàng)建一個(gè)儀表板异旧，先選擇儀表板的類型）-
警示意述、提示
對(duì)一些影響較大的操作，為防止用戶不清楚關(guān)聯(lián)后果或者誤操作吮蛹，所以需要給與用戶提示和二次確認(rèn)荤崇，以彈窗形式出現(xiàn)能較強(qiáng)地引起用戶注意，但同時(shí)潮针，有些提示會(huì)讓用戶覺得自己被當(dāng)作了傻瓜术荤，二次確認(rèn)也可能引起用戶的反感，所以提示信息如果必須出現(xiàn)每篷，應(yīng)該盡可能的友好瓣戚、站在用戶角度。下圖中的提示語或多或少有些居高臨下焦读。
clipboard.png -
選擇器
通常在編輯頁(yè)面中使用子库，如上傳文檔、修改頭像矗晃、選擇相對(duì)復(fù)雜的選項(xiàng)（比如個(gè)數(shù)較多仑嗅、多層級(jí)等）。例如，桌面版QQ的邀請(qǐng)好友入群時(shí)无畔，好友選擇器。當(dāng)然吠冤，這個(gè)例子不是很恰當(dāng)浑彰，因?yàn)槭亲烂姘鎽?yīng)用。
clipboard1.png
其實(shí)在很多Web應(yīng)用中拯辙，也常使用彈窗來作為選擇器郭变，如下圖是一個(gè)在線數(shù)據(jù)分析應(yīng)用中的字段選擇器窗口。
clipboard2.png -
屬性配置
修改頁(yè)面中某個(gè)對(duì)象的屬性信息時(shí)涯保，有時(shí)可用彈窗形式诉濒，例如修改個(gè)人信息。
clipboard3.png -
簡(jiǎn)單任務(wù)
有時(shí)候一些任務(wù)較簡(jiǎn)單夕春，展現(xiàn)信息也少未荒，同時(shí)它與當(dāng)前頁(yè)面的關(guān)系相對(duì)獨(dú)立，沒有繼承及志、總分片排、并列等強(qiáng)邏輯聯(lián)系，所以此時(shí)并不需要用當(dāng)前頁(yè)打開或新頁(yè)面打開速侈，彈窗就是很好的選擇率寡。例如，知乎網(wǎng)頁(yè)版的已登錄用戶首頁(yè)中倚搬，點(diǎn)擊【提問】冶共，以彈窗形式展現(xiàn)提問的內(nèi)容輸入表單。
clipboard4.png
- 彈窗使用時(shí)的注意事項(xiàng)
- 避免彈窗嵌套
當(dāng)前打開的彈窗數(shù)量最多保持在一個(gè)每界，避免在彈窗上面再覆蓋另一個(gè)彈窗捅僵。如果真的不得不使用兩個(gè)彈窗，可在當(dāng)前彈窗的同等位置盆犁、同等大小打開下一個(gè)彈窗命咐，并完全覆蓋前一彈窗。但仍然需要避免這種情況谐岁，可以再回歸到需求本身進(jìn)行設(shè)計(jì)思考醋奠。 - 彈窗出現(xiàn)時(shí)底部頁(yè)面固定
在彈窗出現(xiàn)或消失時(shí)，底部頁(yè)面應(yīng)始終處于固定的靜止?fàn)顟B(tài)伊佃，不可抖動(dòng)窜司、滾動(dòng)。否則非常影響用戶體驗(yàn)航揉。 - 彈窗樣式盡量保持一致
彈窗樣式包括彈窗顯示的位置塞祈、大小、交互方式（如關(guān)閉方式）帅涂、按鈕位置议薪、提示信息尤蛮、icon等屬性，應(yīng)盡量保持一致斯议。如果需要區(qū)分不同類型的彈窗产捞，如提示窗和選擇器，可改變其中一個(gè)屬性進(jìn)行區(qū)分哼御，例如彈窗的大小坯临。
總結(jié)一下彈窗與新頁(yè)面打開或當(dāng)前頁(yè)面跳轉(zhuǎn)的對(duì)比——
參考資料：
知乎提問：交互設(shè)計(jì)中什么情況下適合用彈窗？什么情況下適合新頁(yè)面打開恋昼？什么情況下適合新頁(yè)面覆蓋看靠？
鏈接：https://www.zhihu.com/question/21260320/answer/17695255
作者：JimSoup、沈洲液肌、邊亞南優(yōu)設(shè)網(wǎng)：超全面挟炬！騰訊設(shè)計(jì)師做了100個(gè)彈框后總結(jié)的設(shè)計(jì)經(jīng)驗(yàn)
鏈接：http://www.uisdc.com/tencent-100-popup-box?url_type=39&object_type=webpage&pos=1
作者：JHong
第一次使用簡(jiǎn)書寫文章，有一些不習(xí)慣嗦哆。
Mark一下辟宗，新年伊始。
