Art Nouveau 新艺术运动（Art Nouveau）
Art Nouveau is the late-19th-century 'new art' that replaced historical revivalism with living, asymmetrical lines drawn from plants, flowers, and whiplash tendrils. Its interfaces and graphics favor earthy jewel tones, oxidized gold, hand-drawn vines, and ornate serif lettering that seems to grow out of the page rather than sit on it. It flourished from roughly 1890 to 1910 and was eclipsed by the machine geometry of Art Deco.
新艺术运动是 19 世纪末的「新艺术」，它用从植物、花朵和鞭状卷须中抽出的、有生命力的不对称线条，取代了历史复兴主义。它的界面与图形偏爱土色宝石调、氧化金、手绘藤蔓，以及像从页面里长出来而非贴在上面的华丽衬线字体。它大约兴盛于 1890 至 1910 年间，随后被装饰艺术（Art Deco）的机器几何所取代。
Scope: This entry covers the Art Nouveau visual language as it appears in UI, illustration, and typography. The overlapping Arts & Crafts movement and Japonism share some DNA but are treated separately; Art Deco is the closest neighbor and the main source of confusion.
范围：本条覆盖新艺术运动在 UI、插画和字体排印中的视觉语言。与其交叠的工艺美术运动（Arts & Crafts）和日本主义（Japonism）有共同血脉，但另立条目；装饰艺术是最近的邻居，也是主要混淆源。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Whiplash curves鞭状曲线 geometry defining定义特征
Long, unbroken S- and C-curves that snap back on themselves like stems in the wind; borders and rules follow a single flowing gesture rather than straight edges.
绵长不断的 S 形与 C 形曲线，像风中的茎秆一样回弹；边框和分隔线跟着同一股流动走势走，而不是直边。
-
Organic ornament有机装饰 imagery defining定义特征
Vines, lilies, insects, feathers, and hair rendered as flat linear decoration; the motif is a recognizable plant or creature, not an abstract geometric icon.
藤蔓、百合、昆虫、羽毛和发丝被处理成平面线描装饰；图案是能认出的植物或生物，不是抽象几何图标。
-
Earthy jewel palette土色宝石调 color defining定义特征
Muted olive, sage, terracotta, oxidized gold, wine red, and dusty teal; color feels mineral or botanical, never chrome or neon.
低饱和橄榄、鼠尾草绿、赤陶、氧化金、酒红和灰青；色调让人联想到矿物或植物，绝不是铬或霓虹。
-
Ornate serif typography华丽衬线字体 typography defining定义特征
Letterforms with curling terminals, high stroke contrast, and decorative inline strokes; headings read like hand-cut signage rather than machine type.
带卷曲收笔、强烈粗细对比和装饰性 inline 线的字体；标题读起来像手工凿出的招牌，而不是机器排的字。
-
Asymmetrical composition不对称构图 layout supporting辅助特征
Layouts drift around a vertical axis rather than locking into strict symmetry; even frames are thicker on one side or curl away from center.
版面围绕一条纵轴漂移，而不是锁死在严格对称里；就连边框也是一侧更厚，或在角落像枝蔓一样卷曲离开中心。
-
Flat pattern depth平面图案纵深 depth supporting辅助特征
Depth comes from overlapping flat motifs and gold-line relief, not from gradients, drop shadows, or 3D modeling.
纵深来自相互交叠的平面图案和金线浮雕，而不是渐变、投影或 3D 建模。
-
Cast-iron contours铸铁轮廓 surface supporting辅助特征
Heavy contours derived from cast-iron and stained-glass leading hold the flowing shapes together, giving the surface a crafted, tactile outline.
从铸铁和彩色玻璃铅条中演化来的粗重轮廓把流动形状兜住，让表面有一种手工打造的可触轮廓。
-
Hard-edged geometry硬边几何 geometry avoid避免
Straight lines, exact circles, and repeating chevrons belong to Art Deco and industrial modernism; they break the organic spell.
直线、正圆和重复的人字纹属于装饰艺术和工业现代主义；它们会破坏有机魔咒。
Often confused with: Art Deco最容易混淆：装饰艺术（Art Deco）
Art Nouveau新艺术运动（Art Nouveau）
Art Deco装饰艺术（Art Deco）
This is Art Nouveau because the rhythm is organic and asymmetrical — vines, stems, and hairlines curve continuously, and the decoration is derived from living forms rather than engineered geometry.
这是新艺术运动，因为它的节奏是有机且不对称的 —— 藤蔓、茎秆和发丝不断弯曲，装饰来自生命体而不是工程几何。
It would become Art Deco if the curves were replaced by stepped zigzags, sunbursts, and mirror symmetry, the palette switched to lacquered black and chrome, and the lettering squared into block geometry.
如果曲线被替换成阶梯状锯齿、放射光芒和镜像对称，配色变成漆器黑加铬，字体也方块化，就变成装饰艺术了。
In code — optional starting points代码写法 —— 可选起点
Decorative vine border frame
background: #f7f3e8; border: 3px solid #7a2d3b; border-radius: 32px 8px 40px 12px; box-shadow: inset 0 0 0 2px #bfa15f;Ornate heading with gold inline stroke
font-family: Georgia, 'Times New Roman', serif; color: #3a2a1e; text-shadow: 1px 0 0 #bfa15f, -1px 0 0 #bfa15f; letter-spacing: 0.04em;Asymmetrical organic card as utilities
bg-[#f7f3e8] border-[3px] border-[#7a2d3b] rounded-tl-[32px] rounded-tr-[8px] rounded-br-[40px] rounded-bl-[12px] shadow-[inset_0_0_0_2px_#bfa15f]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using Art Nouveau. Defining signals: continuous whiplash curves for every border and rule; flat organic ornament — vines, lilies, insects, feathers — as the primary decoration; an earthy jewel palette (sage #9fa86b, terracotta #c26a4d, wine red #7a2d3b, oxidized gold #bfa15f, cream ground #f7f3e8); ornate serif display type with curling terminals and inline strokes. Keep the specific plant motif and exact palette flexible. Use inline SVG paths for vine borders and corner flourishes, stroke-width 1.5–2px for hairline tendrils and 4–6px for cast-iron contours. Set type in a high-contrast serif with decorative capitals (font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.02em; text-transform: capitalize for headings). Build depth by overlapping flat shapes and gold lines, never with gradients or drop shadows. Buttons and cards should have asymmetrical frames that curl at the corners like stems. Do not drift into Art Deco; the decisive difference is that every line here is a living curve — replace curves with zigzags, sunbursts, or mirror symmetry and the style collapses. Preserve 4.5:1 text contrast on the cream ground (wine red and deep olive pass; pale gold does not), visible focus indicators outside the decorative frame, and reduced-motion support for any animated tendrils.
用新艺术运动（Art Nouveau）创建这个界面。决定性信号：每条边框和分隔线都使用连绵的鞭状曲线；以平面有机装饰 —— 藤蔓、百合、昆虫、羽毛 —— 为主要装饰；土色宝石调（sage #9fa86b、terracotta #c26a4d、wine red #7a2d3b、oxidized gold #bfa15f、奶油底 #f7f3e8）；华丽衬线展示字体，带卷曲收笔和 inline 线。具体植物图案和精确配色保持灵活。用内联 SVG path 画藤蔓边框和角落花纹，发丝卷须 stroke-width 1.5–2px，铸铁轮廓 4–6px。字体使用高对比衬线并加装饰大写（font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.02em; 标题 text-transform: capitalize）。通过交叠平面形状和金线来构建纵深，绝不用渐变或投影。按钮和卡片应带不对称边框，角落像茎秆一样卷曲。不要滑向装饰艺术；决定性区别在于这里的每条线都是活的曲线 —— 换成锯齿、放射纹或镜像对称，风格立刻崩塌。保证奶油底上的文字对比度达到 4.5:1（酒红和深橄榄能过；淡金不能），焦点指示器要在装饰边框外侧清晰可见，任何卷须动画都要支持 reduced-motion。
Accessibility & misuse可访问性与误用
Ornate serif lettering and dense vine borders can mangle readability: keep body text in a clean high-contrast serif at 16px minimum, and reserve the most decorative letterforms for large headings only.
华丽的衬线字和密集的藤蔓边框会损害可读性：正文使用干净的高对比衬线，最小 16px，并把最装饰性的字体留给大标题。
Decorative borders often attract the eye away from interactive controls; place focus indicators as a clear, high-contrast outline offset outside the ornate frame rather than competing with the gold linework.
装饰性边框常会抢走交互控件的注意力；把焦点指示器做成清晰、高对比的 outline，并偏移到华丽边框外侧，别跟金线抢戏。
Avoid rapid animated whiplash curves and flashing metallic highlights under prefers-reduced-motion; static vines are already unmistakably Art Nouveau.
在 prefers-reduced-motion 下避免快速的鞭状曲线动画和闪烁的金属高光；静态藤蔓本身就已经无可错认地是新艺术运动。
Origin起源
Art Nouveau flourished roughly 1890–1910, taking its name from Siegfried Bing's Paris gallery Maison de l'Art Nouveau (opened 1895). Belgian architect Victor Horta's Hôtel Tassel in Brussels (1893) and French architect Hector Guimard's Paris Métro entrances (c. 1900) are canonical built works; Czech illustrator Alphonse Mucha's posters and French designer Louis Majorelle's furniture defined its graphic and decorative vocabulary. It faded as Art Deco and modernism rose in the 1910s.
新艺术运动大约兴盛于 1890–1910 年，名字来自 Siegfried Bing 在巴黎的画廊 Maison de l'Art Nouveau（1895 年开业）。比利时建筑师 Victor Horta 的布鲁塞尔塔塞尔公馆（Hôtel Tassel，1893 年）和法国建筑师 Hector Guimard 的巴黎地铁入口（约 1900 年）是标志性建筑作品；捷克插画师 Alphonse Mucha 的海报和法国设计师 Louis Majorelle 的家具奠定了其平面与装饰词汇。随着 1910 年代装饰艺术和现代主义兴起，它逐渐退场。