'交互設計｜取消與關閉：請在設計上區分差異'

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

Sephora：單擊右上角的”X”會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”，再單擊“Done”才能將商品添加到購物車。

三、如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容，首先需要確定用戶的意圖- 取消 or 關閉 – 並提供明確的選項。有以下幾種方法：

• 主動要求用戶確認他們的意圖
• 使用明確的文本標籤而不是模糊圖標
• 顯示兩個不同的按鈕：“X”圖標表示關閉視圖（可以自動保存頁面內容/操作），而“取消”則代表放棄該過程

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中，點擊“X”圖標，UI則可以在關閉視圖之前，直接詢問用戶是否應用該操作（確認其意圖）。此解決方案非常適合會破壞用戶工作的破壞性取消操作。

例如，過濾器視圖可能會被意外關閉，並且關閉會導致用戶丟失其選定的選項。這個問題在移動端界面上很常見，因為過濾器視圖佔用了很大的屏幕空間，這使用戶很難或不能判斷是否已經應用了那些選擇。

為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇並關閉視圖，抑或是清除這些選擇。

例如：下圖中，當用戶選擇後，點擊“X”圖標時，Lowes 會出現如下確認彈框。

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

Sephora：單擊右上角的”X”會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”，再單擊“Done”才能將商品添加到購物車。

三、如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容，首先需要確定用戶的意圖- 取消 or 關閉 – 並提供明確的選項。有以下幾種方法：

• 主動要求用戶確認他們的意圖
• 使用明確的文本標籤而不是模糊圖標
• 顯示兩個不同的按鈕：“X”圖標表示關閉視圖（可以自動保存頁面內容/操作），而“取消”則代表放棄該過程

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中，點擊“X”圖標，UI則可以在關閉視圖之前，直接詢問用戶是否應用該操作（確認其意圖）。此解決方案非常適合會破壞用戶工作的破壞性取消操作。

例如，過濾器視圖可能會被意外關閉，並且關閉會導致用戶丟失其選定的選項。這個問題在移動端界面上很常見，因為過濾器視圖佔用了很大的屏幕空間，這使用戶很難或不能判斷是否已經應用了那些選擇。

為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇並關閉視圖，抑或是清除這些選擇。

例如：下圖中，當用戶選擇後，點擊“X”圖標時，Lowes 會出現如下確認彈框。

• 左 ：點擊”X”圖標或返回箭頭，所有的選項都會被取消，並將用戶帶回上一個頁面。
• 右：點擊“X”後，出現一個確認對話框，確認用戶是應用還是取消篩選，然後再返回結果列表頁。

同樣，當用戶關閉正在進行的課程時，語言學習應用- Duolingo 會顯示一個確認對話框-課程進行中不能中途離開，除非確認“退出”。至少，該APP向用戶傳達了這一限制，同時他們也可以選擇“取消”來繼續課程。

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

Sephora：單擊右上角的”X”會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”，再單擊“Done”才能將商品添加到購物車。

三、如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容，首先需要確定用戶的意圖- 取消 or 關閉 – 並提供明確的選項。有以下幾種方法：

• 主動要求用戶確認他們的意圖
• 使用明確的文本標籤而不是模糊圖標
• 顯示兩個不同的按鈕：“X”圖標表示關閉視圖（可以自動保存頁面內容/操作），而“取消”則代表放棄該過程

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中，點擊“X”圖標，UI則可以在關閉視圖之前，直接詢問用戶是否應用該操作（確認其意圖）。此解決方案非常適合會破壞用戶工作的破壞性取消操作。

例如，過濾器視圖可能會被意外關閉，並且關閉會導致用戶丟失其選定的選項。這個問題在移動端界面上很常見，因為過濾器視圖佔用了很大的屏幕空間，這使用戶很難或不能判斷是否已經應用了那些選擇。

為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇並關閉視圖，抑或是清除這些選擇。

例如：下圖中，當用戶選擇後，點擊“X”圖標時，Lowes 會出現如下確認彈框。

• 左 ：點擊”X”圖標或返回箭頭，所有的選項都會被取消，並將用戶帶回上一個頁面。
• 右：點擊“X”後，出現一個確認對話框，確認用戶是應用還是取消篩選，然後再返回結果列表頁。

同樣，當用戶關閉正在進行的課程時，語言學習應用- Duolingo 會顯示一個確認對話框-課程進行中不能中途離開，除非確認“退出”。至少，該APP向用戶傳達了這一限制，同時他們也可以選擇“取消”來繼續課程。

點擊“X”按鈕將結束當前課程。為了防止出錯，結束前會出現一個確認對話框。

缺點：

1. 雖然確認對話框在避免“X”圖標有歧義方面很有效，但它卻添加了額外的步驟；
2. 用戶在按下“X”圖標之前還是不知道它到底做了什麼，代表什麼意思，因此他們可能會對這個操作感到疑惑。

2. 使用文本標籤

不要完全依賴對話框來讓用戶確認模糊的“X”圖標，而是使用明確的文本標籤。文本可以消除歧義，並清楚地傳達將發生的操作：取消與關閉。

Yelp的篩選頁面在屏幕頂部提供了標有“Cancel（取消）”和“Reset（重製）”的按鈕，在底部提供了一個大大的“Apply（應用）”按鈕。類似地，Etsy中的 Filters視圖提供了“Clear（清除）”和“Done（完成）”兩個按鈕。

注意：Etsy使用“Done”而不是“Apply”，因為過濾器一經選擇就可以被應用，而這裡是關於開關切換與否的建議。

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

Sephora：單擊右上角的”X”會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”，再單擊“Done”才能將商品添加到購物車。

三、如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容，首先需要確定用戶的意圖- 取消 or 關閉 – 並提供明確的選項。有以下幾種方法：

• 主動要求用戶確認他們的意圖
• 使用明確的文本標籤而不是模糊圖標
• 顯示兩個不同的按鈕：“X”圖標表示關閉視圖（可以自動保存頁面內容/操作），而“取消”則代表放棄該過程

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中，點擊“X”圖標，UI則可以在關閉視圖之前，直接詢問用戶是否應用該操作（確認其意圖）。此解決方案非常適合會破壞用戶工作的破壞性取消操作。

例如，過濾器視圖可能會被意外關閉，並且關閉會導致用戶丟失其選定的選項。這個問題在移動端界面上很常見，因為過濾器視圖佔用了很大的屏幕空間，這使用戶很難或不能判斷是否已經應用了那些選擇。

為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇並關閉視圖，抑或是清除這些選擇。

例如：下圖中，當用戶選擇後，點擊“X”圖標時，Lowes 會出現如下確認彈框。

• 左 ：點擊”X”圖標或返回箭頭，所有的選項都會被取消，並將用戶帶回上一個頁面。
• 右：點擊“X”後，出現一個確認對話框，確認用戶是應用還是取消篩選，然後再返回結果列表頁。

同樣，當用戶關閉正在進行的課程時，語言學習應用- Duolingo 會顯示一個確認對話框-課程進行中不能中途離開，除非確認“退出”。至少，該APP向用戶傳達了這一限制，同時他們也可以選擇“取消”來繼續課程。

點擊“X”按鈕將結束當前課程。為了防止出錯，結束前會出現一個確認對話框。

缺點：

1. 雖然確認對話框在避免“X”圖標有歧義方面很有效，但它卻添加了額外的步驟；
2. 用戶在按下“X”圖標之前還是不知道它到底做了什麼，代表什麼意思，因此他們可能會對這個操作感到疑惑。

2. 使用文本標籤

不要完全依賴對話框來讓用戶確認模糊的“X”圖標，而是使用明確的文本標籤。文本可以消除歧義，並清楚地傳達將發生的操作：取消與關閉。

Yelp的篩選頁面在屏幕頂部提供了標有“Cancel（取消）”和“Reset（重製）”的按鈕，在底部提供了一個大大的“Apply（應用）”按鈕。類似地，Etsy中的 Filters視圖提供了“Clear（清除）”和“Done（完成）”兩個按鈕。

注意：Etsy使用“Done”而不是“Apply”，因為過濾器一經選擇就可以被應用，而這裡是關於開關切換與否的建議。

• （左）Yelp：Cancel、Reset 和 Apply 這三個文本標籤既直接又清晰，這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。
• （右）Etsy：Clear 為用戶取消提供了一種清晰的方式。而點擊 Done 則返回到“產品列表”頁，其中的選擇已經應用。

3. 關閉並保存

如果必須使用“X”圖標而不是文本標籤（比如為了以節省空間，或者因為正在遵循團隊的設計語言），請謹慎使用，並在用戶完成前保存操作/內容。

另外，可以提供一個單獨的“取消”按鈕，讓用戶在進程之外有一個緊急出口，並消除“X”在兩種含義之間的歧義。

例如：Gmail會自動保存在非模態窗口中填寫的郵件信息到草稿（Drafts）。這樣的好處是，用戶在需要摺疊或關閉該窗口時，仍然保存原來的內容以便於下次繼續編輯。

將鼠標懸停在消息窗口右上角的“X”圖標上時，會顯示一段提示：Save & Close（保存到草稿並關閉）。

此外，點擊窗口右下角的“垃圾桶”圖標可以刪除該郵件 – 這個圖標離頂部的“保存和關閉”選項很遠，可以防止用戶誤點。

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

Sephora：單擊右上角的”X”會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”，再單擊“Done”才能將商品添加到購物車。

三、如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容，首先需要確定用戶的意圖- 取消 or 關閉 – 並提供明確的選項。有以下幾種方法：

• 主動要求用戶確認他們的意圖
• 使用明確的文本標籤而不是模糊圖標
• 顯示兩個不同的按鈕：“X”圖標表示關閉視圖（可以自動保存頁面內容/操作），而“取消”則代表放棄該過程

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中，點擊“X”圖標，UI則可以在關閉視圖之前，直接詢問用戶是否應用該操作（確認其意圖）。此解決方案非常適合會破壞用戶工作的破壞性取消操作。

例如，過濾器視圖可能會被意外關閉，並且關閉會導致用戶丟失其選定的選項。這個問題在移動端界面上很常見，因為過濾器視圖佔用了很大的屏幕空間，這使用戶很難或不能判斷是否已經應用了那些選擇。

為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇並關閉視圖，抑或是清除這些選擇。

例如：下圖中，當用戶選擇後，點擊“X”圖標時，Lowes 會出現如下確認彈框。

• 左 ：點擊”X”圖標或返回箭頭，所有的選項都會被取消，並將用戶帶回上一個頁面。
• 右：點擊“X”後，出現一個確認對話框，確認用戶是應用還是取消篩選，然後再返回結果列表頁。

同樣，當用戶關閉正在進行的課程時，語言學習應用- Duolingo 會顯示一個確認對話框-課程進行中不能中途離開，除非確認“退出”。至少，該APP向用戶傳達了這一限制，同時他們也可以選擇“取消”來繼續課程。

點擊“X”按鈕將結束當前課程。為了防止出錯，結束前會出現一個確認對話框。

缺點：

1. 雖然確認對話框在避免“X”圖標有歧義方面很有效，但它卻添加了額外的步驟；
2. 用戶在按下“X”圖標之前還是不知道它到底做了什麼，代表什麼意思，因此他們可能會對這個操作感到疑惑。

2. 使用文本標籤

不要完全依賴對話框來讓用戶確認模糊的“X”圖標，而是使用明確的文本標籤。文本可以消除歧義，並清楚地傳達將發生的操作：取消與關閉。

Yelp的篩選頁面在屏幕頂部提供了標有“Cancel（取消）”和“Reset（重製）”的按鈕，在底部提供了一個大大的“Apply（應用）”按鈕。類似地，Etsy中的 Filters視圖提供了“Clear（清除）”和“Done（完成）”兩個按鈕。

注意：Etsy使用“Done”而不是“Apply”，因為過濾器一經選擇就可以被應用，而這裡是關於開關切換與否的建議。

• （左）Yelp：Cancel、Reset 和 Apply 這三個文本標籤既直接又清晰，這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。
• （右）Etsy：Clear 為用戶取消提供了一種清晰的方式。而點擊 Done 則返回到“產品列表”頁，其中的選擇已經應用。

3. 關閉並保存

如果必須使用“X”圖標而不是文本標籤（比如為了以節省空間，或者因為正在遵循團隊的設計語言），請謹慎使用，並在用戶完成前保存操作/內容。

另外，可以提供一個單獨的“取消”按鈕，讓用戶在進程之外有一個緊急出口，並消除“X”在兩種含義之間的歧義。

例如：Gmail會自動保存在非模態窗口中填寫的郵件信息到草稿（Drafts）。這樣的好處是，用戶在需要摺疊或關閉該窗口時，仍然保存原來的內容以便於下次繼續編輯。

將鼠標懸停在消息窗口右上角的“X”圖標上時，會顯示一段提示：Save & Close（保存到草稿並關閉）。

此外，點擊窗口右下角的“垃圾桶”圖標可以刪除該郵件 – 這個圖標離頂部的“保存和關閉”選項很遠，可以防止用戶誤點。

Gmail：Hover 透露，“X”圖標是用於關閉窗口而不是刪除草稿，它允許用戶保存並關閉消息窗口而不會丟失剛剛正在編輯的郵件。

對於長進程或傾向於在後臺運行的進程（如計時器），默認自動保存也是一種很好的解決方案。

例如，Glow Baby中，後臺運行餵食或睡眠計時器時，用戶還可以瀏覽APP的其他區域。因為這些計時器一般會運行很長一段時間。

此功能還能讓用戶在APP中做其他的任務操作，例如記錄之前換尿布的時間、瀏覽文章、逛論壇等。點擊計時器視圖中的“X”圖標也只是關閉窗口並不會取消正在運行的計時器。

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

Sephora：單擊右上角的”X”會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”，再單擊“Done”才能將商品添加到購物車。

三、如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容，首先需要確定用戶的意圖- 取消 or 關閉 – 並提供明確的選項。有以下幾種方法：

• 主動要求用戶確認他們的意圖
• 使用明確的文本標籤而不是模糊圖標
• 顯示兩個不同的按鈕：“X”圖標表示關閉視圖（可以自動保存頁面內容/操作），而“取消”則代表放棄該過程

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中，點擊“X”圖標，UI則可以在關閉視圖之前，直接詢問用戶是否應用該操作（確認其意圖）。此解決方案非常適合會破壞用戶工作的破壞性取消操作。

例如，過濾器視圖可能會被意外關閉，並且關閉會導致用戶丟失其選定的選項。這個問題在移動端界面上很常見，因為過濾器視圖佔用了很大的屏幕空間，這使用戶很難或不能判斷是否已經應用了那些選擇。

為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇並關閉視圖，抑或是清除這些選擇。

例如：下圖中，當用戶選擇後，點擊“X”圖標時，Lowes 會出現如下確認彈框。

• 左 ：點擊”X”圖標或返回箭頭，所有的選項都會被取消，並將用戶帶回上一個頁面。
• 右：點擊“X”後，出現一個確認對話框，確認用戶是應用還是取消篩選，然後再返回結果列表頁。

同樣，當用戶關閉正在進行的課程時，語言學習應用- Duolingo 會顯示一個確認對話框-課程進行中不能中途離開，除非確認“退出”。至少，該APP向用戶傳達了這一限制，同時他們也可以選擇“取消”來繼續課程。

點擊“X”按鈕將結束當前課程。為了防止出錯，結束前會出現一個確認對話框。

缺點：

1. 雖然確認對話框在避免“X”圖標有歧義方面很有效，但它卻添加了額外的步驟；
2. 用戶在按下“X”圖標之前還是不知道它到底做了什麼，代表什麼意思，因此他們可能會對這個操作感到疑惑。

2. 使用文本標籤

不要完全依賴對話框來讓用戶確認模糊的“X”圖標，而是使用明確的文本標籤。文本可以消除歧義，並清楚地傳達將發生的操作：取消與關閉。

Yelp的篩選頁面在屏幕頂部提供了標有“Cancel（取消）”和“Reset（重製）”的按鈕，在底部提供了一個大大的“Apply（應用）”按鈕。類似地，Etsy中的 Filters視圖提供了“Clear（清除）”和“Done（完成）”兩個按鈕。

注意：Etsy使用“Done”而不是“Apply”，因為過濾器一經選擇就可以被應用，而這裡是關於開關切換與否的建議。

• （左）Yelp：Cancel、Reset 和 Apply 這三個文本標籤既直接又清晰，這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。
• （右）Etsy：Clear 為用戶取消提供了一種清晰的方式。而點擊 Done 則返回到“產品列表”頁，其中的選擇已經應用。

3. 關閉並保存

如果必須使用“X”圖標而不是文本標籤（比如為了以節省空間，或者因為正在遵循團隊的設計語言），請謹慎使用，並在用戶完成前保存操作/內容。

另外，可以提供一個單獨的“取消”按鈕，讓用戶在進程之外有一個緊急出口，並消除“X”在兩種含義之間的歧義。

例如：Gmail會自動保存在非模態窗口中填寫的郵件信息到草稿（Drafts）。這樣的好處是，用戶在需要摺疊或關閉該窗口時，仍然保存原來的內容以便於下次繼續編輯。

將鼠標懸停在消息窗口右上角的“X”圖標上時，會顯示一段提示：Save & Close（保存到草稿並關閉）。

此外，點擊窗口右下角的“垃圾桶”圖標可以刪除該郵件 – 這個圖標離頂部的“保存和關閉”選項很遠，可以防止用戶誤點。

Gmail：Hover 透露，“X”圖標是用於關閉窗口而不是刪除草稿，它允許用戶保存並關閉消息窗口而不會丟失剛剛正在編輯的郵件。

對於長進程或傾向於在後臺運行的進程（如計時器），默認自動保存也是一種很好的解決方案。

例如，Glow Baby中，後臺運行餵食或睡眠計時器時，用戶還可以瀏覽APP的其他區域。因為這些計時器一般會運行很長一段時間。

此功能還能讓用戶在APP中做其他的任務操作，例如記錄之前換尿布的時間、瀏覽文章、逛論壇等。點擊計時器視圖中的“X”圖標也只是關閉窗口並不會取消正在運行的計時器。

Glow Baby：

• （左）點擊運行計時器視圖中的“X”圖標，在不停止計時器的情況下取消視圖，從而允許用戶繼續使用APP記錄其他類型的事件、參與社區討論、閱讀文章等。
• （中）運行計時器的狀態顯示在屏幕頂部的狀態欄中。
• （右）在計時器暫停時點擊“X”圖標，彈出“放棄”或“取消”按鈕以確認用戶的真正意圖。

請注意：在關閉前保存中間工作或維護正在進行的過程是主動的，但有時可能會與用戶的意圖相反：如果用戶打算通過單擊“X”按鈕取消其選擇，那自動應用這些選擇可能會令人困惑和沮喪。

這就是為什麼還必須要一個單獨的“取消”按鈕 — 給用戶一個出口，而不是強迫他們必須關閉時自動保存。

四、結論

雖然“X”圖標會造成模稜兩可，而且經常導致可用性問題，但它不太可能馬上從所有接口中消失的。設計人員應該注意“X”圖標的多重含義，消除“關閉”和“取消”之間的歧義，並提供確認對話框或自動保存等保護性措施，避免丟失任何用戶正在操作的內容。

若存在疑問，記住：先保存，再退出。

五、小思考

讀上面這篇文章的一個小啟發：

為什麼手機驗證碼登錄微信/淘寶時，驗證碼輸入錯誤，二者都是用的模態對話框提示用戶，而不是用Toast呢？

區分這兩種操作，可以很大程度上能避免丟失用戶已操作的內容。在關閉視圖之前保存用戶的更改，使用文本標籤而不是“X”圖標，並在破壞性操作之前提供確認對話框。

一、讓人迷惑的“X”圖標

很久以前，“X”這個符號是用在地圖上，標記“寶藏的藏身地”。但在今天的數字化界面中，“X”符號不再用來標記位置，而是被用來取消進程，或者關閉某個臨時頁面/彈框。

但是如何確定“X”代表的是“取消” or “關閉”？有的時候可以確定，有時卻模糊不清難以界定。

其實，主要的問題在於“X”圖標缺少了文本標籤。當同一個圖標在不同的界面，卻代表不同的含義，該圖標的可用性就會受到影響，因為用戶判斷不了到底是什麼含義。

二、為什麼要區分“取消”與“關閉”

當用戶單擊/點擊“X”按鈕來關閉模態彈框或視圖時，系統會完全取消該過程並清空之前所有操作，這讓人沮喪，甚至抓狂。因為用戶通常認為“X”圖標表示取消或者關閉，所以區分這兩種可能性對於交互的成功至關重要。

在某些情況下，區分取消 or 關閉並不重要。當一個彈窗佔據你的大部分屏幕時，點擊“X”按鈕（儘可能快地），既可以關閉該模態，也可以取消它可能觸發的任何進程。

但是，如果頁面中包含正在運行的計時器，正在播放的音頻，正在選擇多個選項標籤，或其他類型未保存的內容，那就很有必要說明“X”圖標所代表的意義了。因為用戶可能打算讓計時器或音頻繼續運行，或者希望立刻應用這些選好的選項標籤，或保存正在進行的工作，同時希望關閉該視圖繼續其他操作。

例如：絲芙蘭在結賬過程中，使用模態窗口來展示用戶可以添加到購物車的免費商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品後，該按鈕直接被變成了“ Remove（移除）”，看起來似乎商品已經被添加到購物車中了。

但是，實際上當用戶單擊右上角的“X”圖標後，該商品並不在購物車中。他需要再重複這個步驟，最後點擊“Done（完成）”按鈕，商品才會被加入購物車。

Sephora：單擊右上角的”X”會取消選擇這些試用商品整個過程。用戶必須先單擊“ADD”，再單擊“Done”才能將商品添加到購物車。

三、如何避免丟失用戶正在操作的內容

要避免丟失用戶正在操作的內容，首先需要確定用戶的意圖- 取消 or 關閉 – 並提供明確的選項。有以下幾種方法：

• 主動要求用戶確認他們的意圖
• 使用明確的文本標籤而不是模糊圖標
• 顯示兩個不同的按鈕：“X”圖標表示關閉視圖（可以自動保存頁面內容/操作），而“取消”則代表放棄該過程

1. 要求確認

如果用戶在已經執行操作的模態彈框或頁面視圖中，點擊“X”圖標，UI則可以在關閉視圖之前，直接詢問用戶是否應用該操作（確認其意圖）。此解決方案非常適合會破壞用戶工作的破壞性取消操作。

例如，過濾器視圖可能會被意外關閉，並且關閉會導致用戶丟失其選定的選項。這個問題在移動端界面上很常見，因為過濾器視圖佔用了很大的屏幕空間，這使用戶很難或不能判斷是否已經應用了那些選擇。

為了防止這種潛在的錯誤，在關閉過濾器視圖之前，跟用戶確認是否要應用這些選擇並關閉視圖，抑或是清除這些選擇。

例如：下圖中，當用戶選擇後，點擊“X”圖標時，Lowes 會出現如下確認彈框。

• 左 ：點擊”X”圖標或返回箭頭，所有的選項都會被取消，並將用戶帶回上一個頁面。
• 右：點擊“X”後，出現一個確認對話框，確認用戶是應用還是取消篩選，然後再返回結果列表頁。

同樣，當用戶關閉正在進行的課程時，語言學習應用- Duolingo 會顯示一個確認對話框-課程進行中不能中途離開，除非確認“退出”。至少，該APP向用戶傳達了這一限制，同時他們也可以選擇“取消”來繼續課程。

點擊“X”按鈕將結束當前課程。為了防止出錯，結束前會出現一個確認對話框。

缺點：

1. 雖然確認對話框在避免“X”圖標有歧義方面很有效，但它卻添加了額外的步驟；
2. 用戶在按下“X”圖標之前還是不知道它到底做了什麼，代表什麼意思，因此他們可能會對這個操作感到疑惑。

2. 使用文本標籤

不要完全依賴對話框來讓用戶確認模糊的“X”圖標，而是使用明確的文本標籤。文本可以消除歧義，並清楚地傳達將發生的操作：取消與關閉。

Yelp的篩選頁面在屏幕頂部提供了標有“Cancel（取消）”和“Reset（重製）”的按鈕，在底部提供了一個大大的“Apply（應用）”按鈕。類似地，Etsy中的 Filters視圖提供了“Clear（清除）”和“Done（完成）”兩個按鈕。

注意：Etsy使用“Done”而不是“Apply”，因為過濾器一經選擇就可以被應用，而這裡是關於開關切換與否的建議。

• （左）Yelp：Cancel、Reset 和 Apply 這三個文本標籤既直接又清晰，這樣用戶就不太可能不小心關閉視圖而丟失他們過濾器中的選擇。
• （右）Etsy：Clear 為用戶取消提供了一種清晰的方式。而點擊 Done 則返回到“產品列表”頁，其中的選擇已經應用。

3. 關閉並保存

如果必須使用“X”圖標而不是文本標籤（比如為了以節省空間，或者因為正在遵循團隊的設計語言），請謹慎使用，並在用戶完成前保存操作/內容。

另外，可以提供一個單獨的“取消”按鈕，讓用戶在進程之外有一個緊急出口，並消除“X”在兩種含義之間的歧義。

例如：Gmail會自動保存在非模態窗口中填寫的郵件信息到草稿（Drafts）。這樣的好處是，用戶在需要摺疊或關閉該窗口時，仍然保存原來的內容以便於下次繼續編輯。

將鼠標懸停在消息窗口右上角的“X”圖標上時，會顯示一段提示：Save & Close（保存到草稿並關閉）。

此外，點擊窗口右下角的“垃圾桶”圖標可以刪除該郵件 – 這個圖標離頂部的“保存和關閉”選項很遠，可以防止用戶誤點。

Gmail：Hover 透露，“X”圖標是用於關閉窗口而不是刪除草稿，它允許用戶保存並關閉消息窗口而不會丟失剛剛正在編輯的郵件。

對於長進程或傾向於在後臺運行的進程（如計時器），默認自動保存也是一種很好的解決方案。

例如，Glow Baby中，後臺運行餵食或睡眠計時器時，用戶還可以瀏覽APP的其他區域。因為這些計時器一般會運行很長一段時間。

此功能還能讓用戶在APP中做其他的任務操作，例如記錄之前換尿布的時間、瀏覽文章、逛論壇等。點擊計時器視圖中的“X”圖標也只是關閉窗口並不會取消正在運行的計時器。

Glow Baby：

• （左）點擊運行計時器視圖中的“X”圖標，在不停止計時器的情況下取消視圖，從而允許用戶繼續使用APP記錄其他類型的事件、參與社區討論、閱讀文章等。
• （中）運行計時器的狀態顯示在屏幕頂部的狀態欄中。
• （右）在計時器暫停時點擊“X”圖標，彈出“放棄”或“取消”按鈕以確認用戶的真正意圖。

請注意：在關閉前保存中間工作或維護正在進行的過程是主動的，但有時可能會與用戶的意圖相反：如果用戶打算通過單擊“X”按鈕取消其選擇，那自動應用這些選擇可能會令人困惑和沮喪。

這就是為什麼還必須要一個單獨的“取消”按鈕 — 給用戶一個出口，而不是強迫他們必須關閉時自動保存。

四、結論

雖然“X”圖標會造成模稜兩可，而且經常導致可用性問題，但它不太可能馬上從所有接口中消失的。設計人員應該注意“X”圖標的多重含義，消除“關閉”和“取消”之間的歧義，並提供確認對話框或自動保存等保護性措施，避免丟失任何用戶正在操作的內容。

若存在疑問，記住：先保存，再退出。

五、小思考

讀上面這篇文章的一個小啟發：

為什麼手機驗證碼登錄微信/淘寶時，驗證碼輸入錯誤，二者都是用的模態對話框提示用戶，而不是用Toast呢？

• 微信和淘寶的用戶群體都很龐大，幾乎橫跨所有年齡層。Toast出現又自動消失的交互體驗，用戶會感到不可控，尤其是對大齡、老齡的用戶不夠友好。
• 也有悖於iOS人機交互指南中提到的“用戶控制”這一原則，我想這也是iOS設計語言沒有Toast這種控件的原因之一吧。
• 而模態對話框雖然干擾性較強，但用戶可以隨時控制，在使用過程中是用戶掌握主導權。

補充：Toast 這一控件，原是Android系統的控件。但自Android 5.0 推出Material Design（原質化設計）後，Toast就被弱化，而是將Snackbar 作為官方推薦的控件。如今在 Material Design中更是找不到 Toast的蹤影。主要原因還是 Snackbar 在交互友好性方面比 Toast 要好，例如：支持手勢交互、支持與CoordinatorLayout聯動等。所以講 Toast都過時了呢，應該說 Snackbar了。

原文作者 |Aurora Harley

原文地址 | https://www.nngroup.com/articles/cancel-vs-close/

編譯作者：宛蘇。微信：wansuer；公眾號：宛蘇。

本文由 @宛蘇 翻譯發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議