UI设计师如何设计最常见的关闭按钮

阅读本文后，您将了解到：

关闭设计历史按钮“x”

设计的“x”音符

关闭按钮设计的最佳案例

“X”图标是应用程序中非常常见的交互建议，它可以从内容中关闭恼人的弹出窗口。

模式、对话框和弹出窗口都是内容交互中必不可少的操作元素，所以我们只需要建立一个合理的退出模式。

视觉设计

在用户体验通用设计模式下，“e-x-going”非常简单。你可以看到，我故意在“电子商务”一词中突出“x”。

符号“x”的历史可以追溯到20世纪70年代的计算机设计语言。它首先出现在雅达利TOS(译者注：雅达利TOS是雅达利电脑操作系统，于1993年停产)，而“x”是退出命令。

后来它被“下一个”使用，这启发了视窗的设计，并在1995年随着视窗在全世界的大规模使用而成为关闭的标准标志。讲述这段历史的目的是表明没有必要重建车轮，使用世界上每个人都能理解的符号更合适。

1. 无障碍设计

我们应该总是在一些需要关闭的界面中提供“X”，即使用户可以通过点击背景、滑动或使用电话后退按钮来关闭界面。

图标和字体

设计是一个图标，而不是字体。它应该被清楚地理解为一个“X”而不是歧义。就我个人而言，我更喜欢用90度的夹角和四个等长的角度来关闭图标设计。

高对比度和低对比度

其颜色应保持中性，并符合a11y项目推荐的4 : 1对比度。当然，当“x”几乎是灰色时，它可能对弹出框的视觉性能影响最小。

通过使“X”几乎不可见，用户被迫并被诱导以伪装的形式执行主要操作。这就是我们常说的设计的阴暗面。这可能会让想关闭弹出窗口的用户感到沮丧，这对于体验来说是不可取的。

带外框和不带外框的三角形

图标最好包含一个轮廓，以指示可以点击的目标的相对大小，以便交互式图标可以与非交互式图标区分开来，特别是当两个图标的形状非常相似时。

如果图标和容器的大小小于最小点击区域的大小(48x48dp/pt)，点击范围需要设置为大于按钮的视觉效果，并且不与其他交互元素重叠。

如果图标在交互式导航栏中，例如标题导航，那么这个位置已经为图标创建了一个可点击的空间，并且不需要另一个设计

位置

弹出窗口的内容不应该成为用户进程的障碍，关闭操作应该足够明显。尽管大多数视窗软件总是把关闭操作放在右上角，但今天苹果和谷歌的一些规范把关闭图标放在左上角。

谈到模式，两个系统都没有明确的方向。接下来，我将逐一分析模态弹出窗口的最佳设计。

增量模式界面图标位置

1. 模态位置

除了警告弹出窗口之外，大多数模态内容都是不必要的，因此它们可以被适当地削弱。尽管通常的做法是将模态弹出窗口直接放在屏幕的中间，但是有一种新的趋势是通过将模态弹出窗口放在屏幕的底部来使它们看起来不那么强烈。

三角形底部对中间

2. 「x」的摆放位置

内部vs重叠vs外部

内部：出现在模式弹出窗口内。这种安排可以清楚地与情态内容联系起来，而且在形式上也很美。缺点是它可能会增加模式中标题布局的复杂性。

重叠：出现在模式弹出窗口的边缘。连续边缘中间的不连续性最能吸引人们对“X”图标的注意，但其独特的视觉风格增加了视觉的复杂性，感觉并不那么微妙。

外部：出现在模式弹出窗口之外。这使得模态窗口整洁，但关闭图标可能会与下面的用户界面混淆。

德尔塔右对左。这张照片是梅格罗比丘的。

结束(右)将“X”放在右边比放在左边更好，因为它更适合右手的拇指，并且不会与左边的示意图图标冲突。

当开始(左)将“x”放在左侧时，应遵循当前的导航模式，但这会增加弹出窗口的垂直高度，因为它不能太靠近原理图图标。

注意：这是基于LTR的词序(这里LTR可以说是从左到右阅读的词序)，“开始”是用户开始阅读内容的地方，“结束”是用户停止阅读的地方。

最佳配置

现在把所有东西放在一起，一个弹出窗口在底部对齐，包括右上角的“X”图标。

只有三种文字、图片和图标。

摘要

我必须承认，你可以尝试使用两个文本按钮，其中一个是“关闭”这也是一个很好的选择，也是谷歌规范推荐的。然而，如果你不想如此显著地关闭它并担心意外点击或多语言问题，“X”按钮将是一个很好的通用解决方案。