您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
 
     
   
 订阅
  捐助
[X]是如何成为关闭按钮的
 
作者 陈子木,火龙果软件 发布于:2014-06-24
 

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

按下[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]红遍世界,成为了标准。

   
次浏览       
相关文章

谷歌教你如何构建一个优秀的移动网站
如何高效地管理网站静态资源
高性能网站建设的最佳实践
闲话网站左侧导航的实现
 
相关文档

网站建设方案流程
网站建设css教程
企业网站建设与推广
网站建设方案书
相关课程

设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码

十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   

设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南

东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...