彈窗、對(duì)話框，隨你怎么稱呼，這些小窗口出現(xiàn)在屏幕上從來都不是理所當(dāng)然。雖然它們是你應(yīng)用中一些相對(duì)較“小”的元素，卻扮演著影響用戶體驗(yàn)的重要角色。
一方面，它們可以幫助用戶度過應(yīng)用內(nèi)的旅程。另一方面，處理不當(dāng)時(shí)，它們也會(huì)使用戶感到挫敗。
有幸的是，彈窗比較成熟，容易實(shí)現(xiàn)。用適當(dāng)?shù)氖侄魏鸵?guī)范可以輕易改善它們。我們這篇文章要討論的就是這個(gè)。
由于并非所有彈窗形式都相同，我們把它分解為5種常見類型，并且總結(jié)了每一種的優(yōu)化“準(zhǔn)則”。遵循這些指南，你一定可以使你的彈窗更好地達(dá)成目標(biāo)。
“推薦給朋友”和“為應(yīng)用打分”彈窗
你當(dāng)然希望用戶量增長、提升好評(píng)率、增加病毒式傳播的可能。誰不想呢？但是你要了解，多數(shù)用戶不會(huì)向朋友推薦你的應(yīng)用，或者給它打分，除非他們覺得這么做會(huì)得到有價(jià)值的回報(bào)。
Uber的獎(jiǎng)勵(lì)彈窗
“但是，推薦給朋友是如此簡單輕松的任務(wù)?。槭裁从脩舨粫?huì)大發(fā)慈悲，幫助一款小軟件成長呢？”很不幸，現(xiàn)實(shí)沒有這么簡單。
注意我們剛才用的詞是“任務(wù)”。這就是多數(shù)用戶看待“推薦給朋友”和“為應(yīng)用打分”的方式——看成任務(wù)。互換原則就在此時(shí)發(fā)揮作用。大概來說，就是你得給予用戶某些東西，然后才能向他們索取?？梢允峭ㄇ趹?yīng)用中的免費(fèi)出行，或者是某種總體價(jià)值和樂趣。最好對(duì)這些彈窗使用A/B測試，讓它們以不同時(shí)機(jī)出現(xiàn)在用戶旅程的不同位置。這能讓你更好地獲得重要的統(tǒng)計(jì)數(shù)據(jù)，了解最終應(yīng)該在何時(shí)何地放置彈窗。
同時(shí)也一定要確保，從你的應(yīng)用中轉(zhuǎn)到App store、社交媒體頻道、或消息平臺(tái)的過程盡可能流暢。獲得一個(gè)推薦鏈接對(duì)于用戶真的是“簡單”的事情嗎？在Wi-Fi和移動(dòng)網(wǎng)絡(luò)環(huán)境下，整個(gè)流程的運(yùn)轉(zhuǎn)有何差別？有許多重要因素需要考慮。花時(shí)間分析和優(yōu)化這兩種彈窗，你肯定能收獲更高滿意度、活躍度和更多新用戶。
記住，“[聰明地]索取，你才會(huì)有回報(bào)。”
“推送通知”彈窗
推送通知是一個(gè)超有價(jià)值的手段，能使用戶保持投入、反復(fù)使用。對(duì)許多用戶來說，推送通知已經(jīng)成為了他操作一款應(yīng)用的主要媒介。不必再打開應(yīng)用，用戶通過推送通知滿足他們大部分需求。于是，獲取和保持向用戶發(fā)送通知的權(quán)利，應(yīng)該是用戶粘性與留存策略中的一個(gè)重要方面。
在Android系統(tǒng)中，方式很直接：推送權(quán)限請(qǐng)求會(huì)作為AndroidManifest.xml的一部分，用戶在安裝前會(huì)看到所有需要獲取的權(quán)限。
在iOS上就是另一回事了。iOS的權(quán)限彈窗必須由應(yīng)用內(nèi)的代碼觸發(fā)，會(huì)向你的用戶展示一個(gè)這樣的彈窗：
圖片來源：Xtremepush.com
如果用戶點(diǎn)按了“不允許”選項(xiàng)，對(duì)你來說就相當(dāng)于玩完兒了。除非用戶手動(dòng)進(jìn)入權(quán)限設(shè)置，否則拒絕權(quán)限是不可逆轉(zhuǎn)的。所以讓你的用戶按下“允許”權(quán)限至關(guān)重要。
我們推薦兩種方式，來盡可能保有最多的通知推送許可：
- 嘗試創(chuàng)造一個(gè)你自己的、應(yīng)用自帶的權(quán)限彈窗，讓你評(píng)估用戶接受推送通通知的意愿。這會(huì)讓你更加理解用戶的行為和偏好，把權(quán)限獲取留到某個(gè)用戶真的愿意點(diǎn)“允許”的時(shí)機(jī)。
- 僅僅在在你認(rèn)為最相關(guān)和最有說服力的時(shí)候請(qǐng)求權(quán)限。在此時(shí)此地，真的有需要獲取通知權(quán)限嗎？在權(quán)限請(qǐng)求提示中，借助當(dāng)前環(huán)境清晰地向用戶作出解釋。
數(shù)據(jù)權(quán)限彈窗
推送通知權(quán)限和數(shù)據(jù)獲取對(duì)話框一脈相承。同樣，對(duì)于這些特殊彈窗的用戶體驗(yàn)，我們都是在討論iOS應(yīng)用。數(shù)據(jù)權(quán)限彈窗包含對(duì)位置、日歷、聯(lián)系人信息、提醒事項(xiàng)和相冊的請(qǐng)求。移動(dòng)開發(fā)者必須小心翼翼，因?yàn)檎?qǐng)求數(shù)據(jù)權(quán)限不是一系列勾選框那么簡單。
蘋果在他們的權(quán)限請(qǐng)求指南中提到：“雖然人們贊賞移動(dòng)應(yīng)用獲取個(gè)人信息所帶來的便捷，但他們也希望能掌控自己的私密數(shù)據(jù)。例如，人們喜歡自動(dòng)給照片標(biāo)記上地理位置，或者找到附近的朋友，但他們也想要一個(gè)能關(guān)閉此功能的選項(xiàng)。”
要使這類彈窗保持相關(guān)、顯而易見。別設(shè)計(jì)一個(gè)請(qǐng)求用戶地理位置的計(jì)算器——別這么做。
使用蘋果在彈窗中提供的文字位置，描述你的應(yīng)用為何需要這些信息，即使你自己認(rèn)為原因顯而易見。在某些特定的、相關(guān)的用戶操作之后，再請(qǐng)求適合的權(quán)限，也是一個(gè)好方法。比如說，用戶使用你的應(yīng)用創(chuàng)建了一段視頻，并且想要分享給朋友。只要用戶點(diǎn)了“在Facebook上分享視頻”按鈕，這就是彈窗請(qǐng)求用戶社交媒體賬號(hào)權(quán)限的絕佳時(shí)機(jī)。用戶更容易接受權(quán)限，因?yàn)樗峁┝饲宄慕忉專?ldquo;要想達(dá)成A，必須先完成B”。
想要深入研究，請(qǐng)看我們的一篇文章，討論如何使數(shù)據(jù)權(quán)限不那么令用戶望而生畏。
“錯(cuò)誤”彈窗
除了向用戶索取權(quán)限，彈窗也是開發(fā)者向用戶表達(dá)信息的一種重要手段。尤其是關(guān)系到應(yīng)用內(nèi)的錯(cuò)誤。
世事無常，總有錯(cuò)誤出現(xiàn)。錯(cuò)誤中的錯(cuò)誤是最不該發(fā)生的。這么說是什么意思？就是說你的彈窗不能讓用戶感到迷惑，使得已經(jīng)發(fā)生錯(cuò)誤雪上加霜。
我們來舉個(gè)例子，比如用戶的收貨地址寫得不合邏輯，所以當(dāng)他們在支付時(shí)就會(huì)發(fā)生“錯(cuò)誤”。如果你的彈窗里寫著：“發(fā)生了錯(cuò)誤：支付無法完成”，用戶就不得不試圖猜測錯(cuò)誤的原因。相反，你應(yīng)當(dāng)利用這個(gè)時(shí)刻告訴用戶為什么錯(cuò)誤會(huì)發(fā)生，收貨地址中具體哪一項(xiàng)需要更正。必須要了解，用戶任何的猜測和挫敗，可能被一個(gè)彈窗放大，最終影響潛在的轉(zhuǎn)化。
而且，對(duì)于那些需要用戶操作的錯(cuò)誤，我們不僅僅告訴用戶錯(cuò)誤發(fā)生、該做什么，還需要引導(dǎo)他們前往相關(guān)的操作界面。堅(jiān)持使用清晰的措辭來準(zhǔn)確表明操作（抹掉、撤銷、前往的我個(gè)人信息界面），而不是使用模糊的文案，例如“是”或“否”。
如果應(yīng)用中發(fā)生了技術(shù)性錯(cuò)誤，你可以利用彈窗來觸達(dá)用戶，告訴他們你正在努力解決問題。這給你的應(yīng)用增加了一絲人性，同時(shí)向用戶表明你在乎他們的個(gè)人體驗(yàn)。
想了解“反饋”類彈窗的更多秘訣，我們建議你讀Nick Babich的這篇文章，討論對(duì)話框設(shè)計(jì)的5條重要原則。
揮灑你的才華
我們不是要粉飾任何事情。最終有些用戶仍然會(huì)看到這樣的彈窗：
圖片來源：OSXdaily.com
但也并非人人如此。你有能力輕松改善彈窗，讓使用與轉(zhuǎn)化增長。首先，要確保你擁有一個(gè)移動(dòng)應(yīng)用數(shù)據(jù)分析平臺(tái)，例如這個(gè)，Appsee，能使你監(jiān)控它們的表現(xiàn)和用戶體驗(yàn)效果。這些洞見可以讓你自信滿滿地迭代、測試和驗(yàn)證。彈窗可能名聲不怎么樣，但利用深思熟慮的策略，它們會(huì)給你的移動(dòng)應(yīng)用帶來重大轉(zhuǎn)機(jī)。
作者信息：Hannah Levenson
]]>
當(dāng)你將彈窗設(shè)計(jì)及使用得恰到好處時(shí)，它們就會(huì)是非常有效的用戶界面元素。它們能幫助用戶快速且便捷地達(dá)成目標(biāo)。然而當(dāng)錯(cuò)誤使用時(shí)，彈窗卻會(huì)困擾你的用戶。知曉如何設(shè)計(jì)彈窗，會(huì)幫助你在使用時(shí)避免那些可能對(duì)用戶造成的困擾。
什么是彈窗？
彈窗是一個(gè)為激起用戶的回應(yīng)而被設(shè)計(jì)、需要用戶去與之交互的浮層。它可以告知用戶關(guān)鍵的信息，要求用戶去做決定，抑或是涉及到多個(gè)操作。彈窗越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動(dòng)設(shè)備中，它可以在不把用戶從當(dāng)前頁面帶走的情況下，指引用戶去完成一個(gè)特定的操作。
圖1，會(huì)話過期彈窗
現(xiàn)在讓我們來看看有哪些優(yōu)秀的彈窗設(shè)計(jì)和使用方法。
原則1. 減少干擾
由于彈窗會(huì)中斷操作，要盡可能地少使用彈窗。突然出現(xiàn)的彈窗會(huì)強(qiáng)迫用戶去停止他們當(dāng)下正在進(jìn)行的任務(wù)，并轉(zhuǎn)而專注于彈窗中的內(nèi)容。在繼續(xù)之前，用戶必須要面對(duì)這個(gè)彈窗，否則將無法對(duì)彈窗之下的頁面進(jìn)行操作。當(dāng)這個(gè)用戶必須要確認(rèn)一個(gè)關(guān)鍵的操作時(shí)，這就是好的，但是在大部分情況下彈窗是不太有必要的，甚至?xí)鹩脩舴锤小?br />
需要確認(rèn)
在你需要用戶去互動(dòng)才可繼續(xù)時(shí)，或當(dāng)犯一個(gè)錯(cuò)誤的成本會(huì)很高時(shí)，使用彈窗是最合適且最合理的。
圖2，這里告知了用戶一個(gè)情況，需要用戶確認(rèn)
不要突然打開彈窗
在用戶沒有做任何操作時(shí)突然打開彈窗，是非常糟糕的設(shè)計(jì)。許多網(wǎng)站用訂閱框來轟炸它們的用戶，就如下面的例子：
圖3，諸如此類的彈窗給沒有鍵盤的用戶造成了數(shù)不清的麻煩
彈窗的出現(xiàn)應(yīng)該永遠(yuǎn)基于用戶的某個(gè)操作。這個(gè)操作也許是點(diǎn)擊了一個(gè)按鈕，也許是進(jìn)入了一個(gè)鏈接，也可能是選擇了某個(gè)選項(xiàng)。
小結(jié)
- 不是每個(gè)選擇、設(shè)置、或細(xì)節(jié)都有必要中斷用戶當(dāng)前的操作。
- 彈窗的備選方案有菜單以及同框內(nèi)的擴(kuò)展，這兩種控件都可以保持當(dāng)前頁面的延續(xù)。
- 可不要突然跳出彈窗，應(yīng)該讓用戶對(duì)彈窗的每次出現(xiàn)都有心理預(yù)期。
原則2. 彈窗應(yīng)與現(xiàn)實(shí)世界相關(guān)連
彈窗應(yīng)該使用用戶的語言（用戶熟悉的文字，短語和概念），而不是一些系統(tǒng)特有的專有名詞。
表述清晰的問題和選項(xiàng)
在彈窗的內(nèi)容區(qū)域，應(yīng)該使用一個(gè)表述清晰的問題或陳述，例如“清除您的存檔？”或“刪除您的賬戶？”總之，應(yīng)該避免使用含有歉意的、模凌兩可的、或者是反問式的語氣，如“警告！”“你確定嗎？”
圖4，左邊的彈窗提出了一個(gè)很模凌兩可的問題，并且這個(gè)操作可能影響的范圍并不明確；右邊的彈窗提出的問題相當(dāng)明確，它解釋了此次操作對(duì)用戶的影響，并且提供了指向清晰的選項(xiàng)
盡可能不要給用戶提供可能產(chǎn)生混淆的選項(xiàng)，而應(yīng)該使用那些文意清晰的選項(xiàng)。大部分情況下，用戶應(yīng)該能夠只通過彈窗的標(biāo)題和按鈕，就了解他們有哪些選項(xiàng)。
反例：這個(gè)按鈕的文字“不”的確回答了彈窗內(nèi)的問題，但是并沒有直接告訴用戶點(diǎn)擊后會(huì)發(fā)生什么。
圖5，安卓的系統(tǒng)彈窗 來源：MATERIAL DESIGN
改成這樣：肯定的操作文字“放棄” 很明確地指示了選擇這個(gè)選項(xiàng)的后果。
圖6，安卓的系統(tǒng)彈窗 來源：MATERIAL DESIGN
提供重要的信息
一個(gè)彈窗不應(yīng)該把對(duì)用戶有用的信息說得含糊不清。舉個(gè)例子，如果一個(gè)彈窗要讓用戶確認(rèn)刪除某些條目，就應(yīng)該把這些條目都列出來。
圖7，這個(gè)彈窗很簡要地指明了這個(gè)操作的結(jié)果
另外，避免使用“了解更多”按鈕去連接到幫助文檔；在彈窗同一頁面展開則是更好的選擇。如果還需要顯示更多的信息，則將其放在進(jìn)入彈窗之前的頁面。
提出有（關(guān)鍵）信息的反饋
當(dāng)一個(gè)流程結(jié)束時(shí)，記得顯示一條提示信息（或視覺反饋），讓用戶知道自己已經(jīng)完成了所有必要的步驟。
圖8，在完成一個(gè)操作后成功的例子
小結(jié)
- 在彈窗中使用語意清晰的問題和選項(xiàng)。
- 設(shè)計(jì)促進(jìn)操作完成的彈窗。
- 在操作完成后，提示用戶操作已經(jīng)完成了。
原則3. 講求極簡
別試著把太多東西擠在一個(gè)彈窗內(nèi)。要保持干凈和簡約（遵從KISS原則）。然而極簡主義并不意味著被局限住，你提供的所有信息都該是有價(jià)值并且與之相關(guān)的。
元素與選項(xiàng)的數(shù)量
彈窗絕不應(yīng)該只是部分顯示在屏幕上。因此不要使用有滾動(dòng)控件的彈窗。
反例：巴克萊銀行的付款處理彈窗包括了許多的選項(xiàng)和元素，部分的選項(xiàng)只有滾動(dòng)后才能看到（特別是對(duì)于屏幕通常較小的移動(dòng)設(shè)備）
圖9，來源：巴克萊
好的例子：Stripe使用了一個(gè)簡單并且聰明的彈窗，只顯示了最基本的信息，這樣不管在桌面端上還是移動(dòng)屏幕上看起來都會(huì)很不錯(cuò)。
圖10
操作的數(shù)量
彈窗不該提供超過兩種選項(xiàng)。第三個(gè)選項(xiàng)，例如下圖的“了解更多”，有可能會(huì)將用戶帶離此彈窗，如此用戶將沒有辦法完成當(dāng)前的任務(wù)。
圖11，“LEARN MORE”操作將用戶從這個(gè)彈窗指引到其它頁面，進(jìn)而把當(dāng)前的彈窗置入一個(gè)不確定的狀態(tài)
勿將多個(gè)步驟放置在一個(gè)彈窗內(nèi)
把一個(gè)復(fù)雜的任務(wù)分解成多個(gè)步驟是一個(gè)極好的想法。然而這也會(huì)給用戶傳達(dá)一個(gè)信號(hào)，這個(gè)任務(wù)太復(fù)雜了，以至于根本沒法再一個(gè)彈窗界面中完成。
圖12
如果一個(gè)交互行為復(fù)雜到需要多個(gè)步驟才能完成（如下圖的例子），那么它就有必要單獨(dú)使用一個(gè)頁面（而不是作為彈窗存在）。
圖13，有多個(gè)步驟的彈窗 來源：DRIBBBLE
小結(jié)
- 如果你發(fā)現(xiàn)你在很努力地把許多元素?cái)D進(jìn)一個(gè)彈窗，這通常代表彈窗已經(jīng)不是最優(yōu)的設(shè)計(jì)方案了。
- 將那些不必要的、不能夠幫助用戶完成任務(wù)的元素或內(nèi)容從彈窗中去除，以達(dá)到簡化的目的。
- 盡量避免在彈窗內(nèi)安置多個(gè)步驟。
原則4. 選擇適當(dāng)?shù)膹棿胺N類
彈窗大致分兩個(gè)大類。第一大類為吸引用戶關(guān)注的模態(tài)彈窗，強(qiáng)制用戶與之交互后才能繼續(xù)。模式彈窗通常被用在獨(dú)立、強(qiáng)制的流程中：
- 當(dāng)不需要上下文就可以決定怎么做的時(shí)候。
- 需要明確的“接受”或“取消”動(dòng)作才能關(guān)閉。在點(diǎn)擊這種彈窗的外部時(shí)，它并不會(huì)關(guān)閉。
- 當(dāng)我們不允許此用戶的進(jìn)程處于部分完成狀態(tài)（即用戶必須完成此進(jìn)程才可做其他任何的操作）。
第二大類則是非模態(tài)彈窗，它允許用戶通過點(diǎn)擊或輕觸周圍就可關(guān)閉。
第一種模式彈窗只在特別重要的交互操作時(shí)才須使用，（比如：刪除帳戶，同意協(xié)議）。
圖14，模態(tài)彈窗：用戶必須輸入“DELETE”才能確認(rèn)刪除
另外移動(dòng)系統(tǒng)的彈窗通常是模態(tài)的，并且含有如下的基本元素：內(nèi)容，操作，和標(biāo)題。
圖15，安卓模態(tài)彈窗
原則5. 視覺一致性
彈窗下的背景
當(dāng)打開一個(gè)彈窗時(shí)，后面的頁面一定要稍微地變暗。它有兩個(gè)功能，第一它把用戶的注意力轉(zhuǎn)移到了浮層上，第二它讓用戶知道后面的這個(gè)頁面是不再可用的。
圖16，安卓的模態(tài)彈窗
在調(diào)節(jié)背景深度時(shí)要注意了。如果你把它變得太暗，用戶就沒法看清背景的內(nèi)容。如果你調(diào)得太淺，用戶可能會(huì)認(rèn)為這個(gè)頁面仍然可操作，并且甚至不會(huì)注意到彈窗的存在。
清晰的關(guān)閉選項(xiàng)
在彈窗的右上角應(yīng)該有一個(gè)關(guān)閉的選項(xiàng)。許多彈窗會(huì)在右上角有一個(gè)“x”的按鈕，方便用戶關(guān)閉窗口。然而，這個(gè)“x”按鈕對(duì)于一般的用戶而言并不是一個(gè)顯而易見的退出通道。這是由于“x”按鈕通常較小，它需要用戶準(zhǔn)確地定位到該處，才能夠成功的退出，而這一過程通常很費(fèi)事。
因而讓用戶通過點(diǎn)擊非模態(tài)彈窗的背景區(qū)域去退出，就是一個(gè)更好的方法。
圖17，TWITTER同時(shí)使用了點(diǎn)擊X按鈕和點(diǎn)擊背景區(qū)域的退出方式
避免在彈窗內(nèi)啟動(dòng)彈窗
應(yīng)該避免在彈窗內(nèi)再啟動(dòng)附加的小彈窗，這是因?yàn)榇伺e會(huì)加深用戶所感知到的網(wǎng)站或app的層級(jí)深度，從而增大了視覺的復(fù)雜性。
圖18，反例：彈窗中的彈窗
小結(jié)
- 在大部分情景下，都允許用戶通過點(diǎn)擊或輕觸來關(guān)閉彈窗（除了模態(tài)彈窗）。
- 應(yīng)該避免在彈窗內(nèi)再啟動(dòng)附加的小彈窗（即彈窗中的彈窗）。
總結(jié)
希望這些有關(guān)彈窗的使用案例和使用方法還算有趣，并能在你們設(shè)計(jì)原型時(shí)派上用場。要記住，用戶體驗(yàn)是為用戶而做的設(shè)計(jì)，而非為技術(shù)。要想知道什么樣的設(shè)計(jì)最適合你的用戶、最適合他們將進(jìn)行的任務(wù)，其實(shí)不是一件難事：你只需要模仿那些領(lǐng)先產(chǎn)品的彈窗，然后找到你的用戶做一些相關(guān)的測試。
英文原文：NICK BABICH, UX DESIGN: 5 ESSENTIAL UX RULES FOR DIALOG DESIGN
原文地址：http://babich.biz/5-essential-ux-rules-for-dialog-design/
]]>