UI 是如何发展的?

作者:Hindy  

原文地址:uicircle.club/a/159

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


前言

本文是 UI 设计进阶系列的第 2-2 篇,系列目录:uicircle.club/a/128

本文会带大家回到早期计算机时代,看看人机交互界面是如何从人适应机器,到逐渐转变为机器适应人的。


电脑是谁发明的?

我在为本文做调研的时候,意外看到一个视频叫:Who Invented the Computer(见参考阅读)。而人机交互又可以说是与计算机技术密不可分的,因此让我们不妨先来了解下电脑的发展。

UI 设计进阶 2-2:UI 是如何发展的?.003.jpeg

早在 1834 年,英国机械师查尔斯 · 巴贝奇(Charles Babbage)就构思了分析机(Analytical engine),一台拥有储存器和能利用打孔卡进行编程的机器。虽然当时从未建成,但在 1991 年,伦敦科学博物馆建造了一个完整的巴贝奇分析机模型。

UI 设计进阶 2-2:UI 是如何发展的?.004.jpeg

1936 年,艾伦 · 图灵(Alan Turing)发表论文提出计算机可以计算任何可数字计算的问题。而通用图灵机(Universal Turing Machine)就是对自动计算的一个概念蓝图。

UI 设计进阶 2-2:UI 是如何发展的?.005.jpeg

同时期,德国工程师康拉德 · 楚泽(Konrad Zuse)制作了一系列计算机。1941 年研制出的 Zuse Z3 是世界上第一台可编程的全自动数字计算机,但当时因为战乱它很少被人所知。

UI 设计进阶 2-2:UI 是如何发展的?.006.jpeg

二战对现代电子计算机的诞生起到了重要的作用,前所未有的军事计算要求和大量的战时预算刺激了创新。物理学家约翰 · 莫克里(John Mauchly)于 1942 年提出了一种全新的电子计算机。同时,美国陆军需要计算复杂的战时弹道表。其结果就是 1943 年至 1945 年间建成的 ENIAC,第一台完全用电运行而不被任何机械部件拖慢的大型计算机。在 1955 年以前,ENIAC 在当时所做的计算可能比全人类累计起来都多。

UI 设计进阶 2-2:UI 是如何发展的?.007.jpeg

1945 年 7 月,万尼瓦尔 · 布什(Vannevar Bush)发表了 “As We May Think”。提出了「Memex」储存器,在某种程度上预言了包括超文本、万维网、个人电脑、语音识别以及在线百科全书(Wikipedia)的诞生。这篇文章更是直接启发了道格 · 恩格尔巴特(Doug Engelbart)发明了鼠标,文字处理器,超文本链接等新技术。

所以到底是谁发明了电脑?答案不是一个人,而是一群人,他们互相启发和改进。人机交互的发展也是如此。


UI 的发展

在系列开始的时候我们就有介绍,人机交互最重要的就是输入(input)与输出(output)。因此根据不同的人机交互方式, UI 的发展可以大致分为以下几个时期:批处理时期、命令行界面时期与图形用户界面时期。


批处理

UI 设计进阶 2-2:UI 是如何发展的?.010.jpeg

批处理简介

批处理(Batch processing)就是在计算机上的程序中执行一系列作业,而不需要手动干预,是非交互式的。严格来说,这是一种处理模式:处理存储在打孔卡上(punch card)的数据,而不是单个输入。 

早期的计算机不能像今天的计算机那样存储文件。如果你想创建一个数据文件或程序,与其他计算机一起使用该数据,唯一的办法就是使用打孔卡。

批处理的历史可以追溯到 19 世纪后期。科学家、工程师、企业和政府机构面临着越来越繁琐的计算。1890 年,赫尔曼 · 霍勒里斯(Herman Hollerith)开发了一种机器来记录和储存打孔卡上的信息,以便用于记录当时的美国人口普查。他在后来创建了我们所熟知的 IBM 公司。

UI 设计进阶 2-2:UI 是如何发展的?.011.jpeg

直到 20 世纪 50 年代早期电子计算机时期,批处理仍然是大型计算机的主要处理模式。

UI 设计进阶 2-2:UI 是如何发展的?.012.jpeg


如何使用打孔卡

UI 设计进阶 2-2:UI 是如何发展的?.013.jpeg

使用类似上图的打卡机,通过对卡的每列上打孔来表示一个字符,就可以将数据输入到卡中。 

一旦卡打完或「回车键」(Enter)被按下,卡就完成「储存」信息了。而因为每张卡只能保存这么点数据,所以你很可能需要有一堆卡等待连续打孔。

要加载程序或读取打卡数据时,将每张卡插入读卡器,就能将卡上的数据输入到计算机。


批处理时代的问题

UI 设计进阶 2-2:UI 是如何发展的?.014.jpeg

在批处理时代,计算能力是非常稀缺和昂贵的。当时最大的计算机每秒处理能力甚至比现在的微波炉还要低。相应地,用户界面也只能是最基本的,人们不得不适应机器。除了专门训练过的操作员,人类根本不会与批处理机器进行互动。单个工作的处理时间往往是以日计。如果一个人非常幸运,那可能是几个小时。至于我们现在的实时响应,更是闻所未闻的。


命令行界面

UI 设计进阶 2-2:UI 是如何发展的?.015.jpeg

起源

UI 设计进阶 2-2:UI 是如何发展的?.016.jpeg

命令行界面(Command-line interface, CLI)是由人与电传打字机(Teletype)进行的一种对话形式发展起来的,最初在诸如 ASR-33 Teletype 之类的机器上进行,他们的交互模式是一系列的请求与响应交易,通常是一行文本。响应期远远低于先前的批处理系统,从几天或几小时降到几秒。人与机器以前所未有的方式进行交互。

注:电传打字机最初是作为自动电报发送和接收设备发明的。他们的历史可以追溯到 1902 年,到 1920 年代就已经在新闻编辑室等其他场所使用了。


发展

UI 设计进阶 2-2:UI 是如何发展的?.017.jpeg

视频显示终端(VDT)在 1970 年代被广泛采用,也因此迎来了第二阶段的命令行系统。这些显示技术进一步减少了延迟,字符会比打印机更快地显示到屏幕上。并且还通过减少墨水和纸张等消耗品,大大提升了人们与计算机的交互体验。

UI 设计进阶 2-2:UI 是如何发展的?.018.jpeg

在 1964 年前后,路易斯 · 普赞(Louis Pouzin)创造了术语 shell(壳层)来描述操作指令,并且写了一篇关于如何在 Multics 分时操作系统中实现这个想法的文章。它被命名为 shell,是因为它是操作系统内核的最外层。

shell 作为命令语言,它交互式解释和执行用户输入的命令或者自动地解释和执行预先设定好的一连串的命令;作为程序设计语言,它定义了各种变量和参数,并提供了许多在高级语言中才具有的控制结构,包括循环和分支。

第一个 Unix shell,V6 shell,是由肯 · 汤普森(Ken Thompson)于 1971 年在贝尔实验室开发,仿照 Multics shell。Bourne shell 在 1977 年推出的,作为 V6 shell 的替代品。Bourne shell 导致了 Korn shell(ksh),Almquist shell(ash)和流行的 Bash 的开发。

UI 设计进阶 2-2:UI 是如何发展的?.019.jpeg

在微软的 Windows 操作系统中也提供了命令行 shell 的功能,它们是 Windows 95 / 98 下的 command.com、Windows NT 内核下的 cmd.exe 以及 PowerShell;而图形界面壳层即为 explorer.exe。

虽然命令行界面大大提升了人机交互效率,但是它仍然给用户带来了相当大的学习门槛,需要花费大量的时间和精力来学习计算机语言。

再后来,命令行界面终于受到了来自苹果公司 1983 年的 Lisa 和 1984 年的 Macintosh 使用的 GUI 的严峻挑战。

现在的交互式命令行界面通常被更高级的用户使用(主要是开发者们),因为它们可以更快速、精准、强大地控制程序或操作系统。


图形用户界面

UI 设计进阶 2-2:UI 是如何发展的?.021.jpeg

图形用户界面(Grahpic user interface, GUI)离现在的我们最近。

UI 设计进阶 2-2:UI 是如何发展的?.022.jpeg

1963 年伊凡 · 苏泽兰(Ivan Sutherland)受到布什「As We May Think」一文的启发,开发了 Sketchpad。它是有史以来第一个利用 GUI 工作的程序,也因此开创了计算机学科的多个领域,诸如计算机图形学、图形用户界面、人机交互系统、CAD 等。Sketchpad 的成功也奠定了苏泽兰作为「计算机图形学之父」的基础。另外,苏泽兰还在 1968 年和他的学生一起创造了第一个虚拟现实和增强现实头戴显示系统,还取了个中二的名:「达摩克利斯之剑(The Sword of Damocles)」。也因此他又被冠上了「虚拟现实之父」的名号。

UI 设计进阶 2-2:UI 是如何发展的?.023.jpeg

道格 · 恩格尔巴特(Douglas Engelbart)在 1968 年「The Mother of All Demos」的演示中展示了 NLS 系统。它拥有电脑鼠标、位图屏幕、超文本,这些都奠定了开发现代桌面操作系统的基础。

UI 设计进阶 2-2:UI 是如何发展的?.024.jpeg

而提到早期的 GUI,还有一个绕不开的英雄就是 Xerox PARC(Palo Alto Research Center)。受 Engelbart 演示的启发,早在 1970 年施乐研究员们就开发了 WIMP 模型,也就是 Windows, Icons, Menus, Pointers(窗口、图标、菜单和鼠标指针),这套模型一直沿用至今。而在 1973 年施乐的研究员们创建了一个名为「Alto」的开创性机器,被设计为致力于一个人使用,成为了「个人电脑」的祖先。

Alto 的另一个意义是推广了位图而不是矢量图形。大多数较早的图形硬件被设计成在显示器上明确地绘制点、线、字符,这种方法相对较慢但是经济,因为它只要更少的储存器,如上面提到的 Sketchpad。

UI 设计进阶 2-2:UI 是如何发展的?.025.jpeg

施乐公司还在 1981 年推出 Xerox Star,一个包括几个工作站、存储器和激光打印机在内的完整办公系统,图形界面更加成熟。但是高昂的售价、不稳定的性能及失败的营销,令其与 Alto 一样几乎没有市场。

UI 设计进阶 2-2:UI 是如何发展的?.026.jpeg

1979 年,史蒂夫 · 乔布斯(Steve Jobs)安排了对 Xerox PARC 的访问,苹果公司的员工在施乐公司查看内部技术的演示,以换取施乐公司购买苹果公司股票期权的机会。苹果也没有浪费这次机会,在两次访问 Alto 之后,苹果公司将这些概念应用到了 1983 年的 Lisa 电脑中,使其成为世界上第一台使用 GUI 的个人电脑。苹果不仅仅是复制了 PARC 的模式而是改进了它,涉及设计和心理学方面的深入研究。苹果成功地大力推进了 GUI 发展的进程。虽然如此,但因 Lisa 高达近 1 万美元的售价以及较低的性能、缺乏软件生态等原因而遭受商业上的失败。

UI 设计进阶 2-2:UI 是如何发展的?.027.jpeg

在 1982 年,乔布斯被迫离开 Lisa 项目后加入了 Macintosh 项目。他重新定位了 Macintosh 团队:为建立一个更便宜,更好的 Lisa。1984 年 1 月 Macintosh 以 2495 美元的售价发售,迅速超过了 Lisa 的销售量。Macintosh 的成功是多方面的,但尤其值得一提的是为其制作了在当时史上最昂贵的的广告,并且在美国超级碗上播出。详细可以见文末参考资料中的「Apple 1984 Super Bowl Commercial Introducing Macintosh Computer」。

UI 设计进阶 2-2:UI 是如何发展的?.028.jpeg

而到了 1985 年,微软也意识到了 GUI 的魅力,发布了 Windows 1.01。早期的版本是丑陋、不成功的,色彩艳丽,甚至不支持重叠窗口等基本功能,他们很大程度上没有取代微软自己的 DOS 产品。当系统启动时,它还要通过打开 MS-DOS 执行任务。

UI 设计进阶 2-2:UI 是如何发展的?.029.jpeg

1987 年 Windows 2 发布,支持重叠和可调整大小的窗口,也增强了键盘和鼠标的使用。

至此,我觉得 GUI 早期的故事可以告一段落了。图形界面在之后越来越成熟,应用也越来越广泛,几乎可以拓展到生活中所有的数字产品显示上。而回顾历史,你也可以发现不管是今天的电脑还是手机,在很大程度上,还是沿用了近半个世纪前的发明,如桌面、菜单、导航栏、滚动条、图标等等。


更多交互方式

除了上述三种交互界面,这里还有更多的人机交互方式。

语音用户界面

UI 设计进阶 2-2:UI 是如何发展的?.031.jpeg

语音用户界面(Voice user interface)接受语音指令,并执行任务。而通过自然语义处理,又可以生成会话式界面(Conversational interface),如 Siri 和 Amazon Echo 的交互方式。

动作捕捉界面

UI 设计进阶 2-2:UI 是如何发展的?.032.jpeg

动作捕捉界面(Motion capture interface)通过一系列传感器监视用户的身体运动,并将其转换成命令。早期知名的商业案例比如 2006 年任天堂的 wii,用体感控制游戏。还有 2017 年 iPhone X 上的 Animoji 就是运用 Face ID 上的传感器进行了面部动作捕捉。

在后面的文章中,我也会和大家一起深入探索更多有趣的人机交互案例,敬请关注。


总结

了解 UI 的发展可以:

  • 提醒我们好的发明不是一蹴而就,而是历史共同造就的;

  • 提醒我们不该过于妄自尊大,可能你的想法别人早就做过了。因此当你蹦出好点子的时候,应该多做些调研工作,了解别人是否做过,做得怎样,从历史中吸取经验;

  • 帮助我们审视当下正处于怎样的历史洪流中,为我们的决策提供依据。

UI 设计进阶 2-2:UI 是如何发展的?.034.jpeg

最后以 Alan Kay 的一句名言结束本文:

The best way to predict the future is to invent it.(预言未来最好的方式就是去发明它。)


免费获取完整 PPT,请关注公众号 uicircle,回复「UI发展」即可。

系列目录:uicircle.club/a/128


如果你想提升设计能力,亦或充实自己的周末,欢迎加入我们的会员社区 👉点这报名


参考阅读


成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与各种线下设计、聚会活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们