UI設(shè)計(jì)中彈窗設(shè)計(jì)指南

　　相信很多小伙伴們?cè)谌粘Ｊ褂肁PP的時(shí)候經(jīng)常會(huì)彈出一個(gè)小窗口，比如：軟件版本更新、逛商城彈出優(yōu)惠券、簽到等等。那么大家對(duì)彈窗了解嗎?今天AAA教育胡老師就和大家聊聊彈窗那些事兒。
 

　　彈窗的官方定義中斷用戶當(dāng)前操作并對(duì)其作出補(bǔ)充，或中斷用戶當(dāng)前操作并對(duì)其作出反饋。彈窗又稱為對(duì)話框，是App與用戶進(jìn)行交互的常見方式之一。
 

　　彈窗在交互中一般分為兩種形式：模態(tài)彈窗與非模態(tài)彈窗
 

　　模態(tài)彈窗——模態(tài)彈窗會(huì)打斷用戶的正常操作，要求用戶必須對(duì)其進(jìn)行回應(yīng)，否則不能繼續(xù)其它操作;非模態(tài)彈窗則不會(huì)影響用戶的操作，用戶可以不對(duì)其進(jìn)行回應(yīng)，非模態(tài)彈窗通常都有時(shí)間限制，出現(xiàn)一段時(shí)間后就會(huì)自動(dòng)消失。
 

　　非模態(tài)彈窗——非模態(tài)彈窗一般被設(shè)計(jì)成用來告訴用戶信息內(nèi)容，而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作。
 

　　兩者的區(qū)別就是在于需不需要用戶對(duì)其進(jìn)行回應(yīng)。
 

　　模態(tài)彈窗的優(yōu)點(diǎn)
 

　　蘋果的設(shè)計(jì)規(guī)范中對(duì)模態(tài)的定義是：幫助人們專注于一個(gè)獨(dú)立的任務(wù)或一組緊密相關(guān)的選項(xiàng)，確保人們收到關(guān)鍵信息，并在必要時(shí)采取行動(dòng)。
 

　　因?yàn)槟B(tài)彈框的這些特點(diǎn)，很多情況下使用非常有效。首先，因?yàn)樘幱讵?dú)占模式，彈框能夠迅速抓住用戶的注意力;其次，層級(jí)清晰，半透明遮罩能讓用戶感覺自己沒有離開原頁(yè)面，清楚當(dāng)前在哪里，接下來要做什么;其次在當(dāng)前頁(yè)面彈出可以避免二次頁(yè)面加載和跳轉(zhuǎn)，能夠快速向用戶展示信息。
 

　　模態(tài)彈窗缺點(diǎn)
 

　　任何事物都是有兩面性的，正是因?yàn)槟B(tài)彈窗有這樣那樣的優(yōu)點(diǎn)，所以，一旦使用不恰當(dāng)將對(duì)用戶體驗(yàn)造成很大的影響。
 

　　1. 模態(tài)彈窗打斷了用戶的基本操作。
 

　　好的用戶體驗(yàn)會(huì)在用戶沒有察覺的情況下引導(dǎo)用戶進(jìn)行完成目標(biāo)。但是模態(tài)彈窗就恰恰相反，用戶需要主動(dòng)去處理彈窗，否者就會(huì)影響下面的操作。
 

　　2. 模態(tài)彈窗可能會(huì)屏蔽內(nèi)容的上下文。
 

　　移動(dòng)端屏幕尺寸有限，雖然停留在當(dāng)前頁(yè)面，但彈窗也占據(jù)了頁(yè)面很大一塊主要部分，而突然出現(xiàn)的彈窗可能讓用戶忘記了剛才的內(nèi)容，唄遮擋的信息也可能正好與彈窗內(nèi)容有很強(qiáng)的關(guān)聯(lián)性。
 

　　彈窗設(shè)計(jì)原則
 

　　彈窗按照功能可以分為：系統(tǒng)提示、操作反饋、用戶引導(dǎo)、信息輸入、廣告通知等。不同的彈窗類型適合不同的設(shè)計(jì)方法，對(duì)用戶的作用也相差甚遠(yuǎn)。設(shè)計(jì)師工作中需要根據(jù)目的和場(chǎng)景選擇合適的類型。
 

　　有些APP特別喜歡用彈窗，但當(dāng)彈窗頻繁出現(xiàn)時(shí)，過多的打斷用戶的操作可能會(huì)引起用戶煩躁并習(xí)慣性的關(guān)閉，而被完全忽略。如果當(dāng)真出現(xiàn)緊急情況需要用戶交互或者反饋時(shí)就可能出現(xiàn)一些意外。
 

　　并不是所有的彈窗設(shè)計(jì)都會(huì)被用戶接受，特別是廣告類彈窗常常會(huì)被用戶所厭惡。我們?cè)谑褂脧棿暗臅r(shí)候要盡量克制，要考慮信息內(nèi)容的必要性和目的性(商業(yè)推廣或者增值服務(wù)等目的)，來選擇是否使用彈窗和使用哪種方式和樣式的彈窗。一旦選擇使用彈窗，請(qǐng)盡量少用，一般情況下都把彈窗的層級(jí)控制在只有一級(jí)(即關(guān)閉了一個(gè)彈窗后不會(huì)馬上出現(xiàn)新的彈窗)，接連不斷的出現(xiàn)彈窗只會(huì)增加用戶想要卸載App的欲望。