谈谈 Windows 的视觉风格与交互演变

2023/01/28 10:32

Windows 11 一度能同时包含十多种不同的界面风格视觉效果,这是纯粹的泥古不化还是另有苦衷?


按:近期,围绕「为什么 Windows 上的程序普遍爱用第三方开发框架」的相关讨论又重新回到众人视野。借此机会,我们开放本文试读。如果你对本文感兴趣,欢迎考虑订阅少数派会员,获得专属内容、独家周边、会员社区和定期优惠等多项福利。


从 Windows 第一个版本开始,到今天我们看到的 Windows 11,已经走过了 27 年了。在 Windows 成长的这些年中,「兼容性」是它最大的特色——甚至于你现在还是可以在 Windows 11 上跑动为 Windows 98 开发的程序。

Windows 11 早先版本的视觉效果,图源

但在这长达 27 年的过程中,人机界面也一直在演进,那么微软是怎么应对的呢?答案是——「照单全收」。尽管 Windows 每代都有标志性的 UI 风格,但微软总能在更新时「恰到好处」地漏掉几个旧版界面。长年累积下来,如今的 Windows 就如博物馆一般,能一路挖掘出三四十年前的视觉风格——Windows 11 的早先版本一度能找出 10 多种视觉效果。

这篇文章中,我们就一起来回顾和分析 Windows 的视觉效果的演进历史,并探究其背后的原因。

前 GUI 时代微软操作系统的视觉风格

最初的 Windows 其实更像是一个基于 MS-DOS 的壳程序(Shell),用狭义的角度来说甚至不能算是独立的操作系统,而是更像是方便操作 PC 的一个图形入口。并且和后期的 Windows 3.1 开始的 GUI 界面相比,早期的可视化的操作界面被称作是 Text-based user interface(TUI),TUI 本质上是通过 ANSI 字符编码所组成的可视化界面,但事实上它是通过 ASNI 转义序列来实现对光标位置、颜色和其他的选项的控制,终端会在识别到转义序列后解释为对应的命令,而不是传统的字符编码。他在图形界面出现之前用来进行人机交互,相比完全的命令行操作,TUI 使用色块来区分不同的操作界面,并且可以使用鼠标来进行功能的选择和操作,并且操作界面中已经出现了后来我们在很多应用窗口下常见的下拉菜单、重叠的窗口、对话框等等,并通过不同的颜色凸显了相关功能所对应的键盘快捷键。

也因为当时并没有真正意义上的图形化操作系统,这种基于 TUI 的界面大多只用于第三方软件,比如经典的 C 语言的 IDE:Turbo C,以及早期的 Office 三件套等等。甚至到了今天我们依旧可以在一些系统中看到基于 TUI 的交互,比如没有安装 X11 或者桌面环境的 Linux 预安装环境,以及 Vim 这样的文本编辑工具等等。

WIMP:Windows 系统界面的原点

Apple 在 1984 年推出 Macintosh 则正式开启计算机的 GUI 时代——相比 TUI,GUI 几乎完全脱离了字符和命令行操作,其中标志性的变化来自输入硬件——鼠标变成了必备工具,而「窗口、图标、菜单、指针」(windows,icons,menus,pointer;合称 WIMP)则几乎定义了 GUI 最为基础的要素。

而也正是这种 GUI 基础要素,才使得 Windows 1.0 不再是 MS-DOS 所谓的图形用户接口,而被真正称作是一款图形化操作系统:

  • 软件窗口:他可以在一个窗口中运行一个独立的程序,其他程序则运行在其他的窗口中;窗口可以使用鼠标拖动到不同的位置,;同时窗口管理器可以对程序窗口进行管理,比如哪些软件窗口需要在桌面前台显示,表示这个程序正在活动,而哪些则需要被隐藏起来等待激活。
  • 软件图标:而图标则是这些窗口下运行程序的快捷方式,只有激活图标才能运行对应的程序,通过文本标签我们可以直观的了解到,打开对应的图标后会运行什么程序。
  • 功能菜单:菜单系统则通过文本和图标组合起来的选择系统,我们希望程序后面执行什么操作,就可以在菜单中选择好对应的操作项目执行。
  • 指针控制:这是我们控制系统的基础,用来在系统中选择图标、数据元素等。

而从 Windows 1.0 开始,Windows 逐步形成了其特有的视觉体验,这种风格几乎贯穿了整个「前 XP」时代的 Windows:程序窗口中采用菜单栏+工具栏设计,绝大多数的功能项被收纳至菜单中形成一个个菜单项,这种设计在 Windows 98 达到顶峰,最为显著的例子就是经典的 IE6 浏览器以及 Microsoft Office 2003 套件。

而在设计上,Windows 1.0 至 Windows 2.0 受制于当时的显示水平,整个系统组件之间采用了高对比度的设计。继承了 TUI 时代的视觉设计框架,融入了 WIMP 的概念,而从 Windows 3.0 开始则出现了 后面被称之为 Windows 经典的主题风格——拟物风格中显得更为硬朗,更重要的则是 TrueType 的引入,使得整个操作系统的文字显示上更为清晰。

而如果你仔细观察就不难发现,即便到了Windows 11 的时代,我们会发现Windows 的 UI 设计规范一直不断在变。对比 macOS,抛去 2000 年之前的经典 Mac OS,从 Mac OS X 10.0 开始,其 UI 设计的大体框架都围绕着 Aqua,只是之间出现了从拟物设计向扁平化设计转变,而这也只是系统中元素设计风格上的变化。即便如此,其设计风格的变化上远不如 Windows 来的如此巨大,当然微软在此时还准备好了 WinForm UI 框架,为日后的 Windows 上的软件设计打下了基础。

Ribbon:解决窗口菜单和功能之间的矛盾

而随着时间的推移,「Windows 经典」主题下的程序窗口的使用弊端开始显现——由于大量的功能被收纳到菜单中,用户在使用相关的功能时除了使用鼠标在菜单中点选,就只能使用键盘快捷键来进行调用,并且功能项并不直观的描述也让软件使用存在障碍。

因此 Ribbon(功能区)应运而生,其宗旨是让每一个菜单大类下的功能都可以用图形的形式得到快速呈现。在首个运用 Ribbon 的软件 Office 2007 中,其菜单和可自定义的工具栏被替换成了一个 Office 菜单,而原本放在菜单大类下的功能被「快速访问工具栏」替代,并且通过类似选项卡的形式可以让这些原本只有文字描述的功能变成一个个高识别度的功能图标,辅以文字来描述,让你可以只通过图标就能知道这个功能怎么用。

而每一个选项卡中还针对功能属性进行分组,并且快速访问工具栏在使用后,对应选项卡的功能区并不会像以往菜单一样直接收回,这在一定程度上减少了频繁的点击操作。而这种设计最终成为了 Windows 8 ~ Windows 10 上默认资源管理器的样式,也在一定程度上使得 Windows 文件资源管理器成为桌面操作系统文件管理器应用易用性的代表。

Luna:Windows 系统界面的首次现代化

Windows XP 的出现在一定程度上改变了人们对 Windows 系统的固有印象——Windows 系统开始重视并强调视觉和图形界面给用户带来的使用感受,虽然从结构上说,Windows XP 依旧在很大程度上延续了以 WIMP 为基础的 GUI 规范,但整体设计上则显得更为明亮,表现力十足的颜色以及圆润的边框设计,辅以颜色投影创造出视觉变化。

而 Windows XP 也带来诸多设计使得电脑系统不再那么的冷冰冰,而更像是一个可以融入用户生活的工具——操作系统采用了更为明快的色彩搭配以及拟物化的功能图标按钮,随处可见的人性化提示让用户可以快速上手并使用操作系统。在那个 PC 的图形计算力并不强的时代,Windows XP 的 Luna 界面在一定程度上满足了用户对 PC 操作系统即美观又实用的使用需求,并且在一定程度上也改变了未来 Windows 系统视觉样式。

微软也在彼时推出了新的 UI 框架 WPF,并暂停了之前一直在更新的 WinForm UI 框架。WPF 相比于 WinForm 能够相对容易地创建非常美貌的 UI、动画和特效;WPF 还借助 DirectX 实现了矢量渲染的方式,解决了 WinForm 因为像素渲染导致的 DPI 缩放问题。

不过,在当时对于开发者来说 WPF 太过灵活,可能达成一个效果有很多种不同的方式,开发者需要非常了解 WPF 才能找到合适的实现方式,而不合理的实现方式则会让软件内存占用大增,响应速度也会明显下降,在当时内存贵如油的环境下,想要开发好难度大增。虽然微软后面为了解决内存占用的问题还推出了新的 Silverlight UI 框架,但后面因为其他原因导致 Silverlight UI 框架流产。

另外,相比于 WinForm UI 框架,WPF 开发者可以内置控制套件要少得多,基本上都需要开发者自己实现,且作为一项新技术可以使用的文档和资料会少得多,开发难度更是直线上升。因此开发者在「向前兼容」帮助下还是会选择基于 WinForm UI 框架开发,而且不少 WinForm 问题还可以用奇怪的方法去解决,至于部分不能解决的问题也只靠用户咬咬牙解决了。后续少数曾经基于 WPF 开发的软件,也因为种种原因暂停开发了。

QQ 概念版就是基于 WPF 开发的,图源

Windows Aero:Windows Vista 的「透明玻璃」效果

作为 Windows 最让人印象深刻的视觉风格,Windows Aero 真正被引入到 Windows 系统中则要等到 2006 年发布的 Windows Vista,Aero 这个单词其实是四个英文单字的首字母缩写:Authentic(真实)、Energetic(动感)、Reflective(反射)及Open(开阔)。虽然延伸自 Windows XP 开始的 Luna,但得益于当时图形计算硬件的飞速发展,整个系统界面设计呈现出极具层次感,最让人耳目一新的可能就是应用软件的窗口设计——具有类似玻璃一样的透视效果,并且大量的系统组件和图标均为拟物风格、大量的物理特效使得 Windows Aero 成为 Windows 系统界面设计中最为成功的一个版本。

同时结合 Windows Aero 全新设计风格,微软在 Windows 系统也引入了一系列的充分利用新设计的功能和动效,达到了视觉设计和人性化交互的完美平衡。例如通过 Windows 徽标键 + Tab 可以在三维视图中展现出 Windows 应用窗口、将鼠标悬停在窗口的任务栏按钮上会在任务栏中显示该窗口的预览。这些功能都在一定程度上进一步突出了 Aero 设计带来的逼真拟物效果。毫不夸张的说,在 Windows Vista/Windows 7 时代,Windows 的界面设计终于可以和同时期的 macOS 相提并论,也间接的奠定了 Windows 7 在后面近十年来的桌面系统的霸主地位。

Metro:激进的扁平化设计

而随着用户界面的发展,过度逼近拟物的设计随着行业发展开始式微,而偏平化的交互设计随着 iOS 7 的推出开始逐步被终端市场所接受,这种视觉风格的极具转变也影响到了 Windows 7 的下一代系统:Windows 8/8.1。其舍弃了大量的原 Windows Aero 效果,激进且大胆的采用了基于 Metro 设计的系统界面,虽然从用户层面上看,Metro 用户界面的变化过于激进,导致 Windows 8 系列系统的市场采用率可以用惨淡来形容。但也从另一个方面来说其给予了 Windows 设计语言的修正机会,从而在 Windows 10 时代找回了视觉效果以及使用体验的平衡。

事实上 Windows 8 并非是微软的第一款使用 Metro 设计的系统,Metro 作为微软产品的设计语言其中可以追溯到 Windows Media Center 以及 Windows XP Media Center Edition,由于沿袭自瑞士平面设计,其最早更多的是用在微软的软件中比较偏向导航类的产品中,大块的全色背景之上辅以文字和矢量图标也更易于排版,而之后这套设计语言被用在了 Windows Mobile 6.5 之后的下一代移动端操作系统 Windows Phone 7 中。相比同时期的 iOS 以及 Android,Windows Phone 7 整体系统界面呈现出的简约设计,通过后续引进的动态磁贴设计,使得原本单调的设计中带来的动态视觉变化。

但显然这种设计放在移动端可以减少无谓的用户交互,但不加修改的直接移植到桌面端就显得相当勉强了,这也使得 Windows 8 成为一个设计语言完全割裂的「缝合怪」——开始菜单变成了更适合触摸屏的扁平化磁贴,而打开文件资源管理器则又回到了更适合键鼠操作的传统 Windows 系统界面,而由于删除了原先的 Windows Aero 中的诸多效果,Windows 8 的传统用户界面更像是稍微优化过的「高对比度」系统界面,这种不同系统交互逻辑被强行放在一个系统中,突兀的交互体验也使得 Windows 8 系列成为 Windows 历史上最难用的操作系统。

虽然 Metro 在桌面端首次尝试以失败告终,但其部分的设计思想依旧具有其先进性,毕竟扁平化设计的优势已经在多个平台逐渐显现,因此微软在吸收并对其进行了进一步的改进,这在下一代的 Windows 系统中得以彻底显现。

Microsoft Design Language 2 :Windows 交互设计的再一次拨乱反正

Windows 10 的发布可以看作是微软在系统设计上的一次拨乱反正,针对 Windows 8.x 割裂的 GUI,Windows 10 在功能组件上选择回归了传统 Windows 系统——最为明显的就是将 Windows 8.x 的「开始屏幕」改回用户熟悉的「开始菜单」,同时又顺应操作系统 GUI 的设计潮流,并没有重新选择回归 Windows 7 的 Aero 视觉体系,而是将部分Metro 设计元素继承下来,尤其是动态磁贴设计被保留在了 Windows 10 早期版本的开始菜单中。

事实上在 Windows 10 的系统设计中,只是针对原本激进且割裂的 UI 做了一次彻底的植入,或者说微软考虑的不再仅仅只是将 Metro UI 只用在触摸交互上,而是完全融入了键鼠交互这样的传统桌面使用场景中,而事实证明这一次的调整和改变是成功的,他为后来被称作是 Fluent Design 的 Windows 视觉风格打下了基础。

Windows 10 在整体 UI 的设计上恢复到相对紧凑的设计是一个不错的方向,但对于开发框架来说也引入了另一个问题 UWP,UWP 本质上就是为已死的 Windows Phone 而打造,考虑到一款应用要在性能较差的设备上运行,微软给 UWP 的限制自然也不少。

首先,UWP 和 iOS 上的 App 一样几乎只能使用微软官方提供的 API,但对于桌面端来说 UWP API 缺少了大量和底层交互的 API,大大缩小了桌面端程序可以做的事情。

其次是性能问题。UWP 程序的性能真的非常糟糕,以我们以前写过的 Files 这个 UWP 为例,每次打开一个文件夹都至少需要等上 1-3 秒,开发者也表示这是因为 UWP 官方 API 性能较差导致的,同样在微软官方开发的 UWP 图片也可以复现这一点。

最后还有兼容的问题,大家或许略有耳闻:WP 7、WP 8 和 WP 10 上的同一个应用是每次都需要重新开发一次的,开发者被连着坑了两次以后还是还是很难对微软重新拾起信心,因此在众多原因下 UWP 最后自然也消亡了。

UWP 最鼎盛的时代

在开发 UWP 时则需要使用另一套 UI 框架,即 WinUI 2。看到这里读者也不难看出,从 WPF 发布开始,Windows 桌面端软件的 UI 设计框架已经很多年都没发布过新的 UI 框架了,风格不匹配的同时功能也会有适应的情况,厂商给出的方案则是在能用的基础上魔改 WinForm;而且微软新的 UI 框架在当时 WinUI 只能开发 UWP 应用,但大场景下是要同时为各个平台的同时开发客户端,因此厂商迫切需要找到简单可靠的跨平台 UI 开发框架,因此在 Windows 上直接使用 Electron 框架、Qt 框架这样的支持跨平台的框架也变成了首选,更不用说 Electron 框架美化应用就像是写 css 一样,只需要一个前端开发即可完成。

Fluent Design:传统 Windows 设计语言的究极进化

在完成设计语言的统一之后,微软在 2017 年推出基于 Microsoft Design Language 2 的新设计语言:Fluent Design,在原本的设计基础上进行延展,整个设计语言围绕五个关键组件:Light(光感)、Depth(深度)、Motion(动画)、Material(材质)和 Scale(缩放)。尤其是对于光感、深度以及材质的运用。

  • Light(光感):当鼠标在一些软件中移动的时候,元素本身以及周围元素会产生光反馈效果,从而突出显示正在互动的控件状态。
  • Material(材质):Fluent Design 中使用物理纹理和空间深度的概念来区分各个 UI组件元素,并将它们放置在可视层次结构中,通过多种条件组合,形成了一种被称作是「亚克力材质」的视觉效果体验,在一定程度上跟接近拟物的现实场景。
  • Depth(深度):在用户界面中可以产生层次结构的视觉效果,靠近观察者的物体比背景中的物体移动得更快。视差可以产生深度、透视和运动的感 觉。

如果将 Windows 的设计语言分为两个极:拟物和扁平,那么 Windows Aero 则靠向拟物,Microsoft Design Language 2 则靠向扁平,至于 Fluent Design 恰好处于中间—在一定程度上,Fluent Design 借鉴甚至延续了原本 Microsoft Design Language 2 的扁平化的设计概念,保留了 UI 组件的干净清晰的设计,但同时也引用了 Aero 的视觉效果,比如窗口整体的半透明效果,毛玻璃效果、视差图案、投影等等,这种在现今被称作是「轻拟物风格」的设计最终在系统层面的表现上并不突兀,反而给整个系统组件带来一丝未来感。

Mica:Fluent Design 之上的小更新

虽然从视觉层面来看,Windows 11 摆脱了原先 Windows 10 的外观样式,默认设置下居中的开始菜单设计、窗口圆角的设计都显得那么与众不同,但事实上 Windows 11 的设计依旧延续自 Fluent Design——比如你依旧可以在 Windows 11 中看到毛玻璃以及半透明的效果。

但这种 Windows 11 上的这种元素透视效果也并非都来自亚克力材质——虽然这种效果带来的视觉设计优化非常明显,但是其副作用也极其明显——较高的系统性能开销,而如何在较低的系统开销下实现类似亚克力的视觉效果呢?Windows 11 给出的是这个名为 Mica 的材质优化方案。

和亚克力材质相比,Mica 达到类似亚克力的效果其实只有两个秘诀——首先对桌面壁纸颜色进行了预先采样,然后通过预先生成的背景效果来让窗口实现「半透明」的效果,实际上 Mica 更像是预先生成的矢量背景,通过「视觉欺骗」的形式让你觉得窗口具有半透明的毛玻璃效果。当然 Mica 的运用并非是完全孤立于 Fluent Design,他只能算是一个针对部分需要长时间频繁打开的软件窗口所推出的亚克力材质「低配版」,在其他应用场景下我们依旧可以在 Windows 11 中找到亚克力材质的身影。

微软也于 2020 年发布了新的 UI 框架 WinUI 3,将 WinUI 从 Windows SDK 的其它部分分离出去,将其变为了一个比较单纯的 UI 框架。总算是解决了 Windows 平台一直以来缺少新 UI 框架的问题,现在普通 Win32 应用(传统的 .exe)也能用上新 UI 了,比如 Apple 刚刚推出的「Windows 三件套」就是在用了 WinUI 3。

小结

从微软的角度来说,Windows 视觉风格的「套娃」并不完全是为追求兼容性冥顽不灵,而也是缺少可靠的 GUI 框架造成的历史包袱。鉴于微软经常朝令夕改,WinUI 3 会不会再次被抛弃也不好说,但至少就目前而言是一个开发者可以考虑的框架,未来说不定也有更多的程序也会换上这件「新衣」。

© 本文内容为少数派独家版权,仅限少数派会员在本平台阅读体验,不得转载或复制,否则即为侵权。


评论区
全部评论0
成为少数派会员方可评论,立即加入。若已是少数派会员,点击登录
还没有评论,来发表第一个评论吧
全部评论
还没有评论,来发表第一个评论吧
成为少数派会员方可评论,立即加入。若已是少数派会员,点击登录
会员新功能
内容侧边栏
点击这里拉开侧边栏,即可查看会员内容列表,快速切换内容。