Frutiger Metro (Vectordelia) Frutiger Metro（Vectordelia / 矢量地铁风）
Frutiger Metro, also known as Vectordelia, is the late-millennium vector-maximalist graphic style that flourished roughly 2005–2013 alongside Frutiger Aero but moved in the opposite direction: instead of skies and water, it built cities out of pure vector — subway lines, bright saturated gradients, abstract floral flourishes and swirls, humanist sans type, glossy vector shapes, and multicolored silhouette figures. It is the visual language of iPod commercials, Xbox 360 dashboards, Windows 7 stock imagery, and city-themed event graphics: optimistic, urban, geometrically neat, and deliberately non-photorealistic.
Frutiger Metro，又称 Vectordelia（矢量地铁风），是与 Frutiger Aero 同时流行于大约 2005–2013 年的晚期千禧矢量极大主义风格，但走向完全相反的方向：它不用天空和水，而是用纯矢量建造城市 —— 地铁线路、明亮饱和的渐变块、抽象的花饰与漩涡、人主义无衬线字体、光泽矢量形状，以及多彩的人形剪影。它是 iPod 剪影广告、Xbox 360 仪表板、Windows 7 自带图库和城市主题活动画面的视觉语言：乐观、都市、几何整齐，并刻意不写实。
Scope: This entry covers the vector-maximalist graphic style commonly called Frutiger Metro or Vectordelia, not Microsoft's Metro/Modern UI design language, which shares the name but is flat, typographic, and tile-based. It sits beside Frutiger Aero as a sibling style, not a subset.
范围：本条覆盖通常被称为 Frutiger Metro 或 Vectordelia 的矢量极大主义平面风格，不是 Microsoft 的 Metro/Modern UI 设计语言 —— 后者虽然同名，却是扁平、排版驱动、磁贴式的系统。它与 Frutiger Aero 是并列的兄弟风格，而不是子集。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Subway-map city geometry地铁图式城市几何 layout defining定义特征
Routes, intersections, and stations are drawn as clean vector lines with 90° and 45° angles, rounded caps, and circular nodes — the interface reads like a transit diagram.
线路、交叉点和站点用干净矢量线绘制，呈 90° 与 45° 转角，端头圆角，节点为圆形 —— 界面读起来像一张交通图。
-
Bright saturated gradient blocks明亮饱和的渐变块 color defining定义特征
Large flat panels use hard, cheerful gradients — magenta #ec008c into cyan #00b6e3 into yellow #ffd400 — at sharp diagonal angles, never soft natural tones.
大面积扁平面板使用鲜明的硬渐变 —— 品红 #ec008c 过渡到青 #00b6e3 再到黄 #ffd400，呈锐利对角，不用柔和自然色调。
-
Abstract vector flourishes抽象矢量花饰 imagery defining定义特征
Decorative vines, swirls, starbursts, and geometric flowers are drawn as single-color vector shapes with crisp 1–2px outlines, purely illustrative and non-photorealistic.
装饰性藤蔓、漩涡、星芒和几何花朵以单色矢量形状出现，带 1–2px 清晰轮廓， purely 插画感，不写实物。
-
Clean humanist sans干净的人主义无衬线 typography defining定义特征
Text is set in open, rounded-humanist sans-serifs such as Frutiger, Segoe UI, or Myriad — friendly and legible, never chrome or techno.
文字使用开阔、圆润的人主义无衬线，如 Frutiger、Segoe UI 或 Myriad —— 友好、易读，绝不铬色或科技感。
-
Glossy vector shapes光泽矢量形状 surface defining定义特征
Circles, pills, and ribbons carry a white top sheen (linear-gradient rgba(255,255,255,.75) to transparent at ~48%) and a subtle vector shadow, mimicking polished plastic without texture.
圆形、胶囊和丝带带有白色顶部高光（linear-gradient rgba(255,255,255,.75) 到 transparent，约 48% 处）和淡淡矢量阴影，模拟抛光塑料但无纹理。
-
Multicolored silhouette figures多彩人形剪影 imagery supporting辅助特征
Flat human silhouettes in saturated single colors dance, point, or hold devices — the iPod-commercial signature, used as accent rather than hero.
扁平单色的人形剪影做出跳舞、指向或握持设备的姿态 —— iPod 广告的标志性元素，用作点缀而非主角。
-
Overlapping color-block collage重叠色块拼贴 layout supporting辅助特征
Panels of pure color overlap at playful angles, creating a layered but flat composition with no cast shadows or simulated depth.
纯色面板以俏皮角度相互重叠，形成有层次但扁平的构图，没有投影或模拟纵深。
-
Nature textures and photorealism自然纹理与写实 surface avoid避免
Photographic skies, water, grass, glass blur, or organic light effects push the look toward Frutiger Aero — Metro stays synthetic and vector-flat.
摄影天空、水、草、玻璃模糊或有机光效会把风格推向 Frutiger Aero；Metro 保持合成与矢量扁平。
Often confused with: Frutiger Aero最容易混淆：Frutiger Aero
Frutiger Metro (Vectordelia)Frutiger Metro（Vectordelia / 矢量地铁风）
Frutiger AeroFrutiger Aero
This is Frutiger Metro because the world is built from flat, hard-edged vector graphics — subway maps, gradient blocks, and stylized silhouettes — not from photorealistic skies, water droplets, grass, or glassy nature scenes.
这是 Frutiger Metro，因为画面由扁平、硬边的矢量图形构成 —— 地铁图、渐变块和风格化剪影 —— 而不是写实的天空、水珠、草地或玻璃自然场景。
It would become Frutiger Aero if the vector city dissolved into glossy nature photography — blue skies, green grass, water droplets, bubbles, and soft organic light behind translucent glass panels.
如果这座矢量城市溶解成光泽的自然摄影 —— 蓝天、绿草、水珠、气泡和半透明玻璃后的柔和有机光 —— 就变成 Frutiger Aero 了。
Compare: Frutiger Metro (Vectordelia) vs Frutiger Aero →对比页 →
In code — optional starting points代码写法 —— 可选起点
Subway line route with station nodes
background: linear-gradient(90deg, #ec008c 0%, #00b6e3 50%, #ffd400 100%); height: 6px; border-radius: 999px;Glossy vector circle cap
background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 45%), #ec008c; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,.12);Abstract flourish as inline SVG tile
<svg viewBox='0 0 100 100'><path d='M20,50 Q35,20 50,50 T80,50' fill='none' stroke='%2300b6e3' stroke-width='2'/></svg>Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the piece using Frutiger Metro (Vectordelia). Defining signals: build the layout from subway-map geometry — routes at 90° and 45° with rounded caps, station nodes as 12–18px circles (#ec008c, #00b6e3, #ffd400); fill panels with bright saturated diagonal gradients (magenta #ec008c → cyan #00b6e3 → yellow #ffd400 at 135°); scatter abstract vector flourishes and swirls behind content as single-color shapes with 1–2px crisp outlines (#00a9e0 or #ec008c). Use a clean humanist sans-serif such as Frutiger, Segoe UI, or system-ui; headings at 24–36px with tight tracking, body at 14–16px, ink in white or near-black. Add glossy vector accents — circles, pills, ribbons — with a white top sheen (linear-gradient rgba(255,255,255,.75) to transparent at 48%) and subtle drop shadow (0 4px 10px rgba(0,0,0,.12)). Include multicolored silhouette figures as supporting garnish. Avoid nature photography, water droplets, grass, sky gradients, glass blur, or chrome; those belong to Frutiger Aero. Keep tile spacing at 8–12px, block border-radius at 8–16px, pills at 999px. Ensure text sits on solid or gradient regions that hit 4.5:1 contrast, reserve maximalism for decorative zones, and honor prefers-reduced-motion.
按 Frutiger Metro（Vectordelia / 矢量地铁风）创建这个界面。决定性信号：用地铁图几何搭建布局 —— 90° 与 45° 线路、圆角端头、12–18px 圆形站点节点（#ec008c、#00b6e3、#ffd400）；面板填充明亮饱和的对角渐变（品红 #ec008c → 青 #00b6e3 → 黄 #ffd400，135°）；在内容背后散布抽象矢量花饰和漩涡，以单色形状加 1–2px 清晰轮廓（#00a9e0 或 #ec008c）。字体使用干净的人主义无衬线，如 Frutiger、Segoe UI 或 system-ui；标题 24–36px、字距收紧，正文 14–16px，文字用白色或近黑色。添加光泽矢量点缀 —— 圆形、胶囊、丝带 —— 带白色顶部高光（linear-gradient rgba(255,255,255,.75) 到 transparent，48% 处）和淡淡投影（0 4px 10px rgba(0,0,0,.12)）。辅以多彩人形剪影作为装饰。避免自然摄影、水珠、草地、天空渐变、玻璃模糊或铬色；那些属于 Frutiger Aero。图块间距保持 8–12px，方块圆角 8–16px，胶囊用 999px。确保文字所在区域达到 4.5:1 对比度，把极大主义留给装饰区，交互控件放在干净高对比度的底板上，并响应 prefers-reduced-motion。
Accessibility & misuse可访问性与误用
Small white labels on bright magenta or yellow gradient blocks often fail 4.5:1 contrast; place text on the darkest part of a gradient or add a dark translucent scrim behind it.
亮品红或黄色渐变块上的小字标签常常过不了 4.5:1 对比度；把文字放在渐变最深的区域，或加一层深色半透明遮罩垫底。
Fast, outward-flowing vector animations can trigger vestibular issues; under prefers-reduced-motion, freeze flourishes and switch any expanding radial burst to an instant fade.
快速向外扩散的矢量动画可能诱发前庭不适；在 prefers-reduced-motion 下冻结花饰，并把任何放射状展开动画改为瞬时淡入。
The dense overlap of swirls, silhouettes, and color blocks raises cognitive load for low-vision and neurodivergent users; reserve the maximalism for decorative regions and keep interactive controls on clean, high-contrast plates.
漩涡、剪影和色块密集重叠会加重视障与神经多样性用户的认知负荷；把极大主义留给装饰区，让交互控件保持在高对比度的干净底板上。
Origin起源
Roughly 2005–2013, peaking in the late 2000s: the look emerged from vector stock-art packs, iPod silhouette advertising, Xbox 360 dashboard visuals, Windows 7 stock imagery, and city-themed event graphics. The label Frutiger Metro is retroactive, coined by online aesthetics communities in the 2010s–2020s by analogy to Adrian Frutiger's humanist type and the urban/subway 'metro' mood; Vectordelia is the term used by CARI/Evan Collins and the Frutiger Aero Archive community. Microsoft's Metro design language shares the name but is a separate, later flat-typographic system.
大约 2005–2013 年，在 2000 年代末达到高峰：这种外观源于矢量素材包、iPod 剪影广告、Xbox 360 仪表板画面、Windows 7 自带图库和城市主题活动物料。Frutiger Metro 这个标签是追溯性的，由 2010–2020 年代的线上美学社群借 Adrian Frutiger 的人主义字体与都市/地铁氛围创造；Vectordelia 则是 CARI/Evan Collins 与 Frutiger Aero Archive 社群使用的术语。Microsoft 的 Metro 设计语言虽同名，却是另一个更晚的扁平排版系统。