產品設計時，彈窗和頁面顯示該如何選擇？什麼時候用彈窗，什麼時候頁面顯示更合適？

01-07

分享一下，我最近遇到彈窗的問題

創業產品一枚，輕虐

問題1

客服反饋；訂單支付成功後，用戶要求退貨（目前不支持系統退貨），原因地址填寫錯誤

客服希望；通過系統解決這個問題，減少客服工作量和提高用戶體驗

聽到客服的需求後，產品大怒：「訂單詳情頁有取消訂單功能啊？」客服大怒：「用戶下單後，不看訂單詳情的！到貨才知道地址填寫錯誤，而且發貨後不能取消訂單的」

產品解決方案；在訂單確認頁，點擊「去支付」按鈕後，加入提示框「確認是××××××地址嗎？」

（內心想；這麼快就想出解決辦法，我就是這麼機制，天才.....）

分析解決方案；地址填寫有誤的訂單佔總的訂單量中比例很小，在大部分填寫地址無誤的用戶在購物流程中多了一步，冗餘，體驗不好。

分析需求；用戶為什麼會填寫地址錯誤呢？

經過和客服深入的溝通，造成問題的原因；和我們的分銷模式有關（和微商很像）！地址信息填寫錯誤大部分是店主幫朋友下單（用店主紅包等原因），而忘了修改自己經常用的收貨地址。

最後的解決方案；在支付成功頁加入地址信息，同時有修改地址按鈕。

方案的觀點：一方面對大部分地址信息沒有問題的用戶來說，看到地址信息心裡有踏實的感覺，體驗反而有提升，另一方面對填寫地址有誤的用戶來說，也可以修改地址

方案展示（設計稿）

問題2

客服反饋；用戶填寫收貨人姓名與身份證不一致。問題描述；購買跨境商品，需要填寫身份證號和收貨人姓名（要求與身份證一致），否則會在海關檢驗卡住，被打回，之後客服聯繫用戶修改。

客服希望；通過系統解決這個問題，減少客服工作量

客服提出方案；並要求在訂單確認頁強提示，當含有跨境商品時，提示「收貨人姓名與身份證號一致嗎？」。

分析需求；吸取之前教訓，直接對話客服，深入溝通，並發現問題的原因；每天在20多單左右出現身份證號與收貨人姓名不一致問題（占跨境總訂單比例非常小），並且絕大多數都是首次購買。

產品解決方案；不增加提示框，保持現有的不變！

方案的觀點；每天20多單對客服的工作量來說，並不會影響很大，而且初次購買的用戶一部分可能是在試錯的過程。

就到這，有心得後，在寫。

Web界面設計 (豆瓣)

其實你的問題描述的不完整，沒有說明具體場景不太好回答。

我在設計過程中，以下場景是肯定會用彈窗的：

1.只有「確定」、「取消」（或者「是」、「否」）兩種選項的短提示。

2.顯示需顯示內容後，要保留當前頁面內容的情況。關閉彈窗後能不中斷操作。

3.目的是引人注目或起警示作用。

彈窗的優勢是響應速度快，關閉後不中斷當前的操作。頁面顯示的優勢是顯示內容可以更豐富，無干擾。

如果是移動應用設計，平台對彈框的使用有所規範。

比如頁面載入的動畫（白圈轉轉），android 會建議你放在頁面而不是用一個彈框。

而蘋果的彈框基本是模態框，這種彈框用戶必須對彈框做出選擇（點一下 OK 或 Cancel ），不能用 HOME 鍵消除掉。因此 iOS 上彈框的使用就比較謹慎了，除非你有很重要的事情要告知用戶。

android 的彈框樣式很多，有標題沒有標題，有操作按鈕沒有操作等等，每一種都有對應的應用場景，而且彈框能用返回按鈕消掉，因此 android 彈框用地比較頻繁。這麼做也是有好處的，彈框能很好地抓住用戶的注意力，同時避免了界面跳轉，減少層級，對於大屏幕更加友好。

反過來用頁面顯示，說明顯示的內同不重要不需要抓住用戶注意力，不打擾。

我要說該彈窗的時候彈窗，該頁面顯示的時候頁面顯示，我是不是要被摺疊了？

然而回過頭來看問題，現在的問題沒有任何補充說明，跟一個人問：我吃多大劑量葯合適？有本質區別嗎？我看沒有。故而若是題主遇到切實的選擇難題，麻煩稍後把具體頁面所要呈現的內容補充詳實，場景描述一下，用戶群等等都要講一講；若是為討論個議題，真心沒必要。PC端交互入門的那幾本書已經談了模態窗口的使用通則，移動平台有各大平台本身官方發布的交互設計指南，這些就是通用的東西，所以各位可以查閱一下。

在通則的基礎上，何時使用模態不僅僅跟頁面本身所要呈現的內容有關係，還跟用戶所處的場景（使用的設備？流程環節？前後頁面？預期？……）相關，甚至有時用戶本身的屬性（年齡、性別、行業）也要考慮在內。所以，就算都是個張得一樣的購物車確認訂單的頁面，上述的細節之差就可能導致要不要模態的兩種完全不同的設計決定。

比如李靜征談到的問題2，在我之前工作過的YMT哪有這麼簡單？YMT每天的訂單量裡面不寫身份證和寫錯的，那數量級必須引起產品的重視，解決方案也不僅僅模態或者一個、一處模態那麼簡單。

更好的交互設計師的思考比我上述的還更加全面。所以啥信息都沒有，就這麼問，然後一堆知友寫個分享，再然後呢？共識的無非又回歸到幾點通則上。情況也不可能窮盡，一個平台多少細節差異，隨機排列組合應付這個問題1000個答案都不夠。

通則有哪些？匿名用戶寫就是，更加幹練和全面的書上和安卓、IOS官方的設計指南上有。