「X」按钮的设计，也可以是门学问。

读完这篇文章，你会知道：关闭按钮「x」的设计历史「x」关闭按钮设计的最佳案例「x」图标是应用中非常常见的互动暗示，可以从内容上关闭烦人的弹出窗口。无论是模式、对话框还是弹出窗口，都是内容交互中必不可少的操作元素，我们只需要建立合理的退出方式。ux通用设计模式中的视觉设计「退出」（e-x-iting）很简单，你可以看到我在exiting这个词中刻意突出「x」。「x」这个符号的历史可以追溯到20世纪70年代的计算机设计语言。它可能首次出现在Ataritos菜单中(译者注:Ataritos是雅达利的计算机操作系统，1993年停产)，「x」是退出的命令。它后来被「NeXT」所用，它给Windows的设计带来了灵感，并于1995年成为Windows全球大规模使用的标准符号。谈论这段历史的目的是解释没有必要重建轮子，使用世界上每个人都能理解的符号更合适。 1.我们应该始终在一些需要关闭的界面中提供无障碍设计「x」，即使用户可以单击背景，滑动或使用手机返回按钮关闭界面。△与使用字体相比，图标和字体应该被清楚地理解为一个图标，而不是使用字体。「x」，而不是模棱两可。就我个人而言，我更喜欢关闭图标设计，夹角为90度，四个角长度相等。△ 高对比度和低对比度的颜色应保持中立，符合A11y项目推荐的4个项目（译者注：您可以自己谷歌了解项目的具体细节） :1对比度。当然，当「x」当它几乎变成灰白色时，可能对弹出框的视觉表现影响最小。通过使得「x」几乎看不见，伪装强迫和诱导用户执行主要操作，这就是我们常说的设计阴暗面，这可能会让想要关闭弹出窗口的用户感到沮丧，这对体验是不可取的。△ 外框和无外框图标应包含外框，以暗示可点击的目标的相对大小，以区分可交互图标和不可交互图标，特别是当两个图标形状非常相似时。如果图标和容器的尺寸小于最小点击区(48x48dp/pt），在不与其他交互元素重叠的情况下，需要将点击范围设置为大于按钮的视觉效果。如果该图标在一个交互式导航栏中，如标题导航，则该位置为图标创建了一个点击空间，无需单独设计。位置弹出内容不应成为阻碍用户流程的障碍，关闭操作应足够突出。尽管大多数windows软件一直在右上角关闭，但今天苹果 以及Google的一些规范，将关闭图标放在左上角。当涉及到模态时，这两个系统都没有明确的方向。接下来，我将尝试逐一分析模态弹出窗口的最佳设计。△ 模态界面图标位置 1.除了警告弹出窗口外，模态位置的大部分内容都是不必要的，可以适当弱化。虽然一般的做法是直接在屏幕中间出现模态弹出窗口，但现在有一种新的趋势，通过将模态弹出窗口放在屏幕底部，使它们看起来不那么强烈。△ 底部vs中间 2.「x」的摆放位置△ 内部vs交叠vs外部内部:出现在模态弹出窗口内部。这种布局可以清晰地与模式内容联系在一起，在布局上也很漂亮；缺点是可能会增加模式中标题布局的复杂性。重叠：出现在模态弹出窗的边缘。连续边缘中间的间歇最能引起人们对「x」注意图标，但其独特的视觉风格，增加了视觉复杂性，感觉不那么精致。外部:出现在模态弹出窗外。这使得模式窗口非常干净，但关闭图标可能会与下面的UI混淆。△ 右边vs左边。来自MegRobichaud结束(右)的图片「x」把它放在右边比把它放在左边好，因为它对人的右手拇指有更好的适应性，而且不会与左边的示意图标发生冲突。将开始(左边)「x」当放置在左侧时，应遵循当前的导航模式，但它增加了弹出窗口的垂直高度，因为它不能太接近示意图标。注:这是基于LTR语序(译者注:LTR可以说是从左到右阅读语序)，「开始」是用户开始阅读内容的地方，「结束」是用户停止阅读的地方。现在最好的配置是把所有的东西都整合在一起，一个对齐在底部的弹出窗口，包括右上角的一个「x」图标。只有三种情况：文本、图片和图标。总而言之，我必须承认，你也可以尝试使用两个文本按钮，其中一个是「关闭」。这也是谷歌标准推荐的一个不错的选择，但如果你不想关闭它，担心意外点击或多语言问题，「x」按钮将是一个很好的通用解决方案。