点击即关闭

[国外文章翻译第2期]

为模态窗口设计可用的逃生舱口

让我们来谈谈伟大的逃脱。这里并不是要说像Houdini的手铐或Thor的彩虹桥一样的魔法，而是非常普通的——一个交互图标，用来将讨厌的弹出窗从你想看的内容上移走。不管是模态窗口、对话窗口、弹出框……任何你想称它们为短暂内容的必备之物，我们需都要建立可以访问的逃生舱口。（译者：这里逃生舱口应该是指可以随时离开弹出窗口的方法，比如关闭/取消按钮）

视觉设计

常见的UX的退出模式非常简单，你们看到我在那里做了什么？[X]的历史可以追溯到20世纪70年代的计算机设计。它第一次出现可能是在Atari TOS菜单-与键盘字母和符号相关联的操作列表。[X]是退出的命令。之后被NeXT公司所用，它启发了Windows，随着1995年Windows在世界范围内的广泛应用，它成为了close的标准符号。所有这些都是说，没有必要这里重新发明轮子，只要使用全世界每个人都期待的符号。

无障碍设计

我们将从基础开始—始终应该提供[x]，即使用户可以单击背景、滑动或使用本机返回按钮来关闭模态窗口。

图标 vs 字体

设计一个图标，而不是使用一种印刷字体，这样可以和你的其它图标集保持一致。它应该被清楚地理解为一个[X]，所有四个顶点明显分开。我个人倾向于90度角设计，并且调整粗细匹配图标集。

高对比度 vs 低对比度

颜色应该是中性的，并且符合a11y推荐的4:1对比率。当然，当[X]几乎是灰白色时，弹出窗口的表现会好得多，但我的朋友们，这就是我们说的深色模式。通过使关闭按钮[X]几乎不可见，强制性的不让用户逃脱来引导用户完成主要操作。这将导致用户群受挫和业务出现误报。

包含 vs 独立

这个图标应该被包含进来，来指示目标可点区域的大小，将交互图标和静态图标区分开，尤其是在位置非常临近的情况下。 

• 如果这个图标和容器的大小比最小可点击区域（48x48 dp/pt）还小，需要将可点击目标区域设置大一些，比视觉上看到的按钮要大，同时不要在上面叠加其它交互元素。

• 如果这个图标位于交互栏中，比如标题导航，那么该栏已经为你创建了这个可点击区域空间——万岁！

位置

弹出框的内容是可选的，它不应该感觉被阻挡，并且应该很容易将关闭识别为弹出窗的相关操作。尽管大多数的Windows软件是在右上角开始，但是今天包括苹果的HIG，谷歌的Marterial Design都将图标导航放在左上角。当涉及到模态窗口时，这两个系统都没有给出明确的指示。

指示要点

模态位置

大多数模态的内容是可选的，除了警告，因此他们不应该感觉被阻挡。尽管传统的模态窗口会出现在屏幕的中间，但现在也有一种新趋势将模态窗口放置在屏幕下方使模态看起来阻挡更少。根据最有可能出现在模态中的内容，你可以选择它出现的方式，侧边出现或其它。

 底部 vs 中间

[x] 位置

内部 vs 叠加 vs 外部

内部-关闭按钮在模态窗口内部。这种方式可以最清楚的将[X]和模态窗口联系起来，并且和扁平化设计审美相配，然而，它增加了内部标题部分布局的复杂性

叠加-关闭按钮和模态窗口有重叠。连续直线上的断点能引起人们对[X]的主语，但是它带有独特的视觉设计风格，增加了视觉的复杂性，也会让人感觉不够精致。

外部-关闭按钮在模态窗口的外面。这理清了模态的设计，但是[X]可能与下面的UI混淆。

右边 vs 左边 Icons by Meg Robichaud

结束(右边) -将[X]放在右边对于习惯用右手操作的适应性更好，同时也不会遇到和静态图标的对齐问题。

开始(左边)-将[X]放在左边遵循了当前导航的样式，但是由于和左对齐的图标临近，增加了模态的垂直高度，并且它是大屏手机的另一个点击目标。

这适用于LTR语言。“开始”是用户开始阅读内容的地方，结束时他们停止的地方。在LTR语言中你应该将它翻转到左边。

最优安排

现在将所有内容放到一起——我们现在的最佳排列是底部对齐模态窗口，其中包括一个放在内部右上角图标化的[X]按钮。

只有文字、图片和图标

总结

我承认你也可以使用水平堆叠的两个按钮，其中一个是“关闭”。这是一个很好的选择，同时被Material Design推荐，但如果你不想让关闭按钮突出，被误触，或者你在本地化翻译上遇到问题，使用[X]按钮也是一个很好的通用解决方案。