概述：区分这两个动作对于避免丢失用户的工作至关重要。在关闭视图之前保存更改，应该使用文本标签而不是X图标，并在警示（destructive）操作之前提供确认对话框。
很久以前，符号X意味着“这就是宝藏被埋葬的地方。”而在今天的数字界面中，X不再用来标记该位置，而是作为用户取消流程或关闭临时屏幕的一种方式。如何确定X是取消还是关闭？不幸的是，有时你无法确认。
主要问题在于X图标通常缺少文本标签。当图标在不同界面的上下文环境中表示多个含义时，图标可用性会受到影响，因为用户无法根据任何单一解释作出操作判断。
避免丢失用户的工作
当用户打算通过单击X按钮来关闭对话框或视图时，系统会完全取消进程并清除所有工作，往好了说这会让令人沮丧，往坏了说就是令人抓狂。X图标通常被用户识别为取消或关闭，但正确区分这两种可能性对于交互的成功至关重要。
在某些情况下，取消和关闭之间的区别无关紧要。当一个弹出窗口占据屏幕的大部分区域时，点击X按钮会关闭该对话框并可能取消它触发的任何进程。但是，如果屏幕包含正在运行的计时器、正在播放的音频、多个已经选定的筛选项、或是其他类型的未保存工作，则正确解释X图标代表的内容就变得非常重要了。你可能打算离开该计时器或正在运行的音频、应用这些选定的筛选项或保存正在进行的工作，同时希望关闭该视图以继续其他一些相关活动。
例如，丝芙兰网站的结账过程使用了弹出窗口来呈现用户可以添加到购物车的免费样品。在下面的示例中，通过单击下面的Add按钮可以正好选择该样品; 该操作导致Add按钮被Remove按钮替换，使得它看起来样品好像已经被添加到了购物车中。但是，当用户通过单击X图标而不是Done按钮关闭对话框时，会发现该样品并不在购物车中，需要从新再次添加它。
[图片上传失败...(image-6e36b2-1568608814498)]
丝芙兰网站：尽管看起来样品已经被添加到购物车中，因为添加按钮已经被替换成了移除按钮，但关闭对话框（通过单击右上角的X图标）则取消了选择样品的整个过程。要想将项目真正添加到购物车，用户必须先单击添加，然后再单击完成按钮才能完成该操作。
为了避免丢失用户的操作，系统需要决定用户的意图，取消（cancel）还是关闭（close），来提供清晰的选择。
此目标可以通过以下一项或多项来完成：
- 要求用户确认他们的意图
- 使用明确的文本标签而不是意思模糊的图标
- 呈现两个不同的按钮：X用于关闭视图，取消按钮用于放弃整个操作过程
1.要求用户确认他们的意图
如果用户在已经执行操作的对话框或中间视图上按下X图标，则用户界面可以通过在关闭视图之前直接询问是否应用该操作来确认其意图。此解决方案非常适用于会破坏用户工作的取消操作**。在这里，“请求原谅比征求许可更好”的这句古老格言可绝对不适用，在做出破坏性行动之前总是要求确认。
例如，筛选器视图经常会意外关闭，并且该操作会导致用户丢失其工作。这个问题在移动界面上尤为严重，因为筛选器视图通常会占用屏幕空间的大部分，因此很难或无法判断是否已应用了选择。
为了防止潜在的错误，请询问关闭筛选器视图的用户是否打算应用筛选并关闭视图或清除其选择。例如，当用户在应用她的选择之前尝试关闭筛选器屏幕时，Lowes移动应用显示了确认对话框。
image
Lowes移动应用程序：点击X按钮或Back箭头可以重置任何选择并将用户带回到之前的操作界面。图右：点击X后，会出现一个确认对话框，以检查用户是否打算在返回结果列表之前应用或取消筛选优化。
同样，当用户试图关闭正在进行的课程时，语言学习应用程序 Duolingo 则显示了一个确认对话框：课程无法部分完成，必须全部完成或取消。至少，该应用程序将此约束传达给了用户，并为他们提供了返回课程以保持进度的选项。
image
Duolingo：单击X按钮将结束当前课程并放弃任何进度。为了防止错误，该应用程序提供了一个确认对话框。
虽然确认对话框可以有效消除X图标的模糊含义，但它们会增加额外的步骤; 而且，用户在按下它之前不知道X做了什么，因此，用户可能会担心他们的操作后果。
2. 使用明确的标签
你可以使用具有明确文本标记的按钮来取代模棱两可的X图标，而不是在用户不知不觉中丢失所有选择之前依靠确认对话框来捕获用户。文本可以减少歧义，并清楚地传达将要执行的操作：取消还是关闭。
Yelp移动应用程序的筛选视图在屏幕顶部提供了标有Cancel和Reset的按钮，在底部提供了一个大的Apply按钮。同样，Etsy移动应用程序中的筛选视图提供了标有Clear和Done的独立按钮。（注意：Etsy使用Done而不是Apply，因为筛选在被选择后被立即应用了，建议用于切换开关。）
[图片上传失败...(image-54525b-1568608814498)]
（左图）Yelp移动应用程序：Cancel，Reset和Apply的文本标签直接且清晰，使用户不太可能无意中关闭视图并丢失其筛选选项。（右图）Etsy移动应用程序：文本标签Clear给了用户取消选择的明确方式（原谅双关语）。完成链接则返回到产品列表页面，并且已经应用了选择。
3. 关闭并保存
如果必须使用X图标而不是文本（为了节省空间或因为你需要遵循样式指南），请小心谨慎并保存已完成的任何中间工作。此外，提供一个独立的取消按钮，为用户提供紧急退出流程，并消除X图标（关闭和取消）的两种可能含义之间的歧义。
例如，Gmail会自动保存在子窗口中撰写的邮件草稿。这种做法允许用户在需要时折叠或关闭窗口，同时仍然保存他们的进度。将鼠标悬停在消息窗口右上角的X图标上会显示一个工具提示，确认草稿将被保存并关闭。取消也仍然可用（使用消息窗口底部的Delete垃圾桶图标，远离顶部的保存并关闭选项以帮助防止错误）。
[图片上传失败...(image-5f0a24-1568608814498)]
Gmail：Hover显示，X图标用于解除窗口而不是删除草稿，允许用户保存并关闭消息窗口而不会丢失正在进行的工作。
默认情况下，对于倾向于在后台运行的长进程或普通进程，例如计时器，保存也可以是一个很好的解决方案。例如，Glow Baby移动应用程序允许用户在后台运行喂食或睡眠计时器时浏览应用程序的其他区域。因为这些计时器可以运行很长一段时间，此功能允许用户完成应用程序中的其他任务，例如记录过去的尿布更改或浏览文章和论坛。点击计时器视图中的X图标只需关闭窗口而不取消正在运行的计时器。
image
Glow Baby应用程序：（左图）在运行计时器视图中点击X图标，在不取消计时器的情况下解除了视图，从而允许用户继续使用该应用程序记录其他类型的事件，参与社区讨论、阅读文章等等。（中间图）正在运行的计时器的状态显示在屏幕顶部的横幅中。（右图）在计时器暂停时按X会出现Discard或Cancel按钮以检测用户的意图。
请注意，在关闭之前保存中间工作或维持正在进行的进程是主动的，但有时可能与用户的意图相反：如果用户打算通过单击X按钮取消他们的选择，则自动应用这些选择可能会令人困惑和令人沮丧。这就是为什么还必须包含一个单独的取消按钮，为用户提供一个离开的选择而不是强迫他们只能保存和关闭视图。
总结
虽然X图标意思模糊并且经常会导致可用性问题，但它不太可能很快从所有界面中消失。设计人员应该了解X图标的多重含义，并消除关闭和取消之间的歧义，以及提供安全措施，如确认对话框或自动保存，以避免丢失任何用户的工作。
记住，如果有疑问，使用保存按钮，然后退出。**
英文原文：地址
原文作者：Aurora Harley
编译作者：@iris0327
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。
image
网友评论