# 新拟态（Neumorphism）

镜语 · 版式与界面 / 材质与质感

- 别名：新拟物、Soft UI、软拟物、Neomorphism
- 口语：「按钮像从背景里鼓出来的」「同一个颜色的凸起和凹陷」「软软的灰白色界面」
- 一句话：元素和背景同色，只靠一亮一暗两道阴影凸起或凹陷
- 是什么：新拟态（Neumorphism / Soft UI）让元素和背景用同一种颜色，只靠左上一道亮阴影、右下一道暗阴影让它像从背景里鼓起来，按下时改成内阴影凹进去。2019 年前后因 Dribbble 上的一组银行应用概念图流行
- 缺了就不像：元素与背景同色；一亮一暗双阴影；按下变成内凹
- 加了更像：浅灰蓝底；大圆角；细线图标；极少强调色
- 适合用在：智能家居面板、音乐播放器、计算器等元素少、控件少的界面；概念展示和视频道具，突出柔和的触感
- 看哪里：看卡片、按钮和背景几乎是同一个灰蓝色，边界完全来自两侧的阴影；按「关注」它会从凸起变成凹陷。也注意它的问题：按钮和背景对比很低，静止时不容易看出哪个能点
- 注意：对比度很低，不适合文字多、按钮多或需要无障碍的正式产品；深色或饱和背景上效果会变脏；两道阴影的方向必须一致
- 描述示例：做一个新拟态风格（Neumorphism / Soft UI）的个人主页面板：整页和所有卡片都是同一种浅灰蓝 #e0e5ec，元素靠左上白色阴影（-8px -8px 16px #ffffff）和右下灰蓝阴影（8px 8px 16px #a3b1c6）凸起；按下的按钮、选中的标签和输入框改用内阴影凹陷；大圆角 20–30px，图标细线、颜色灰蓝，强调色只在少数状态上出现；整体柔和、安静、低对比
- 易混：
  - [拟物化](https://idea.ameng.dev/terms/skeuomorphism.md)：拟物化模仿具体材料，新拟态只有一种塑料般的同色凸凹
  - [黏土拟态](https://idea.ameng.dev/terms/claymorphism.md)：黏土拟态是彩色、悬浮在背景之上的鼓包，新拟态从背景本身鼓出
- 相关：[玻璃拟态](https://idea.ameng.dev/terms/glassmorphism.md)、[极简界面](https://idea.ameng.dev/terms/minimal-ui.md)、[斜面](https://idea.ameng.dev/terms/bevel.md)

## 来源与延伸阅读

- [IxDF · Neumorphism](https://ixdf.org/literature/topics/neumorphism)
- [Built In · 新拟态与无障碍问题](https://builtin.com/design-ux/neumorphism-accessibility)

网页版（含演示）：https://idea.ameng.dev/terms/neumorphism