涨姿势！[x]是如何成为关闭按钮的

[x]在UI和交互界面中是一个必不缺少的元素。时至今日，几乎每一个窗口的边角上都会有[x]，它是一个强大的符号，关闭窗口、弹出框、选项卡和其他任何塞满你屏幕的视觉元素的必经之路。

更多UI设计干货，请戳：
《设计师福利！18套免费的UI组件和线框图工具打包下载》
《设计师基础知识：你知道线框图和原型有啥区别吗》

喜欢探索UI设计史？不妨读读下面这篇：
《超赞！每个设计师都应该了解的IOS编年史》

按下[x]来关闭某个界面，已经成为当今每一个与计算机、网络、软件打交道之人的本能，今天的[x]确已成为GUI设计的一个标准元素。但是当我们回溯GUI的发展历程的时候，它似乎并非一直如此。

那么，[x]是从什么时候什么地方开始成为GUI的标准配置的呢？

要回溯[x]的发展历程，不妨从我们最熟悉的微软开始吧。使用windows的时候，你总能在屏幕的窗口上找到右上角的[x]。

然而，windows 1.0上，关闭窗口的按钮并非[x]

windows 1.0

windows 2.0也不是。

windows 2.0

那么 windows 3.0呢？

windows 3.0

实际上，直到windows 95的时候，[x]才真正出现在windows系统的界面上。这个时候的关闭按钮和最大化、最小化一同出现在窗口的右上角上，这一经典的窗口操作组合就此定型。

Windows 95

有证据证明，这一设计其实是后期加上去的。早期开发阶段的windows 95（开发代号：芝加哥）中，最大化和最小化按钮是经过重新设计的，但是[x]关闭按钮和以往一样还置于顶栏的左侧。

Windows Chicago（1993年8月）

那么，是谁在最后一刻改变了这一设计呢？我不知道。但是这个人做出的这个设计，一直流传到了今天，并且影响了大量的系统和软件的GUI设计。

盖茨希望能让每一张办公桌和每一个家庭都用上电脑。所以，从windows 3.0开始，微软就会基于可用性反馈对GUI设计进行调整，进而有了改变大局的windows 95。

它真的有用！windows 95在竞争中打败了其他的操作系统，获得了世界上绝大多数的企业和家庭的认可。但是此刻我的目标并不是要告诉你[x]是什么时候变的流行的，而是要告诉你，它是如何成为UI设计中的重要组成部分的。

我们能不能在GUI设计中找到更多的和私用[x]的案例呢？

能。但是同时期的Mac OS确实没有使用[x]来作为关闭的标识，这一设计是到MacOSX的时代才启用的，并且只有当你将鼠标悬停在红色按钮上的时候，[x]才会显现。

在windows 95发布之后，Linux的GUI设计中也开始使用[x]了。

X Window System

聊了这么多GUI，我们不妨从GUI的诞生之日开始看看吧。在Windows、Mac OS和Linux诞生之前，第一个充分利用了“桌面隐喻”的图形化界面，就是传说中的施乐公司的8010信息系统。

Xerox 8108

被称为施乐之星的Xerox 8108，还被人称为“ViewPoint”和“GlobalView”，可见大家对它的期待和认可。Xerox 8101这款机型是从1977年开始研发，并且直到1981年才正式以“Dandelion”的名字开卖。它所的GUI系统启发了乔布斯和他的团队，并且运用在随后的Lisa和Macintosh项目中。乔布斯的团队于1979年12年带着团队核心成员在施乐的研发中心看到了开发中的施乐之星和GUI系统，甚至仔细观察过这套交互界面的实现细节，这也使得他随后的产品取得了极大的成功。

虽然，这个时候还没有[x]。

施乐之星

回想一下尚且没有[x]的早期的苹果操作系统吧。

Mac OS 1

1983年，在IBM最早发布的Visi交互界面中，同样没有找到[x]的存在。

Visi

1984年，Digital Research基于DOS研发的GEM系统中，我们依然无法发现[x]的存在。

GEM

但是，这是什么？难道是……

Atari TOS 1.0

这是源自Atari TOS 1.0的截图。1985年，当GEM系统被移植到到Atari ST上成为Atari分支的时候，最早的[x]关闭按钮在这里被发现。为什么是这个时候，在这个地方？

这可能是Atari这家美国公司从日本文化中借鉴过来的另一视觉元素吧。至于他们从日本学过来的第一个东西，就是他们公司的名字了，Atari原本就是从日本游戏Go中借鉴来的，意思是“命中目标”。而用[x]和[o]分别表示关闭和开启，则应该是来自日本的两种标识符“batsu”和“maru”。

Maru (o)和 Batsu (x)

Batsu，也就是[x]，原本是用来表示不正确的，也可以表示为错误、坏的和攻击。而Maru，也就是[o]意思是表明正确，真是，好的，完整的，甚至可以理解为珍贵的。两者还是两种常见的手势，两手交叉在胸前表示Batsu，双手举国头顶相握而表示Maru。

PS手柄

另外一个使用bats和maru的例子就是PS系列游戏机的游戏手柄，[x]和[o]分别用来表示yes和no。当然，以上的一切都是我的理论和猜想。从未出现在设计现场的我永远无法证实这一切。但是，我想这一切是说得通的。以防万一，我还是继续向着更加久远的历史推进，看看我们还能发现什么。

1965年，由Ken Thompson编写的，也是现存最早的文本编辑器Quick Editor（QED），就使用了快捷键命令[q]、[e]、[c]和[ESC]来关闭和离开程序，但是[x]并未成为其中的一员。不仅如此，此后直到1971年，基于QED研发的其他的文本编辑器都未曾引入这一选项。值得一提的是，Ken Thompson后来曾协助UNIX的研发，为现代操作系统、软件做出了不可磨灭的贡献。

那么，后来的著名编辑器VI、VIM、EMACS和EDLIN呢？直到80年代，他们都未曾使用[x]来关闭程序。[x]顶多就是作为删除字符的快捷键存在于编辑器中，而非关闭软件。

[x]而不仅仅是一个字母，它更是一个实实在在的符号，它在图形界面和交互设计中代表这“关闭”这一行为。[x]在这个领域的首秀，极有可能就是在Atari TOS系统上，并且是源自日本文化的影响。得益于windows 95发布前最后一分钟的修改，[x]红遍世界，成为了标准。

The End。

[x]

原文地址：Medium
优设网翻译：@陈子木
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量69万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：