2019-9-28 資深UI設計者
區(qū)分取消與關閉，可以很大程度上避免丟失用戶已操作的內(nèi)容。在關閉視圖之前保存用戶的更改，使用文本標簽而不是「X」圖標，并在破壞性操作之前提供確認對話框。
很久以前，「X」這個符號是用在地圖上，標記「寶藏的藏身地」。但在今天的數(shù)字化界面中，「X」符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。但是如何確定「X」代表的是「取消」 還是「關閉」？有的時候可以確定，有時卻模糊不清難以界定。
其實，主要的問題在于「X」圖標缺少了文本標簽。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什么含義。
當用戶單擊/點擊「X」按鈕來關閉模態(tài)彈框或視圖時，系統(tǒng)會完全取消該過程并清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為「X」圖標表示取消或者關閉，所以區(qū)分這兩種可能性對于交互的成功至關重要。
在某些情況下，區(qū)分取消 or 關閉并不重要。當一個彈窗占據(jù)你的大部分屏幕時，點擊「X」按鈕（盡可能快地），既可以關閉該模態(tài)，也可以取消它可能觸發(fā)的任何進程。
但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標簽，或其他類型未保存的內(nèi)容，那就很有必要說明「X」圖標所代表的意義。因為用戶可能打算讓計時器或音頻繼續(xù)運行，或者希望立刻應用這些選好的選項標簽，或保存正在進行的工作，同時希望關閉該視圖繼續(xù)其他操作。
例如：絲芙蘭在結賬過程中，使用模態(tài)窗口來展示用戶可以添加到購物車的免費商品。在以下示例中，單擊「 ADD（添加）」按鈕選擇商品后， 該按鈕直接被變成了「 Remove（移除）」，看起來似乎商品已經(jīng)被添加到購物車中了。但是，實際上當用戶單擊右上角的「X」圖標后，該商品并不在購物車中。他需要再重復這個步驟，最后點擊「Done（完成）」按鈕，商品才會被加入購物車。
Sephora：單擊右上角的「X」會取消選擇這些試用商品整個過程。用戶必須先單擊「ADD」，再單擊「Done」才能將商品添加到購物車。
要避免丟失用戶正在操作的內(nèi)容，首先需要確定用戶的意圖，是取消還是關閉，并提供明確的選項。有以下幾種方法：
1. 要求確認
如果用戶在已經(jīng)執(zhí)行操作的模態(tài)彈框或頁面視圖中，點擊「X」圖標，app 則可以在關閉視圖之前，直接詢問用戶是否應用該操作，來確認其意圖。此解決方案非常適合會破壞用戶工作的破壞性取消操作。例如，過濾器視圖可能會被意外關閉，并且關閉會導致用戶丟失其選定的選項。
這個問題在移動端界面上很常見，因為過濾器視圖占用了很大的屏幕空間，這使用戶很難或不能判斷是否已經(jīng)應用了那些選擇。為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇并關閉視圖，抑或是清除這些選擇。例如：下圖中，當用戶選擇后，點擊「X」圖標時，Lowes 會出現(xiàn)如下確認彈框。
左 ：點擊「X」圖標或返回箭頭，所有的選項都會被取消，并將用戶帶回上一個頁面。右：點擊「X」后，出現(xiàn)一個確認對話框，確認用戶是應用還是取消篩選，然后再返回結果列表頁。
同樣，當用戶關閉正在進行的課程時，語言學習應用Duolingo 會顯示一個確認對話框，課程進行中不能中途離開，除非確認「退出」。至少，該 APP 向用戶傳達了這一限制，同時他們也可以選擇「取消」來繼續(xù)課程。點擊「X」按鈕將結束當前課程。為了防止出錯，結束前會出現(xiàn)一個確認對話框。
缺點：
2. 使用文本標簽
不要完全依賴對話框來讓用戶確認模糊的「X」圖標，而是使用明確的文本標簽。文本可以消除歧義，并清楚地傳達將發(fā)生的操作：取消與關閉。
Yelp 的篩選頁面在屏幕頂部提供了標有「Cancel（取消）」和「Reset（重制）」的按鈕，在底部提供了一個大大的「Apply（應用）」按鈕。類似地，Etsy 中的 Filters 視圖提供了「Clear（清除）」和「Done（完成）」兩個按鈕。
注意：Etsy 使用「Done」而不是「Apply」，因為過濾器一經(jīng)選擇就可以被應用，而這里是關于開關切換與否的建議。
（左）Yelp：Cancel、Reset 和 Apply 這三個文本標簽既直接又清晰，這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。（右）Etsy：Clear 為用戶取消提供了一種清晰的方式，而點擊 Done 則返回到「產(chǎn)品列表」頁，其中的選擇已經(jīng)應用。
3. 關閉并保存
如果必須使用「X」圖標而不是文本標簽（比如為了以節(jié)省空間，或者正在遵循團隊的設計語言），請謹慎使用，并在用戶完成前保存操作/內(nèi)容。另外，可以提供一個單獨的「取消」按鈕，讓用戶在進程之外有一個緊急出口，并消除「X」在兩種含義之間的歧義。
例如：Gmail 會自動保存在非模態(tài)窗口中填寫的郵件信息到草稿（Drafts）。這樣的好處是，用戶在需要折疊或關閉該窗口時，仍然保存原來的內(nèi)容以便于下次繼續(xù)編輯。將鼠標懸停在消息窗口右上角的「X」圖標上時，會顯示一段提示：Save & Close（保存到草稿并關閉）。此外，點擊窗口右下角的「垃圾桶」圖標可以刪除該郵件，這個圖標離頂部的「保存和關閉」選項很遠，可以防止用戶誤點。
Gmail：Hover 透露，「X」圖標是用于關閉窗口而不是刪除草稿，它允許用戶保存并關閉消息窗口而不會丟失剛剛正在編輯的郵件。
對于長進程或傾向于在后臺運行的進程（如計時器），默認自動保存也是一種很好的解決方案。
例如，Glow Baby 中，后臺運行喂食或睡眠計時器時，用戶還可以瀏覽 APP 的其他區(qū)域。因為這些計時器一般會運行很長一段時間。此功能還能讓用戶在 APP 中做其他的任務操作，例如記錄之前換尿布的時間、瀏覽文章、逛論壇等。點擊計時器視圖中的「X」圖標也只是關閉窗口并不會取消正在運行的計時器。
Glow Baby：（左）點擊運行計時器視圖中的「X」圖標，在不停止計時器的情況下取消視圖，從而允許用戶繼續(xù)使用 APP 記錄其他類型的事件、參與社區(qū)討論、閱讀文章等。（中）運行計時器的狀態(tài)顯示在屏幕頂部的狀態(tài)欄中。（右）在計時器暫停時點擊「X」圖標，彈出「放棄」或「取消」按鈕以確認用戶的真正意圖。
請注意：在關閉前保存中間工作或維護正在進行的過程是主動的，但有時可能會與用戶的意圖相反。如果用戶打算通過單擊「X」按鈕取消其選擇，那自動應用這些選擇可能會令人困惑和沮喪。
這就是為什么還必須有一個單獨的「取消」按鈕，給用戶一個出口，而不是強迫他們必須關閉時自動保存。
雖然「X」圖標會造成模棱兩可，而且經(jīng)常導致可用性問題，但它不太可能馬上從所有接口中消失。設計人員應該注意「X」圖標的多重含義，消除「關閉」和「取消」之間的歧義，并提供確認對話框或自動保存等保護性措施，避免丟失任何用戶正在操作的內(nèi)容。
若存在疑問，請記?。合缺４?，再退出。
為什么手機驗證碼登錄微信/淘寶時，驗證碼輸入錯誤，二者都是用的模態(tài)對話框提示用戶，而不是用 Toast 呢？
補充：Toast 這一控件，原是 Android 系統(tǒng)的控件。但自 Android 5.0 推出原質(zhì)化設計后，Toast 就被弱化，而是將 Snackbar 作為官方推薦的控件。如今在 Material Design 中更是找不到 Toast 的蹤影。主要原因還是 Snackbar 在交互友好性方面比 Toast 要好，例如：支持手勢交互、支持與 CoordinatorLayout 聯(lián)動等。