今天聊的這個話題是PC端設計初學者經常問的一個問題。一些比較細心的人可能能觀察到，在用PC的時候有些彈窗只有一個【取消】按鈕來表示關閉彈窗，並且不做出任何操作；而有些彈窗除了【取消】按鈕以外，在頂部左上角或者右上角還有一個【x】icon，功能和點擊【取消】一樣。但是在移動端彈窗中，好像又很少見到這種既有【取消】又有【x】的設計。
PC端彈窗的關閉操作，有設計規範嗎？
彈窗需要兩個關閉按鈕嗎？
移動端的關閉操作和PC端有什麼不一樣？
PC端交互很難入門，因為它規矩很多。從80年代到今天，PC交互經歷了數次主流系統迭代，沉澱了非常多的約定俗成的規則。而且相對移動端來說，PC更適合被用來處理複雜場景和需求，因此在面對這些問題時，PC的交互設計形成了更系統性的規範。因此，要解答PC端彈窗【該】怎麼做，我們需要做這兩步事情：1-參考主流設計系統（windows，mac）為什麼要做這樣的設計首先從windows來看，同時帶兩種關閉按鈕的彈窗設計至少可以追溯到1995年。當時的windows規範將彈窗（dialog box）歸屬於次級窗體（secondary window）。而一個次級窗體主要包含兩部分：標題欄（tittle bar）和窗體框架（frame）。從層級上來說，標題欄的層級高於框架和框架中的內容。除了展示當前窗口的名字以外，標題欄還是移動窗口的控制點。標題欄上的關閉/最大化/最小化等操作按鈕（Title Bar Buttons）被定位為對窗體的快捷操作（右鍵點擊窗體時展示的窗體菜單則是對窗體的主操作）。雖然說明的比較模糊，但在95年windows並沒有規定窗體標題欄必須有關閉操作。從應用上來說，95年windows給的彈窗示例可以看出，【取消】和【x】兩個關閉操作在1個彈窗上並存是沒有問題的，其中【x】是關閉窗體的快捷按鈕（甚至雙擊標題欄也是一種快捷關閉操作）；而【取消】則是在窗體框架下、比較語境化的操作按鈕，這套規則從Win95一直沿用到了Win7。從Win8開始Windows開始嘗試多終端應用，直到Window10以後一個應用可以在PC/平板/手機等等應用上使用，PC設計也就很大的受到這些不同終端的風格影響。Win8時期應用在微軟商店的Metro design系統首先做出了很多新嘗試：定義了更多的窗體類型，包括傳統彈窗（dialog）、文件選擇器、飛出窗（flyout）等等
首次定義了點擊彈窗遮罩，關閉彈窗的交互形式
出現了不帶標題欄的彈窗
雖然最後metro design被棄用了，但可以看出它對現在的win10/11設計產生了很大影響，目前win11和web端設計也都保留了這種不帶【x】的操作彈窗（但是web端設計允許加【x】）。從Mac OS來看，蘋果一直以來都不鼓勵給彈窗一個以上的關閉方式。在2003年以前，Mac OS定義了3種不同的彈窗，除了非模態彈窗可以加【x】以外，模態彈窗都「大多沒有標題欄(關閉、最小化、縮放) ; 用戶可以單擊一個按鈕(比如 OK 或 Cancel)來關閉這些彈窗」。2004～2009蘋果修改了彈窗的示例樣式，但並沒有修改規範規範。基於蘋果當前的規範，只有應用在再確認、警告等場景下的文檔模態彈窗（Document modal）明確沒有【x】，其它模態彈窗傾向於不使用【x】，非模態彈窗一般有【x】。但在實際使用中，可以發現偶爾蘋果自己也對這個問題也沒太想清楚，比如Pages的【打開】彈窗，根據蘋果規範屬於也不應該加【x】，但它也還是加了。說到這裡大家可以看出來，其實主流規範對於彈窗是否應該有兩個操作並沒有一個定論，反而根據情景/時代變化，規範也會產生變化。那從體驗的角度上來看，一個彈窗到底需要幾個關閉操作更好呢？根據上面對規範的解讀我們可知，彈窗左上角或右上角的【x】，最初是對窗體操作的快捷方式。它的作用是在不做出任何修改的情況下關閉彈窗。但現實場景下，彈窗，特別是模態彈窗的一大作用就是阻斷用戶的任務路徑，要求用戶去處理一些高優先級的事情。比如要求用戶同意新的用戶協議，否則就不再給用戶提供服務。這種情況下，【x】就顯得非常模稜兩可，並沒有讓用戶做出表態。因此我們可以得出第一個結論：當要求用戶明確表態時，添加【x】不合適。而應該只提供帶文案的操作按鈕（比如不同意協議）。那麼，對於操作型的彈窗，是否應該加【x】呢？我的理解是需要。縱觀PC的特性，不難發現它屏幕大、操作距離長，這些特性也就造就了特別多的操作捷徑。光是【關閉彈窗】，就（曾經）可以用雙擊窗口、右鍵點擊窗口呼出窗口菜單、鍵盤esc、點擊遮罩等等方式來完成。雖然在做功能設計時特別是B端功能設計時，我們往往會基於核心場景做最重要的功能，而傾向於忽略邊緣場景。但在設計控件規範時，需要重點考慮規範的擴展性。作為一個非常底層的控件，彈窗（或者說窗體）應該兼顧大部分用戶的不同習慣，來保持整個系統有比較好的可用性。因此，保留「x」作為關閉操作性彈窗的最短路徑，是不錯的選擇。簡單來講，移動端屏幕小、信息聚焦，而且並不存在窗體（window）的概念。所以並不需要【x】作為最短路徑去關閉一個彈窗。在這種以短平快為特徵的平台做設計時，基於用戶訴求刪減操作體驗更佳，以PC/移動端都常見的退出保存為例：A方案雖然也沒有錯，但在移動端上三個操作肯定比兩個操作反應時間長。B方案總體看起來更簡潔，其中【取消】按鈕的功能可以用點按遮罩來達成。但文案寫錯了+破壞性操作沒有標紅，還有提升空間。只對我們知識星球成員開放報名，非星球成員只能旁聽/回看直播課了，所以加入星球還是划算的：如果你只是想要多認識一些同行，也可以加入我們無廣告的純粹體驗研討微信群：
留言列表
留言列表