Windows Aero Windows Aero

Scope: This entry covers Microsoft's actual OS chrome (Vista 2006 to Windows 7, retired by Windows 8's flat Metro). The broader glossy eco-tech mood of the same years — sky, grass, water imagery — is Frutiger Aero, a retrospective label that borrowed Aero's name.

范围:本条涵盖微软真正的 OS 窗口装饰层(2006 年的 Vista 到 Windows 7,被 Windows 8 扁平的 Metro 取代)。同些年更广的那股亮泽生态科技气质 —— 天空、草地、水的意象 —— 是 Frutiger Aero,一个借用了 Aero 名字的回溯性标签。

Now Playing
Midnight Drive
Neon Coast
1:123:48

标本可交互 —— 点点看。Specimen is live — try it.

If you called it…如果你管它叫……

“the see-through window borders in windows 7”「Windows 7 那种透明的窗口边框」“frosted glass titlebars from vista”「Vista 那种毛玻璃标题栏」“the close button that glows red when you hover it”「鼠标一悬停就发红的关闭按钮」“windows with transparent blurry frames”「边框透明又模糊的窗口」“the glassy taskbar with reflections”「带反射的玻璃质感任务栏」“the green shimmering progress bar from windows 7”「Windows 7 那条泛着波光的绿色进度条」

Full style DNA完整风格 DNA

  1. Transparent blurred window frame透明模糊的窗口边框 depth defining定义特征

    The title bar and window border are real translucent glass — the wallpaper and windows behind blur through them, while the window's content area stays opaque.

    标题栏和窗口边框是真正的半透明玻璃 —— 后面的壁纸和窗口会模糊地透过来,而窗口内容区保持不透明。

  2. Specular sweeps and reflections镜面光扫与反射 surface defining定义特征

    Diagonal light streaks cross the glass and controls, as if the chrome were polished — reflection is part of the material, not an accent.

    斜向的光条扫过玻璃和控件,好像装饰层被抛光过 —— 反射是材质本身的一部分,不是点缀。

  3. Glowing hot controls悬停发光的控件 color defining定义特征

    Controls light up under the cursor: the close button floods red, min/max glow blue, buttons gain a luminous halo — glow is the hover language.

    控件在光标下被点亮:关闭按钮泛起红光,最小化/最大化发蓝光,按钮罩上一圈莹亮的光晕 —— 发光就是悬停的语言。

  4. Luminous depth gradients莹亮的纵深渐变 color defining定义特征

    Blues and greens that glow as if backlit — the shimmering green progress bar and pearlescent button fills, never flat color.

    像背光一样发亮的蓝和绿 —— 泛波光的绿色进度条、珠光的按钮填充,绝不用纯色平涂。

  5. Smooth window choreography流畅的窗口编排 motion supporting辅助特征

    Windows animate open, minimize with a swoop, and stack in Flip 3D — composited motion was the point of the new rendering engine.

    窗口带动画打开、呼啸着最小化、在 Flip 3D 里层叠 —— 合成动效正是新渲染引擎的意义所在。

  6. Softly rounded chrome柔圆的界面装饰 geometry supporting辅助特征

    Window corners and buttons are gently rounded with 1px bright edge highlights lining the glass.

    窗口四角和按钮都轻轻倒圆,玻璃边缘勾着 1px 的亮边高光。

  7. Nature imagery as requirement把自然意象当必需品 imagery avoid避免

    Grass, sky, and fish belong to the era's mood, not the OS chrome — needing them means you're describing Frutiger Aero.

    草地、天空和鱼属于那个年代的气质,不属于 OS 装饰层 —— 如果非它们不可,说明你描述的是 Frutiger Aero。

Often confused with: Frutiger Aero最容易混淆:Frutiger Aero

Now Playing
Midnight Drive
Neon Coast
1:123:48

Windows AeroWindows Aero

Midnight Drive
Neon Coast
1:123:48

Frutiger AeroFrutiger Aero

This is Windows Aero because it's the OS chrome itself — glass window frames, glowing caption buttons, luminous progress bars, shipped by Microsoft.

这是 Windows Aero,因为它就是 OS 的窗口装饰层本身 —— 玻璃窗框、会发光的标题栏按钮、莹亮的进度条,由微软正式出货。

It would become Frutiger Aero if you meant the whole era's optimistic eco-tech MOOD — glossy nature wallpapers, water droplets, skies — which surrounded the chrome but isn't the chrome.

如果你说的是那个年代整体的乐观生态科技气质 —— 亮泽的自然壁纸、水珠、天空 —— 那些东西围绕着装饰层却不是装饰层本身,那就变成 Frutiger Aero 了。

In code — optional starting points代码写法 —— 可选起点

The glass frame: tinted blur + double bright edge

background: rgba(190, 215, 240, .35); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 24px rgba(0,20,60,.35);

The signature red close-button glow

.close:hover { background: radial-gradient(circle at 50% 40%, #ff9d8a, #e81123 70%); box-shadow: 0 0 10px rgba(232,17,35,.7); }

The Windows 7 progress shimmer — pause under prefers-reduced-motion

background: linear-gradient(180deg,#8ef08e,#1fbf3a 45%,#0f9e2c); overlay: a 30%-wide white gradient strip animated left→right every 2s;

Style brief — paste into your agent风格 Brief —— 粘贴给你的代理

Create the surface using Windows Aero (Vista/7) styling. Defining signals: the window frame as transparent blurred glass — title bar and border show the scene behind them (backdrop-filter: blur(12px) saturate(1.3) on a rgba white/blue tint) while the content area stays opaque; diagonal specular light sweeps across the glass (a rotated linear-gradient white streak at low opacity); caption buttons that GLOW on hover — close floods red with a soft outer halo; luminous gradients for accents, like the shimmering green progress bar (gradient + a slow-moving highlight); 1px bright inner edge lining every glass pane; softly rounded chrome corners. Keep wallpaper and layout flexible — the glass needs something colorful behind it to read. Do not drift into Frutiger Aero: no nature imagery is required — this is the chrome language, not the era's mood board. Preserve title text legibility over unpredictable wallpapers (Aero drew a soft glow behind window titles — replicate it), 4.5:1 contrast for content text, hover glows paired with visible focus states, and reduced-motion alternatives for shimmer and window animation.

用 Windows Aero(Vista/7)的风格来创作这个界面。决定性信号:窗口边框是透明毛玻璃 —— 标题栏和边框透出背后的场景(在白/蓝色调的 rgba 底色上加 backdrop-filter: blur(12px) saturate(1.3)),而内容区保持不透明;斜向镜面光扫过玻璃(一条旋转的 linear-gradient 白色光带,低不透明度);标题栏按钮在悬停时发光 —— 关闭键泛起红光,带柔和的外圈光晕;强调色用莹亮渐变,比如泛波光的绿色进度条(渐变加一道缓慢移动的高光);每块玻璃都勾着 1px 的亮内边;窗口角柔和倒圆。壁纸和布局保持灵活 —— 玻璃背后需要有色彩丰富的东西才读得出来。不要滑向 Frutiger Aero:不需要任何自然意象 —— 这是窗口装饰层语言,不是那个年代的情绪板。保证标题文字在不可预测的壁纸上清晰可读(Aero 当年在窗口标题后面画了一圈柔和辉光 —— 照做),内容文字保持 4.5:1 对比度,悬停辉光要与可见的焦点状态配对,波光扫动和窗口动画要有 reduced-motion 替代方案。

Accessibility & misuse可访问性与误用

Glass over an unknown wallpaper makes title text unpredictable — Aero itself painted a soft white glow behind captions; do the same or guarantee a dark tint.

玻璃底下是不可预知的壁纸,标题文字就没法预料 —— Aero 自己就在标题文字后面画了一圈柔和的白色辉光;照做,或者保证一层深色 tint。

Hover glow is invisible to keyboard users — every glowing control needs an equally visible :focus-visible treatment.

悬停辉光对键盘用户是不可见的 —— 每个会发光的控件都需要同样醒目的 :focus-visible 处理。

backdrop-filter over animated content is expensive; on low-power devices provide a solid fallback (Vista itself shipped 'Aero Basic' for exactly this).

在动态内容上跑 backdrop-filter 很费性能;在低功耗设备上提供不透明的降级方案(Vista 自己就为此出过 “Aero Basic”)。

Origin起源

Shipped with Windows Vista in 2006 (premium editions) as the flagship of the Desktop Window Manager's new composited rendering, refined and default in Windows 7 (2009); Windows 8 (2012) removed the glass for flat Metro chrome.

2006 年随 Windows Vista(高级版本)出货,作为 Desktop Window Manager 全新合成渲染的旗舰卖点;在 Windows 7(2009)里被打磨成熟并成为默认;Windows 8(2012)拿掉了玻璃,换成扁平的 Metro 界面。

See also相关词条