本文来自微信公众号:少数派 (ID:sspaime),作者:SUNTRISE,题图来自:视觉中
本文来自微信公众号:少数派 (ID:sspaime),作者:SUNTRISE,题图来自:视觉中
前阵子看了少数派上的 Mac 设计史系列,想起自己曾经写过一些有关 Windows 界面元素的设计史,就萌生了对我以前收集的有关 Windows 设计的资料进行整理,写成 Windows 设计史的想法。
虽然 Windows 的设计史不如 Mac 那般传奇,但确实也有一些值得细说的故事。而与此同时,对于这段历史网上也有着一些有失偏颇的意见,并贴上诸如“抄苹果”“没品味”等标签,谈及细节又言之不详。我这里想尝试真实地还原这段历史,厘清一些日渐模糊的细节。
我个人最初是从看到 Longhorn(Vista 前身)的界面演示开始对 Windows 的设计史产生兴趣的,而 Longhorn 时期也被部分人视作 Windows 的美学巅峰。当然这些都是后话了,这期咱们得从头说起……
说明:本文依据的时间线以基于 DOS 的 Windows 版本为主,因为 Windows NT 系基本上沿用的是 DOS 系 Windows 的界面设计。
前奏
微软早在 1981 年就表现出了开发图形用户界面(GUI)的愿望,这一年比尔·盖茨看到了第一台 Macintosh 原型机。1982 年 COMDEX 大会上展示的 Visi On 界面又进一步刺激了比尔·盖茨和微软决心推出自己的 GUI 界面。
Visi On
与苹果一样,微软也选择向施乐“偷师”。而施乐本来是最早开发出 GUI 界面的公司,却被“苹果”和“微软”这两个学生后来居上。
1983 年 8 月,微软聘请了施乐 PARC 部门的首席开发人员之一 Scott A. McGregor,负责为 MS-DOS 开发一个新图形界面。
在对这款新图形界面的命名上,它最初的名字只是简单的“Microsoft Interface Manager(微软界面管理器)”,而 McGregor 在施乐工作时,给自己开发的软件起名为“Windows”。与此同时,微软营销副总裁 Rowland Hanson 也建议使用“Windows”作为产品名称,这源自于一个营销策略:使用一个广泛通用的词语,从而迫使媒体在提到该名称时必须加上公司名称,从而提高公司的知名度。而当时“Windows(窗口)”在有关图形界面的介绍中经常出现。比尔·盖茨接受了 Rowland Hanson 的这一建议,“Microsoft Windows”诞生了。
从此,这个新生的“Windows”开始了属于它的传奇。
Windows 1.0:蹒跚起步
起初,微软试图说服合作伙伴 IBM 支持自己的这一新项目,但由于当时 IBM 正在进行同类项目 TopView,因此对微软的这一项目并不感冒。
1983 年 9 月,微软在 BYTE 杂志上展示了 Windows 的原型。1983 年 11 月又在 COMDEX 大会上进行了演示。
BYTE 杂志上演示的 Windows 原型
微软本宣称计划 1984 年 4 月发布 Windows,但却不断延期,这也为它获得了“Vaporware”的称号,该词最初由微软工程师创造,用于形容不断推迟发布甚至最终取消的产品(英语中 vapor 意为“蒸汽”)。
最终,1985 年 11 月 20 日,Windows 的第一代——Windows 1.0 正式发布。
1986 年 1 月 Windows 1.0 宣传手册
在界面设计上,Windows 1.0 最大的特点是采用了平铺窗口,相比之下当时苹果的 Macintosh 则采用的是重叠窗口。对于其背后的原因,历来网上都聚焦于“担心侵权苹果”这一点上。但实际上,早在 1981 年,施乐公司的 PARC 部门就在其 Cedar 项目中采用了平铺窗口设计,微软可能是在研究了施乐的这一项目后做出了这种选择。
对此 Scott McGregor 也表示:“Windows 从一开始就具有重叠窗口的功能……反而在此基础上编写平铺管理器的工作量要大得多!”网上也有人通过修补 Windows 1.0 的用户界面库实现了重叠窗口。
窗口最小化(图标化)时,最小化窗口的图标居于屏幕底部。类似的设计被后来的任务栏所采用,这是后话。
Windows 1.0 采用的平铺窗口
施乐 Cedar 项目中的平铺窗口
实现重叠窗口的 Windows 1.0
这一特点也在 Windows 1.0 的 Logo 上得到了体现:Logo 就像是四个平铺在屏幕上的窗口。
Windows 1.0 Logo
兜兜转转几十年后,Windows 11 的 Logo 又回到了最初的四方格,虽然新 Logo 备受吐槽,但从另一个角度看,也算是回归到“窗口”的本源,可谓是“返璞归真”。
Windows 11 Logo
毕竟作为初代产品,Windows 1.0 图形元素的设计比较粗糙。与同样采用 32×32 像素网格和黑白配色方案的 Macintosh 图标相比,Windows 1.0 的图标远不及 Macintosh 图标优雅。而且一些图标缺乏辨识度,比如控制面板和日历的图标,它们都表示为分为几块的矩形。为数不多的亮点是时钟图标:它会根据当前时间运动。
Windows 1.0 图标
微软还制作了“黑白棋(Reversi,又称翻转棋、奥赛罗)”游戏(见上 Windows 1.0 界面),这是 Windows 的第一款游戏,但无奈“长江后浪推前浪”,这一游戏的知名度远不及后来的“纸牌”“扫雷”等。
总的来说,Windows 1.0 在市场上引起了一定关注,但不算特别成功。一些评论批评其系统要求偏高,并且由于其依赖于面向鼠标的界面,其设计对于键盘用户而言不灵活。
Windows 2.x:不温不火
Windows 1.0 发布不久后,微软便着手改进 Windows。1987 年 12 月,Windows 2.0 发布。
与 Windows 1.0 相比,2.x 系列设计上最大的变化是,重叠窗口取代了平铺窗口。这也引发了苹果和微软那场著名的诉讼,最终这场诉讼以对微软有利的判决告终,Windows 得以继续采用重叠窗口。
而平铺窗口并没有就此消失,甚至十几年后,它将以崭新的姿态出现在 Windows 中,这也是后话了。
Windows 2.0
除此之外,在图形界面设计上 Windows 2.x 做出的改变很有限,图标,控件等设计也是沿用 的 Windows 1.0。虽然针对 Windows 1.0 作为了一些改进,但这一版本在市场上并没有掀起很大波澜,总体来说市场反响一般。
Windows 3.x:从一个玩笑开始
故事开始于 1988 年 6 月下旬的一个星期五晚上,在庆祝微软峡谷公园制造工厂开业的聚会上,微软软件工程师 Murray Sargent 遇到了朋友,Windows 开发人员 David Weise。Murray 取笑 David 参与开发的 Windows/286 在内存管理领域相当糟糕,并建议 Windows 进入保护模式并消除 640 KB RAM 障碍。
出乎 Murray 的意料,David 马上就拉着他回到微软园区,经过一些尝试,成功将 Windows 2.0 启动到保护模式。在 Windows 3.0 开发会议上,Murray 和 David 的这一方案得到了通过,Windows 3.x 系列的开发就此开始。
与前代相比,Windows 3.0 的用户界面得到了大幅修改。“程序管理器(源自 OS/2 系统的 PMShell)”取代了“MS-DOS 执行程序”成为默认用户界面,原来“MS-DOS 执行程序”的文件管理功能也被“文件管理器”所取代。“MS-DOS 执行程序”最后在 Windows 3.1 中被删除,彻底退出了历史舞台。
Windows 3.0
Windows 3.1
在 Windows 3.x 中,微软聘请来设计图标的不是别人,正是曾为 Macintosh 设计图标的 Susan Kare。经过她的一番大刀阔斧的整改,Windows 3.0 的图标变得更为成熟,提高了辨识度,且有了颜色(16色)和阴影。在 Windows 3.1 中 Susan 又为图标添加了更多色彩。Susan Kare 还为 Windows 3.x 的纸牌游戏设计了卡面。
Windows 3.1 图标
Windows 3.1 纸牌
Logo 也进行了重新设计。Windows 3.0 的 Logo 最为写实:一扇黑白窗户。Windows 3.1 则引入了经典的“四色块”Logo,此后“四色块”成为了微软的经典标识,被用在 Office、MSN 等微软产品中。
该 Logo 是由微软高级副总裁 Brad Silverberg 委托设计,实际由 Jonathan D. Cowles 在 Jeff Boettcher 和 Julie Wong 的监督下设计。根据 Brad 的说法,Logo 的右侧部分象征“窗口”,而左侧则添加了运动效果,而从整体上看,这个 Logo 也像一面旗帜。
左:Windows 3.0;右:Windows 3.1
以旗帜图案出现的 Windows Logo(Windows NT 3.5 Beta)
微软 Logo(2012 年至今),其采用了经典“四色块”
字体方面,Windows 3.1 采用了 TrueType 字体,并添加了新字体:Times New Roman(与 Times Roman 兼容)、Arial(与 Helvetica 兼容)、Courier New(与 Courier 兼容)等等。这些改进提高了 Windows 中字体的辨识度。
除此之外,Windows 3.0 还是第一个引入壁纸的 Windows 版本(此前的 Windows 只能设置背景颜色),壁纸可以是平铺图块,也可以是全屏壁纸。
带有壁纸的 Windows 3.1
为了让用户更熟悉鼠标操作以及提高 Windows 的娱乐性,微软向 Windows 3.0 中添加了“纸牌”游戏,帮助用户熟悉如何利用鼠标“拖放文件”,Windows 3.1 中“扫雷”取代了“黑白棋”游戏,以帮助用户学会利用鼠标的“左右键”。
Windows 3.1 扫雷和纸牌
Windows 3.x 系列被认为是第一个获得商业成功的 Windows 版本。此外这也是值得国人纪念的 一版 Windows,因为 Windows 3.x 首次引入了中文版。
尽管 Windows 3.1 便已有中文版(简中繁中都有),但可能因为有一些纠纷,也可能是想体现对中国市场的重视,微软又推出了专门针对中国市场的 Windows 3.2,这一版本添加了更多中文输入法(如郑码,智能 ABC 等)。
Windows 3.2 中文版
Windows 95:奠定基础
虽然与前代相比 Windows 3.x 的界面设计有所改进,但仍然存在诸多问题,一个突出的问题是:打开的窗口(包括最小化的窗口图标)可以被任何其他窗口覆盖,这导致许多用户最终无法跟踪他们打开的应用程序,只能重新启动程序的另一个实例,最终耗尽可用内存;程序管理器也显得比较复杂,不够直观。Windows 界面的改进仍需继续。
从“开罗”到“芝加哥”
Windows 界面的重新设计实际上起始于一个叫“开罗(Cairo)”的项目,它最初旨在改进 Windows NT,后来它的用户界面设计被用到了 Windows 3.1 的下一版本,代号“芝加哥(Chicago)”中。微软在这一版本的目标是:不仅让 Windows 3.1 用户容易上手新版本 Windows,而且要让新手用户也能轻松上手 Windows。在这一目标下,微软也尝试了许多设计,著名的 Microsoft Bob 便是那个时候的产物(虽然以失败告终)。
Microsoft Bob
听听用户的声音
微软意识到,“闭门造车”是无法解决问题的,要想真正设计出易用的图形界面,必须与用户站在同一角度思考问题。于是,微软选择邀请用户一起参与下一版本 Windows 的测试。
据当时的 Windows 用户界面设计团队成员 Kent Sullivan 所写的一篇报告《Windows 95 用户界面:可用性工程案例研究》,在 Windows 95 的开发期间,微软一共对 560 名受试者进行了 64 个阶段的测试。其中 50% 的用户是 Windows 3.1 的中等水平用户,其余的是新手、高水平用户及其他操作系统的用户。
除此之外,微软还采访了 Windows 3.1 和 Macintosh 的专业教育工作者以明确研究方向。Kent Sullivan 在研究报告中写道:“在 Windows 95 项目中,许多团队成员第一次体验到迭代设计、可用性测试和问题跟踪。”
Windows 3.1 的测试结果并不乐观。新手用户平均需要花费超过 9.5 分钟才能在 Windows 3.1 中找到并打开一个不立即可见的程序。而且除了高水平用户之外,所有用户都不了解如何有效地管理重叠窗口。改进迫在眉睫。
研究结果(节选)
最初,考虑到现有 Windows 3.1 用户的适应成本,微软迈出的步伐很有限。下图展示了Cairo/Chicago 早期版本的 UI 模型,桌面上的第一个“文件柜”图标将打开一个类似 Windows 3.1 文件管理器视图的文件管理器(左窗格显示层次结构,右窗格显示内容);第二个“世界”图标显示网络项目;第三个图标“程序”是一个文件夹,其中界面类似于 3.1 的“程序管理器”,显示文件夹和其他程序的链接。
底部是一个“系统托盘”,它可以停靠在屏幕的任何一侧,也可以作为一个窗口浮动。托盘的一侧包括三个名为“系统”“查找”和“帮助”的按钮,而其余区域则是一个文件存储区域,用作用户放置需要移动或复制的文件的剪贴板。最右侧包括一个回收站快捷方式(不禁让人联想到苹果后来 Dock 栏最右侧的“废纸篓”)。
关于无法有效管理重叠窗口这一问题,起初团队试图通过调整最小化窗口的外观来解决问题,因为他们认为主要原因是用户难以区分最小化图标和其他类型的图标。因此,团队引入了带有窗口图标和标题的宽板作为最小化图标,以提高最小化窗口图标的辨识度。
在这一界面中,团队更改了 Windows 3.1 中的一些设计(比如桌面),但没有更改大部分内容(例如桌面上的文件管理器和程序管理器式图标)。
Cairo/Chicago 早期版本的 UI 模型
采用类似 UI 的 Windows 95 Build 58s
“系统托盘”可以作为一个窗口浮动
然而,早期版本的测试结果也不尽如人意。部分原因是因为用户会混淆左下那三个按钮的对应功能。程序查找速度和窗口管理效率也没有多大提升。许多用户给微软的反馈是:“新版本Windows 只是不同,而不是更好。”这样的结果促使设计团队重新思考 Windows 界面的设计方向。
放开手脚去干吧
无论如何,目前界面的测试结果都远远达不到微软“让大部分用户都能轻松上手 Windows”的预期,促使设计团队重新思考 Windows 的界面设计方向。原本开发团队担心新的用户界面会与 Windows 3.1 离得太远,进而让现有用户感到困惑。
但现在,他们减少了对与 Windows 3.1 一致性的关注,转而将重心放在了提升用户体验上。设计团队也提高了 UI 设计迭代的速度,以在更短的时间内尝试更多的新想法。
“发现水的不一定是鱼”
1992 年,一个名叫 Daniel Oran 的行为心理学家加入了微软,参与 Windows 用户界面的设计。另外一个有趣的细节是——他在加入微软前一直是一位苹果用户。他刚来到微软工作时甚至无法顺利上手 Windows。但正所谓是“当局者迷,旁观者清”,他在后来接受采访时说:
回想起来,不是一个有经验的 Windows 用户也是我的一个巨大的优势。媒体理论家马歇尔·麦克卢汉(Marshall McLuhan)有一句妙语:“发现水的不一定是鱼。因为我以前没有深入接触过 Windows,所以我想我能够看到此前 Windows 用户没有注意到的东西。
自己的亲身经历,加上可用性测试的结果,激励着 Daniel 为 Windows 设计新界面。
那么 Windows 新界面的设计应该从何下手呢?先来看看可用性测试研究出了什么结果:
新手和一些中等水平用户在使用鼠标时遇到很多麻烦,尤其是双击。结果,当界面上的某个东西需要双击才能打开时,他们常常束手无策。
新手和许多中级用户几乎完全依赖可见提示来查找命令,执行操作。他们依赖(显性)菜单栏和工具栏,但不使用弹出菜单(比如右键菜单),即使在培训之后也是如此。
关于窗口管理,主要问题是,窗口并非始终可见,因此用户无法快速查看他们打开的内容或访问任务。
最初,Daniel 想出了一种名为 ClearView 的界面用于新手教学。它采用了一个全屏选项卡界面,来启动程序、访问最近打开的文档以及切换窗口。虽然测试结果良好,但很快团队就发现了它的局限性,最终放弃了它。
ClearView 的局限性
不知是不是造化弄人,二十多年后类似的界面又回到了 Windows 中。但这个名为“Windows Sets”的新界面并未掀起多大波澜,仅仅是在几个 Windows 10 测试版中昙花一现,便无疾而终了。
Windows Sets
尽管 Daniel 等人放弃了为新手用户提供独立界面的想法,但团队仍保留了它的优点:单击即可访问、高可见性和基于菜单的交互。“开始菜单”就是在上述理念的影响下完成设计的。
“开始”按钮的原名是“系统(System)”,但 Daniel 考虑到这一名称过于专业,最终定名为“开始”,还在用户初次启动系统时在“开始”按钮旁显示“Click here tu begin(单击这里开始)”字样,以防用户不知道从何处“开始”。
Windows 开始菜单的第一个草图,1993 年 6 月
最终设计
注意左下角的“Click here tu begin(单击这里开始)”
针对用户反馈的“窗口并非始终可见”问题,微软选择将打开的窗口条目固定在屏幕的某个位置,即任务栏。每个任务在任务栏中都有自己的条目,并且任务栏位于其他窗口的顶部。
任务栏的演变流程
任务栏各部分介绍
任务栏原本沿袭了选项卡的设计,默认居于屏幕顶部,但在测试过程中发现,某些程序默认屏幕的可用区域从(0,0,即屏幕左上角)开始,从而可能遮挡任务栏,也可能是考虑到避免与苹果系统的顶部菜单栏设计相近,微软最终选择将任务栏移至底部(默认)。
当然微软内部也有人对这套界面并不表示认同,有微软高管甚至表示,他觉得任务栏上的按钮太像汽车上的电台按钮,也有人只是不喜欢“开始”这一名称。但可用性测试的结果最终说服了这批人。最终,新版本 Windows 采用了这套界面。
最终发布
1995 年 8 月 24 日,Windows 95 正式发布。
在对新版本 Windows 的命名上,微软放弃了曾经的版本(1.0-3.x)命名方法,而以年份命名这一版 Windows。1995 年,也因为 Windows 95,成为了操作系统历史上的重要一年。
Windows 95
为宣传这一版本,微软可谓是不遗余力。微软花了 300 万美元购买了滚石乐队的歌曲“Start Me Up”以宣传“开始”功能,还邀请了演员 Jennifer Aniston 和 Matthew Perry 拍摄喜剧形式的 Windows 95 视频教程,同时也制作了大量电视广告宣传 Windows 95,其中“开始”功能是重点宣传对象。
而 Windows 95 的推出也大获成功,短短四天内全球销量就达到了 100 万份。当时正值苹果陷入 Pink 项目和 Taligent OS 的泥潭中,Windows 95 获得了媒体更多的关注,市场份额也是不断上升,最终使得 Windows 成功主导了操作系统市场。
除了桌面环境,微软还根据可用性测试结果重新设计了一些界面,比如“打开/另存为文件”界面,“选择打印机”界面等,其中一些设计一直延续至今。
Windows 3.1 与 95 “打开文件”界面对比
Windows 95 的图标也得到了改进,部分图标采用了类似苹果 Copland 风格的等轴测视图。图标仍然是 32×32、16 色,但后来推出的 Microsoft Plus! 附加包引入了 256 色图标支持。
Windows 95 图标(部分)
实际上,Daniel Oran 在 Windows 95 发布前就离开了微软,而当时他并不确定他参与设计的“开始菜单+任务栏”的界面是否会被 Windows 95 采用。事实证明他多虑了,这一界面不仅顺利进入了 Windows 95,还成为了后来 Windows 界面的基础,而且至今还焕发出强大的生命力,甚至还影响了 KDE、xfce 等其他桌面环境的设计。对此他也表示十分意外,他在接受采访时表示:
这真是太棒了,几乎不可思议。在 1993 年我绝对不会想到这一点。
这是我职业生涯中做过的最难忘、最有影响力的事情之一。
历代 Windows 开始菜单
KDE 1.1 桌面
念念不忘:Windows 3.x 留下的遗迹
尽管 Windows 95 顺利发布并取得了巨大成功,但微软还是不放心:万一有用户不适应 Win95 的新界面,想要换回以前 Windows 的界面怎么办?对此微软也想了一些解决方案。比如,在安装 Windows 95 时可以选择 Windows 3.1 的“程序管理器”作为默认用户界面。
在安装 Windows 95 时可以选择 Windows 3.1 的程序管理器作为默认用户界面
以“程序管理器”作为默认界面的 Windows 95
不过这样得到的只是一个默认打开“程序管理器”的 Windows 95 桌面而已(见上图),要想真正得到类似 Windows 3.1 的体验,则需要将 system.ini 中的 shell 修改为 progman.exe。
完整的“程序管理器”最终在 Windows XP SP2 后被移除,但通过移植以前版本的“程序管理器”,利用 Windows 强大的向后兼容性,依然可以在现在的 Windows 上获得类似 Windows 3.1 的体验。
未完待续......由于篇幅有限,仍有一些关于当时 Windows 界面设计的一些有趣细节文章中未能提及。
原文链接:https://sspai.com/post/87835?utm_source=wechat&utm_medium=social
本文来自微信公众号:少数派 (ID:sspaime),作者:SUNTRISE
支持一下 修改