# 新拟态 / Neumorphism

> 风格 · `id: neumorphism`

通过同色背景上的明暗双阴影表现凸起和凹陷的界面风格。元素像从同一块柔软材质中压出，适合少量控件的展示场景。它的视觉边界较弱，因此不能只靠阴影表达可点击、选中或禁用状态；需要明确文字、焦点轮廓与足够对比，并为深色主题重新计算阴影。

**别名:** 软浮雕风格 · 凹凸按钮 · 柔和双阴影 · soft UI

**分类:** Style / Visual Language

## 适用场景

- 音乐控制、轻量工具或概念性产品展示。
- 控件较少且需要柔软材质感的页面。

## 不适用场景

- 密集表格和强对比需求的复杂业务界面。
- 不可把明暗阴影当作唯一的状态信号。

## 常见形式

- **凸起表面** (Raised) — 外部双阴影表现悬浮按钮。
- **凹陷表面** (Inset) — 内阴影用于按下状态或轨道。

## 开发规格

- **typography:** 清晰无衬线字体，避免过细字重。
- **color:** 浅灰蓝同色底，深色文字和蓝色强调。
- **border:** 中大圆角；焦点保留可见外轮廓。
- **shadow:** 双向外阴影表现凸起，内阴影表现按下。
- **spacing:** 控件间距充足，避免阴影彼此挤压。
- **motion:** 150–200ms 的凸起与内陷阴影过渡
- **states:** hover 阴影加深并抬升；focus 必须保留 2px 可见外轮廓；active 切换为 inset 内陷；disabled 降低对比；error 用红色 inset 内陷

## 实现要点

**CSS:** `box-shadow` `inset` `border-radius` `:focus-visible`

阴影颜色从统一背景派生，凸起使用正负偏移的两层阴影，按下切换 inset。焦点与选中状态同时使用文字或图标反馈。不要在每次交互中大范围动画阴影，保留 reduced-motion 支持。

## 交给 Agent 的任务 Prompt

```text
先检查项目的布局、字体和主题变量，以新拟态风格完成一个可交互品牌场景。
清晰无衬线字体，避免过细字重。浅灰蓝同色底，深色文字和蓝色强调。中大圆角；焦点保留可见外轮廓。双向外阴影表现凸起，内阴影表现按下。控件间距充足，避免阴影彼此挤压。
阴影颜色从统一背景派生，凸起使用正负偏移的两层阴影，按下切换 inset。焦点与选中状态同时使用文字或图标反馈。不要在每次交互中大范围动画阴影，保留 reduced-motion 支持。
按钮必须有明确反馈，窄屏可用，保留焦点和 reduced-motion 支持，不新增依赖。完成后运行检查并列出修改文件。
```

### 其余层级 Prompt

**Basic:** 使用新拟态风格设计品牌展示页面。通过同色背景上的明暗双阴影表现凸起和凹陷的界面风格。元素像从同一块柔软材质中压出，适合少量控件的展示场景。它的视觉边界较弱，因此不能只靠阴影表达可点击、选中或禁用状态；需要明确文字、焦点轮廓与足够对比，并为深色主题重新计算阴影。

**Design:** 清晰无衬线字体，避免过细字重。浅灰蓝同色底，深色文字和蓝色强调。中大圆角；焦点保留可见外轮廓。双向外阴影表现凸起，内阴影表现按下。控件间距充足，避免阴影彼此挤压。

**Implementation:** 阴影颜色从统一背景派生，凸起使用正负偏移的两层阴影，按下切换 inset。焦点与选中状态同时使用文字或图标反馈。不要在每次交互中大范围动画阴影，保留 reduced-motion 支持。

## 相关概念

- [skeuomorphism](/interface-atlas-web/styles/skeuomorphism) — 相似概念
- [claymorphism](/interface-atlas-web/styles/claymorphism) — 相似概念
- [minimalism](/interface-atlas-web/styles/minimalism) — 相似概念
- [button](/interface-atlas-web/components/button) — 影响组件

## Sources

- [MDN — box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)

---

JSON: `/interface-atlas-web/api/concept/styles/neumorphism.json` · 站点: /interface-atlas-web/styles/neumorphism