恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
比特世界编年史-从X到关闭
0.0°
2016-06-16 自译外文 经验/观点 原作者: Abel 举报 11599 26 40 5

Image title


这里是GangDesign[比特世界编年史]第一期!

译文原文发表于GangDesign的博客,原文由markdown写成,图片链自medium需科学上网,所以在这里补充好完整版供大家阅读和指正: )

后续会有更多于UI/UX或比特世界相关的回溯小文,也欢迎大家推荐文章!祝愉快!


本文原文由Lauren Archer发布于medium,GangDesign已获原作者授权进行非营利性质的翻译和发表,请勿转载。

在UI设计中[X]使用的起源

X在用户界面(UI)设计中随处可见。这个强势符号其功用是关闭窗口和弹窗,工具栏和标签栏,以及其他任何会跳出来堆在你的屏幕上的东西。


Image title

Twitter X


点击[X]可以关掉某个部件,这种行为已经成为了使用电脑时的本能反应,也是网页及软件设计的一个标准。尽管我们这个无处不在的[X]似乎早就是图形用户界面设计的一部分了,但我们来做一个快速的回溯,让GUI的发展历史来告诉我们,其实好像并不是这么回事哦。

所以,到底是什么时候又是在什么地方,这个[X]在UI字典里第一次出现呢?

Image title

Chrome X


为了追溯到[X]的起源,让我们先从它的现状—Microsoft(微软)开始。

如果你正在使用一台Windows电脑,你会发现此刻你的屏幕上起码会有一个[X]符号。

Image title

Windows 7 X


但是在Windows 1.0时代并没有把它当作关闭按钮。

Image title

Windows 1.0


2.0也没有

Image title

Windows 2.0


难道是3.0

Image title

Windows 3.0


这个[X]按钮一直都没出现,直到Windows 95时代,这个关闭按钮终于加入了最大化和最小化,在右上角排列开来。

Image title

Windows 95


实际上有证据表明这只是Windows 95的之后的版本,在之前的demo(研发代号:Chicago)中,最大号和最小化按钮经过了再设计,但是关闭按钮却维持原样,仍在左上角呆着。

Image title

Windows Chicago

August 1993


是谁做出了这个最终修改的决策?至少我能说,肯定是这个人导致了[X]后来在全球范围内的使用激增。

windows 95 的意图始终是希望电脑出现在每家每户的书桌上,而Windows 3.0 是针对可用性反馈的特别设计,其目的就是确保任何的电脑新手都能在后续接触到Windows 95 时顺利的进行操作。

它成功了。

Windows 95 将其他的操作系统从竞争中淘汰掉,并被全世界的家庭和商业机构所采用。

但我们今天的目标并不是去发现[X]何时开始这么受欢迎,而是找出它在UI设计领域的处女秀。

我们究竟能不能探寻到最早的案例?

Mac OS并没有使用[X]来关闭。只在OS X 中才初露头角,后来演变成只有当鼠标在红色关闭按钮上悬停时,[X]符号才会出现。

Image title

Mac OS 2: Pretty Colours!


Linux GUI开始使用[X]符号也是在 Windows 95 的发布之后。

Image title

X Window System

至此我们都还没有太大的进展,不如再回到最开始,在Windows、Linux或Mac OS这些现今最常见的系统出现之前,回到我们这么熟悉的“桌面隐喻”最早在GUI中使用的时候:Xerox的8o1o信息系统。

Image title

Xerox 8108

又名“The Xerox Star”,“ViewPoint”,或“GlobalView”,Xerox在1977年开始进行8o1o的开发工作,并在1981年命名为“Dandelion”发售。据称苹果公司在1979年12月去Xerox总部的一次参观后,受到启发,在Lisa/Mac OS上模仿了8o1o的GUI。

尽管没有[X]:

Image title

Xerox Star

回想起苹果之前的操作系统里[X]也是没有出现的:

Image title

Mac OS 1


1983年IBM为其个人电脑发布第一个集成图形软件环境 Visi On,它的GUI也并没有发现[X]:Image title

Visi On


GEM用户界面,由Digital Research 为基于DOS的电脑所开发,没找到[X]:

Image title

GEM


但是!这是什么?难道就是传说中的……

Image title

Atari TOS 1.0

这是Atari TOS 1.0的截图。1985年的Atari TOS 1.0建立在GEM之上并接入Atari ST的端口,来自于Atari公司的电脑部门。这是我能找到的最早的[X]按钮的例子。

为什么它会在这个时刻出现在这里呢?

这也许是Atari的另一个例子,能够证明这是一个借鉴日本文化的美国公司。而第一个例子,当然是Atari这个词,这是一个日文术语,源于一个叫做GO的游戏,意思是攻击目标。

将[X]用于关,而[o]用于开,有可能来源于日本符号bastu和maru。

Image title

Maru (o) and Batsu (x)

Bastu[X]表示错误,也可用作非,坏,不当,或者攻击,同时,maru[o]的意思就是正确,真,完整,或者珍贵的事物。Bastu和maru也是通用手势。将手臂交叉在胸前,便是bastu;将手臂围成一个圈交汇在头顶,就是maru。

另一个大家熟悉的使用案例,就是Playstation 控制手柄的设计,maru和bastu在上面表示是和否。

Image title

Playstation Controller

当然了这只是一个理论,毕竟我不是当事人,并不能百分百确定。

为了周密一些,我们再看看更早些的时候,是否会有什么发现。

第一个以行为单位的文本数据编辑器是Quick Editor 或称qed,诞生在1965年,作者是Ken Thompson。此人后来参与帮助开发了Unix。Qed中使用的是q键来退出。

1971前后从qed衍生出早期的文本编辑器ed,em以及ex,用了一堆各式各样的换码命令:[q],[e],[c],还有[ESC],但[X],却一直没有成为普遍的选择。

Vivimemacs或者edlin呢?

这些1980年代的编辑器也并没使用[X]。在当时X通用功能是删除嵌入式字符而非关闭程序。

[X]是一个真实的图标,象征了一种用户行为而非某个字母,在图形导向的操作系统开发出来后也只用作关闭。它在Atari TOS GUI设计中的出现也许是被日语bastu和maru的用法所影响。也很感谢Windows 95在最后关头设计上所做的改变,并在后来被全世界所使用,[X]得以成为关闭功能的标准符号——这个在现今控制了网页,应用和软件设计的符号。

我们的探究就告一段落了。

[X]

截图来源: http://toastytech.com/guis/ 和 http://whiteandnoisy.org/




更新:

看样子这篇文章辗转拥有了很多读者!并在[X]的起源上得到了很多非常棒的[提示、评论与见解](https://news.ycombinator.com/item?id=8171340),但最棒的莫过于我收到了一封来自于Windows 95的团队成员Daniel Oran的来信。


“你好Lauren,

一位朋友向我转发了你在Medium上的这篇文章,‘X to Close’。他还记得我曾经在微软时为Windows 95工作过(当时我负责创作了开始按钮和工具栏),觉得我应该会觉得很有趣,确实是的!:-)

当看到这些自己曾经切实经历过的历史事件被写出来时真的很开心。我在1992年以‘Chicago’用户界面的项目管理身份加入了微软,也就是后来的Windows 95.

是谁做出了这个最终修改的决策?至少我能说,肯定是这个人导致了[X]后来在全球范围内的使用激增。

其实并不是最后一分钟才做的改变。在1993年,我们考虑过多种形式的关闭按钮设计。并且来源也不是Atari。而是NeXT,在其界面的右上角只有有一个带灰度并模拟3D效果的X关闭按钮,我们在Windows 95中借鉴的就是它。

我原本想将X关闭按钮放在左上角的,但这和另外一个已存在Windows Alt-Spacebar键造成了冲突,而这是我们在OS/2里借用的一个新的程序图标,OS/2起初是微软和IBM合作项目。

附件是我能找到最早含有X关闭按钮的Chicago位图,时间是1992年9月22号。(因为给这封电邮添加附件,我才意识到这是很久之前的事了,早到它的名字只有八个字符。在Windows 95之前,这已经是极限了。)

谢谢你这篇非常有意义的文章!

祝好,

Danny”

Image title


*Windows Chicago 9/22/1993.*

我想这件事到这就结束了吧。

![NeXT 1988](https://vimeo.com/30110130)

原链视频需科学上网


是大家一起帮我到了找这些早期的GUI案例和使用了[X]关闭的早期文本编辑器,再次感谢你们,让这个过程更加动人!

更新:2016-06-16

收藏

26人已收藏

Abelll

写点什么吧

  • 11

    作品

  • 27

    粉丝

  • 5

    关注

  • 「效率提升」Sketch嵌套Symbol的使用
  • 动效练习「三」
  • 动效联系「二」
  • Redesign of Spotify

    猜你喜欢

      2016-06-16 自译外文 经验/观点 原作者: Abel 举报 11599 26 40 5

      比特世界编年史-从X到关闭

      0.0°

      你确定要举报比特世界编年史-从X到关闭

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年06月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      40
      26
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录