新拟态Neumorphism

核心特征

• 元素与背景同色，只靠阴影区分层次
• 左上亮色高光、右下暗色阴影，模拟单一光源
• 凸起表示可点，凹陷表示输入或按下状态
• 大圆角、低饱和、低对比，整体柔和
• 强调色只用在极少数关键操作上

色板与字体

英文

Inter（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

真实项目可换成 Nunito、SF Pro Rounded 等圆润无衬线字体，与柔和的体积感更搭。

起源与代表作

年代：2019 年底流行

2019 年 12 月，设计师 Alexander Plyuto 在 Dribbble 发布的「Skeuomorph Mobile Banking」概念稿走红，Michal Malewicz 随后撰文把这种做法命名为 Neumorphism（New + Skeuomorphism）。它是对 iOS 6 之前拟物化的一次轻量回归：不画真实纹理，只用光影表达体积。由于对比度问题，它很少用于完整产品，更多出现在概念稿、智能家居面板和音乐播放器里。

AI 设计提示词 · Prompt

新拟态（Neumorphism / Soft UI）风格界面：整页与所有卡片、按钮使用同一底色 #E6E9EF，不用描边，只靠阴影区分层次。凸起元素用双向外阴影：8px 8px 16px #C3C8D1 与 -8px -8px 16px #FFFFFF；输入框与按下状态改用同参数的内阴影（inset）。圆角 16px，按钮与卡片留足 16–24px 内边距。文字用深灰蓝 #2D3446，次要文字 #6B7385；只有主按钮使用强调色 #5B6EE1 白字。图标放在 40px 的圆形凹槽里。整体低饱和、柔和、安静，不使用渐变背景和照片。正文文字对比度不低于 4.5:1，可点击元素需有强调色或图标提示。

A Neumorphism (Soft UI) interface: the page, cards and buttons all share one background color #E6E9EF with no borders; depth comes only from shadows. Raised elements use a dual outer shadow: 8px 8px 16px #C3C8D1 and -8px -8px 16px #FFFFFF; inputs and pressed states use the same values as inset shadows. 16px corner radius with 16–24px padding. Text in dark slate #2D3446, secondary text #6B7385; only the primary button uses the accent #5B6EE1 with white text. Icons sit in 40px circular inset wells. Overall low saturation, soft and quiet, with no gradient backgrounds or photos. Keep body text contrast at least 4.5:1 and give clickable elements an accent color or icon cue.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #e6e9ef;
  --ds-text: #2d3446;
  --ds-muted: #6b7385;
  --ds-accent: #5b6ee1;
  --ds-radius: 16px;
  --ds-shadow-raised: 8px 8px 16px #c3c8d1, -8px -8px 16px #ffffff;
  --ds-shadow-pressed: inset 5px 5px 10px #c3c8d1, inset -5px -5px 10px #ffffff;
}

适合与不适合

和相近风格的区别

• 玻璃拟态：新拟态是不透明的同色底板加双向阴影，强调「凸起与凹陷」；玻璃拟态是半透明面板叠在彩色背景上，靠背景模糊表达层次。

常见踩坑

• 按钮和卡片的边界对比度很低，WCAG 1.4.11 要求界面组件边界与背景至少 3:1，需要给可点元素补描边或加深阴影
• 只用阴影区分「可点」和「装饰」，用户分不清哪里能点；可点元素要加强调色或图标提示
• 阴影直接用黑色半透明会发脏，暗影应取底色同色相、降低明度的颜色
• 深色模式沿用浅色参数会完全失效，需要单独调高光与暗影

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题