區(qū)分這兩種操作，可以很大程度上能避免丟失用戶(hù)已操作的內(nèi)容。在關(guān)閉視圖之前保存用戶(hù)的更改，使用文本標(biāo)簽而不是“X”圖標(biāo)，并在破壞性操作之前提供確認(rèn)對(duì)話(huà)框。

一、讓人迷惑的“X”圖標(biāo)

很久以前，“X”這個(gè)符號(hào)是用在地圖上，標(biāo)記“寶藏的藏身地”。但在今天的數(shù)字化界面中，“X”符號(hào)不再用來(lái)標(biāo)記位置，而是被用來(lái)取消進(jìn)程，或者關(guān)閉某個(gè)臨時(shí)頁(yè)面/彈框。

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

其實(shí)，主要的問(wèn)題在于“X”圖標(biāo)缺少了文本標(biāo)簽。當(dāng)同一個(gè)圖標(biāo)在不同的界面，卻代表不同的含義，該圖標(biāo)的可用性就會(huì)受到影響，因?yàn)橛脩?hù)判斷不了到底是什么含義。

二、為什么要區(qū)分“取消”與“關(guān)閉”

當(dāng)用戶(hù)單擊/點(diǎn)擊“X”按鈕來(lái)關(guān)閉模態(tài)彈框或視圖時(shí)，系統(tǒng)會(huì)完全取消該過(guò)程并清空之前所有操作，這讓人沮喪，甚至抓狂。因?yàn)橛脩?hù)通常認(rèn)為“X”圖標(biāo)表示取消或者關(guān)閉，所以區(qū)分這兩種可能性對(duì)于交互的成功至關(guān)重要。

在某些情況下，區(qū)分取消 or 關(guān)閉并不重要。當(dāng)一個(gè)彈窗占據(jù)你的大部分屏幕時(shí)，點(diǎn)擊“X”按鈕（盡可能快地），既可以關(guān)閉該模態(tài)，也可以取消它可能觸發(fā)的任何進(jìn)程。

但是，如果頁(yè)面中包含正在運(yùn)行的計(jì)時(shí)器，正在播放的音頻，正在選擇多個(gè)選項(xiàng)標(biāo)簽，或其他類(lèi)型未保存的內(nèi)容，那就很有必要說(shuō)明“X”圖標(biāo)所代表的意義了。因?yàn)橛脩?hù)可能打算讓計(jì)時(shí)器或音頻繼續(xù)運(yùn)行，或者希望立刻應(yīng)用這些選好的選項(xiàng)標(biāo)簽，或保存正在進(jìn)行的工作，同時(shí)希望關(guān)閉該視圖繼續(xù)其他操作。

例如：絲芙蘭在結(jié)賬過(guò)程中，使用模態(tài)窗口來(lái)展示用戶(hù)可以添加到購(gòu)物車(chē)的免費(fèi)商品。

在以下示例中，單擊“ ADD（添加）”按鈕選擇商品后，該按鈕直接被變成了“ Remove（移除）”，看起來(lái)似乎商品已經(jīng)被添加到購(gòu)物車(chē)中了。

但是，實(shí)際上當(dāng)用戶(hù)單擊右上角的“X”圖標(biāo)后，該商品并不在購(gòu)物車(chē)中。他需要再重復(fù)這個(gè)步驟，最后點(diǎn)擊“Done（完成）”按鈕，商品才會(huì)被加入購(gòu)物車(chē)。

Sephora：?jiǎn)螕粲疑辖堑?#8221;X”會(huì)取消選擇這些試用商品整個(gè)過(guò)程。用戶(hù)必須先單擊“ADD”，再單擊“Done”才能將商品添加到購(gòu)物車(chē)。

三、如何避免丟失用戶(hù)正在操作的內(nèi)容

要避免丟失用戶(hù)正在操作的內(nèi)容，首先需要確定用戶(hù)的意圖- 取消 or 關(guān)閉 – 并提供明確的選項(xiàng)。有以下幾種方法：

• 主動(dòng)要求用戶(hù)確認(rèn)他們的意圖
• 使用明確的文本標(biāo)簽而不是模糊圖標(biāo)
• 顯示兩個(gè)不同的按鈕：“X”圖標(biāo)表示關(guān)閉視圖（可以自動(dòng)保存頁(yè)面內(nèi)容/操作），而“取消”則代表放棄該過(guò)程

1. 要求確認(rèn)

如果用戶(hù)在已經(jīng)執(zhí)行操作的模態(tài)彈框或頁(yè)面視圖中，點(diǎn)擊“X”圖標(biāo)，UI則可以在關(guān)閉視圖之前，直接詢(xún)問(wèn)用戶(hù)是否應(yīng)用該操作（確認(rèn)其意圖）。此解決方案非常適合會(huì)破壞用戶(hù)工作的破壞性取消操作。

例如，過(guò)濾器視圖可能會(huì)被意外關(guān)閉，并且關(guān)閉會(huì)導(dǎo)致用戶(hù)丟失其選定的選項(xiàng)。這個(gè)問(wèn)題在移動(dòng)端界面上很常見(jiàn)，因?yàn)檫^(guò)濾器視圖占用了很大的屏幕空間，這使用戶(hù)很難或不能判斷是否已經(jīng)應(yīng)用了那些選擇。

為了防止這種潛在的錯(cuò)誤，在關(guān)閉過(guò)濾器視圖之前，跟用戶(hù)確認(rèn)是否要應(yīng)用這些選擇并關(guān)閉視圖，抑或是清除這些選擇。

例如：下圖中，當(dāng)用戶(hù)選擇后，點(diǎn)擊“X”圖標(biāo)時(shí)，Lowes 會(huì)出現(xiàn)如下確認(rèn)彈框。

• 左 ：點(diǎn)擊”X”圖標(biāo)或返回箭頭，所有的選項(xiàng)都會(huì)被取消，并將用戶(hù)帶回上一個(gè)頁(yè)面。
• 右：點(diǎn)擊“X”后，出現(xiàn)一個(gè)確認(rèn)對(duì)話(huà)框，確認(rèn)用戶(hù)是應(yīng)用還是取消篩選，然后再返回結(jié)果列表頁(yè)。

同樣，當(dāng)用戶(hù)關(guān)閉正在進(jìn)行的課程時(shí)，語(yǔ)言學(xué)習(xí)應(yīng)用- Duolingo 會(huì)顯示一個(gè)確認(rèn)對(duì)話(huà)框-課程進(jìn)行中不能中途離開(kāi)，除非確認(rèn)“退出”。至少，該APP向用戶(hù)傳達(dá)了這一限制，同時(shí)他們也可以選擇“取消”來(lái)繼續(xù)課程。

點(diǎn)擊“X”按鈕將結(jié)束當(dāng)前課程。為了防止出錯(cuò)，結(jié)束前會(huì)出現(xiàn)一個(gè)確認(rèn)對(duì)話(huà)框。

缺點(diǎn)：

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

2. 使用文本標(biāo)簽

不要完全依賴(lài)對(duì)話(huà)框來(lái)讓用戶(hù)確認(rèn)模糊的“X”圖標(biāo)，而是使用明確的文本標(biāo)簽。文本可以消除歧義，并清楚地傳達(dá)將發(fā)生的操作：取消與關(guān)閉。

Yelp的篩選頁(yè)面在屏幕頂部提供了標(biāo)有“Cancel（取消）”和“Reset（重制）”的按鈕，在底部提供了一個(gè)大大的“Apply（應(yīng)用）”按鈕。類(lèi)似地，Etsy中的 Filters視圖提供了“Clear（清除）”和“Done（完成）”兩個(gè)按鈕。

注意：Etsy使用“Done”而不是“Apply”，因?yàn)檫^(guò)濾器一經(jīng)選擇就可以被應(yīng)用，而這里是關(guān)于開(kāi)關(guān)切換與否的建議。

• （左）Yelp：Cancel、Reset 和 Apply 這三個(gè)文本標(biāo)簽既直接又清晰，這樣用戶(hù)就不太可能不小心關(guān)閉視圖而丟失他們過(guò)濾器中的選擇。
• （右）Etsy：Clear 為用戶(hù)取消提供了一種清晰的方式。而點(diǎn)擊 Done 則返回到“產(chǎn)品列表”頁(yè)，其中的選擇已經(jīng)應(yīng)用。

3. 關(guān)閉并保存

如果必須使用“X”圖標(biāo)而不是文本標(biāo)簽（比如為了以節(jié)省空間，或者因?yàn)檎谧裱瓐F(tuán)隊(duì)的設(shè)計(jì)語(yǔ)言），請(qǐng)謹(jǐn)慎使用，并在用戶(hù)完成前保存操作/內(nèi)容。

另外，可以提供一個(gè)單獨(dú)的“取消”按鈕，讓用戶(hù)在進(jìn)程之外有一個(gè)緊急出口，并消除“X”（關(guān)閉 or 取消）在兩種含義之間的歧義。

例如：Gmail會(huì)自動(dòng)保存在非模態(tài)窗口中填寫(xiě)的郵件信息到草稿（Drafts）。這樣的好處是，用戶(hù)在需要折疊或關(guān)閉該窗口時(shí)，仍然保存原來(lái)的內(nèi)容以便于下次繼續(xù)編輯。

將鼠標(biāo)懸停在消息窗口右上角的“X”圖標(biāo)上時(shí)，會(huì)顯示一段提示：Save & Close（保存到草稿并關(guān)閉）。

此外，點(diǎn)擊窗口右下角的“垃圾桶”圖標(biāo)可以刪除該郵件 – 這個(gè)圖標(biāo)離頂部的“保存和關(guān)閉”選項(xiàng)很遠(yuǎn)，可以防止用戶(hù)誤點(diǎn)。

Gmail：Hover 透露，“X”圖標(biāo)是用于關(guān)閉窗口而不是刪除草稿，它允許用戶(hù)保存并關(guān)閉消息窗口而不會(huì)丟失剛剛正在編輯的郵件。

對(duì)于長(zhǎng)進(jìn)程或傾向于在后臺(tái)運(yùn)行的進(jìn)程（如計(jì)時(shí)器），默認(rèn)自動(dòng)保存也是一種很好的解決方案。

例如，Glow Baby中，后臺(tái)運(yùn)行喂食或睡眠計(jì)時(shí)器時(shí)，用戶(hù)還可以瀏覽APP的其他區(qū)域。因?yàn)檫@些計(jì)時(shí)器一般會(huì)運(yùn)行很長(zhǎng)一段時(shí)間。

此功能還能讓用戶(hù)在APP中做其他的任務(wù)操作，例如記錄之前換尿布的時(shí)間、瀏覽文章、逛論壇等。點(diǎn)擊計(jì)時(shí)器視圖中的“X”圖標(biāo)也只是關(guān)閉窗口并不會(huì)取消正在運(yùn)行的計(jì)時(shí)器。

Glow Baby：

• （左）點(diǎn)擊運(yùn)行計(jì)時(shí)器視圖中的“X”圖標(biāo)，在不停止計(jì)時(shí)器的情況下取消視圖，從而允許用戶(hù)繼續(xù)使用APP記錄其他類(lèi)型的事件、參與社區(qū)討論、閱讀文章等。
• （中）運(yùn)行計(jì)時(shí)器的狀態(tài)顯示在屏幕頂部的狀態(tài)欄中。
• （右）在計(jì)時(shí)器暫停時(shí)點(diǎn)擊“X”圖標(biāo)，彈出“放棄”或“取消”按鈕以確認(rèn)用戶(hù)的真正意圖。

請(qǐng)注意：在關(guān)閉前保存中間工作或維護(hù)正在進(jìn)行的過(guò)程是主動(dòng)的，但有時(shí)可能會(huì)與用戶(hù)的意圖相反：如果用戶(hù)打算通過(guò)單擊“X”按鈕取消其選擇，那自動(dòng)應(yīng)用這些選擇可能會(huì)令人困惑和沮喪。

這就是為什么還必須要一個(gè)單獨(dú)的“取消”按鈕 — 給用戶(hù)一個(gè)出口，而不是強(qiáng)迫他們必須關(guān)閉時(shí)自動(dòng)保存。

四、結(jié)論

雖然“X”圖標(biāo)會(huì)造成模棱兩可，而且經(jīng)常導(dǎo)致可用性問(wèn)題，但它不太可能馬上從所有接口中消失的。設(shè)計(jì)人員應(yīng)該注意“X”圖標(biāo)的多重含義，消除“關(guān)閉”和“取消”之間的歧義，并提供確認(rèn)對(duì)話(huà)框或自動(dòng)保存等保護(hù)性措施，避免丟失任何用戶(hù)正在操作的內(nèi)容。

若存在疑問(wèn)，記?。合缺４?，再退出。

五、小思考

讀上面這篇文章的一個(gè)小啟發(fā)：

為什么手機(jī)驗(yàn)證碼登錄微信/淘寶時(shí)，驗(yàn)證碼輸入錯(cuò)誤，二者都是用的模態(tài)對(duì)話(huà)框提示用戶(hù)，而不是用Toast呢？

• 微信和淘寶的用戶(hù)群體都很龐大，幾乎橫跨所有年齡層。Toast出現(xiàn)又自動(dòng)消失的交互體驗(yàn)，用戶(hù)會(huì)感到不可控，尤其是對(duì)大齡、老齡的用戶(hù)不夠友好。
• 也有悖于iOS人機(jī)交互指南中提到的“用戶(hù)控制”這一原則，我想這也是iOS設(shè)計(jì)語(yǔ)言沒(méi)有Toast這種控件的原因之一吧。
• 而模態(tài)對(duì)話(huà)框雖然干擾性較強(qiáng)，但用戶(hù)可以隨時(shí)控制，在使用過(guò)程中是用戶(hù)掌握主導(dǎo)權(quán)。

補(bǔ)充：Toast 這一控件，原是Android系統(tǒng)的控件。但自Android 5.0 推出Material Design（原質(zhì)化設(shè)計(jì)）后，Toast就被弱化，而是將Snackbar 作為官方推薦的控件。如今在 Material Design中更是找不到 Toast的蹤影。主要原因還是 Snackbar 在交互友好性方面比 Toast 要好，例如：支持手勢(shì)交互、支持與CoordinatorLayout聯(lián)動(dòng)等。所以講 Toast都過(guò)時(shí)了呢，應(yīng)該說(shuō) Snackbar了。

原文作者 |Aurora Harley

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

編譯作者：宛蘇。微信：wansuer；公眾號(hào)：宛蘇。

本文由 @宛蘇 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議