视觉风格图鉴
认识100+种视觉风格

平面设计

新拟态

让控件像从同一块柔软材料中鼓起或压下,以一明一暗两道阴影制造触感;它辨识度强,也把对比度和状态表达推向危险边缘。

形成
2019年前后设计社区
名称
new+skeuomorphism的缩合
主要媒介
概念界面、仪表盘、控制面板

视觉线索

  • 柔和阴影
  • 低对比
  • 凸起或凹陷
  • 软质感
开始观察↓
以同色浅浮雕、柔和双向阴影和低对比表面演绎的新拟态苹果
当代演绎 · 视觉教学示例

读图

主体与背景几乎同色,形体完全交给光影

白色苹果像从白色桌面缓慢浮起:左上亮、右下暗,边缘没有强轮廓。这正是新拟态的吸引力与风险——阴影一旦看不清,对象就会消失。

  1. 01

    看同色材料

    苹果、叶片与环境共享接近的米白色,材质连续性取代色块分割。

  2. 02

    看成对阴影

    亮侧与暗侧共同制造凸起;只有单一道投影会更像普通卡片。

  3. 03

    看凹凸状态

    果窝像被压入表面,外轮廓像鼓起,提示控件可用内外阴影区分状态。

  4. 04

    测试弱视条件

    降低屏幕亮度或眯眼后,叶片和边缘迅速消失,说明不能只靠细微阴影传达操作。

一句话理解

把界面想成一整块柔软材料,
控件从背景中挤出或压入

新拟态是2019年前后设计社区传播的界面表面风格,名称来自new与skeuomorphism。它通常让卡片和按钮与背景同色,用左上浅色高光、右下深色阴影模拟连续材料的浅浮雕。它借回了物理触感,却不像传统拟物那样模仿具体皮革、金属或现实工具。

视觉语言

浅浮雕 DNA

01

底色

单色、连续

控件与背景共享颜色,像同一材料。
02

光源

固定、斜向

一亮一暗两道柔影必须遵循同一方向。
03

形体

圆润、浅浮雕

大圆角和低高度避免尖锐机械感。
04

状态

凸起与凹入

外阴影常表示静止,内阴影表示按下或选中。
05

对比

刻意克制

美感依赖低差异,因此必须另加边框、颜色或图标保护识别。

它从哪里来

扁平界面之后,设计社区重新寻找可触摸的表面

新拟态不是完整的工业设计运动,而是概念图与前端实验迅速放大的视觉趋势。它混合扁平设计的简洁背景、Material时代的阴影和拟物设计的触感想象。

  1. 扁平与卡片成为常态

    界面以纯色、圆角和投影区分组件,建立新拟态可借用的视觉语法。

  2. 浅浮雕概念图走红

    Alexander Plyuto等设计者发布同色双阴影控件,设计社区开始集中讨论。

  3. Neumorphism名称传播

    教程、生成器与作品集迅速复制柔软按钮、音乐播放器和仪表盘。

  4. 无障碍批评与局部使用

    低对比、状态不清和暗色模式问题限制其成为通用系统,更适合作为少量装饰或非关键控件。

艺术家与作品

通过四个关键角色认识它

01

Alexander Plyuto

其同色浅浮雕界面概念图成为这波趋势最常被引用的视觉触发点。
Skeuomorph Mobile Banking
02

设计教程社区

把双阴影配方转化为CSS、设计工具预设和在线生成器,使风格快速复制。
Neumorphism教程
03

W3C WAI

以非文本对比规则说明控件边界和状态不能只靠几乎不可见的阴影。
WCAG 1.4.11
04

系统设计团队

以轮廓、层级、状态色和标准控件证明阴影应服务信息而非仅制造触感。
平台设计规范

如何辨认

先确认同色双影,再检查控件是否仍能被发现

  • ✓控件与背景是否基本同色,并共享一种柔软材料想象?
  • ✓亮影和暗影是否成对出现、方向一致?
  • ✓按下、选中、禁用与键盘焦点是否有明确的非阴影线索?
  • ✓控件边界与关键图标是否达到足够的非文本对比?

风格关系

三种深度如何产生

参考资料

资料来源与说明

苹果图故意把对比压得很低,以展示新拟态的同色浅浮雕,也暴露其识别风险。用于真实产品时,应优先保证控件、状态、焦点和文字可见。

  1. W3C WAI:Non-text Contrast ↗
  2. Microsoft Learn:Layering and elevation ↗
  3. Apple HIG:Accessibility ↗