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

　　相信很多小伙伴們在日常使用APP的時候經(jīng)常會彈出一個小窗口，比如：軟件版本更新、逛商城彈出優(yōu)惠券、簽到等等。那么大家對彈窗了解嗎?今天AAA教育胡老師就和大家聊聊彈窗那些事兒。
 

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

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

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

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

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

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

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

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

　　模態(tài)彈窗缺點
 

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

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

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

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

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

　　彈窗設(shè)計原則
 

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

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

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