滴滴产品总监：如何合理设计弹窗以保证流畅的用户体验？
iPrideRoCK?滴滴打車 產(chǎn)品總監(jiān) ：
如何在產(chǎn)品設(shè)計(jì)的過程中，盡可能不出現(xiàn)任何彈窗和提示，而讓用戶流暢的使用完所有流程？圖中所示的是非常不好的錯(cuò)誤案例。
▍Daisy_MA?謀職 產(chǎn)品經(jīng)理
不一定需要“完全避免”，要看打擾用戶的程度，犯錯(cuò)誤的幾率，是否提高用戶效率等等。
有些提示也許是目前更好的方法，但是有些彈窗設(shè)計(jì)確實(shí)可以避免，試著答一下：
1、最好的方法就是完全規(guī)避掉錯(cuò)誤，犯錯(cuò)零幾率（只讓用戶做他會(huì)做對(duì)的，傻瓜設(shè)計(jì)）
復(fù)雜的，就牽扯到規(guī)則設(shè)置
比如不可以按的鍵，就灰色顯示
比如這個(gè)例子中，頻繁驗(yàn)證，就驗(yàn)證碼鍵盤，過了一定時(shí)間才可以點(diǎn)擊，之前灰色顯示
比如密碼六位，就六個(gè)空
手機(jī)號(hào)碼如果錯(cuò)誤高，就手機(jī)位數(shù)（但也許會(huì)操作不便，不確定ing）
以下亂猜測(cè)下（可能想的很不合理，大家批）：
比如電商根據(jù)庫存，當(dāng)庫存小于某個(gè)數(shù)值的時(shí)候，不可以下單或單位時(shí)間，僅容許多少下單
比如火車票訂票（當(dāng)然現(xiàn)在的12306“也許”更合理），根據(jù)單位時(shí)間購(gòu)票率（當(dāng)列當(dāng)次單位時(shí)間購(gòu)票率），當(dāng)剩余票數(shù)小于此數(shù)值時(shí)，點(diǎn)擊預(yù)購(gòu)即算購(gòu)買，單位時(shí)間僅對(duì)前若干位開放預(yù)購(gòu)功能（等于剩余票量的）
2、變?nèi)菀族e(cuò)誤的填空，為沒有錯(cuò)誤的選擇（和1差不多）
比如，電影票選座（賣出去的，就不讓選）
如果錯(cuò)誤無法避免
1、錯(cuò)誤早提示
2、重復(fù)輸入修正（在一定程度可以歸為3）
3、二次確認(rèn)（重要功能或信息，或者重要流程中斷）
▍博文^_^?中云普華 產(chǎn)品總監(jiān)
我的觀點(diǎn)是：對(duì)話框作為一項(xiàng)獨(dú)特的交互界面，在App設(shè)計(jì)中有著不可替代的重要作用。合理使用對(duì)話框?qū)τ谝粋€(gè)設(shè)計(jì)者來說是必備技能。而為什么提出盡量避免使用對(duì)話框的問題，主要是因?yàn)楹芏嘣O(shè)計(jì)者不懂得合理使用導(dǎo)致濫用影響到用戶體驗(yàn)，問題的點(diǎn)應(yīng)該在“如何不濫用”層面上。
1，首先看看iOS、Android的設(shè)計(jì)指南對(duì)對(duì)話框設(shè)計(jì)的建議：
iOS
Model contexts章節(jié)里提到：為不影響用戶體驗(yàn)，應(yīng)盡量減少M(fèi)odel窗出現(xiàn)的次數(shù)，但是在以下情況應(yīng)考慮使用：
①讓用戶高度注意時(shí)
②有必須錄入的數(shù)據(jù)時(shí)（這種情況也可以選擇用Model View的形式替代Alert）
Temporary Views章節(jié)里提到：這些情況下，對(duì)話框是可以避免使用的--
Android
在Material Design中，對(duì)話框作為最高層級(jí)的控件存在，為整個(gè)設(shè)計(jì)體系的一個(gè)重要組成部分。
在Components-Dialogs章節(jié)中，提出對(duì)話框?qū)Σ僮髁鞒痰拇驍嘟档土瞬僮黧w驗(yàn)的問題，在設(shè)計(jì)過程中盡量減少對(duì)操作流程的打斷。將對(duì)話框進(jìn)行了分類，分別介紹其使用規(guī)范。同時(shí)給出了在錯(cuò)誤提醒、信息提示的更多的控件選擇：比如Snackbar、Simple menu、helper text和error text。
2，再分析一下移動(dòng)APP中常見的出現(xiàn)對(duì)話框的時(shí)機(jī)：
錯(cuò)誤反饋時(shí)（錄入格式不正確、用戶密碼錯(cuò)誤）
App更新提示時(shí)（Android）
進(jìn)度條（如數(shù)據(jù)加載中、登陸中）
顯示快捷菜單時(shí)
重要功能提示時(shí)
信息反饋時(shí)
退出時(shí)（Android）
3，分析上述時(shí)機(jī)中，哪些對(duì)話框是可以盡可能省略的：
① 錯(cuò)誤反饋
類似登陸注冊(cè)的數(shù)據(jù)錄入畫面，格式錯(cuò)誤或數(shù)據(jù)錯(cuò)誤反饋提示，很顯然可以用體驗(yàn)更好的方式替代。
②App更新（Android）
App版本更新功能，為引導(dǎo)用戶點(diǎn)擊更新，一般都會(huì)以對(duì)話框的形式實(shí)現(xiàn)。如果要提供更好的用戶體驗(yàn)，也可以利用Snackbar實(shí)現(xiàn)。
③進(jìn)度條
根據(jù)iOS和Android的設(shè)計(jì)規(guī)范，建議不使用對(duì)話框。
④快捷菜單
Android的ActionBar、Snackbar、以及長(zhǎng)按彈出Menu的功能可以提升操作體驗(yàn)，蘋果有Toobar控件可以實(shí)現(xiàn)類似功能但考慮要支持新款小屏設(shè)備不建議使用。
⑤重點(diǎn)功能提示
無論是業(yè)務(wù)層面還是功能層面，重要性很高的功能放在醒目的對(duì)話框里無可厚非。比如廣告，比如新增功能，比如引導(dǎo)信息。
⑥信息反饋提示
用戶某些操作的信息反饋根據(jù)信息的重要程度可以選擇使用對(duì)話框、Toast或者其它方式，選擇怎樣的方式全憑設(shè)計(jì)者對(duì)功能的理解了。
⑦退出時(shí)（Android）
安卓的退出App對(duì)話框的設(shè)計(jì)，也是很有考究的。直接體現(xiàn)了設(shè)計(jì)者的功（lian）力（pi）。
4，最后說說利用對(duì)話框能更好的幫助實(shí)現(xiàn)哪些產(chǎn)品目標(biāo)：
①對(duì)用戶有嚴(yán)重影響的重要提醒，必須用對(duì)話框。例如：
②引導(dǎo)用戶使用新功能、參與新活動(dòng)，利用對(duì)話框效果最好。當(dāng)然也可以無恥的直接把廣告放到對(duì)話框里。
③安卓系統(tǒng)設(shè)計(jì)功能時(shí)鼓勵(lì)使用ActionBar、SnackBar，提升操作體驗(yàn)。
（部分超鏈接請(qǐng)點(diǎn)擊原文鏈接打開）
▍flyish?Feel-運(yùn)動(dòng)社區(qū) PM
題主的問題里也說了盡可能避免，其實(shí)題主也是認(rèn)可彈窗和提示是屏幕交互類產(chǎn)品里比不可少的交互了。確定了這點(diǎn)我就可以放心的說了（因?yàn)閷?shí)在沒有辦法完全不用彈窗和提示），怎么來避免或者盡可能減少不友好的彈窗和提示？
1、盡可能分解流程，避免過多的分支和選擇
在需求建模和流程設(shè)計(jì)的時(shí)候就有一個(gè)很好的產(chǎn)品設(shè)計(jì)考慮，避免在一個(gè)流程當(dāng)中有過多的異常分支，通常這些異常的分支在頁面交互的體現(xiàn)就是彈窗，這里能夠規(guī)避大部分的彈窗。
2、盡可能的區(qū)分狀態(tài)，多使用狀態(tài)表達(dá)控件
在一個(gè)獨(dú)立頁面中，不同的交互順序可能產(chǎn)品不同的接口，這些結(jié)果中只有一個(gè)是正向流程，其他的可能都是有異常警告的。所以多使用一些狀態(tài)表達(dá)控件在不同的狀態(tài)下給予不同的狀態(tài)反饋。避免用戶的誤操作
3、給予異常操作的預(yù)告提示而不是操作后給予警告
對(duì)于以上兩種還是無法避免的。那就列提示牌，前方高能，請(qǐng)勿靠近。哈哈，開個(gè)玩笑，這種類似提示線下生活場(chǎng)景用的太多了。那么產(chǎn)品設(shè)計(jì)上也是可以考慮的，總比用戶一腳踩進(jìn)雷區(qū)然后來一個(gè)警告嚇壞用戶的小心臟要好。
這里沒有過多的理論分析（怕答非所問），上面的實(shí)用方法都是個(gè)人總結(jié)。實(shí)際上來講，應(yīng)該有這樣的一個(gè)思考過程：彈窗和提示的交互目的是什么？為什么會(huì)產(chǎn)生這樣的交互？各類彈窗和提示的需求場(chǎng)景和優(yōu)先級(jí)對(duì)比？然后才是怎么規(guī)避？好吧回答一個(gè)問題，拋出三個(gè)問題……
戳?閱讀原文?去社區(qū)提問，就有機(jī)會(huì)和一線產(chǎn)品大咖探討產(chǎn)品
總結(jié)
以上是生活随笔為你收集整理的滴滴产品总监：如何合理设计弹窗以保证流畅的用户体验？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 你所知道的都是错的！产品经理的十大认知错
- 下一篇： 活动 | 优步首席产品官Jeff Hol