Memphis 孟菲斯风格(Memphis)

Scope: Covers the Memphis Group's original postmodern language (1981–87) and its later revival as pattern-driven 80s styling in graphics and UI. 'Corporate Memphis' — flat, big-limbed vector illustration — is a later namesake with its own entry. Solid color blocks with hard offset shadows and zero patterning belong to Neobrutalism.

范围:涵盖孟菲斯集团的原版后现代语言(1981–87)及其后来在平面与 UI 中作为图案化 80 年代风格的复兴。「Corporate Memphis」—— 扁平、四肢粗大的矢量插画 —— 是后来的同名异义,另有它自己的条目;纯色块加硬偏移阴影、零纹样的做法属于新粗野主义。

Midnight Drive
Neon Coast
1:123:48

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

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

“80s squiggles and triangles pattern everywhere”「满屏 80 年代波浪线和三角图案」“that saved by the bell intro style”「美剧《Saved by the Bell》片头那种花俏风格」“pink yellow teal shapes with black outlines”「粉黄青撞色图形描黑边」“geometric confetti background style”「几何纸屑背景的那种风格」“retro 80s geometric pattern website”「复古 80 年代几何图案网站」“white background with squiggly lines and dots”「白底上弯弯曲曲的线和圆点」

Full style DNA完整风格 DNA

  1. Allover confetti pattern满版纸屑图案 imagery defining定义特征

    Squiggles, zigzags, dots, crosses and tiny triangles scattered edge-to-edge over a white ground — the pattern IS the background, not an accent strip.

    波浪线、锯齿、圆点、叉叉和小三角铺满白色底的每一个角落 —— 图案本身就是背景,不是一条装饰边。

  2. Squiggles and zigzags波浪线与锯齿 geometry defining定义特征

    Hand-feeling wavy lines and lightning zigzags, usually 2–4px black strokes — the most-quoted Memphis mark, descended from Sottsass's 1978 'Bacterio' laminate print.

    手绘感的波浪线和闪电锯齿,通常是 2–4px 的黑色描线 —— 被引用最多的孟菲斯记号,源自 Sottsass 1978 年的「Bacterio」层压板纹样。

  3. Deliberate color clashes刻意的撞色 color defining定义特征

    Hot pink, lemon yellow, teal and purple (e.g. #ff5fa2, #ffd500, #2ec4b6, #7b61ff) placed side by side with no harmonic bridging — the clash is the point.

    艳粉、柠檬黄、青绿和紫(如 #ff5fa2、#ffd500、#2ec4b6、#7b61ff)直接并排,不做任何和谐过渡 —— 撞色本身就是目的。

  4. Black-inked toy shapes描黑边的玩具形状 geometry defining定义特征

    Circles, triangles, half-donuts and blobs outlined in 2–3px solid black, like cut paper or screen-print ink — playful geometry over grids.

    圆形、三角、半圆环和不规则块面勾着 2–3px 纯黑实线边,像剪纸或丝网印刷的墨稿 —— 俏皮的几何压倒网格。

  5. Collage depth, zero cast shadows拼贴纵深,零投影 depth defining定义特征

    Depth comes only from overlapping flat shapes; nothing casts a shadow — it reads as screen print or laminated paper, not simulated light.

    纵深只来自扁平形状的相互叠压;没有任何东西投下阴影 —— 读起来是丝网印刷或层压纸,不是模拟光照。

  6. Off-grid tilted composition破网格的倾斜构图 layout supporting辅助特征

    Elements rotated a few degrees, overlapped, breaking columns on purpose; tidy symmetry reads as a mistake here.

    元素故意旋转几度、互相叠压、打破栏格;整齐对称在这里反而像失误。

  7. Plastic-laminate gloss塑料层压板光泽 surface variable可变特征

    The furniture originals wore glossy printed laminate and terrazzo; UI versions sometimes echo it with speckle textures or a sticker finish — optional.

    原版家具裹着光面印刷层压板和水磨石;UI 版本有时用噪点纹理或贴纸质感致敬 —— 可选。

  8. Hard offset shadows生硬偏移阴影 depth avoid避免

    Solid displaced block shadows are neobrutalism's construction; on a Memphis surface they flatten the pattern party into sticker blocks.

    实心偏移色块阴影是新粗野主义的构造;出现在孟菲斯的画面上,会把图案派对压扁成贴纸块。

Often confused with: Neobrutalism最容易混淆:新粗野主义

Midnight Drive
Neon Coast
1:123:48

Memphis孟菲斯风格(Memphis)

Midnight Drive
Neon Coast
1:123:48

Neobrutalism新粗野主义

This is Memphis because the look is pattern-first: squiggles, zigzags, dots and triangles scattered edge-to-edge across the ground, pink/yellow/teal/purple fills clashing underneath, and print-flat depth with no cast shadows.

这是孟菲斯风格,因为图案是第一位的:波浪线、锯齿、圆点和三角从一边铺到另一边,粉/黄/青/紫的填充在底下互相冲撞,纵深是印刷式的扁平,没有任何投影。

It would become neobrutalism if you swept the confetti off the ground, locked every element into a uniform 2–3px black border, and gave each one a hard black offset shadow — playful pattern collage traded for clean sticker-block construction.

如果把纸屑从底上扫干净,给每个元素套上统一的 2–3px 黑边框,再各加一道生硬的黑色偏移阴影 —— 拿俏皮的图案拼贴换干净的贴纸块构造 —— 就变成新粗野主义了。

Compare: Memphis vs Neobrutalism →对比页 →

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

Confetti ground — self-contained SVG tile, no image assets

background-color:#ffffff;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M12 26q10-16 20 0t20 0' fill='none' stroke='%23000000' stroke-width='3'/%3E%3Ccircle cx='104' cy='32' r='7' fill='%23ff5fa2'/%3E%3Cpath d='M26 116l13-22 13 22z' fill='%23ffd500' stroke='%23000000' stroke-width='2'/%3E%3Crect x='96' y='98' width='15' height='15' fill='%232ec4b6' stroke='%23000000' stroke-width='2' transform='rotate(18 103 105)'/%3E%3C/svg%3E");
background-size:140px 140px;

Inked toy shape — flat print, no shadow

border:3px solid #000; background:#ffd500; border-radius:12px; transform:rotate(-2deg); box-shadow:none;

Squiggle divider — repeat-x wavy line

height:8px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4q3-6 6 0t6 0t6 0t6 0' fill='none' stroke='%23000000' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x;

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

Create the surface in the spirit of Memphis (Memphis Group, 1981). Defining signals: allover confetti (squiggles, zigzags, dots, crosses, tiny triangles) on a white #ffffff ground; deliberate clashes of hot pink #ff5fa2, lemon yellow #ffd500, teal #2ec4b6, purple #7b61ff with no harmonic bridging; shapes inked with 2–3px solid #000000 outlines; print-flat depth — overlap alone layers shapes, NOTHING casts a shadow (no box-shadow, gradients, blur). Compose as playful collage: chips rotated ±2–4deg, broken grid, mixed geometries — a circle button beside square tags, squiggle for a divider. Headings: chunky rounded display grotesk, black, weight 700–900; body plain black 14–16px. Interactions bounce: cubic-bezier(.34,1.56,.64,1) overshoot on hover/press. Pattern stays dense in decor zones; long text sits on solid fills. Do not drift into neobrutalism: confetti removed plus uniform borders with 4px 4px 0 #000 offset shadows IS neobrutalism — Memphis is pattern-first with zero cast shadows. Text stays at 4.5:1 on solid fills (never white on yellow or pink); honor prefers-reduced-motion.

按孟菲斯(Memphis Group,1981)的精神创建界面。定义性信号:白色 #ffffff 底上满版撒开纸屑(波浪线、锯齿、圆点、叉叉、小三角);艳粉 #ff5fa2、柠檬黄 #ffd500、青绿 #2ec4b6、紫 #7b61ff 刻意撞色,不做和谐过渡;形状都勾 2–3px 纯 #000000 实线边;印刷式扁平纵深 —— 只靠叠压分层,任何东西都不投影(不用 box-shadow、渐变、模糊)。按俏皮拼贴构图:标签旋转 ±2–4deg、打破网格、几何形混排 —— 圆形按钮挨着方形标签,分隔线用波浪线。标题用粗壮的圆角展示型 grotesk,黑色,字重 700–900;正文朴素黑字 14–16px。交互要弹:hover/press 用 cubic-bezier(.34,1.56,.64,1) 过冲。装饰区图案保持高密度;长文放在纯色填充上。不要滑向新粗野主义:拿掉纸屑加上统一边框和 4px 4px 0 #000 偏移阴影就是新粗野主义 —— 孟菲斯是图案优先、零投影。文字在纯色填充上保持 4.5:1(永远不要在黄或粉上用白字);响应 prefers-reduced-motion。

Accessibility & misuse可访问性与误用

A busy patterned ground destroys text legibility fast: never set body copy directly on the confetti — give text a solid fill (white or one of the palette colors) and measure 4.5:1. White text on #ffd500 or #ff5fa2 fails; black text on those same fills passes.

繁忙的图案底很快就会毁掉文字可读性:永远别把正文直接压在纸屑上 —— 给文字一块纯色填充(白色或调色板里的颜色)并实测 4.5:1。白字配 #ffd500 或 #ff5fa2 过不了;黑字配这些填充能过。

High-saturation clashes plus allover pattern are real cognitive load — the eye gets no resting place. Reserve dense confetti for hero and decoration zones, drop the density behind content, and avoid tiny high-frequency marks (1px dots moiré on screens and vibrate for sensitive readers).

高饱和撞色加满版图案是实打实的认知负荷 —— 眼睛没有歇脚的地方。把密集纸屑留给 hero 和装饰区,内容区背后降低密度,也别用高频小纹样(屏幕上的 1px 圆点会产生摩尔纹,对敏感读者来说一直在抖)。

Tilted elements and bouncy easing need limits: keep rotations small (±4deg) so text stays readable, and under prefers-reduced-motion replace the overshoot easing with instant state changes — the style survives the swap intact.

倾斜元素和弹跳缓动要有边界:旋转保持在小角度(±4deg)以内,文字才读得下去;在 prefers-reduced-motion 下把过冲缓动换成瞬时状态切换 —— 这个风格照样成立。

Origin起源

The Memphis Group was founded in Milan by designer Ettore Sottsass with a circle of young collaborators — Michele De Lucchi, Nathalie du Pasquier, George Sowden, Marco Zanini, Martine Bedin and others — at a December 1980 meeting where Bob Dylan's 'Stuck Inside of Mobile with the Memphis Blues Again' kept spinning, giving the group its name. Its first collection, shown in Milan in 1981, wrapped toy-like furniture in printed plastic laminates such as Sottsass's squiggly 1978 'Bacterio' pattern; the group disbanded in 1987, and its graphics became the era's shorthand for eighties pop design, revived wholesale by pattern and UI designers in the 2010s.

孟菲斯集团由设计师 Ettore Sottsass 与一圈年轻合作者 —— Michele De Lucchi、Nathalie du Pasquier、George Sowden、Marco Zanini、Martine Bedin 等人 —— 在米兰创立,1980 年 12 月的那次聚会上 Bob Dylan 的《Stuck Inside of Mobile with the Memphis Blues Again》反复播放,组名由此而来。1981 年在米兰展出的首个系列把玩具般的家具裹上印刷塑料层压板,比如 Sottsass 1978 年设计的波浪纹「Bacterio」;集团于 1987 年解散,其图形语言成为那个时代「八十年代流行设计」的代名词,并在 2010 年代被图案与 UI 设计师整体复兴。

See also相关词条