跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

孟菲斯风格

Memphis Design

别名:孟菲斯风格孟菲斯设计八十年代波普风波点波浪线装饰风彩色几何涂鸦风水磨石撞色风Memphis MilanoPostmodern Pop

这是什么

反功能主义的后现代视觉语言:波浪线 圆点 锯齿 斑点等天真涂鸦元素,与高饱和 撞色、黑色粗描边一起铺满画面,故意打破网格与秩序。它拥抱廉价与热闹,用 "丑得快乐"对抗优雅的现代主义。

开发规格

字体

无衬线粗标题,随性排版

色彩

奶油底 × 粉 #FF5C8A 黄 #FFD23F 青 #3EC6A8

边框

2px 黑边

阴影

4px 4px 0 位移硬投影

间距

故意歪斜、错位排布

动效

150ms 的轻微弹跳位移,短 ease-out,尊重 prefers-reduced-motion

状态反馈

hover 错位并加深硬投影;focus 用 2px 黑色可见外框;active 位移贴合投影;disabled 去色不位移;error 用粉红强调

风格演示

同一张页面,直接操作

开派对后填写名称、人数、配色生成邀请卡,可修改重新生成;家居、图案、派对、意大利制造各有内容,不发送真实邀请。

整页预览 · 直接交互

独立打开 ↗

使用时关注什么

  • 01逐一操作 Milano '88 原导航和主 CTA,检查对应内容与返回路径,不只是点击提示。
  • 02完成上述 Milano '88 操作后修改输入或撤销,检查结果与状态同步。
  • 03用键盘和 390px / 320px 检查重排、焦点、校验;区分工具栏重载和内部清空,核对刷新后状态复位。

✓ 适用场景

  • 潮流 玩具 派对 音乐节等需要欢乐能量的场景
  • 儿童与创意教育产品,热闹无攻击性
  • 短期营销活动,需要一眼难忘的视觉记忆点

✕ 不适用场景

  • 需要长时间专注使用的工具与阅读产品
  • 品牌调性高级 克制 或面向严肃决策者
  • 信息密集界面,装饰密度会淹没功能

常见形式

经典孟菲斯

Classic Memphis

Ettore Sottsass 式黑白底 大色块 波浪

水磨石

Terrazzo

碎片斑点铺满底面,密度取胜

新孟菲斯

Neo-Memphis

网页化改良,留白增多 描边变细

实现要点

background-image: radial-gradientborder: 3px solid #000box-shadow: 5px 5px 0border-radius: 50%clip-path

经典配方:黑白几何底纹(波点用 radial-gradient 平铺,条纹用 repeating- linear-gradient)垫底;主体元素用高饱和撞色(柠檬黄 珊瑚红 湖蓝 紫罗兰) + 2~3px 黑描边 + 偏移实心阴影;波浪线与锯齿用 SVG 或 clip-path,数量 控制在 3~5 个防止失控。深色模式把黑底反转成墨蓝,保持撞色饱和度。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

用当前风格完成 Milano '88 同品牌完整页面,从原首屏延续到内容、具体操作结果和返回路径,而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源,不替换成通用营销模板。

保留 Milano ’88 奶油底、粉色 CTA、粉/黄/青绿三卡与圆/三角/方形主视觉;卡片使用原 2px 圆角及 4px 4px 硬投影,不另铺满黑白波点壁纸或强制全体 10px 圆角。邀请卡按现有 2px 黑边、7px 7px 硬投影和 2deg 倾斜呈现,名称/人数/配色更新这一张卡。

复用当前 preview.tokens:背景 #FFF4E3;前景 #232323;强调 #FF5C8A / #fff;卡面 #FFFFFF;边框 #232323;圆角 2px;字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif;卡影 4px 4px 0 #232323。

dark 与 variants 复用 generic-style-pages.css 已有工作区选择器,不据通用历史变体重画首屏;保留 renderer 内各视觉面板的局部高光、渐变和投影。

完整页面操作:
开派对后填写名称、人数、配色生成邀请卡,可修改重新生成;家居、图案、派对、意大利制造各有内容,不发送真实邀请。

静态封面、详情演示与 /style-scenes/memphis/(英文 /en/style-scenes/memphis/)共用 renderer;静态封面不嵌套真实按钮,详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流,不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存;刷新、工具栏重载/重置与模式切换均恢复初始状态,不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作,不暗示跨页或持久保存。

提供返回、取消或清空/重置路径,说明仅当前页内存的状态边界;不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排,保留可读字号和触控目标,不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点;弹层支持关闭和焦点返回,表单校验与结果可被辅助技术读到;尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排;报告实际运行的检查与待验项,不将实现要求写成已通过结论。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

包豪斯Bauhaus

用基础几何与三原色做构成游戏的视觉语言:圆 三角 方三种形状,红 黄 蓝 三原色加黑,不对称但平衡的构图,装饰服从功能。每一块色面与线条都参与 结构,海报像一场几何关系的研究。

风格相似概念
新粗野主义Neobrutalism

用粗黑描边、高饱和撞色与生硬的偏移实心阴影构成的高对比视觉语言:元素像彩色 贴纸一样直接砸在页面上,配合夸张的圆角与醒目标签。它刻意拒绝精致与圆滑, 以"丑得理直气壮"的态度换取强烈的记忆点与年轻个性。

风格相似概念
Y2K 千禧美学Y2K Aesthetic

复刻千禧年前后数码乐观主义的视觉语言:镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感,甜腻、闪亮、毫不克制。

风格相似概念
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件影响组件
卡片Card

用圆角边框或底色围出一块自包含内容的矩形容器,一块卡片聚合一组相关信息: 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。

组件影响组件

参考来源

Markdown 版(给 Agent) · JSON