新拟态Neumorphism
你可能会说
按钮像从背景里凸出来，同色系、软软的那种质感。
新拟态是一种用同色背景和明暗双阴影表现凸凹质感的视觉风格它会让按钮和卡片看起来像从背景中凸出或凹下，但边界和可点击状态容易不清楚。它更适合展示页面或局部装饰，关键操作要先保证对比度和识别性。
左右滑动查看完整示例
HOME / LIVING ROOM晚安模式22:41
室内温度24°舒适
空气质量优
夜间氛围已开启
设计原则 · Principles
- 使用方向相反的一浅一深两道阴影表现凸起
- 背景与组件可以接近同色，但边界仍要能够识别
- 凸起和凹下可以辅助表达状态，不能成为唯一信号
- 圆角与柔和阴影要和组件尺寸保持协调
- 在文字、焦点和关键操作上优先满足对比度要求
什么时候用
- 音乐播放器等重氛围、低操作密度的界面⏮▶⏭
- 概念稿和作品集，用于展示材质方向◐
- 真实产品中的一小块装饰或控制区域在常规界面中将新拟态限制在非关键区域
- 时钟、天气等以查看为主的小组件12:30
什么时候不用
- 长篇正文使用低对比灰色文字和背景灰色正文和相近背景会降低长文可读性。
- 输入框与背景没有边界，用户难以发现姓名？按钮？
- 关键按钮只靠浅阴影表达可点击状态立即购买
- 没有验证对比度，就用于核心产品流程阳光下
发展历程 · History
2019.12
概念稿引发关注
一组银行 App 概念稿带动了对同色背景、凸起按钮效果的讨论，随后常被称为 Neumorphism 或 Soft UI。
2020
教程与概念稿扩散
相关教程、组件和生成工具增多，更多设计师开始尝试这种柔和的明暗层次。
2020—2021
可用性讨论增加
研究与实践常指出：低对比度和不清晰的可操作边界会带来无障碍风险；采用时需要逐项测试。
今天
多用于局部探索
它仍见于概念稿、播放器和局部装饰；在任务密集或高风险场景中，应以可读性和明确反馈为先。
组成结构 · Anatomy
同色底 #e3e9f2
↖ 白色柔光
↘ 灰蓝暗影
柔和大圆角
凹陷按下
使用相近背景统一视觉，但需额外提供可读的文字和控件边界
柔和高光可暗示光源方向，不应成为唯一的状态提示
暗影可补充体积感；强度以不干扰文字和焦点为准
圆角大小跟随组件和品牌；不要让轮廓因此难以识别
凹陷效果可表现槽位或层次，激活状态仍应使用明确标签和反馈
AI 提示词 · Prompt
做一个智能家居的只读状态小组件，展示室温和空气质量，并用柔和层次增加触感。所有文字、状态和可操作控件必须保持足够对比；安全或高风险操作使用更明确的常规控件。只显示设备真实返回的数据，缺少读数时显示“暂无数据”，不要补造数值。
典型使用场景
新拟态氛围家居
左右滑动查看完整示例
HOME / LIVING ROOM23:14
室内温度24°舒适
阅读灯40% brightness
夜间氛围已开启
低风险控制 · 关键安全设备不使用新拟态
新拟态概念控制面板
左右滑动查看完整示例
◐
♪
Dribbble 概念稿 · 展示功力，不上线
产品界面的局部点缀
左右滑动查看完整示例
整页新拟态的可读性检查
左右滑动查看完整示例
登录
邮箱
密码
登录
↑ 找出输入框和登录按钮——这就是它不能上线的原因