[x]在UI和交互界面中是一個必不缺少的元素。時至今日，幾乎每一個窗口的邊角上都會有[x]，它是一個強(qiáng)大的符號，關(guān)閉窗口、彈出框、選項卡和其他任何塞滿你屏幕的視覺元素的必經(jīng)之路。

更多UI設(shè)計干貨，請戳：
《設(shè)計師福利！18套免費(fèi)的UI組件和線框圖工具打包下載》
《設(shè)計師基礎(chǔ)知識：你知道線框圖和原型有啥區(qū)別嗎》

喜歡探索UI設(shè)計史？不妨讀讀下面這篇：
《超贊！每個設(shè)計師都應(yīng)該了解的IOS編年史》

按下[x]來關(guān)閉某個界面，已經(jīng)成為當(dāng)今每一個與計算機(jī)、網(wǎng)絡(luò)、軟件打交道之人的本能，今天的[x]確已成為GUI設(shè)計的一個標(biāo)準(zhǔn)元素。但是當(dāng)我們回溯GUI的發(fā)展歷程的時候，它似乎并非一直如此。

那么，[x]是從什么時候什么地方開始成為GUI的標(biāo)準(zhǔn)配置的呢？

要回溯[x]的發(fā)展歷程，不妨從我們最熟悉的微軟開始吧。使用windows的時候，你總能在屏幕的窗口上找到右上角的[x]。

然而，windows 1.0上，關(guān)閉窗口的按鈕并非[x]

windows 1.0

windows 2.0也不是。

windows 2.0

那么 windows 3.0呢？

windows 3.0

實(shí)際上，直到windows 95的時候，[x]才真正出現(xiàn)在windows系統(tǒng)的界面上。這個時候的關(guān)閉按鈕和最大化、最小化一同出現(xiàn)在窗口的右上角上，這一經(jīng)典的窗口操作組合就此定型。

Windows 95

有證據(jù)證明，這一設(shè)計其實(shí)是后期加上去的。早期開發(fā)階段的windows 95（開發(fā)代號：芝加哥）中，最大化和最小化按鈕是經(jīng)過重新設(shè)計的，但是[x]關(guān)閉按鈕和以往一樣還置于頂欄的左側(cè)。

Windows Chicago（1993年8月）

那么，是誰在最后一刻改變了這一設(shè)計呢？我不知道。但是這個人做出的這個設(shè)計，一直流傳到了今天，并且影響了大量的系統(tǒng)和軟件的GUI設(shè)計。

蓋茨希望能讓每一張辦公桌和每一個家庭都用上電腦。所以，從windows 3.0開始，微軟就會基于可用性反饋對GUI設(shè)計進(jìn)行調(diào)整，進(jìn)而有了改變大局的windows 95。

它真的有用！windows 95在競爭中打敗了其他的操作系統(tǒng)，獲得了世界上絕大多數(shù)的企業(yè)和家庭的認(rèn)可。但是此刻我的目標(biāo)并不是要告訴你[x]是什么時候變的流行的，而是要告訴你，它是如何成為UI設(shè)計中的重要組成部分的。

我們能不能在GUI設(shè)計中找到更多的和私用[x]的案例呢？

能。但是同時期的Mac OS確實(shí)沒有使用[x]來作為關(guān)閉的標(biāo)識，這一設(shè)計是到MacOSX的時代才啟用的，并且只有當(dāng)你將鼠標(biāo)懸停在紅色按鈕上的時候，[x]才會顯現(xiàn)。

在windows 95發(fā)布之后，Linux的GUI設(shè)計中也開始使用[x]了。

X Window System

聊了這么多GUI，我們不妨從GUI的誕生之日開始看看吧。在Windows、Mac OS和Linux誕生之前，第一個充分利用了“桌面隱喻”的圖形化界面，就是傳說中的施樂公司的8010信息系統(tǒng)。

Xerox 8108

被稱為施樂之星的Xerox 8108，還被人稱為“ViewPoint”和“GlobalView”，可見大家對它的期待和認(rèn)可。Xerox 8101這款機(jī)型是從1977年開始研發(fā)，并且直到1981年才正式以“Dandelion”的名字開賣。它所的GUI系統(tǒng)啟發(fā)了喬布斯和他的團(tuán)隊，并且運(yùn)用在隨后的Lisa和Macintosh項目中。喬布斯的團(tuán)隊于1979年12年帶著團(tuán)隊核心成員在施樂的研發(fā)中心看到了開發(fā)中的施樂之星和GUI系統(tǒng)，甚至仔細(xì)觀察過這套交互界面的實(shí)現(xiàn)細(xì)節(jié)，這也使得他隨后的產(chǎn)品取得了極大的成功。

雖然，這個時候還沒有[x]。

施樂之星

回想一下尚且沒有[x]的早期的蘋果操作系統(tǒng)吧。

Mac OS 1

1983年，在IBM最早發(fā)布的Visi交互界面中，同樣沒有找到[x]的存在。

Visi

1984年，Digital Research基于DOS研發(fā)的GEM系統(tǒng)中，我們依然無法發(fā)現(xiàn)[x]的存在。

GEM

但是，這是什么？難道是……

Atari TOS 1.0

這是源自Atari TOS 1.0的截圖。1985年，當(dāng)GEM系統(tǒng)被移植到到Atari ST上成為Atari分支的時候，最早的[x]關(guān)閉按鈕在這里被發(fā)現(xiàn)。為什么是這個時候，在這個地方？

這可能是Atari這家美國公司從日本文化中借鑒過來的另一視覺元素吧。至于他們從日本學(xué)過來的第一個東西，就是他們公司的名字了，Atari原本就是從日本游戲Go中借鑒來的，意思是“命中目標(biāo)”。而用[x]和[o]分別表示關(guān)閉和開啟，則應(yīng)該是來自日本的兩種標(biāo)識符“batsu”和“maru”。

Maru (o)和 Batsu (x)

Batsu，也就是[x]，原本是用來表示不正確的，也可以表示為錯誤、壞的和攻擊。而Maru，也就是[o]意思是表明正確，真是，好的，完整的，甚至可以理解為珍貴的。兩者還是兩種常見的手勢，兩手交叉在胸前表示Batsu，雙手舉國頭頂相握而表示Maru。

PS手柄

另外一個使用bats和maru的例子就是PS系列游戲機(jī)的游戲手柄，[x]和[o]分別用來表示yes和no。當(dāng)然，以上的一切都是我的理論和猜想。從未出現(xiàn)在設(shè)計現(xiàn)場的我永遠(yuǎn)無法證實(shí)這一切。但是，我想這一切是說得通的。以防萬一，我還是繼續(xù)向著更加久遠(yuǎn)的歷史推進(jìn)，看看我們還能發(fā)現(xiàn)什么。

1965年，由Ken Thompson編寫的，也是現(xiàn)存最早的文本編輯器Quick Editor（QED），就使用了快捷鍵命令[q]、[e]、[c]和[ESC]來關(guān)閉和離開程序，但是[x]并未成為其中的一員。不僅如此，此后直到1971年，基于QED研發(fā)的其他的文本編輯器都未曾引入這一選項。值得一提的是，Ken Thompson后來曾協(xié)助UNIX的研發(fā)，為現(xiàn)代操作系統(tǒng)、軟件做出了不可磨滅的貢獻(xiàn)。

那么，后來的著名編輯器VI、VIM、EMACS和EDLIN呢？直到80年代，他們都未曾使用[x]來關(guān)閉程序。[x]頂多就是作為刪除字符的快捷鍵存在于編輯器中，而非關(guān)閉軟件。

[x]而不僅僅是一個字母，它更是一個實(shí)實(shí)在在的符號，它在圖形界面和交互設(shè)計中代表這“關(guān)閉”這一行為。[x]在這個領(lǐng)域的首秀，極有可能就是在Atari TOS系統(tǒng)上，并且是源自日本文化的影響。得益于windows 95發(fā)布前最后一分鐘的修改，[x]紅遍世界，成為了標(biāo)準(zhǔn)。

The End。

[x]

原文地址：Medium
優(yōu)設(shè)網(wǎng)翻譯：@陳子木
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量69萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：