标签 用户界面 下的文章

接上期:

 

这的确是一段漫长的旅程。

——Paul Thurrott《通往黄金之路:通往 Windows Vista 的漫漫长路》(后面的引用如未特殊说明均来自于此)

前言

纵有再多遗憾,Longhorn 项目的前半段也已告一段落。2004 年 8 月,微软重置了 Longhorn 项目,希望能借此摆脱之前的积重难返。

同年 8 月底,微软公开了 Longhorn 的新计划,宣布其将于 2006 年上市,并对外表示:

Longhorn 将显著提升用户的工作效率,为软件开发人员提供重要的新功能,并在安全性、部署和可靠性方面带来显著增强。

然而很长一段时间里,外界对 Longhorn 项目的内部情况几乎一无所知。Paul Thurrott 事后回顾时说:

2006 年末,微软以外的人根本不知道,微软事实上已经彻底重置了 Longhorn,基本上从头开始。

今天这篇文章,我们不妨就穿越时空,回到那个 Longhorn 重新开始的时期。

文中将讲述她的重生,以「Vista」的名称展现在世人面前;讲述她是如何被寄予厚望,却在最终面世后遭受批评不断;而当她在无人在意的角落寿终正寝后,她的名字又开始不断被提起……

回到原点

「Omega-13」:穿越时空

上期说到,2004 年 8 月,微软重置了 Longhorn 项目。团队以电影《惊暴银河系》(Galaxy Quest)中的时间旅行装置为名,将这项工作的代号取名为「Omega-13」。

这一时期,微软主要侧重于 Windows 的组件化及重新集成重置前版本的功能,同时保持稳定性。而出于现实考虑,许多原计划包含的功能(例如 WinFS1 和 Castles2)均被推迟或最终放弃。

虽然「Omega-13」只是代号,但重置后最初的 Longhorn 的确给人一种「穿越时空」的感觉。以 Build 5001(编译于 2004 年 9 月 27 日)为例,除了壁纸上的长角牛(Longhorn 一词的实际含义)和「关于 Windows」中的横幅将原来的「xp」改为「lh」之外,系统整体外观和体验与三年前发布的 Windows XP 区别不大,整个 Longhorn 项目仿佛一夜回到计划前。

不过也有人指出,根据版本号和一些零散组件的构建日期,部分重置前开发的组件(如 DWM 等)很可能在重置后毫发无损,因此重置后的 Longhorn 也并非完全是「从头开始」。

Windows Longhorn Build 5001

5048:缓慢复苏

在外界看来,很长一段时间里 Longhorn 项目都几乎毫无动静。直到 2005 年年中,微软才发布新的 Longhorn 版本,我们又进入了一个充满困惑、恐惧和猜测的漫长时期。

2005 年 5 月,WinHEC 2005 召开,微软展示并发布了 Build 5048。微软集团副总裁 Jim Allchin 在大会上表示,Longhorn 要实现的目标可被总结为以下五点:稳定、安全、易于部署、用户体验、长期支持。Longhorn 的开发正在缓慢复苏。

尽管该版本恢复了 Aero、DWM 等原有 Longhorn 项目已实现的功能,但与重置前的版本相比,它仍然更接近于 Windows XP。许多 Longhorn 原有的特色功能(如侧边栏等)在这一版本中并没有出现。

Paul Thurrott 毫不掩饰自己对这一版本的失望:

它似乎并没有比我们一年前收到的 Build 4074 相比有任何重大改进。事实上,它在很多方面都倒退了一步。

我之前看过 Longhorn 的高级 UI 设计,知道它最终会有多么出色。然而 5048 版本完全没有展现出这些。

步入正轨

经过多年的虚幻希望和拖延,Longhorn 项目似乎终于走到了尽头。但是,在 Build 5048 版本惨淡回归公众视野后,微软凭借出人意料的强劲表现有所反弹……

「Vista」:刷新你的「视界」

2005 年 7 月,微软宣布 Longhorn 的正式名字 Vista3

Vista 一词源于拉丁文的 Vedere,意为远景、展望,也与它的口号「为您的世界带来清晰」相呼应。微软副总裁 Jim Allchin 表达了对这一产品名称的热情,称其:

为这个新系统的功能勾勒了一幅美丽的图景,能够最大限度的激发人们的想象力,点燃用户的激情。

2005 年 7 月,微软宣布 Longhorn 的正式名字 Vista。

已知最早使用这一名称的版本是当年 7 月末面向测试人员发布的 Build 5112(Beta 1),但因为这个版本是在更名公告发布短短两天前才编译的,所以只是仓促地在桌面水印上修改了系统名称。

尽管如此,该版本与 Build 5048 相比仍然进步明显:高清图标、重新设计的资源管理器、虚拟文件夹4、新搜索界面等均被集成进来,此外还包含了家长控制、新的网络和音频堆栈、WinFX(.NET Framework 3.0)等诸多功能。

Windows Vista 的开发逐渐步入正轨。

Windows Vista Build 5112(因为这个版本是在更名公告发布短短两天前才编译的,所以只是仓促地在桌面水印上修改了系统名称)

改头换面

经过多年的失望和延误,Windows Vista 终于迈向快速完成的阶段。我们将看到持续的改进,而 5219 版本仅仅是个开始……微软已经出色地扭转了局面。

2005 年 9 月 12 日,PDC 2005 大会如期举行。微软发布了 Windows Vista Build 5219(Beta 2),即社区技术预览版(CTP)。

这一版本在 Beta 1 的基础上进行了多项改进,包括更丰富的 Aero 效果、重新设计的侧边栏、新的内置游戏、Windows 备份、从 Windows XP Tablet PC 版本中引入了适用平板电脑的组件,以及照片库等新应用的出现等。

可以说 Windows Vista 正在稳步推进、一路向好,也是时候看看 Windows Vista 都做出哪些改变了。

「Aero」再归来

Aero 是 Windows Vista 用户体验的名称,这一名称既体现了美学设计中所蕴含的价值,也体现了用户界面背后的愿景……Aero 旨在打造兼具专业性和美观性的设计,其美学理念创造了一种高质且优雅的体验,不仅能提升用户的工作效率,更能激发情感共鸣。——微软《Windows 设计指南》

上一期提到,在 Longhorn 项目中,微软提出了一种名为「Aero」5的视觉风格。项目重置后,Windows Vista 保留了 Aero 在 Longhorn 重置前便已有的毛玻璃模糊效果,并将其更加完善。

如下图,窗口边框带有毛玻璃模糊效果和类似玻璃折射的纹理,鼠标悬停在窗口按钮时周围则会发出柔和的光芒以示强调(这一设计与 Windows XP 类似)。

Windows Vista 的窗口

与重置前一致,Aero 依然由 DWM(桌面窗口管理器,采用了混成器技术)实现。在它的帮助下,窗口的拖动动画流畅了许多,不会再像 WinXP 那样出现残影。

在 WinXP 中,拖动窗口时有时会出现残影。

任务栏引入了实时预览窗口缩略图的功能,用户可以通过将鼠标悬浮在任务栏图标上显示对应窗口的页面;即使窗口内正在播放视频,窗口内容也能通过缩略图实时更新。

窗口预览

而按下 Win+Tab 键后,应用程序窗口将以 3D 形式排列,即「Flip 3D 应用切换」。

玻璃效果更是无处不在,比如下图 Windows 媒体播放器的播放控件,播放按键可以称得上是「晶莹剔透」,玻璃质感十足:

Windows Media Player 
Windows Media Player(紧凑模式)

内置游戏也针对 Aero 视觉风格进行了重新设计,引入了新游戏墨球6、Purble Place、Mahjong Titans、Chess Titans 等等。但有得也有失:三维弹球在这一版本中就与我们说再见了。7

重新设计的扫雷以及新游戏 Purble Place

另外还有一个细节:窗口最大化后,边框的透明效果会消失。这被称为「熄灯特效」。

早在 Longhorn 项目重置前,微软就在 PDC 2003 大会上演示过这一功能,并解释说这样设计的目的是「帮助用户专注于眼前窗口的内容,避免分心」。或许也有性能方面的考虑(调成不透明后就没必要渲染窗口后面的内容,节省性能)。然而这一「小巧思」没能在 Windows 的下一版本中延续下来。

Windows Vista 的「熄灯特效」。窗口最大化后,边框变为不透明

不过,这一切的前提是用户的电脑足够支撑起华丽的 Aero 特效。对于性能稍逊或者安装了家庭基础版 Vista 的电脑,便只能看到一种名为「Windows Basic」的主题(见下图),窗口预览、Flip 3D 等特性更是「查无此人」。

Windows Vista 的 Basic 主题

初心未改:边栏的回归

许多人可能已经注意到这里的右侧看起来与 Windows XP 有些不同。我们非常高兴能够随 Windows Vista 一起提供边栏,边栏非常清楚地提供了我一直在关注的实时信息。—— PDC 2005

重置后 Longhorn 的侧边栏设计与重置前的较为相似,但与后者相比它不再包含在资源管理器进程中;同时失去了一些功能,比如与任务栏合并等。

最终的 Windows Vista 版本包含 CPU 仪表盘、时钟、天气等共计 11 个基础小工具,用户也可以从微软网站上获取更多小工具。

顺便提一句,还记得微软最初试验的侧边栏功能叫什么吗?Sideshow。在 Vista 中,微软将这个名称用在了辅助显示功能上,用户可以通过这项功能在辅助显示设备上查看信息,算是边栏功能的延伸。

Vista 的 Sideshow 功能

壁纸:「Aurora(极光)」回归

在上一期文章中,我提到了 Longhorn 项目的一个功能「Aurora(极光)」,它可以在桌面上显示动态的极光效果。重置之后,微软也依然没有忘记这一功能。

不仅如此,「极光」成为了 Windows Vista 的默认壁纸的主要元素。微软如此偏爱「极光」元素也不无道理——微软总部(美国华盛顿州雷德蒙德)正好也是极光现象光顾的地方。

这张壁纸的设计理念是「平和、宁静、开阔」,也契合系统名称 Vista 的含义。其设计灵感甚至有一部分来自于她的上一代——设计团队将其想象成绿色山丘(WinXP 默认壁纸的元素之一)上空的极光。

Vista 中到处有与默认壁纸相呼应的设计,比如「欢迎」页面的横幅,控制面板的侧栏背景等,这些元素与壁纸融为一体,使整个系统充满了清新明丽的氛围。虽然当时还没有系统「主题色」的概念,但很明显 Windows Vista 的「主题色」是明亮的青绿色。

除了默认壁纸,Windows Vista 还内置了其他精美的壁纸,共计 51 张,是前一版本 WinXP 的一倍多。其种类更是各种各样:有实景拍摄,也有绘画作品;有彩色,也有黑白。

Windows Vista Wallpapers Pack
Windows Vista 壁纸一览

DreamScene:让桌面动起来

原先的「Aurora」功能除了有极光效果,还能让壁纸动态显示。Windows Vista 中,这一部分内容成为了一项名为「DreamScene(梦幻桌面)」的功能,允许用户将视频文件设置为壁纸。

然而这项功能限制比较大:其一,一般情况下只支持 MPEG 或 WMV 格式的视频;其二,它只包含在 Windows Ultimate Extras 扩展包里,仅支持 Vista 旗舰版且为付费功能。

到了 Windows 7,微软便不再提供该功能(不过也有人成功将 DreamScene 移植到了 Windows 7 中)。再后来?就是其他第三方动态壁纸软件(Wallpaer Engine、Lively、元气桌面等)大显身手的时代了。

Windows Vista 宣传片中出现的 DreamScene

不过就在去年 9 月,微软又在新系统中悄悄带回了动态壁纸功能,此时距 Vista 面世已有近 20 年。

图标:拟物新高度

在 Windows Vista 中,微软为其重新设计了一套符合 Aero 视觉风格的新图标。这一回微软又找到了老朋友——曾为 Windows XP 设计过图标的 Iconfactory。

经过两年的打磨,Iconfactory 成功设计出了符合 Aero 特色的图标。这套图标延续了 WinXP 的拟物化风格,但更为明亮精致,细节也更加丰富。8

左:The IconFactory 最初提供的图标;右:Windows Vista 正式版图标(部分)
Vista(大)/WinXP(小)图标对比

而针对同一图标,微软也会根据大小的不同而进行不同的处理。以「计算机」图标为例,其本体采用透视图绘制,但当其缩小到 16x16 及更小时,便会采用其正面图(如下图)。

微软在设计指南中写道:

Windows Vista 图标在透视和细节方面展现出良好的光学平衡和精准度。这使得它们无论放大还是缩小、近看还是远看都清晰美观。此外,这种图标风格也适用于高分辨率屏幕。

这也解决了在 Windows XP 中当图标过小时便难以分辨的问题。

针对同一图标,微软也会根据大小的不同而进行不同的处理。

面世:「『Wow』从现在开始!」

在 Vista 长达五年的开发过程中,我们见证了无数次的延期、数不清的承诺落空、大量功能的砍掉,以及最近 Windows 部门的一次彻底重组……终于,一切都结束了。

经历了近六年9的磨砺,终于,2006 年底至 2007 年初,Vista 陆续面向不同渠道(OEM 厂商、企业、个人等)发布,同时期发布的还有 Office 2007。Office 2007 采用的新界面「Ribbon UI」将被之后几代的 Windows 版本所采用——这就是另一个故事了。

最初,Windows Vista 的市场表现强劲。根据 Market Share by Net Applications 提供的数据,其市场份额从 2006 年 12 月的 0.16% 增长到 2007 年 4 月的 3.02%,这与微软最初的预测相符。并且上市仅 100 天,Windows Vista 的销量就达到了约 4000 万份。

按比尔·盖茨的说法「这比我们上一个主要版本 WinXP 的销量增长速度快了两倍」。与此同时,世界各地都开展了各种围绕 Vista 的营销活动。看起来,Windows Vista 将延续其前任版本的成功。

然而事实真是这样吗?

「远景」的「近难」

然而,在最初的强劲势头之后,Windows Vista 却面临了一系列困难。

首当其冲的是硬件要求过高。据 2007 年 3 月的一项调查,在对 1000 家企业的 14.5 万电脑统计后发现,80% 的电脑无法满足 Vista 四项硬件要求(见下图)中的至少一项。比如前面提到,Windows Vista,尤其是「Aero」包含的许多功能,对硬件都有着一定的要求,一旦硬件不达标,Aero 的效果便会大打折扣。

为什么会出现这种情况?一方面是微软期望过高,其 2004 年 4 月的内部文档指出「2006 年的主流电脑将有 4~6Ghz 的 CPU、2GB 内存、1TB 硬盘、三倍于 2004 年水平的显卡」等等,但以内存为例,2006 年出货电脑内存平均仅 800MB;另一方面,由于 Vista 上市不断延误,市场长期被适配 WinXP 的电脑占据,面对 Vista 陡然拔高的硬件需求,许多电脑便难以适应。即便后续电脑配置达标,用户仍倾向于安装 Windows XP。

Windows XP/Vista 硬件需求对比

雪上加霜的是,微软明知一些电脑无法达到 Windows Vista 的建议需求,却仍给这些电脑贴上「Windows Vista Capable」的标签。其中大量机型实际上只能运行功能阉割的基础版,先前提到的华丽 Aero 界面更是无从谈起。这甚至引发了一场美国消费者集体诉讼,成为微软史上的一大营销滑铁卢。

Intel Pentium HT Inside, Designed for Windows XP and Windows Vista ...
「Windows Vista Capable」标签

即使在硬件达标的情况下,Windows Vista 也有不小的性能问题。2007 年 1 月,《Tom 的硬件指南》发表应用测试结果,数据表明:在相同的配置之下,Windows Vista 的应用程序运行速度在一般情况下比 Windows XP 要慢。Aero 包含许多炫酷的特效,但代价就是对电脑性能的消耗。而即使关闭 Aero 特效,Vista 的基础界面资源占用依旧显著高于 Windows XP。

除此之外,Windows Vista 的实际体验也有不尽如人意之处:兼容性问题频发、本意是想保护系统安全的「用户账户控制(UAC)」功能却令用户不胜其扰、推出的版本种类繁多导致分界不清晰、用户无所适从……这些问题都严重影响了 Windows Vista 的声誉。

Windows Vista 的 UAC

当时的 Windows Vista 就像一个被微软呵护了六年的少女,等到终于能独立了,却发现自己无法适应外部的环境;而在用户眼里,她就像一位长期呆在温室的大小姐,虽然美丽却要求颇多,难以侍候。

都把 Windows Vista 比喻成少女了,就放一张 Vista 娘化形象在这里吧。来源:萌娘百科

同时,微软对 Vista 营销的也存在很多问题(「Vista Capable」事件最为典型),使得 Windows Vista 的市场表现成为一场彻头彻尾的灾难,甚至有人提出了「Vistaster(Vista + disaster(灾难))」一词来形容 Vista 的失败。苹果也趁机推波助澜,最知名的莫过于「Get a Mac」宣传片系列中对 Vista 的讽刺。

Nick Zone | Apple's Get a Mac 广告合集
「Get a Mac」宣传片。此处的「保镖」形象讽刺的是 Vista 的 UAC 功能

不过需要指出的是,上文描述的许多内容多是在 Windows Vista 发布初期的情况,在经过几次更新后,Vista 的许多问题其实已有显著改善。然而,由于最初 Vista 给人的印象实在糟糕,加上受到媒体和竞争对手的影响,这些改进也是无力回天。

Vista 作为一个失败操作系统的命运已经注定。她有着美丽的名字和美丽的界面,却并没有一个美丽的结局。

余烬散去,余晖依旧

Windows 7 发布后,Windows Vista 很快便被人遗忘。2012 年,微软结束了 Vista 的主流支持,扩展支持也于 2017 年结束。此时的 Vista 已如一场大火中留下的余烬,已无人在意她的离去。

然而就当一切似乎尘埃落定时,人们又想起了她:

Vista 奠定了之后几个版本的内核基础。原先被人诟病的 UAC 经过后续改良后已逐渐被人接受,BitLocker、TPM 等功能更是日后 Windows 安全组件的重要组成部分。

UI 设计上的故事也并未结束。重新设计的文件资源管理器(引入了面包屑栏等)成为之后文件管理器的基本界面;侧边栏在起起落落之后又在十几年后的 Windows 11 中重新复出;MDI 窗口10则依旧采用 Vista 的 Basic 主题……

Win11 小部件/Vista 边栏功能对比
MDI 窗口依旧采用 Vista 的 Basic 主题

对了,我们的「Aero」呢

「Aero」从未离去

随着时间不断流逝,「Aero」的意义已经不再局限于 Windows 本身,在某种程度上已经成了一个时代视觉风格的象征。甚至,我们依然能在如今的 Windows 和其他操作系统中看到 Aero 的影子。

Windows Vista 之后,她的继任者 Windows 7 继续完善了 Aero,增加了许多实用功能,这在下一期文章会详细介绍。

Windows 7 之后,尽管后继者 Windows 8 删去了 Aero 的毛玻璃特效,但依然保留了 Aero 的许多功能(比如窗口预览等),并对部分功能进行了完善,至今仍是 Windows 用户界面的重要组成部分。不仅如此,Longhorn/Vista 时期引入的 DWM 目前仍是 Windows 的窗口渲染方式。

而在 Vista 发布前后,也有许多操作系统和产品采用了类似的设计风格,比如苹果 iPhone OS 1.0 和 Mac OS X Leopard、Linux 的 KDE 4.1,以及 Xbox 360、Nintendo Wii 等。

KDE 4.1 delivers a next-gen desktop Linux experience | Ars Technica
KDE 4.1

Windows 10 时期,微软推出了一种名为「Acrylic(亚克力)」的视觉材料,作为新推出的 Fluent Design 系统的其中一个组件。正如其名称,其特点便是模糊效果,与「Aero」的毛玻璃效果有异曲同工之妙。

而在 Windows 11,微软又引入了一种名为「Mica(云母)」的新材料,尽管微软官方表示这是一种「不透明的动态材料」,原理是通过提取主题和壁纸颜色来绘制窗口。然而它与「Acrylic」类似的模糊效果背后也有「Aero」的影子。

「Frutiger Aero」:落日余晖

2017 年,Windows Vista 已经推出了近十年,此时占据设计领域主导的是扁平化设计。

也正是在这一年,消费者美学研究所的 Sofi Lee 提出了「Frutiger Aero」这一术语,用以指代 2004-2013 年流行的设计风格。其核心特征包括拟物化、光泽与玻璃质感、自然元素(如水、泡泡、天空、极光等)的大量采用;以蓝色、绿色和白色为主,营造清新、科技感和未来感的色彩等。其中「Frutiger」是一种无衬线字体,由瑞士平面设计师 Adrian Frutiger 设计,曾广泛应用于公共空间导视与平面设计;而「Aero」正是 2006-07 年发布的 Vista 的主要设计风格。

2022 年,此时 Vista 已面世近 15 年,采用微软最新设计语言 Fluent Design 的 Windows 11 也已于一年前正式发布,Aero 似乎已成为遥远的记忆。

但正是在这一年,Frutiger Aero 美学突然爆火。#frutigeraero 标签在 TikTok 上的浏览​​量已超过 3000 万次,Youtube 等视频网站也涌现出许多关于 Frutiger Aero 的短视频。甚至微软也在其官方 TikTok 账号上发布了一条专门介绍该美学的短视频。

关于 Frutiger Aero 突然流行的原因说法不一。有人认为部分原因是出于怀旧情结,也因为它的视觉风格丰富,与现代简约的扁平化风格形成对比,给人以新鲜感;也有人指出这可能源于 其以自然为中心的意象和乐观精神,与年轻一代日益增强的环保意识相吻合。

不管原因如何,Aero 又重新回归了大众的视野。

「就把她放这里了」

时间来到 2025 年。在这一年的 WWDC 大会上,苹果发布了 iOS 26/macOS 26,新系统一改沿用多年的平面化设计风格,引入了一种名为「Liquid Glass(液态玻璃)」的「全新」设计语言,特点是玻璃模糊效果和丰富的动效设计。

这再度引发了人们对玻璃质感和拟态设计的讨论,自然,以玻璃效果为主要特征之一的 Aero 也再度被提起。

苹果的 Liquid Glass

虽然微软官方并没有直接回应,但 Windows 官方账号在 Instagram 上发布了一段视频,背景是 Windows 的 Aero 界面,配文只有一句话「就把她放这里了(just gonna leave this here.)」。

「就把她放这里了(just gonna leave this here.)」

看吧,Aero 从未离去。可以预见,此后「Aero」还会被人不断地提起,而其创始——Windows Vista 也会被人不断怀念,成为独特的时代符号。

结尾:谁来拯救 Vista?

Aero 的故事还在继续,但 Vista 的一生已经结束。

该怎么形容 Windows Vista 的一生呢?

她的开发历程起起落落,曾被微软和人们寄予厚望;但在最终发布后风评急转直下,在各种批评中结束了自己的一生;然而当她孤独地离去后,却又不断有人想起了她。她并非完美,却也倾注了微软大量的心血;她并非成功,却也被人们所怀念,成为独特的时代印记。

无论如何,她确实开启了 Windows 的一个新时代。

2008 年 7 月,微软开展了一项名为「Mojave」的实验,实质是一次营销活动。实验中,微软邀请了约 140 名从未使用过 Windows Vista 的人作为实验者,给 Vista 和代号「Mojave」11的所谓「下一代微软操作系统」打分。结果发现,实验者对 Vista 的态度普遍负面,但都对「Mojave」打出了高分。

然而真相是:「Mojave」只是换皮的 Windows Vista。

尽管实验过程存在一些缺陷,Vista 的处境也并没有因为这项实验而得到较大改善,但它确实反映了部分问题,即 Vista 的失败原因并不能完全归结于她本身。正如 Windows 部门业务主管 Bill Veghte 所言,「现在 Vista 面临的最主要是感受问题」。当抛开偏见,人们自能发现 Vista 与 Aero 的独特魅力。

换句话说,如果微软在 Vista 之外再开发一个系统,既继承了她的优秀特性,又解决了她身上所存在的问题,这一版本是否能成功呢?答案是肯定的,她就是下一期的主角——Windows 7。

Windows 7 与 Vista 在许多方面可以说是「一脉相承」,甚至有「Windows Vista Service Pack 3」12的戏称,但从 Vista 到 7 的历程也不仅仅是「改一下名,换一套皮」那么简单,其中也倾注了微软很多的心血,更不是像一些人所理解的那样「Win7 的成功都是 Vista 的功劳」。

在下一期文章中,我将回顾 Windows 7 的开发历程,以及她在设计上所做出的一系列改进。这些改进,有些在 Vista 就已埋下了伏笔,而有些则是「摸着石头过河」,依据大量用户测试做出的。

而这些改进都是出于同一个目的:让电脑更「简单」。

- 本期完 -

参考资料(主要)

  1. 个人计算的新纪元、操作系统的大革命 - App-scope
  2. 18 年后回看 Windows Vista:它真的那么糟糕吗? - 少数派
  3. Windows Vista - betawiki
  4. 雷蒙德·陈 - 我的天啊,这是一部《银河探索》纪录片 - TheOldNewThing
  5. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第三部分):2004 年
  6. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第四部分):2005 年 1 月 - 7 月
  7. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第五部分):2005 年 8 月 - 12 月
  8. Paul Thurrott - 通往黄金之路:Windows Vista 的漫长征程(第六部分):2006 年 1 月 - 6 月
  9. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第七部分):2006 年 7 月至今
  10. 关于《三维弹球》被从 Windows Vista 移除的原因,雷蒙德·陈曾写过一篇文章:为什么 Windows Vista 系统中移除了三维弹球?,认为是因为三维弹球的代码在 64 位系统上有 bug;对于这一解释,一位名叫 NCommander 的视频博主在视频 三维弹球的消失,背后究竟隐藏了多少故事?中提出了质疑,指出三维弹球在 Longhorn 的 64 位版本(包括 amd64 和 IA-64 版本)中能正常运行,认为真正原因是原来三维弹球的设计不符合 Aero,但因为版权原因无法修改,只能移除。之后,雷蒙德·陈又撰写了一篇文章 填补三维弹球 64 位 Windows 系统故事中的一些空白 进行了补充。
  11. Windows Vista - Windows Wallpaper Wiki
  12. 图标(设计基础知识)- Win32 apps | Microsoft Learn
  13. Windows Vista 图片 - Wow 环游世界的前 100 天 - Softpedia
  14. 调查称 80% 企业 PC 达不到 Vista 硬件需求 - 中关村在线
  15. DRAM 市场重现乐观 下半年出现反弹 - 21ic 电子网
  16. 亚克力材料 - Windows apps | Microsoft Learn
  17. Mica 材质 - Windows apps | Microsoft Learn
  18. Frutiger Aero | Frutiger Aero Wiki | Fandom
  19. Frutiger Aero 美学 - frutiger-aero.org
  20. 为什么 Z 世代如此迷恋 Frutiger Aero 的设计美学 - Creative Bloq
  21. 微软用 Windows Aero 复古设计(Windows Vista)嘲讽 macOS 26 Liquid 设计 - Windows Latest

> 关注 少数派公众号,解锁全新阅读体验 📰

> 实用、好用的 正版软件,少数派为你呈现 🚀

    接上期:

     

    这的确是一段漫长的旅程。

    ——Paul Thurrott《通往黄金之路:通往 Windows Vista 的漫漫长路》(后面的引用如未特殊说明均来自于此)

    前言

    纵有再多遗憾,Longhorn 项目的前半段也已告一段落。2004 年 8 月,微软重置了 Longhorn 项目,希望能借此摆脱之前的积重难返。

    同年 8 月底,微软公开了 Longhorn 的新计划,宣布其将于 2006 年上市,并对外表示:

    Longhorn 将显著提升用户的工作效率,为软件开发人员提供重要的新功能,并在安全性、部署和可靠性方面带来显著增强。

    然而很长一段时间里,外界对 Longhorn 项目的内部情况几乎一无所知。Paul Thurrott 事后回顾时说:

    2006 年末,微软以外的人根本不知道,微软事实上已经彻底重置了 Longhorn,基本上从头开始。

    今天这篇文章,我们不妨就穿越时空,回到那个 Longhorn 重新开始的时期。

    文中将讲述她的重生,以「Vista」的名称展现在世人面前;讲述她是如何被寄予厚望,却在最终面世后遭受批评不断;而当她在无人在意的角落寿终正寝后,她的名字又开始不断被提起……

    回到原点

    「Omega-13」:穿越时空

    上期说到,2004 年 8 月,微软重置了 Longhorn 项目。团队以电影《惊暴银河系》(Galaxy Quest)中的时间旅行装置为名,将这项工作的代号取名为「Omega-13」。

    这一时期,微软主要侧重于 Windows 的组件化及重新集成重置前版本的功能,同时保持稳定性。而出于现实考虑,许多原计划包含的功能(例如 WinFS1 和 Castles2)均被推迟或最终放弃。

    虽然「Omega-13」只是代号,但重置后最初的 Longhorn 的确给人一种「穿越时空」的感觉。以 Build 5001(编译于 2004 年 9 月 27 日)为例,除了壁纸上的长角牛(Longhorn 一词的实际含义)和「关于 Windows」中的横幅将原来的「xp」改为「lh」之外,系统整体外观和体验与三年前发布的 Windows XP 区别不大,整个 Longhorn 项目仿佛一夜回到计划前。

    不过也有人指出,根据版本号和一些零散组件的构建日期,部分重置前开发的组件(如 DWM 等)很可能在重置后毫发无损,因此重置后的 Longhorn 也并非完全是「从头开始」。

    Windows Longhorn Build 5001

    5048:缓慢复苏

    在外界看来,很长一段时间里 Longhorn 项目都几乎毫无动静。直到 2005 年年中,微软才发布新的 Longhorn 版本,我们又进入了一个充满困惑、恐惧和猜测的漫长时期。

    2005 年 5 月,WinHEC 2005 召开,微软展示并发布了 Build 5048。微软集团副总裁 Jim Allchin 在大会上表示,Longhorn 要实现的目标可被总结为以下五点:稳定、安全、易于部署、用户体验、长期支持。Longhorn 的开发正在缓慢复苏。

    尽管该版本恢复了 Aero、DWM 等原有 Longhorn 项目已实现的功能,但与重置前的版本相比,它仍然更接近于 Windows XP。许多 Longhorn 原有的特色功能(如侧边栏等)在这一版本中并没有出现。

    Paul Thurrott 毫不掩饰自己对这一版本的失望:

    它似乎并没有比我们一年前收到的 Build 4074 相比有任何重大改进。事实上,它在很多方面都倒退了一步。

    我之前看过 Longhorn 的高级 UI 设计,知道它最终会有多么出色。然而 5048 版本完全没有展现出这些。

    步入正轨

    经过多年的虚幻希望和拖延,Longhorn 项目似乎终于走到了尽头。但是,在 Build 5048 版本惨淡回归公众视野后,微软凭借出人意料的强劲表现有所反弹……

    「Vista」:刷新你的「视界」

    2005 年 7 月,微软宣布 Longhorn 的正式名字 Vista3

    Vista 一词源于拉丁文的 Vedere,意为远景、展望,也与它的口号「为您的世界带来清晰」相呼应。微软副总裁 Jim Allchin 表达了对这一产品名称的热情,称其:

    为这个新系统的功能勾勒了一幅美丽的图景,能够最大限度的激发人们的想象力,点燃用户的激情。

    2005 年 7 月,微软宣布 Longhorn 的正式名字 Vista。

    已知最早使用这一名称的版本是当年 7 月末面向测试人员发布的 Build 5112(Beta 1),但因为这个版本是在更名公告发布短短两天前才编译的,所以只是仓促地在桌面水印上修改了系统名称。

    尽管如此,该版本与 Build 5048 相比仍然进步明显:高清图标、重新设计的资源管理器、虚拟文件夹4、新搜索界面等均被集成进来,此外还包含了家长控制、新的网络和音频堆栈、WinFX(.NET Framework 3.0)等诸多功能。

    Windows Vista 的开发逐渐步入正轨。

    Windows Vista Build 5112(因为这个版本是在更名公告发布短短两天前才编译的,所以只是仓促地在桌面水印上修改了系统名称)

    改头换面

    经过多年的失望和延误,Windows Vista 终于迈向快速完成的阶段。我们将看到持续的改进,而 5219 版本仅仅是个开始……微软已经出色地扭转了局面。

    2005 年 9 月 12 日,PDC 2005 大会如期举行。微软发布了 Windows Vista Build 5219(Beta 2),即社区技术预览版(CTP)。

    这一版本在 Beta 1 的基础上进行了多项改进,包括更丰富的 Aero 效果、重新设计的侧边栏、新的内置游戏、Windows 备份、从 Windows XP Tablet PC 版本中引入了适用平板电脑的组件,以及照片库等新应用的出现等。

    可以说 Windows Vista 正在稳步推进、一路向好,也是时候看看 Windows Vista 都做出哪些改变了。

    「Aero」再归来

    Aero 是 Windows Vista 用户体验的名称,这一名称既体现了美学设计中所蕴含的价值,也体现了用户界面背后的愿景……Aero 旨在打造兼具专业性和美观性的设计,其美学理念创造了一种高质且优雅的体验,不仅能提升用户的工作效率,更能激发情感共鸣。——微软《Windows 设计指南》

    上一期提到,在 Longhorn 项目中,微软提出了一种名为「Aero」5的视觉风格。项目重置后,Windows Vista 保留了 Aero 在 Longhorn 重置前便已有的毛玻璃模糊效果,并将其更加完善。

    如下图,窗口边框带有毛玻璃模糊效果和类似玻璃折射的纹理,鼠标悬停在窗口按钮时周围则会发出柔和的光芒以示强调(这一设计与 Windows XP 类似)。

    Windows Vista 的窗口

    与重置前一致,Aero 依然由 DWM(桌面窗口管理器,采用了混成器技术)实现。在它的帮助下,窗口的拖动动画流畅了许多,不会再像 WinXP 那样出现残影。

    在 WinXP 中,拖动窗口时有时会出现残影。

    任务栏引入了实时预览窗口缩略图的功能,用户可以通过将鼠标悬浮在任务栏图标上显示对应窗口的页面;即使窗口内正在播放视频,窗口内容也能通过缩略图实时更新。

    窗口预览

    而按下 Win+Tab 键后,应用程序窗口将以 3D 形式排列,即「Flip 3D 应用切换」。

    玻璃效果更是无处不在,比如下图 Windows 媒体播放器的播放控件,播放按键可以称得上是「晶莹剔透」,玻璃质感十足:

    Windows Media Player 
    Windows Media Player(紧凑模式)

    内置游戏也针对 Aero 视觉风格进行了重新设计,引入了新游戏墨球6、Purble Place、Mahjong Titans、Chess Titans 等等。但有得也有失:三维弹球在这一版本中就与我们说再见了。7

    重新设计的扫雷以及新游戏 Purble Place

    另外还有一个细节:窗口最大化后,边框的透明效果会消失。这被称为「熄灯特效」。

    早在 Longhorn 项目重置前,微软就在 PDC 2003 大会上演示过这一功能,并解释说这样设计的目的是「帮助用户专注于眼前窗口的内容,避免分心」。或许也有性能方面的考虑(调成不透明后就没必要渲染窗口后面的内容,节省性能)。然而这一「小巧思」没能在 Windows 的下一版本中延续下来。

    Windows Vista 的「熄灯特效」。窗口最大化后,边框变为不透明

    不过,这一切的前提是用户的电脑足够支撑起华丽的 Aero 特效。对于性能稍逊或者安装了家庭基础版 Vista 的电脑,便只能看到一种名为「Windows Basic」的主题(见下图),窗口预览、Flip 3D 等特性更是「查无此人」。

    Windows Vista 的 Basic 主题

    初心未改:边栏的回归

    许多人可能已经注意到这里的右侧看起来与 Windows XP 有些不同。我们非常高兴能够随 Windows Vista 一起提供边栏,边栏非常清楚地提供了我一直在关注的实时信息。—— PDC 2005

    重置后 Longhorn 的侧边栏设计与重置前的较为相似,但与后者相比它不再包含在资源管理器进程中;同时失去了一些功能,比如与任务栏合并等。

    最终的 Windows Vista 版本包含 CPU 仪表盘、时钟、天气等共计 11 个基础小工具,用户也可以从微软网站上获取更多小工具。

    顺便提一句,还记得微软最初试验的侧边栏功能叫什么吗?Sideshow。在 Vista 中,微软将这个名称用在了辅助显示功能上,用户可以通过这项功能在辅助显示设备上查看信息,算是边栏功能的延伸。

    Vista 的 Sideshow 功能

    壁纸:「Aurora(极光)」回归

    在上一期文章中,我提到了 Longhorn 项目的一个功能「Aurora(极光)」,它可以在桌面上显示动态的极光效果。重置之后,微软也依然没有忘记这一功能。

    不仅如此,「极光」成为了 Windows Vista 的默认壁纸的主要元素。微软如此偏爱「极光」元素也不无道理——微软总部(美国华盛顿州雷德蒙德)正好也是极光现象光顾的地方。

    这张壁纸的设计理念是「平和、宁静、开阔」,也契合系统名称 Vista 的含义。其设计灵感甚至有一部分来自于她的上一代——设计团队将其想象成绿色山丘(WinXP 默认壁纸的元素之一)上空的极光。

    Vista 中到处有与默认壁纸相呼应的设计,比如「欢迎」页面的横幅,控制面板的侧栏背景等,这些元素与壁纸融为一体,使整个系统充满了清新明丽的氛围。虽然当时还没有系统「主题色」的概念,但很明显 Windows Vista 的「主题色」是明亮的青绿色。

    除了默认壁纸,Windows Vista 还内置了其他精美的壁纸,共计 51 张,是前一版本 WinXP 的一倍多。其种类更是各种各样:有实景拍摄,也有绘画作品;有彩色,也有黑白。

    Windows Vista Wallpapers Pack
    Windows Vista 壁纸一览

    DreamScene:让桌面动起来

    原先的「Aurora」功能除了有极光效果,还能让壁纸动态显示。Windows Vista 中,这一部分内容成为了一项名为「DreamScene(梦幻桌面)」的功能,允许用户将视频文件设置为壁纸。

    然而这项功能限制比较大:其一,一般情况下只支持 MPEG 或 WMV 格式的视频;其二,它只包含在 Windows Ultimate Extras 扩展包里,仅支持 Vista 旗舰版且为付费功能。

    到了 Windows 7,微软便不再提供该功能(不过也有人成功将 DreamScene 移植到了 Windows 7 中)。再后来?就是其他第三方动态壁纸软件(Wallpaer Engine、Lively、元气桌面等)大显身手的时代了。

    Windows Vista 宣传片中出现的 DreamScene

    不过就在去年 9 月,微软又在新系统中悄悄带回了动态壁纸功能,此时距 Vista 面世已有近 20 年。

    图标:拟物新高度

    在 Windows Vista 中,微软为其重新设计了一套符合 Aero 视觉风格的新图标。这一回微软又找到了老朋友——曾为 Windows XP 设计过图标的 Iconfactory。

    经过两年的打磨,Iconfactory 成功设计出了符合 Aero 特色的图标。这套图标延续了 WinXP 的拟物化风格,但更为明亮精致,细节也更加丰富。8

    左:The IconFactory 最初提供的图标;右:Windows Vista 正式版图标(部分)
    Vista(大)/WinXP(小)图标对比

    而针对同一图标,微软也会根据大小的不同而进行不同的处理。以「计算机」图标为例,其本体采用透视图绘制,但当其缩小到 16x16 及更小时,便会采用其正面图(如下图)。

    微软在设计指南中写道:

    Windows Vista 图标在透视和细节方面展现出良好的光学平衡和精准度。这使得它们无论放大还是缩小、近看还是远看都清晰美观。此外,这种图标风格也适用于高分辨率屏幕。

    这也解决了在 Windows XP 中当图标过小时便难以分辨的问题。

    针对同一图标,微软也会根据大小的不同而进行不同的处理。

    面世:「『Wow』从现在开始!」

    在 Vista 长达五年的开发过程中,我们见证了无数次的延期、数不清的承诺落空、大量功能的砍掉,以及最近 Windows 部门的一次彻底重组……终于,一切都结束了。

    经历了近六年9的磨砺,终于,2006 年底至 2007 年初,Vista 陆续面向不同渠道(OEM 厂商、企业、个人等)发布,同时期发布的还有 Office 2007。Office 2007 采用的新界面「Ribbon UI」将被之后几代的 Windows 版本所采用——这就是另一个故事了。

    最初,Windows Vista 的市场表现强劲。根据 Market Share by Net Applications 提供的数据,其市场份额从 2006 年 12 月的 0.16% 增长到 2007 年 4 月的 3.02%,这与微软最初的预测相符。并且上市仅 100 天,Windows Vista 的销量就达到了约 4000 万份。

    按比尔·盖茨的说法「这比我们上一个主要版本 WinXP 的销量增长速度快了两倍」。与此同时,世界各地都开展了各种围绕 Vista 的营销活动。看起来,Windows Vista 将延续其前任版本的成功。

    然而事实真是这样吗?

    「远景」的「近难」

    然而,在最初的强劲势头之后,Windows Vista 却面临了一系列困难。

    首当其冲的是硬件要求过高。据 2007 年 3 月的一项调查,在对 1000 家企业的 14.5 万电脑统计后发现,80% 的电脑无法满足 Vista 四项硬件要求(见下图)中的至少一项。比如前面提到,Windows Vista,尤其是「Aero」包含的许多功能,对硬件都有着一定的要求,一旦硬件不达标,Aero 的效果便会大打折扣。

    为什么会出现这种情况?一方面是微软期望过高,其 2004 年 4 月的内部文档指出「2006 年的主流电脑将有 4~6Ghz 的 CPU、2GB 内存、1TB 硬盘、三倍于 2004 年水平的显卡」等等,但以内存为例,2006 年出货电脑内存平均仅 800MB;另一方面,由于 Vista 上市不断延误,市场长期被适配 WinXP 的电脑占据,面对 Vista 陡然拔高的硬件需求,许多电脑便难以适应。即便后续电脑配置达标,用户仍倾向于安装 Windows XP。

    Windows XP/Vista 硬件需求对比

    雪上加霜的是,微软明知一些电脑无法达到 Windows Vista 的建议需求,却仍给这些电脑贴上「Windows Vista Capable」的标签。其中大量机型实际上只能运行功能阉割的基础版,先前提到的华丽 Aero 界面更是无从谈起。这甚至引发了一场美国消费者集体诉讼,成为微软史上的一大营销滑铁卢。

    Intel Pentium HT Inside, Designed for Windows XP and Windows Vista ...
    「Windows Vista Capable」标签

    即使在硬件达标的情况下,Windows Vista 也有不小的性能问题。2007 年 1 月,《Tom 的硬件指南》发表应用测试结果,数据表明:在相同的配置之下,Windows Vista 的应用程序运行速度在一般情况下比 Windows XP 要慢。Aero 包含许多炫酷的特效,但代价就是对电脑性能的消耗。而即使关闭 Aero 特效,Vista 的基础界面资源占用依旧显著高于 Windows XP。

    除此之外,Windows Vista 的实际体验也有不尽如人意之处:兼容性问题频发、本意是想保护系统安全的「用户账户控制(UAC)」功能却令用户不胜其扰、推出的版本种类繁多导致分界不清晰、用户无所适从……这些问题都严重影响了 Windows Vista 的声誉。

    Windows Vista 的 UAC

    当时的 Windows Vista 就像一个被微软呵护了六年的少女,等到终于能独立了,却发现自己无法适应外部的环境;而在用户眼里,她就像一位长期呆在温室的大小姐,虽然美丽却要求颇多,难以侍候。

    都把 Windows Vista 比喻成少女了,就放一张 Vista 娘化形象在这里吧。来源:萌娘百科

    同时,微软对 Vista 营销的也存在很多问题(「Vista Capable」事件最为典型),使得 Windows Vista 的市场表现成为一场彻头彻尾的灾难,甚至有人提出了「Vistaster(Vista + disater(灾难))」一词来形容 Vista 的失败。苹果也趁机推波助澜,最知名的莫过于「Get a Mac」宣传片系列中对 Vista 的讽刺。

    Nick Zone | Apple's Get a Mac 广告合集
    「Get a Mac」宣传片。此处的「保镖」形象讽刺的是 Vista 的 UAC 功能

    不过需要指出的是,上文描述的许多内容多是在 Windows Vista 发布初期的情况,在经过几次更新后,Vista 的许多问题其实已有显著改善。然而,由于最初 Vista 给人的印象实在糟糕,加上受到媒体和竞争对手的影响,这些改进也是无力回天。

    Vista 作为一个失败操作系统的命运已经注定。她有着美丽的名字和美丽的界面,却并没有一个美丽的结局。

    余烬散去,余晖依旧

    Windows 7 发布后,Windows Vista 很快便被人遗忘。2012 年,微软结束了 Vista 的主流支持,扩展支持也于 2017 年结束。此时的 Vista 已如一场大火中留下的余烬,已无人在意她的离去。

    然而就当一切似乎尘埃落定时,人们又想起了她:

    Vista 奠定了之后几个版本的内核基础。原先被人诟病的 UAC 经过后续改良后已逐渐被人接受,BitLocker、TPM 等功能更是日后 Windows 安全组件的重要组成部分。

    UI 设计上的故事也并未结束。重新设计的文件资源管理器(引入了面包屑栏等)成为之后文件管理器的基本界面;侧边栏在起起落落之后又在十几年后的 Windows 11 中重新复出;MDI 窗口10则依旧采用 Vista 的 Basic 主题……

    Win11 小部件/Vista 边栏功能对比
    MDI 窗口依旧采用 Vista 的 Basic 主题

    对了,我们的「Aero」呢

    「Aero」从未离去

    随着时间不断流逝,「Aero」的意义已经不再局限于 Windows 本身,在某种程度上已经成了一个时代视觉风格的象征。甚至,我们依然能在如今的 Windows 和其他操作系统中看到 Aero 的影子。

    Windows Vista 之后,她的继任者 Windows 7 继续完善了 Aero,增加了许多实用功能,这在下一期文章会详细介绍。

    Windows 7 之后,尽管后继者 Windows 8 删去了 Aero 的毛玻璃特效,但依然保留了 Aero 的许多功能(比如窗口预览等),并对部分功能进行了完善,至今仍是 Windows 用户界面的重要组成部分。不仅如此,Longhorn/Vista 时期引入的 DWM 目前仍是 Windows 的窗口渲染方式。

    而在 Vista 发布前后,也有许多操作系统和产品采用了类似的设计风格,比如苹果 iPhone OS 1.0 和 Mac OS X Leopard、Linux 的 KDE 4.1,以及 Xbox 360、Nintendo Wii 等。

    KDE 4.1 delivers a next-gen desktop Linux experience | Ars Technica
    KDE 4.1

    Windows 10 时期,微软推出了一种名为「Acrylic(亚克力)」的视觉材料,作为新推出的 Fluent Design 系统的其中一个组件。正如其名称,其特点便是模糊效果,与「Aero」的毛玻璃效果有异曲同工之妙。

    而在 Windows 11,微软又引入了一种名为「Mica(云母)」的新材料,尽管微软官方表示这是一种「不透明的动态材料」,原理是通过提取主题和壁纸颜色来绘制窗口。然而它与「Acrylic」类似的模糊效果背后也有「Aero」的影子。

    「Frutiger Aero」:落日余晖

    2017 年,Windows Vista 已经推出了近十年,此时占据设计领域主导的是扁平化设计。

    也正是在这一年,消费者美学研究所的 Sofi Lee 提出了「Frutiger Aero」这一术语,用以指代 2004-2013 年流行的设计风格。其核心特征包括拟物化、光泽与玻璃质感、自然元素(如水、泡泡、天空、极光等)的大量采用;以蓝色、绿色和白色为主,营造清新、科技感和未来感的色彩等。其中「Frutiger」是一种无衬线字体,由瑞士平面设计师 Adrian Frutiger 设计,曾广泛应用于公共空间导视与平面设计;而「Aero」正是 2006-07 年发布的 Vista 的主要设计风格。

    2022 年,此时 Vista 已面世近 15 年,采用微软最新设计语言 Fluent Design 的 Windows 11 也已于一年前正式发布,Aero 似乎已成为遥远的记忆。

    但正是在这一年,Frutiger Aero 美学突然爆火。#frutigeraero 标签在 TikTok 上的浏览​​量已超过 3000 万次,Youtube 等视频网站也涌现出许多关于 Frutiger Aero 的短视频。甚至微软也在其官方 TikTok 账号上发布了一条专门介绍该美学的短视频。

    关于 Frutiger Aero 突然流行的原因说法不一。有人认为部分原因是出于怀旧情结,也因为它的视觉风格丰富,与现代简约的扁平化风格形成对比,给人以新鲜感;也有人指出这可能源于 其以自然为中心的意象和乐观精神,与年轻一代日益增强的环保意识相吻合。

    不管原因如何,Aero 又重新回归了大众的视野。

    「就把她放这里了」

    时间来到 2025 年。在这一年的 WWDC 大会上,苹果发布了 iOS 26/macOS 26,新系统一改沿用多年的平面化设计风格,引入了一种名为「Liquid Glass(液态玻璃)」的「全新」设计语言,特点是玻璃模糊效果和丰富的动效设计。

    这再度引发了人们对玻璃质感和拟态设计的讨论,自然,以玻璃效果为主要特征之一的 Aero 也再度被提起。

    苹果的 Liquid Glass

    虽然微软官方并没有直接回应,但 Windows 官方账号在 Instagram 上发布了一段视频,背景是 Windows 的 Aero 界面,配文只有一句话「就把她放这里了(just gonna leave this here.)」。

    「就把她放这里了(just gonna leave this here.)」

    看吧,Aero 从未离去。可以预见,此后「Aero」还会被人不断地提起,而其创始——Windows Vista 也会被人不断怀念,成为独特的时代符号。

    结尾:谁来拯救 Vista?

    Aero 的故事还在继续,但 Vista 的一生已经结束。

    该怎么形容 Windows Vista 的一生呢?

    她的开发历程起起落落,曾被微软和人们寄予厚望;但在最终发布后风评急转直下,在各种批评中结束了自己的一生;然而当她孤独地离去后,却又不断有人想起了她。她并非完美,却也倾注了微软大量的心血;她并非成功,却也被人们所怀念,成为独特的时代印记。

    无论如何,她确实开启了 Windows 的一个新时代。

    2008 年 7 月,微软开展了一项名为「Mojave」的实验,实质是一次营销活动。实验中,微软邀请了约 140 名从未使用过 Windows Vista 的人作为实验者,给 Vista 和代号「Mojave」11的所谓「下一代微软操作系统」打分。结果发现,实验者对 Vista 的态度普遍负面,但都对「Mojave」打出了高分。

    然而真相是:「Mojave」只是换皮的 Windows Vista。

    尽管实验过程存在一些缺陷,Vista 的处境也并没有因为这项实验而得到较大改善,但它确实反映了部分问题,即 Vista 的失败原因并不能完全归结于她本身。正如 Windows 部门业务主管 Bill Veghte 所言,「现在 Vista 面临的最主要是感受问题」。当抛开偏见,人们自能发现 Vista 与 Aero 的独特魅力。

    换句话说,如果微软在 Vista 之外再开发一个系统,既继承了她的优秀特性,又解决了她身上所存在的问题,这一版本是否能成功呢?答案是肯定的,她就是下一期的主角——Windows 7。

    Windows 7 与 Vista 在许多方面可以说是「一脉相承」,甚至有「Windows Vista Service Pack 3」12的戏称,但从 Vista 到 7 的历程也不仅仅是「改一下名,换一套皮」那么简单,其中也倾注了微软很多的心血,更不是像一些人所理解的那样「Win7 的成功都是 Vista 的功劳」。

    在下一期文章中,我将回顾 Windows 7 的开发历程,以及她在设计上所做出的一系列改进。这些改进,有些在 Vista 就已埋下了伏笔,而有些则是「摸着石头过河」,依据大量用户测试做出的。

    而这些改进都是出于同一个目的:让电脑更「简单」。

    - 本期完 -

    参考资料(主要)

    1. 个人计算的新纪元、操作系统的大革命 - App-scope
    2. 18 年后回看 Windows Vista:它真的那么糟糕吗? - 少数派
    3. Windows Vista - betawiki
    4. 雷蒙德·陈 - 我的天啊,这是一部《银河探索》纪录片 - TheOldNewThing
    5. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第三部分):2004 年
    6. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第四部分):2005 年 1 月 - 7 月
    7. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第五部分):2005 年 8 月 - 12 月
    8. Paul Thurrott - 通往黄金之路:Windows Vista 的漫长征程(第六部分):2006 年 1 月 - 6 月
    9. Paul Thurrott - 通往黄金之路:Windows Vista 的漫漫长路(第七部分):2006 年 7 月至今
    10. 关于《三维弹球》被从 Windows Vista 移除的原因,雷蒙德·陈曾写过一篇文章:为什么 Windows Vista 系统中移除了三维弹球?,认为是因为三维弹球的代码在 64 位系统上有 bug;对于这一解释,一位名叫 NCommander 的视频博主在视频 三维弹球的消失,背后究竟隐藏了多少故事?中提出了质疑,指出三维弹球在 Longhorn 的 64 位版本(包括 amd64 和 IA-64 版本)中能正常运行,认为真正原因是原来三维弹球的设计不符合 Aero,但因为版权原因无法修改,只能移除。之后,雷蒙德·陈又撰写了一篇文章 填补三维弹球 64 位 Windows 系统故事中的一些空白 进行了补充。
    11. Windows Vista - Windows Wallpaper Wiki
    12. 图标(设计基础知识)- Win32 apps | Microsoft Learn
    13. Windows Vista 图片 - Wow 环游世界的前 100 天 - Softpedia
    14. 调查称 80% 企业 PC 达不到 Vista 硬件需求 - 中关村在线
    15. DRAM 市场重现乐观 下半年出现反弹 - 21ic 电子网
    16. 亚克力材料 - Windows apps | Microsoft Learn
    17. Mica 材质 - Windows apps | Microsoft Learn
    18. Frutiger Aero | Frutiger Aero Wiki | Fandom
    19. Frutiger Aero 美学 - frutiger-aero.org
    20. 为什么 Z 世代如此迷恋 Frutiger Aero 的设计美学 - Creative Bloq
    21. 微软用 Windows Aero 复古设计(Windows Vista)嘲讽 macOS 26 Liquid 设计 - Windows Latest

    > 关注 少数派公众号,解锁全新阅读体验 📰

    > 实用、好用的 正版软件,少数派为你呈现 🚀

      importsysfromPyQt5.QtWidgetsimport(QApplication,QMainWindow,QListWidget,QVBoxLayout,QLineEdit,QWidget,QFrame)fromPyQt5.QtCoreimportQt,QEventfromPyQt5.QtWidgetsimportQDesktopWidgetimportpyautoguiimportpyperclipimporttimedefpowertoy_active_window(text):sleep_second=0.2time.sleep(sleep_second)pyautogui.hotkey("win","alt","k")time.sleep(sleep_second)pyperclip.copy(text)pyautogui.hotkey("ctrl","v")time.sleep(sleep_second)pyautogui.hotkey("enter") classCommandPalette(QWidget):def__init__(self,parent=None):super().__init__(parent)# 1. 设置 UI 属性:无边框、置顶、背景透明self.setWindowFlags(Qt.FramelessWindowHint|Qt.Dialog)self.setAttribute(Qt.WA_TranslucentBackground) # 外层容器(用于实现圆角和边框)self.container=QFrame(self)self.container.setFixedWidth(500)self.container.setStyleSheet("""QFrame {background-color: #252526;border: 1px solid #454545;border-radius: 6px;}""") layout=QVBoxLayout(self.container) # 2. 搜索输入框self.search_bar=QLineEdit()self.search_bar.setPlaceholderText("键入命令名称以筛选...")self.search_bar.setStyleSheet("""QLineEdit {background-color: #3c3c3c;color: #cccccc;border: 1px solid #007acc;padding: 6px;font-size: 14px;selection-background-color: #264f78;}""") # 3. 命令列表self.list_widget=QListWidget()self.list_widget.setStyleSheet("""QListWidget {background-color: #252526;color: #cccccc;border: none;font-size: 13px;outline: none;}QListWidget::item { padding: 10px; border-radius: 4px; }QListWidget::item:selected { background-color: #094771; color: white; }QListWidget::item:hover { background-color: #2a2d2e; }""") layout.addWidget(self.search_bar)layout.addWidget(self.list_widget) main_layout=QVBoxLayout(self)main_layout.setContentsMargins(0,0,0,0)main_layout.addWidget(self.container,alignment=Qt.AlignCenter) # 模拟命令数据# self.commands = [# "File: New File",# "Git: Commit All",# "Python: Run Current File",# "Settings: Open Settings",# "Terminal: Toggle Terminal",# "View: Layout Grid"# ]self.commands=[["1. book","book code"],["2. anti2","anti2 code"],["4. chrounim","chro"],["5.q-dir","q-dir"],]self.refresh_list("") # 信号连接self.search_bar.textChanged.connect(self.refresh_list)self.search_bar.returnPressed.connect(self.execute_selected)self.list_widget.itemClicked.connect(self.execute_selected) # 2. 当在列表中通过方向键选中某项并按回车时,触发 itemActivatedself.list_widget.itemActivated.connect(self.execute_selected) # 安装事件过滤器以捕获按键self.installEventFilter(self) defrefresh_list(self,text):self.list_widget.clear()# 简单的包含搜索(不区分大小写)# filtered = [cmd for cmd in self.commands if text.lower() in cmd.lower()]filtered=[info[0]forinfoinself.commandsiftext.lower()ininfo[0].lower()]self.list_widget.addItems(filtered)ifself.list_widget.count()>0:self.list_widget.setCurrentRow(0) defexecute_selected(self):item=self.list_widget.currentItem()ifitem:print(f"触发动作:{item.text()}")text=item.text()item=[eforeinself.commandsife[0]==text][0]send_text=item[1]print("#执行命令#:{}".format(send_text))powertoy_active_window(send_text)# self.hide()QApplication.instance().quit() defshow_palette(self):width=500height=400# 假设高度为 400self.setFixedSize(width,height) # 2. 获取屏幕中心# availableGeometry() 会避开任务栏,确保真正的视觉垂直居中screen_geo=QDesktopWidget().availableGeometry()screen_center=screen_geo.center() # 3. 计算面板位置,使其中心点与屏幕中心点重合# 我们可以通过 moveCenter 方便地实现qr=self.frameGeometry()qr.moveCenter(screen_center)self.move(qr.topLeft()) # 4. 显示并聚焦self.show()self.raise_()self.activateWindow()self.search_bar.setFocus()self.search_bar.selectAll()# 方便用户直接覆盖键入 defeventFilter(self,obj,event):ifevent.type()==QEvent.KeyPress:# Esc 键退出ifevent.key()==Qt.Key_Escape:self.hide()returnTrue# 下方向键快速进入列表选择ifevent.key()==Qt.Key_Downandself.search_bar.hasFocus():self.list_widget.setFocus()returnTruereturnsuper().eventFilter(obj,event) classMainWindow(QMainWindow):def__init__(self):super().__init__()self.setWindowTitle("PyQt5 VS Code Command Palette")self.resize(1000,700)# self.minimumSize()self.showMinimized()self.setStyleSheet("background-color: #1e1e1e;")# 模拟 VS Code 背景 # 初始化命令面板self.palette=CommandPalette(self)# self.palette.hide()self.palette.show_palette()defcenter_on_screen(self):# 获取窗口几何结构frame_geometry=self.frameGeometry() # 获取屏幕中心点# QDesktopWidget().availableGeometry() 会排除任务栏占据的空间screen_center=QDesktopWidget().availableGeometry().center() # 将窗口几何结构的中心点移动到屏幕中心点frame_geometry.moveCenter(screen_center) # 移动窗口左上角到计算出的位置self.move(frame_geometry.topLeft()) defkeyPressEvent(self,event):# 绑定快捷键 Ctrl+Shift+P (Qt.ControlModifier | Qt.ShiftModifier)if(event.modifiers()==(Qt.ControlModifier|Qt.ShiftModifier)andevent.key()==Qt.Key_P):self.palette.show_palette() if__name__=="__main__":app=QApplication(sys.argv)# 设置应用字体app.setStyle("Fusion")window=MainWindow()window.show()sys.exit(app.exec_())

      这个东西的主要作用是当我输入 1 时,它会找到 ["1. book", "book code"]这一项,然后 取出book code,然后激活 window 窗口切换器
      ,我的窗口切换器的的快捷是Win+alt+k,本来想用 ahk 来写的,但是 ahk 写 command picker 实在是不会.

      编者注

      本文首发于 Nikita Prokopov 的个人博客,原文 It’s hard to justify Tahoe icons,少数派经作者授权转载、翻译。

      在编译过程中,我们参考了作者 @Nullpinter  的译文版本(发布于该作者的个人博客)的标题和部分二级标题,在此表示感谢。正文内容为少数派编辑部独立编译。


      在读 1992 年版的《Macintosh 人机交互指南》(Macintosh Human Interface Guidelines)的时候,我发现了这张精美的插图:

      随附的说明是:

      时间快转到 2025 年,Apple 发布了 macOS Tahoe。最主要的变化?当数每个菜单选项都加上了不讨喜、容易使人分心、难以辨认、杂乱无章、支离破碎、让人感到疑惑和沮丧的图标(这是 Apple 自己的说法,可不是我编的!):

      Sequoia → Tahoe

      这就很糟糕了。但为什么呢?我们不妨深入探讨一下!

      免责声明:本文混合了来自 macOS 26.1 和 26.2 版本的截图,均取自系统预装的 Apple 原生应用。截图前未修改任何系统设置。

      图标应当具有区分度

      图标的主要功能是帮助你更快地找到所需内容。

      或许这听起来有违直觉,但给所有东西都加上图标却是错误的做法。与众不同的东西往往更加显眼,但如果所有东西都有一个对应的图标,那谁都没办法从中脱颖而出。

      同样的道理也适用于颜色:黑白图标看起来很整洁,但并不能帮你更快地找到目标!

      微软曾深谙此道:

      在下图右侧版本的菜单中,你会发现定位「保存」(Save)或「共享」(Share)的速度要快得多:

      右边的菜单看上去更清爽,也更整洁。

      如果是彩色版本效果则会更好(文本与图标分离得更清晰,找起来更快):

      我知道你可能不喜欢它的样子,我也不喜欢,毕竟要把这些图标处理好并非易事。但背后的原则是依然成立的:即便这个色彩选用未经实际设计的粗糙版本,也是更易用的。

      应用间的一致性

      具备一致性(consistency)的图标才是真正有用的图标,毕竟在找到这些图标之前,我得先掌握它们的它们大概都有什么共性。

      例如在看到「剪切」(Cut)命令和它旁边的图标长什么样之后,那我下一次找寻「剪切」操作时或许就会省点功夫直接去找这个图标:

      Tahoe 在这方面表现如何呢?请看「新建」图标的「五十度灰」:

      我甚至把它们收集在了一起,好让这种荒谬感更加显而易见。

      诚然,其中一些图标所代表的操作与其他不同,所以图标也有差异。但如果说创建「智能文件夹」和创建「日记条目」是两码事,下面这些又该如何解释呢?

      或者这些:

      还有这些:

      还是别找借口了吧。

      「打开」这个操作也是一样:

      「保存」也是:

      是的,其中一个保存图标竟然是个勾选的标记,而且它们甚至连箭头的方向都统一不了!

      再看看「关闭」按钮:

      「查找」(有时叫搜索,有时叫筛选):

      「删除」(出自剪切-拷贝-粘贴-删除操作):

      「最小化窗口」:

      这些图标所对应的都不是什么生僻又特殊的功能,相反它们所代表的都是基础操作,是垒砌操作系统的基石。这些操作每个应用都有,并且布局上也总在相近的位置。它们看起来不应该有这么多花样!

      应用内的一致性

      图标也用于工具栏(toolbars)。从概念上讲,工具栏中的操作与通过菜单调用的操作是完全相同的,因此应该使用相同的图标。所以实现起来的方式也应该是最简单的:在同一个应用内、甚至通常同时出现在屏幕上的图标,保持一致能有多难呢?

      那我们看看「预览」:

      「照片」:同样的用了上述两种图标,但这次调换了一下顺序¯_(ツ)_/¯

      「地图」和其他应用在「缩放」功能上的图标选用也常有差异:

      图标复用

      和完全不具备一致性类似的,另一个大忌是将同一个图标用于不同的操作。想象一下:我已经学会了下面这个图标代表「新建」:

      并且我打开另一个应用也看到了它。「太棒了,」我想,「我知道这个图标是什么意思了」:

      上当了吧!

      你可能会想:好吧,下面这个图标代表「快速查看」:

      有时候确实如此,但在另一些时候,这个图标的意思是「显示已完成项」:

      有时候下面这个图标意味着「导入」:

      但有时候它也代表着「更新」:

      与上面提到的一致性问题类似,图标复用问题不仅发生在不同应用之间。有时你可以在工具栏看到这个图标:

      然后在同一个应用的菜单里,发现同一个图标代表了别的东西:

      有时完全相同的图标会在同一个菜单中相遇。

      有时还会贴在一起。

      有时它们甚至会将一整串相同的图标排成列:

      这显然对谁都没帮助。如果所有图标都一样,用户很难快速定位到菜单项,也不会正确理解其背后所指代的功能。

      目前为止图标复用最惨烈的案例是「照片」应用:

      感觉那个负责为每个菜单项选择一个对应图标的人,可能头发都已经掉光了。

      理解万岁。

      细节要素过多

      审视图标时,我们通常能包容它们在最终落地环节中的一些微小差异。例如下面这些理论上来说各不相同的路标,实际上都在帮助我们理解同一件事:

      图标也是如此:如果你在一个地方画了一个飞出盒子的箭头,在另一个地方也画了同样的内容,但箭头的角度、描边的宽度,或者一个是实心的另一个不是,都不影响我们将这两个图标理解为同一个意思。

      比如指望下面这个两个图标表达完全不同的两个意思是在想什么呢?得了吧!

      两个仅仅在字号上有细微差别的字母 A:

      铅笔代表「重命名」,但稍粗一点的铅笔就代表「高亮」?

      方向不同的对角线箭头?

      占据 2/3 空间的三个点 vs. 占据全部空间的三个点。认真的吗?

      颜色更深的点?

      一张因纸角是否折叠,或纸上是否有线条而改变含义的纸?

      但「大 Boss」还得是箭头。下面这些箭头的意义各不相同:

      按上面这张图的道理,用户必须专业到足以区分圆圈被挤压的程度、箭头从顶部向右还是底部向右出发,以及箭头末端各延伸了多长。

      我在乎这些细节吗?说实话,不在乎。如果 Apple 能将这里的连续性一以贯之地应用到图标上,我或许会试试。但 Apple 指望我在一个地方区分「新建」的两种图标样式,同时又要我在另一个地方留意这种微小的细节?

      抱歉,看完上面这一切之后,这已经是信任问题的范畴了。

      细节过多

      图标理应在一定距离外也易于识别。每个图标设计师都知道:太细即是禁忌。为了特定的美学追求偶尔可以包容,但你不能依赖细节。

      Tahoe 菜单里的图标就可以说是太细了。它们中的大多数都容纳在 12×12 像素的正方形内(因为 Retina 屏幕的原因实际分辨率为 24×24),而且由于许多图标不是正方形,这些图标的某些尺寸往往小于 12 个像素。

      这可没有多少发挥的空间!要知道 Windows 95 的图标甚至都是 16×16 的。如果我们按同时代最具代表性的每英寸 72 点的 DPI 来计算,我们能得到一个物理大小为 0.22 英寸(5.6 毫米)的图标——而在配备 254 DPI 屏幕的现代 MacBook Pro 上,Tahoe 的 24×24 图标换算下来为 0.09 英寸(2.4 毫米)。24 固然比 16 更大,但实际效果却是这些图标的面积变成了原来的四分之一!

      模拟 72 DPI 下的 16×16(左)与 254 DPI 下的 24×24(右)的物理尺寸对比

      所以当我看到下面这个菜单时:

      我有些纠结了。我知道这些图标各不相同,但我很难分辨它们具体画的是什么。

      即使放大 20 倍也依然是一团糟:

      还有这三个不同的图标:

      难道我应该在这里分清楚加号和星标吗?

      有些线条比其他线条厚了半个像素,这竟然也是决定图标意义的关键:

      这画的是箭头?

      还是笔刷?

      看,这里有个小照相机。

      它甚至有一个更小的取景器,如果你放大 20 倍就几乎清晰可见了:

      还有这里。一个方框,方框里有一个圆,圆里面还有小到只有 2 个像素高度的字母 i:

      没看见?

      我也没看见。但它确实有个 i……

      还有下面这个居然是一个窗口!它甚至有「红绿灯」按钮!真是太可爱了:

      请记住:这些都是 retina 像素,是真实像素的 1/4。乔布斯本人曾说过它们理应是不可见的。

      It turns out there’s a magic number right around 300 pixels per inch, that when you hold something around to 10 to 12 inches away from your eyes, is the limit of the human retina to differentiate the pixels.

      但 Tahoe 的图标却指望你能看清它们。

      像素网格

      当发挥空间有限时,每个像素都至关重要。审慎对待每一个像素,才能做出好的图标。

      在 Tahoe 的图标这里,Apple 决定使用矢量字体来替代老式的位图(bitmaps)。这为 Apple 节省了资源——绘制一次,随处可用,并且还具备尺寸、显示分辨率和字宽上的灵活性。

      但这样做是有代价的:字体很难在垂直方向上精确渲染,比如它们的尺寸无法直接与像素一一对应,描边宽度也无法与像素网格(pixel grid)形成 1 对 1 映射等。所以这些矢量字体虽然随处可用,但处处都模糊且平庸:

      Tahoe 图标(左)及其像素对齐版本(右)

      可用的像素越多,或图形越简单,它们的观感自然也会更好一点。

      iPad OS 26 vs macOS 26

      但「复杂的细节」和「微小的图标尺寸」是个致命的组合。在 Apple 发布 380+ DPI 的 MacBook 之前,我们仍然得在像素网格这件事情上多加留意。

      令人困惑的隐喻

      图标还可以有另一个功能:帮助用户理解命令的含义。

      例如,在知晓特定使用上下文(移动窗口)的前提下,这些图标比文字更能快达意:

      但这些图标发挥作用的前提是,用户必须理解图标上画的是什么。它必须是用户熟知对象和计算机操作之间的清晰转化(如垃圾桶 → 删除),是被广泛使用的符号、易于理解的图示。《人机交互指南》(HIG)指出:

      比如最低级的错误是对对象的错误呈现。例如这是选中操作实际看起来的样子:

      但选中操作的图标长这样:

      老实说,我这篇随笔前前后后写了一个星期,但我至今完全不理解它为什么长这样。无边记/预览应用中有一个类似的对象,但它代表的一个文本框:

      它在 SF Symbols 中也被叫做 character.textbox

      那为什么它变成了「全选」的隐喻?我猜这可能是一个失误。

      另一个地方则在 Mac 上使用了 iOS 的文本选择样式作为隐喻!

      有些概念对应显而易见或约定俗成的隐喻。在这种情况下,不使用它们也是一种错误。例如书签:

      Apple 出于某些原因选择了一本书:

      有时你也有现成的界面元素可以用于图标,但这种做法也容易给用户造成混淆。比如长方形里的点看起来像输入密码而不是权限编辑:

      再比如这里的图标显示的是「勾选」,但实际动作却对应「取消勾选」。

      这是糟糕的情况:图标不仅没有提供帮助,反而主动误导了用户。

      构建一个对象加上某种指示符的双层级图标也很诱人,比如一个复选框加一个叉号,意思理应是「删除复选框」:

      或者一个用户加一个复选标记,意思理应「选择用户」:

      所以不幸的是这类图标构造很少真的有效。用户不会根据你提供的积木来造句,他们根本没有兴趣去解这些谜。

      寻找隐喻(metaphors)很难,相对来说名词比动词隐喻更好找,但菜单项大多是动词。「打开」这个操作看起来像什么?为什么会像一个指向右上角的箭头?

      我并不是说 Apple 搞错一个显而易见的「打开」的隐喻,事实上确实没有这种隐喻。但这其实也是关键:如果你找不到好的隐喻,不使用图标比使用一个糟糕的、令人困惑或违背直觉的图标要好。

      我喜欢通过一个游戏来测试隐喻的质量。即去掉标签,试着猜测含义。不信你试试:

      只要够努力就能给每个操作找到一个完美对应的图标,这事儿纯属痴心妄想。这是一场从一开始就注定失败的战斗,再多的资金或「管理层决策」都无法改变这一点。这当中的问题百分之百也都是自找的。

      话虽如此,我还是要在该表扬的地方表扬 Apple。他们选得好的那些隐喻,确实是非常直观:

      成对操作

      在所有令人困惑的隐喻中,有一个场景尤为特别:为那些功能完全相反的成对操作选择隐喻。比如撤销/重做、打开/关闭、左/右。

      如果这些图标使用相同的隐喻,那效果是极好的:

      因为这能节省你的时间和认知资源。学会一个,就能举一反三。

      正因如此,为相互关联的成对操作使用不同的隐喻也是一个常见错误:

      或者这里:

      另一个错误是在没有成对操作的地方制造关联。比如「返回」和「查看全部」?

      Tahoe 中有些菜单同时存在这两个错误。例如「显示/隐藏」缺少成对操作的关联性,而「已完成/子任务」之间却有:

      「导入」与「共享」互为成对操作,而不是「导出」:

      图标中的文字

      再次引用 HIG:

      HIG 的作者反对将文字作为图标的一部分。所以像这样的:

      或者这样的:

      至少在 1992 年是行不通的。

      我表示同意,但 Tahoe 有更严重的问题:完全由文字组成的图标。比如这个:

      很难分清「不应被字面阅读的、抽象的隐喻式图标文字」在哪里结束,而真正的文本又从哪里开始。图标和菜单操作文本在这里使用相同的字体、相同的颜色,那我该如何区分它们呢?图标在这里反而成了障碍:A...完成?Aa 字体?这些操作到底是什么意思?

      我也许能理解下面这两个图标:

      里面的点应该代表着什么,由此推导出下面这个图标的思维过程也可以理解:

      但是这个图标呢?

      没有任何装饰、没有任何效果,就是纯文本的 Abc,认真的吗?

      文本转换

      有人可能会认为使用图标来演示文本转换是个好主意。

      比如当你看到这个:

      或者这个:

      或者这个:

      仅凭图标就能理解文本会发生什么变化,图标即操作。

      另外 BIU 对应的操作(加粗、斜体、下划线)在文本处理领域已有共识,那这样做似乎没有缺点?

      不完全是。问题还是一样——文字图标看起来像文字而不是图标。此外,这些图标也是多余的,取第一个字母并重复一遍有什么意义?「Bold」(加粗)这个词本身就是以字母「B」开头的,读起来也不拗口,为什么要出现两次?当你再看它时:

      它甚至作为快捷键提示又被重复了一次……

      这个菜单其实有一个更好的设计方案:

      而且 Apple 至少在 33 年前就知道了。

      图标中的系统元素

      操作系统当然会为了自己的目的使用一些视觉元素。比如窗口控件、大小调整手柄、光标、快捷方式等。在图标中使用这些元素也是错误的。

      不幸的是,Apple 也掉进了这个陷阱。他们重复使用了箭头。

      快捷键符号:

      HIG 甚至有一个专门针对省略号(ellipsis)的章节,说明在菜单以外的其他地方使用是多么的危险。

      而这正是 Tahoe 所面临的问题。

      图标打断了阅读

      如果没有图标,你可以直接从上到下扫视菜单,只读头几个字母。因为它们都是对齐的:

      macOS Sequoia

      但在 Tahoe 中,有些菜单项有图标、有些没有,所以它们的对齐方式也不一样了:

      有些项目可能既有复选标记又有图标,或者只有其中一个,或者两个都没有,于是我们就遇到了这样的情况:

      麻了。

      特别提名

      这个菜单值得单独拿出来说一说:

      不同的动作使用相同的图标、没有显而易见的隐喻、不知为何让第一个图标比第二和第三个稍小一点。恭喜!它集齐了所有缺点。

      HIG 还有参考价值吗?

      我多次提到 HIG,你可能会想:一份 1992 年的界面手册在今天还有参考价值吗?计算机经历了巨变,我们不也该套用一份新的原则、设计和规范吗?

      是,也不是。比如如何让图标适应黑白显示器的建议已经过时了。但设计规则——只要是好的规则——在今天依然适用,因为它们是基于人、而不是计算机的运作方式才提出来的。

      人类不会每年发布一个新版本,我们的记忆力不会翻倍,我们的视力也不会变得更敏锐。注意力的运作方式一如既往。视觉识别、运动技能——这一切都和 1992 年一模一样。

      所以没错,在我们直接与脑机接口相连之前,HIG 将永远具有参考价值。

      结语

      在我看来,Apple 选择了一项不可能完成的任务:为每个菜单项添加一个对应图标。而事实上根本没有足够多合理的隐喻来支撑这样的做法。

      即便是有,这项任务的前提本身也值得商榷:所有东西都有图标,并不意味着用户能更快地找到他们想要的东西。

      即便前提成立,我仍然希望我能说:考虑到目标宏伟,他们已经尽力了。但这也不是事实:他们在一致性地应用隐喻以及图标本身的设计方面,做得实在很糟糕。

      Apple 成功地在一个操作系统版本中集齐了图标设计中的常见错误,而我希望这篇文章能帮助大家避免它们。我热爱计算机、热爱界面设计、热爱视觉交互。看到 30 年前就已经人人可用的好设计共识在今天被完全忽视或抛弃,让我感到很难过。

      往好的方面想:拥有比 Apple 更好设计已经没那么难了!让我们为此干杯。新年快乐!

      来自 SF Symbols:一个正在打电话的笑脸

      注释

      在审阅本文时,有人向我推荐了 Jim Nielsen 的文章,他的观点与我不谋而合。我认为这是我们的推论背后存在某种共同真理的迹象。

      另外请注意:Safari 的「文件」菜单自 26.0 以来变得更糟了,以前它只有 4 个图标,现在有 18 个!

      感谢 Kevin、Ryan 和 Nicki 阅读本文的草稿。

      更新:鸣谢

      > 关注 少数派公众号,解锁全新阅读体验 📰

      > 实用、好用的 正版软件,少数派为你呈现 🚀

        编者注

        本文首发于 Nikita Prokopov 的个人博客,原文 It’s hard to justify Tahoe icons,少数派经作者授权转载、翻译。

        在编译过程中,我们参考了作者 @Nullpinter  的译文版本(发布于该作者的个人博客)的标题和部分二级标题,在此表示感谢。正文内容为少数派编辑部独立编译。


        在读 1992 年版的《Macintosh 人机交互指南》(Macintosh Human Interface Guidelines)的时候,我发现了这张精美的插图:

        随附的说明是:

        时间快转到 2025 年,Apple 发布了 macOS Tahoe。最主要的变化?当数每个菜单选项都加上了不讨喜、容易使人分心、难以辨认、杂乱无章、支离破碎、让人感到疑惑和沮丧的图标(这是 Apple 自己的说法,可不是我编的!):

        Sequoia → Tahoe

        这就很糟糕了。但为什么呢?我们不妨深入探讨一下!

        免责声明:本文混合了来自 macOS 26.1 和 26.2 版本的截图,均取自系统预装的 Apple 原生应用。截图前未修改任何系统设置。

        图标应当具有区分度

        图标的主要功能是帮助你更快地找到所需内容。

        或许这听起来有违直觉,但给所有东西都加上图标却是错误的做法。与众不同的东西往往更加显眼,但如果所有东西都有一个对应的图标,那谁都没办法从中脱颖而出。

        同样的道理也适用于颜色:黑白图标看起来很整洁,但并不能帮你更快地找到目标!

        微软曾深谙此道:

        在下图右侧版本的菜单中,你会发现定位「保存」(Save)或「共享」(Share)的速度要快得多:

        右边的菜单看上去更清爽,也更整洁。

        如果是彩色版本效果则会更好(文本与图标分离得更清晰,找起来更快):

        我知道你可能不喜欢它的样子,我也不喜欢,毕竟要把这些图标处理好并非易事。但背后的原则是依然成立的:即便这个色彩选用未经实际设计的粗糙版本,也是更易用的。

        应用间的一致性

        具备一致性(consistency)的图标才是真正有用的图标,毕竟在找到这些图标之前,我得先掌握它们的它们大概都有什么共性。

        例如在看到「剪切」(Cut)命令和它旁边的图标长什么样之后,那我下一次找寻「剪切」操作时或许就会省点功夫直接去找这个图标:

        Tahoe 在这方面表现如何呢?请看「新建」图标的「五十度灰」:

        我甚至把它们收集在了一起,好让这种荒谬感更加显而易见。

        诚然,其中一些图标所代表的操作与其他不同,所以图标也有差异。但如果说创建「智能文件夹」和创建「日记条目」是两码事,下面这些又该如何解释呢?

        或者这些:

        还有这些:

        还是别找借口了吧。

        「打开」这个操作也是一样:

        「保存」也是:

        是的,其中一个保存图标竟然是个勾选的标记,而且它们甚至连箭头的方向都统一不了!

        再看看「关闭」按钮:

        「查找」(有时叫搜索,有时叫筛选):

        「删除」(出自剪切-拷贝-粘贴-删除操作):

        「最小化窗口」:

        这些图标所对应的都不是什么生僻又特殊的功能,相反它们所代表的都是基础操作,是垒砌操作系统的基石。这些操作每个应用都有,并且布局上也总在相近的位置。它们看起来不应该有这么多花样!

        应用内的一致性

        图标也用于工具栏(toolbars)。从概念上讲,工具栏中的操作与通过菜单调用的操作是完全相同的,因此应该使用相同的图标。所以实现起来的方式也应该是最简单的:在同一个应用内、甚至通常同时出现在屏幕上的图标,保持一致能有多难呢?

        那我们看看「预览」:

        「照片」:同样的用了上述两种图标,但这次调换了一下顺序¯_(ツ)_/¯

        「地图」和其他应用在「缩放」功能上的图标选用也常有差异:

        图标复用

        和完全不具备一致性类似的,另一个大忌是将同一个图标用于不同的操作。想象一下:我已经学会了下面这个图标代表「新建」:

        并且我打开另一个应用也看到了它。「太棒了,」我想,「我知道这个图标是什么意思了」:

        上当了吧!

        你可能会想:好吧,下面这个图标代表「快速查看」:

        有时候确实如此,但在另一些时候,这个图标的意思是「显示已完成项」:

        有时候下面这个图标意味着「导入」:

        但有时候它也代表着「更新」:

        与上面提到的一致性问题类似,图标复用问题不仅发生在不同应用之间。有时你可以在工具栏看到这个图标:

        然后在同一个应用的菜单里,发现同一个图标代表了别的东西:

        有时完全相同的图标会在同一个菜单中相遇。

        有时还会贴在一起。

        有时它们甚至会将一整串相同的图标排成列:

        这显然对谁都没帮助。如果所有图标都一样,用户很难快速定位到菜单项,也不会正确理解其背后所指代的功能。

        目前为止图标复用最惨烈的案例是「照片」应用:

        感觉那个负责为每个菜单项选择一个对应图标的人,可能头发都已经掉光了。

        理解万岁。

        细节要素过多

        审视图标时,我们通常能包容它们在最终落地环节中的一些微小差异。例如下面这些理论上来说各不相同的路标,实际上都在帮助我们理解同一件事:

        图标也是如此:如果你在一个地方画了一个飞出盒子的箭头,在另一个地方也画了同样的内容,但箭头的角度、描边的宽度,或者一个是实心的另一个不是,都不影响我们将这两个图标理解为同一个意思。

        比如指望下面这个两个图标表达完全不同的两个意思是在想什么呢?得了吧!

        两个仅仅在字号上有细微差别的字母 A:

        铅笔代表「重命名」,但稍粗一点的铅笔就代表「高亮」?

        方向不同的对角线箭头?

        占据 2/3 空间的三个点 vs. 占据全部空间的三个点。认真的吗?

        颜色更深的点?

        一张因纸角是否折叠,或纸上是否有线条而改变含义的纸?

        但「大 Boss」还得是箭头。下面这些箭头的意义各不相同:

        按上面这张图的道理,用户必须专业到足以区分圆圈被挤压的程度、箭头从顶部向右还是底部向右出发,以及箭头末端各延伸了多长。

        我在乎这些细节吗?说实话,不在乎。如果 Apple 能将这里的连续性一以贯之地应用到图标上,我或许会试试。但 Apple 指望我在一个地方区分「新建」的两种图标样式,同时又要我在另一个地方留意这种微小的细节?

        抱歉,看完上面这一切之后,这已经是信任问题的范畴了。

        细节过多

        图标理应在一定距离外也易于识别。每个图标设计师都知道:太细即是禁忌。为了特定的美学追求偶尔可以包容,但你不能依赖细节。

        Tahoe 菜单里的图标就可以说是太细了。它们中的大多数都容纳在 12×12 像素的正方形内(因为 Retina 屏幕的原因实际分辨率为 24×24),而且由于许多图标不是正方形,这些图标的某些尺寸往往小于 12 个像素。

        这可没有多少发挥的空间!要知道 Windows 95 的图标甚至都是 16×16 的。如果我们按同时代最具代表性的每英寸 72 点的 DPI 来计算,我们能得到一个物理大小为 0.22 英寸(5.6 毫米)的图标——而在配备 254 DPI 屏幕的现代 MacBook Pro 上,Tahoe 的 24×24 图标换算下来为 0.09 英寸(2.4 毫米)。24 固然比 16 更大,但实际效果却是这些图标的面积变成了原来的四分之一!

        模拟 72 DPI 下的 16×16(左)与 254 DPI 下的 24×24(右)的物理尺寸对比

        所以当我看到下面这个菜单时:

        我有些纠结了。我知道这些图标各不相同,但我很难分辨它们具体画的是什么。

        即使放大 20 倍也依然是一团糟:

        还有这三个不同的图标:

        难道我应该在这里分清楚加号和星标吗?

        有些线条比其他线条厚了半个像素,这竟然也是决定图标意义的关键:

        这画的是箭头?

        还是笔刷?

        看,这里有个小照相机。

        它甚至有一个更小的取景器,如果你放大 20 倍就几乎清晰可见了:

        还有这里。一个方框,方框里有一个圆,圆里面还有小到只有 2 个像素高度的字母 i:

        没看见?

        我也没看见。但它确实有个 i……

        还有下面这个居然是一个窗口!它甚至有「红绿灯」按钮!真是太可爱了:

        请记住:这些都是 retina 像素,是真实像素的 1/4。乔布斯本人曾说过它们理应是不可见的。

        It turns out there’s a magic number right around 300 pixels per inch, that when you hold something around to 10 to 12 inches away from your eyes, is the limit of the human retina to differentiate the pixels.

        但 Tahoe 的图标却指望你能看清它们。

        像素网格

        当发挥空间有限时,每个像素都至关重要。审慎对待每一个像素,才能做出好的图标。

        在 Tahoe 的图标这里,Apple 决定使用矢量字体来替代老式的位图(bitmaps)。这为 Apple 节省了资源——绘制一次,随处可用,并且还具备尺寸、显示分辨率和字宽上的灵活性。

        但这样做是有代价的:字体很难在垂直方向上精确渲染,比如它们的尺寸无法直接与像素一一对应,描边宽度也无法与像素网格(pixel grid)形成 1 对 1 映射等。所以这些矢量字体虽然随处可用,但处处都模糊且平庸:

        Tahoe 图标(左)及其像素对齐版本(右)

        可用的像素越多,或图形越简单,它们的观感自然也会更好一点。

        iPad OS 26 vs macOS 26

        但「复杂的细节」和「微小的图标尺寸」是个致命的组合。在 Apple 发布 380+ DPI 的 MacBook 之前,我们仍然得在像素网格这件事情上多加留意。

        令人困惑的隐喻

        图标还可以有另一个功能:帮助用户理解命令的含义。

        例如,在知晓特定使用上下文(移动窗口)的前提下,这些图标比文字更能快达意:

        但这些图标发挥作用的前提是,用户必须理解图标上画的是什么。它必须是用户熟知对象和计算机操作之间的清晰转化(如垃圾桶 → 删除),是被广泛使用的符号、易于理解的图示。《人机交互指南》(HIG)指出:

        比如最低级的错误是对对象的错误呈现。例如这是选中操作实际看起来的样子:

        但选中操作的图标长这样:

        老实说,我这篇随笔前前后后写了一个星期,但我至今完全不理解它为什么长这样。无边记/预览应用中有一个类似的对象,但它代表的一个文本框:

        它在 SF Symbols 中也被叫做 character.textbox

        那为什么它变成了「全选」的隐喻?我猜这可能是一个失误。

        另一个地方则在 Mac 上使用了 iOS 的文本选择样式作为隐喻!

        有些概念对应显而易见或约定俗成的隐喻。在这种情况下,不使用它们也是一种错误。例如书签:

        Apple 出于某些原因选择了一本书:

        有时你也有现成的界面元素可以用于图标,但这种做法也容易给用户造成混淆。比如长方形里的点看起来像输入密码而不是权限编辑:

        再比如这里的图标显示的是「勾选」,但实际动作却对应「取消勾选」。

        这是糟糕的情况:图标不仅没有提供帮助,反而主动误导了用户。

        构建一个对象加上某种指示符的双层级图标也很诱人,比如一个复选框加一个叉号,意思理应是「删除复选框」:

        或者一个用户加一个复选标记,意思理应「选择用户」:

        所以不幸的是这类图标构造很少真的有效。用户不会根据你提供的积木来造句,他们根本没有兴趣去解这些谜。

        寻找隐喻(metaphors)很难,相对来说名词比动词隐喻更好找,但菜单项大多是动词。「打开」这个操作看起来像什么?为什么会像一个指向右上角的箭头?

        我并不是说 Apple 搞错一个显而易见的「打开」的隐喻,事实上确实没有这种隐喻。但这其实也是关键:如果你找不到好的隐喻,不使用图标比使用一个糟糕的、令人困惑或违背直觉的图标要好。

        我喜欢通过一个游戏来测试隐喻的质量。即去掉标签,试着猜测含义。不信你试试:

        只要够努力就能给每个操作找到一个完美对应的图标,这事儿纯属痴心妄想。这是一场从一开始就注定失败的战斗,再多的资金或「管理层决策」都无法改变这一点。这当中的问题百分之百也都是自找的。

        话虽如此,我还是要在该表扬的地方表扬 Apple。他们选得好的那些隐喻,确实是非常直观:

        成对操作

        在所有令人困惑的隐喻中,有一个场景尤为特别:为那些功能完全相反的成对操作选择隐喻。比如撤销/重做、打开/关闭、左/右。

        如果这些图标使用相同的隐喻,那效果是极好的:

        因为这能节省你的时间和认知资源。学会一个,就能举一反三。

        正因如此,为相互关联的成对操作使用不同的隐喻也是一个常见错误:

        或者这里:

        另一个错误是在没有成对操作的地方制造关联。比如「返回」和「查看全部」?

        Tahoe 中有些菜单同时存在这两个错误。例如「显示/隐藏」缺少成对操作的关联性,而「已完成/子任务」之间却有:

        「导入」与「共享」互为成对操作,而不是「导出」:

        图标中的文字

        再次引用 HIG:

        HIG 的作者反对将文字作为图标的一部分。所以像这样的:

        或者这样的:

        至少在 1992 年是行不通的。

        我表示同意,但 Tahoe 有更严重的问题:完全由文字组成的图标。比如这个:

        很难分清「不应被字面阅读的、抽象的隐喻式图标文字」在哪里结束,而真正的文本又从哪里开始。图标和菜单操作文本在这里使用相同的字体、相同的颜色,那我该如何区分它们呢?图标在这里反而成了障碍:A...完成?Aa 字体?这些操作到底是什么意思?

        我也许能理解下面这两个图标:

        里面的点应该代表着什么,由此推导出下面这个图标的思维过程也可以理解:

        但是这个图标呢?

        没有任何装饰、没有任何效果,就是纯文本的 Abc,认真的吗?

        文本转换

        有人可能会认为使用图标来演示文本转换是个好主意。

        比如当你看到这个:

        或者这个:

        或者这个:

        仅凭图标就能理解文本会发生什么变化,图标即操作。

        另外 BIU 对应的操作(加粗、斜体、下划线)在文本处理领域已有共识,那这样做似乎没有缺点?

        不完全是。问题还是一样——文字图标看起来像文字而不是图标。此外,这些图标也是多余的,取第一个字母并重复一遍有什么意义?「Bold」(加粗)这个词本身就是以字母「B」开头的,读起来也不拗口,为什么要出现两次?当你再看它时:

        它甚至作为快捷键提示又被重复了一次……

        这个菜单其实有一个更好的设计方案:

        而且 Apple 至少在 33 年前就知道了。

        图标中的系统元素

        操作系统当然会为了自己的目的使用一些视觉元素。比如窗口控件、大小调整手柄、光标、快捷方式等。在图标中使用这些元素也是错误的。

        不幸的是,Apple 也掉进了这个陷阱。他们重复使用了箭头。

        快捷键符号:

        HIG 甚至有一个专门针对省略号(ellipsis)的章节,说明在菜单以外的其他地方使用是多么的危险。

        而这正是 Tahoe 所面临的问题。

        图标打断了阅读

        如果没有图标,你可以直接从上到下扫视菜单,只读头几个字母。因为它们都是对齐的:

        macOS Sequoia

        但在 Tahoe 中,有些菜单项有图标、有些没有,所以它们的对齐方式也不一样了:

        有些项目可能既有复选标记又有图标,或者只有其中一个,或者两个都没有,于是我们就遇到了这样的情况:

        麻了。

        特别提名

        这个菜单值得单独拿出来说一说:

        不同的动作使用相同的图标、没有显而易见的隐喻、不知为何让第一个图标比第二和第三个稍小一点。恭喜!它集齐了所有缺点。

        HIG 还有参考价值吗?

        我多次提到 HIG,你可能会想:一份 1992 年的界面手册在今天还有参考价值吗?计算机经历了巨变,我们不也该套用一份新的原则、设计和规范吗?

        是,也不是。比如如何让图标适应黑白显示器的建议已经过时了。但设计规则——只要是好的规则——在今天依然适用,因为它们是基于人、而不是计算机的运作方式才提出来的。

        人类不会每年发布一个新版本,我们的记忆力不会翻倍,我们的视力也不会变得更敏锐。注意力的运作方式一如既往。视觉识别、运动技能——这一切都和 1992 年一模一样。

        所以没错,在我们直接与脑机接口相连之前,HIG 将永远具有参考价值。

        结语

        在我看来,Apple 选择了一项不可能完成的任务:为每个菜单项添加一个对应图标。而事实上根本没有足够多合理的隐喻来支撑这样的做法。

        即便是有,这项任务的前提本身也值得商榷:所有东西都有图标,并不意味着用户能更快地找到他们想要的东西。

        即便前提成立,我仍然希望我能说:考虑到目标宏伟,他们已经尽力了。但这也不是事实:他们在一致性地应用隐喻以及图标本身的设计方面,做得实在很糟糕。

        Apple 成功地在一个操作系统版本中集齐了图标设计中的常见错误,而我希望这篇文章能帮助大家避免它们。我热爱计算机、热爱界面设计、热爱视觉交互。看到 30 年前就已经人人可用的好设计共识在今天被完全忽视或抛弃,让我感到很难过。

        往好的方面想:拥有比 Apple 更好设计已经没那么难了!让我们为此干杯。新年快乐!

        来自 SF Symbols:一个正在打电话的笑脸

        注释

        在审阅本文时,有人向我推荐了 Jim Nielsen 的文章,他的观点与我不谋而合。我认为这是我们的推论背后存在某种共同真理的迹象。

        另外请注意:Safari 的「文件」菜单自 26.0 以来变得更糟了,以前它只有 4 个图标,现在有 18 个!

        感谢 Kevin、Ryan 和 Nicki 阅读本文的草稿。

        更新:鸣谢

        > 关注 少数派公众号,解锁全新阅读体验 📰

        > 实用、好用的 正版软件,少数派为你呈现 🚀

          AI图像生成网页交互平台 - 基于Streamlit构建的Web应用,提供简洁的用户界面和实用的图像生成功能

          应用预览

          AI图像生成网页交互平台 - 基于Streamlit构建的Web应用,提供简洁的用户界面和实用的图像生成功能

          项目结构

          showimageweb/
          ├── app.py                    # 主应用文件(Streamlit界面)
          ├── Dockerfile               # Docker构建配置
          ├── requirements.txt         # Python依赖包
          ├── docker-compose.yml       # Docker Compose配置
          ├── LICENSE                  # MIT许可证
          ├── README.md                # 项目文档
          └── assets/
              └── showimage-web-demo.png # 应用预览图

          技术栈

          • 前端框架: Streamlit 1.29.0+
          • 后端语言: Python 3.9+
          • 容器化: Docker & Docker Compose
          • 核心依赖: requests, streamlit, base64

          特性

          • 高性能: 基于Streamlit的快速响应界面
          • 美观UI: 现代化的卡片式设计,支持自定义画廊列数
          • 响应式: 自适应不同屏幕尺寸,适配移动端
          • 历史记录: 自动保存生成记录,支持无限数量存储
          • 配置选项: 支持随机/固定种子,自定义API配置
          • 实时状态: 生成进度实时显示,带有时间统计
          • 一键下载: PNG图片直接下载,自动命名
          • 通用API: 兼容多种AI图像生成服务
          • 内存管理: 智能存储管理,自动base64优化

          快速开始

          部署方式

          方式一:Docker 部署(推荐)

          # 克隆项目
          git clone https://github.com/kaima2022/showimageweb.git
          cd showimageweb
          
          # 使用 Docker Compose 启动
          docker compose up -d

          方式二:本地部署

          # 克隆项目
          git clone https://github.com/kaima2022/showimageweb.git
          cd showimageweb
          
          # 安装依赖
          pip install -r requirements.txt
          # 启动
          streamlit run app.py --server.address=0.0.0.0 --server.port=8501

          访问应用

          http://localhost:8501

          演示

          公开KEY:sk-zKTGcw8llBFZLpXAAsxTmMSmCfY8DNfe

          API配置

          应用支持任意兼容的AI图像生成API:

          支持的API格式

          • 请求方式: POST
          • 认证方式: Bearer Token
          • 请求格式: {"prompt": "...", "seed": ...}
          • 响应格式: {"base64": "..."}

          配置说明

          1. API URL: 完整的API接口地址(如:https://api.example.com/v1/generate
          2. API Key: 您的API密钥
          3. 种子设置: 支持随机种子或固定种子复现结果

          兼容的服务

          • OpenAI DALL-E API
          • Stable Diffusion API
          • 自建AI图像服务
          • 任何支持标准格式的图像生成API

          配置选项

          环境变量(可选)

          # Streamlit配置
          STREAMLIT_SERVER_ADDRESS=0.0.0.0
          STREAMLIT_SERVER_PORT=8501
          STREAMLIT_SERVER_HEADLESS=true
          
          # 时区设置
          TZ=Asia/Shanghai

          自定义配置

          • 画廊列数: 1-4列可调
          • API超时: 默认60秒
          • 图片格式: PNG格式输出
          • 文件命名: 时间戳自动命名

          贡献指南

          1. Fork 本项目
          2. 创建特性分支 (git checkout -b feature/AmazingFeature)
          3. 提交更改 (git commit -m 'Add some AmazingFeature')
          4. 推送到分支 (git push origin feature/AmazingFeature)
          5. 开启 Pull Request