涨姿势![x]是如何成为关闭按钮的 - 优设-UISDC

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

2014/05/19 8671评论区

[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】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/solve-for-x

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里