新拟态
Neumorphism
别名:软浮雕风格凹凸按钮柔和双阴影soft UI
这是什么
通过同色背景上的明暗双阴影表现凸起和凹陷的界面风格。元素像从同一块柔软材质中压出，适合少量控件的展示场景。它的视觉边界较弱，因此不能只靠阴影表达可点击、选中或禁用状态；需要明确文字、焦点轮廓与足够对比，并为深色主题重新计算阴影。
开发规格
字体
清晰无衬线字体，避免过细字重。
色彩
浅灰蓝同色底，深色文字和蓝色强调。
边框
中大圆角；焦点保留可见外轮廓。
阴影
双向外阴影表现凸起，内阴影表现按下。
间距
控件间距充足，避免阴影彼此挤压。
动效
150–200ms 的凸起与内陷阴影过渡
状态反馈
hover 阴影加深并抬升；focus 必须保留 2px 可见外轮廓；active 切换为 inset 内陷；disabled 降低对比；error 用红色 inset 内陷
风格演示
先看整页效果，再试交互场景整页预览
让专注
成为一种日常
简洁的工具，安静的体验。
帮助你更好地管理时间与生活。
今天天气不错
保持好心情
交互场景
正在加载演示…
✓ 适用场景
- 音乐控制、轻量工具或概念性产品展示。
- 控件较少且需要柔软材质感的页面。
✕ 不适用场景
- 密集表格和强对比需求的复杂业务界面。
- 不可把明暗阴影当作唯一的状态信号。
常见形式
凸起表面
Raised
外部双阴影表现悬浮按钮。
凹陷表面
Inset
内阴影用于按下状态或轨道。
实现要点
box-shadowinsetborder-radius:focus-visible阴影颜色从统一背景派生，凸起使用正负偏移的两层阴影，按下切换 inset。焦点与选中状态同时使用文字或图标反馈。不要在每次交互中大范围动画阴影，保留 reduced-motion 支持。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
先检查项目的布局、字体和主题变量，以新拟态风格完成一个可交互品牌场景。 清晰无衬线字体，避免过细字重。浅灰蓝同色底，深色文字和蓝色强调。中大圆角；焦点保留可见外轮廓。双向外阴影表现凸起，内阴影表现按下。控件间距充足，避免阴影彼此挤压。 阴影颜色从统一背景派生，凸起使用正负偏移的两层阴影，按下切换 inset。焦点与选中状态同时使用文字或图标反馈。不要在每次交互中大范围动画阴影，保留 reduced-motion 支持。 按钮必须有明确反馈，窄屏可用，保留焦点和 reduced-motion 支持，不新增依赖。完成后运行检查并列出修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
风格相似概念把控件捏成软黏土的视觉语言：大圆角、柔和粉彩底色，双重阴影——向内的内 凹阴影加向外的膨胀投影——让元素像充了气的黏土块，圆润 饱满 软乎乎。 它是新拟物与 3D 卡通之间的一种手感化中间态。
风格相似概念以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件