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

企业孟菲斯

Corporate Memphis

别名:企业孟菲斯大厂插画风蓝色小人插画长手长脚扁平小人科技公司插画风AlegriaBig Tech illustrationflat blob people

这是什么

用扁平抽象人形与受限纯色表示「友好大厂」的插画视觉语言:小头长肢、无面部细节、 紫黄桃等有限色板,圆润色块构图。生产成本低、人人可画,也因此高度同质。

开发规格

字体

几何无衬线中粗字,宽松行距

色彩

紫 #7B61FF × 黄 #FAD141 × 桃 #F48196,肤色非写实

边框

无描边,色块直接相接

阴影

无阴影,纯平涂

间距

大留白,插画与文案左右分栏

动效

150–200ms 的平涂色切换,无位移

状态反馈

hover 换用相邻色块;focus 用紫色 2px 可见外框;active 换深色平涂;disabled 降不透明;error 用桃粉平涂

风格演示

先看整页效果,再试交互场景

整页预览

⌄ alegria.works⋮
alegria登录免费注册

一起把事情
做简单

友好、包容、人人可用的协作空间。

免费试用 →
+12K 全世界用户的选择

◀ 一月 2024 ▶

12345678910111213141516171819202122232425262728

任务 5

今日待完成 ✓

⏱ 专注时段

3h 24m

+40%

笔记 12

小小的进步
也是一种伟大

Keep going →

交互场景

正在加载演示…

✓ 适用场景

  • SaaS、工具类产品的空状态、引导页、营销插画,需要无攻击性的友好感
  • 多人多地协作维护插画系统,要求画风可复制
  • 要传达包容、协作、普惠的抽象价值观

✕ 不适用场景

  • 品牌需要独特记忆点,同质化插画会让产品淹没在大厂语汇里
  • 高端、奢侈、手作、严肃议题,扁平小人撑不起重量
  • 用插画传达具体产品功能,抽象人形说不清细节

常见形式

经典人形

Memphis people

小头长肢扁平小人,动作夸张,常配紫黄桃

抽象色块

Abstract shapes

无人物,只用圆角矩形、圆点与弧线色块

渐变扁平

Gradient flat

扁平形体加双色渐变,比纯色多一层柔光

实现要点

border-radius: 999pxbackground: #7B61FFclip-path: ellipse()fill (SVG)no box-shadow

插画用 SVG 或纯色块拼装:头是正圆,躯干圆角矩形,四肢是加粗圆头线条(stroke-linecap: round)。 色板锁 3~5 色,肤色用蓝 紫 绿等非写实色表示包容。禁止描边渐变阴影,全部纯色平涂。 UI 部件同源:大圆角胶囊按钮、无边框卡片、留白充足。深色模式换深底但保留同一组高饱和色。

交给 AI

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

在当前项目中实现 Corporate Memphis 企业孟菲斯视觉风格。

先检查现有插画资产与 Design Token,色板收敛到 3~5 色独立变量。
要求:
- 扁平抽象人形(小头长肢、无面部细节、非写实肤色)或抽象圆角色块
- 纯平涂,无描边、无渐变阴影(渐变变体除外,且仅双色)
- 胶囊按钮、无边框卡片、大留白
- 插画装饰 aria-hidden,不承担关键信息
- 文字对比度达标,深色模式保留高饱和色
- 不新增任何依赖
完成后运行项目现有检查,并列出修改的文件。

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

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

相关概念

扁平化设计Flat Design

拒绝一切拟真修饰的视觉语言:纯色块、几何形状、无渐变无投影无纹理,靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物,而是承认自己 是一块发光的平面,用清晰与直接换取效率与一致性。

风格相似概念
孟菲斯风格Memphis Design

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

风格替代方案
有机自然Organic

以自然形态、温暖材质和低饱和大地色建立亲近感的视觉语言。页面通过不规则曲线、圆润容器和宽松留白形成舒展节奏,文字与按钮仍保持明确边界。适合生活方式与可持续主题;自然装饰应衬托内容,而不能牺牲可读性、信息层级或操作效率。

风格替代方案
空状态Empty State

当列表或页面没有数据时,不留一片空白,而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点:首次使用教用户开始,搜索无结果给出路。

交互模式搭配使用
新手引导Onboarding Tour

用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面:每一步只露出一个关键区域并就地解释, 上一步/下一步与步骤指示器控制节奏,可随时跳过。它把功能说明放在功能发生的位置, 而不是让用户去文档里自己找。

交互模式搭配使用
卡片Card

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

组件影响组件

容易混淆

孟菲斯风格Memphis Design

企业孟菲斯是 2017 后的扁平人形插画;孟菲斯是 1980s 米兰的波点波浪撞色家具语汇。

参考来源

Markdown 版(给 Agent) · JSON