What style is this?这是什么风格?

What style is this? The visual styles atlas. Recognize the look, learn its real name and the 3–5 signals that make it, and tell it from its closest look‑alike. Then copy a brief your coding agent can build from.

这是什么风格?视觉风格图鉴。认出这种观感,学会它的真名和构成它的 3–5 个信号,并把它和最容易「撞脸」的相似风格区分开。然后复制一份 brief,你的 AI 编程代理可以直接照着构建。

A governed atlas, not a style dump 有治理的图鉴,不是风格仓库

There is no honest list of “all design styles.” A style ships here only with a credible source, a terminology-status label, defensible defining signals, and a specimen you can actually recognize. In research now:

世上不存在一份诚实的「所有设计风格」清单。一个风格只有具备可信的来源、术语状态标签、经得起推敲的定义信号,以及你真正能认出来的实例,才会收录于此。正在研究:

Swiss StyleBauhausArt DecoArt NouveauMemphisVaporwaveInternet Ugly

14 styles — recognize the look, learn its real name14 种风格 —— 认出长相,学会真名

Midnight Drive
Neon Coast
1:123:48

Skeuomorphism 拟物设计

Skeuomorphism carries real-world materials and objects into digital UI: controls are rendered as if physically made of something — glossy plastic, brushed metal, leather, paper — with the lighting, texture, and affordances of the real thing. A skeuomorphic app teaches itself: a page that looks tearable invites turning, a raised glossy button invites pressing. It peaked in early iOS and Mac OS X, and was largely displaced by flat design around 2013.

拟物设计把真实世界的材质和物件搬进数字界面:控件被渲染得像真的由某种材料做成 —— 亮面塑料、拉丝金属、皮革、纸张 —— 带着实物的光照、质感和可操作性暗示。拟物的 App 自带说明:看起来像能撕的页面会邀请你翻页,一颗凸起的光面按钮会邀请你按下去。它在早期 iOS 和 Mac OS X 达到巅峰,2013 年前后基本被扁平设计取代。

Midnight Drive
Neon Coast
1:123:48

Neumorphism 新拟态

Neumorphism renders every control as if extruded from, or pressed into, the page itself: background and controls share one matte color, and shape comes entirely from a pair of soft shadows — light from the top-left, dark toward the bottom-right. Nothing has a border and nothing floats; the whole interface reads as one continuous molded surface. It photographs beautifully and tests poorly: the same softness that makes it distinctive erases the contrast real controls need.

新拟态把每个控件都渲染得像从页面本身挤出来、或压进去的一样:背景和控件共享同一种哑光色,形状完全来自一对柔和阴影 —— 亮部朝左上,暗部朝右下。没有描边,也没有悬浮;整个界面读起来就是一块连续的模压表面。它截图好看,实测糟糕:正是那份让它出挑的柔和,抹掉了真实控件所需的对比度。

Midnight Drive
Neon Coast
1:123:48

Glassmorphism 玻璃拟态

Glassmorphism builds interfaces from translucent, frosted panels: the background — usually something vivid — blurs through each surface, a thin light border catches the 'edge' of the glass, and layers stack with soft shadows to sell the depth. The style lives or dies by its backdrop: over a plain background the glass reads as plain grey; over a colorful gradient it glows.

玻璃拟态用半透明的磨砂玻璃面板搭建界面:背景 —— 通常是鲜艳的东西 —— 透过每一层表面模糊地显出来,一条细细的浅色描边勾住玻璃的「边缘」,层与层之间用柔和的投影堆出纵深。这个风格的生死全看背景:背景平淡,玻璃就只是一片灰;背景是彩色渐变,它就发光。

Midnight Drive
Neon Coast
1:123:48

Liquid Glass 液态玻璃

Liquid Glass is Apple's adaptive material for controls and navigation: toolbars, tab bars, buttons, and sliders render as lens-like glass that floats in its own layer above app content, refracting what scrolls beneath and re-tinting itself for legibility in light and dark contexts. It is functional, not decorative — Apple applies it to the control layer and keeps content itself opaque. Capsule shapes and concentric corner radii are part of the geometry.

液态玻璃是 Apple 为控件和导航准备的自适应材质:工具栏、标签栏、按钮和滑块渲染成透镜般的玻璃,悬浮在应用内容上方自己那一层里,对下方滚过的内容做透镜折光,并随明暗环境重新给自己染色以保持可读。它是功能性的,不是装饰性的 —— Apple 只把它用在控制层,内容本身保持不透明。胶囊造型和同心圆角半径也是这套几何语言的一部分。

. * . * . * __ _..._ __ __/ \______/ \______/ \____MIDNIGHT_DRIVE.GIF 240X80 14KB
Midnight Drive
Neon Coast [ stopped ]

1:123:48

Vol:
70%

Web Brutalism 网页粗野主义

Web Brutalism treats the browser's own materials as the finished surface: default or system fonts, unstyled-looking links, visible document structure, plain borders and horizontal rules, and density over polish. Nothing pretends to be anything else — no gradients imitating glass, no shadows imitating depth. At its best it's honest and fast (Craigslist, Hacker News, early-web personal sites); at its worst the label gets stretched over anything unpolished.

网页粗野主义把浏览器自带的材料当作最终成品表面:默认或系统字体、看上去没加样式的链接、清晰可见的文档结构、朴素的边框和水平分隔线,以及重密度轻修饰。没有任何东西假装成别的东西——没有模仿玻璃的渐变,也没有假装深度的阴影。做得好时它诚实而飞快(Craigslist、Hacker News、早期网络的个人网站);做得差时,这个标签会被随便贴在任何不精致的东西上。

Midnight Drive
Neon Coast
1:123:48

Neobrutalism 新粗野主义

Neobrutalism is a designed graphic language: flat, saturated color blocks outlined in thick black strokes, with hard offset shadows — solid black rectangles displaced a few pixels, no blur — and chunky display type. Elements read like stickers or risograph prints; pressing a button often physically 'pushes' it into its shadow. Despite the name it is the opposite of raw: every border and shadow is a deliberate illustration choice.

新粗野主义是一套设计出来的图形语言:扁平的饱和色块勾着粗黑描边,配上生硬偏移阴影——纯黑矩形偏移几个像素、零模糊——再加上粗壮展示字体。元素读起来像贴纸或 Riso 孔版印刷品;按下按钮时,它常常真的被物理地「按进」自己的阴影里。名字里虽有粗野,它却是「生」的反面:每一道边框和阴影都是刻意的插画选择。

CYBER DISC・2000
Midnight Drive
Neon Coast
1:123:48

Y2K Digital Aesthetic Y2K 数字美学

The Y2K digital aesthetic is millennium-turn techno-optimism rendered literally: liquid chrome and brushed metal, glossy gel and plastic surfaces, iridescent blue-silver palettes, orbs and blobs, wide techno type, and rendered 3D everything. It's the look of a future imagined through new consumer tech — translucent iMacs, early CGI, rave flyers, and 'cyber' branding — shiny, synthetic, and unembarrassed.

Y2K 数字美学是把千禧之交的技术乐观主义照字面渲染出来:液态铬和拉丝金属、亮泽的凝胶与塑料表面、幻彩的蓝银配色、球体与液滴形、宽体科技字体,以及万物皆可 3D 渲染。那是透过新消费科技想象出来的未来模样 —— 半透明 iMac、早期 CGI、锐舞传单和打着 “cyber” 旗号的品牌设计 —— 闪亮、合成,而且理直气壮。

Midnight Drive
Neon Coast
1:123:48

Frutiger Aero Frutiger Aero

Frutiger Aero is the glossy, nature-infused optimism of roughly 2004–2013: bright blue skies and water, green grass, bubbles, fish, and light rays fused with translucent glass panels, aqua buttons, and clean humanist type. Technology presents itself as fresh, ecological, and frictionless — the future as a sunny day. It's the era of Windows Vista/7 wallpapers, glossy media players, and Web 2.0 product sites.

Frutiger Aero 是大约 2004–2013 年间那种亮泽的、浸透自然元素的乐观主义:明亮的蓝天碧水、绿草、泡泡、游鱼和光线,与半透明玻璃面板、aqua 质感按钮、干净的人文主义字体融为一体。科技把自己呈现得清新、生态、无摩擦 —— 未来就是一个晴天。那是 Windows Vista/7 壁纸、亮面媒体播放器和 Web 2.0 产品网站的时代。

Midnight Drive
Neon Coast
1:123:48

Flat Design 扁平设计

Flat Design renders the interface as pure 2D: surfaces are solid color fills, icons are simple geometric glyphs, and nothing pretends to be lit, embossed, or made of a material. Hierarchy comes from color, size, and typography instead of shadows and bevels. It became the dominant look around 2012–2013 (Windows 8's Metro, then iOS 7) as the direct rejection of skeuomorphism's gloss and texture.

扁平设计把界面渲染成纯粹的 2D:表面是纯色填充,图标是简单的几何字形,没有任何东西假装被打光、压凸或由某种材质制成。层级来自颜色、尺寸和排版,而不是阴影和斜面。它在 2012–2013 年前后(Windows 8 的 Metro,然后是 iOS 7)成为主流外观,是对拟物设计的光泽与质感的直接反叛。

Midnight Drive
Neon Coast
1:123:48

Minimalism 极简主义

Minimalism governs what is ON the screen, not how it's drawn: strip the interface to the fewest elements that still do the job, then let generous negative space and one or two dramatic typographic moments carry the composition. NN/g's study of 112 minimalist sites found the recurring traits — flat-ish surfaces, limited or monochrome palettes, restricted element counts, negative space, and large type as the hero.

极简主义管的是屏幕上「有什么」,而不是「怎么画」:把界面削到仍能完成任务的最少元素,然后让慷慨的留白和一两处戏剧性的排版时刻撑起整个构图。NN/g 研究了 112 个极简网站,归纳出反复出现的特征——偏扁平的表面、有限或单色的配色、受控的元素数量、留白,以及作为主角的大字号。

Midnight Drive
Neon Coast
1:123:48

Claymorphism 黏土拟态

Claymorphism makes UI elements look molded from soft modeling clay: fat rounded corners, a light pastel fill, and the signature construction — two inner shadows (a bright one catching the top edge, a darker one shading the bottom) plus one soft outer drop shadow that floats the object above the page. Each element is independently colored and clearly separate from the background, usually paired with chunky 3D 'clay' illustrations.

黏土拟态让 UI 元素看起来像用软陶土捏出来的:肥肥的圆角、淡淡的粉彩填充,还有标志性的结构——两层内阴影(亮的一层落在顶边,暗的一层垫在底部)加一层柔和的外投影,把物体托浮在页面上方。每个元素独立上色、与背景明显分离,通常再配上一组胖乎乎的 3D「黏土」插画。

★ WELCOME TO MY HOME PAGE ★ now spinning: MIDNIGHT DRIVE ♪ thanx for visiting!! ★ sign my guestbook ★
Midnight Drive
Neon Coast NEW!
1:123:48
You are visitor 004213
UNDER CONSTRUCTION NETSCAPE NOW!
Best viewed at 800 x 600

Vernacular Web 民间网页(Vernacular Web)

The Vernacular Web is the folk architecture of the early web: personal homepages built by amateurs from collected materials — tiled star backgrounds, animated sparkle and flame GIFs, rainbow divider rules, 'welcome to my home page' banners, visitor counters, guestbook links, under-construction signs, and webring badges. It is decorative, personal, and sincere: every ornament was chosen because its owner loved it, not because a system prescribed it.

民间网页是早期网络的民间建筑:业余爱好者用收集来的素材搭起的个人主页——平铺的星空背景、闪动的亮片和火焰 GIF、彩虹分隔线、「欢迎来到我的主页」横幅、访客计数器、留言簿链接、施工中标志和网页环(webring)徽章。它装饰性强、私人、真诚:每一件饰品被选中都是因为主人喜欢,而不是某套体系的规定。

Midnight Drive
Neon Coast
1:123:48

Aqua Aqua

Aqua is the design language Mac OS X launched with in 2000: controls rendered as translucent candy gel — deep specular highlights over luminous water-blue — on pinstriped surfaces, with gumdrop red/yellow/green window controls, soft drop shadows layering the windows, and fluid animation everywhere (the default button literally pulsed, and windows poured into the Dock through the genie effect). Apple pitched it as an interface with the fluidity and depth of water.

Aqua 是 Mac OS X 在 2000 年问世时搭载的设计语言:控件被渲染成半透明的糖果凝胶 —— 莹亮的水蓝色上压着深深的高光 —— 铺在细条纹表面上,配上软糖般的红黄绿窗口按钮、把窗口分出层次的柔和投影,以及无处不在的流畅动画(默认按钮真的会一下一下地脉动,窗口通过精灵效果像水一样流进 Dock)。苹果把它宣传成一个有着水的流动感与深度的界面。

Now Playing
Midnight Drive
Neon Coast
1:123:48

Windows Aero Windows Aero

Windows Aero is Microsoft's Vista and Windows 7 desktop language: window FRAMES rendered as transparent blurred glass with specular light sweeps, so the desktop glows through every title bar; luminous color gradients; caption buttons that light up under the cursor (the red close glow); shimmering green progress bars; and smooth window motion like Flip 3D and the minimize animation. Microsoft's launch messaging named the glass, the reflections, and the animation as the product.

Windows Aero 是微软 Vista 和 Windows 7 的桌面语言:窗口边框被渲染成透明的毛玻璃,上面有镜面光扫过,桌面得以透过每一条标题栏发光;莹亮的色彩渐变;光标移上去就会点亮的标题栏按钮(红色的关闭键辉光);泛着波光的绿色进度条;以及 Flip 3D 和最小化动画这样流畅的窗口动效。微软当年的发布宣传直接把玻璃、反射和动画点名成了产品本身。