Neumorphism 新拟态
Neumorphism renders every control as if extruded from, or pressed into, the page itself: background and controls share one matte color, and shape comes entirely from a pair of soft shadows — light from the top-left, dark toward the bottom-right. Nothing has a border and nothing floats; the whole interface reads as one continuous molded surface. It photographs beautifully and tests poorly: the same softness that makes it distinctive erases the contrast real controls need.
新拟态把每个控件都渲染得像从页面本身挤出来、或压进去的一样：背景和控件共享同一种哑光色，形状完全来自一对柔和阴影 —— 亮部朝左上，暗部朝右下。没有描边，也没有悬浮；整个界面读起来就是一块连续的模压表面。它截图好看，实测糟糕：正是那份让它出挑的柔和，抹掉了真实控件所需的对比度。
Scope: Covers the 2019–2021 'Soft UI' trend look. Its 3D-clay sibling with thicker, toy-like inflation is usually called claymorphism and is a separate (future) entry.
范围：覆盖 2019–2021 年「Soft UI」（软 UI）风潮的样子。它那位膨胀得更厚、像玩具的 3D 黏土亲戚通常叫黏土拟态（claymorphism），是另一个（待写的）条目。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
One continuous surface一块连续的表面 surface defining定义特征
Controls and background share the SAME matte color — elements aren't placed on the page, they're molded from it.
控件和背景共享同一种哑光色 —— 元素不是摆在页面上，而是从页面里模压出来的。
-
Dual soft shadows双重柔和阴影 depth defining定义特征
Every raised element carries two blurred shadows: a light one up-left and a dark one down-right, as if lit from one soft corner light.
每个凸起元素都带两道模糊阴影：左上一道亮的，右下一道暗的，仿佛被角落里一盏柔和的灯照亮。
-
Pressed (inset) states按压（内凹）状态 depth defining定义特征
Inputs and active states invert the shadow pair inward, so the element looks pressed INTO the surface rather than raised from it.
输入框和激活状态把这对阴影反转朝内，元素看起来就像被压进表面，而不是浮在上面。
-
No borders, whisper contrast无描边，耳语级对比 geometry defining定义特征
Edges exist only where the shadows fade — no outlines, no strong fills; the whole UI sits within a narrow band of one hue.
边缘只存在于阴影渐隐的地方 —— 没有轮廓线，没有强烈的填充色；整个界面待在一个色相的窄窄区间里。
-
Generous rounded corners大方的圆角 geometry supporting辅助特征
Large, soft radii everywhere — crisp corners would break the molded illusion.
到处都是大而软的圆角 —— 尖锐的直角会打破模压的幻觉。
-
Any single base hue任意单一基色 color variable可变特征
Classically a pale grey-blue (#e0e5ec), but the effect works on any light, low-saturation base; one saturated accent may survive for the primary action.
经典款是浅灰蓝（#e0e5ec），但任何浅色、低饱和的基色都成立；可以为主操作留一个高饱和的强调色。
-
Textures and materials纹理与材质 imagery avoid避免
Leather, paper, or gloss would reintroduce skeuomorphism — neumorphic surfaces are matte, uniform, and material-less.
皮革、纸张或高光会把拟物请回来 —— 新拟态的表面是哑光的、均匀的、没有材质感的。
Often confused with: Skeuomorphism最容易混淆：拟物设计
Neumorphism新拟态
Skeuomorphism拟物设计
This is neumorphism because the controls and the background are one material-less matte surface, shaped only by soft dual shadows.
这是新拟态，因为控件和背景是一块没有材质感的哑光表面，只靠柔和的双阴影塑形。
It would become skeuomorphism if surfaces started imitating real nameable materials — leather grain, glossy plastic, brushed metal — with textures and object metaphors.
如果表面开始模仿真实的、叫得出名字的材质 —— 皮革纹理、亮面塑料、拉丝金属 —— 带上纹理和实物隐喻，就变成拟物设计了。
In code — optional starting points代码写法 —— 可选起点
Raised element on the classic base hue
background:#e0e5ec; box-shadow:-6px -6px 12px rgba(255,255,255,.85), 6px 6px 12px rgba(163,177,198,.6); border-radius:16px;Pressed / input inset state
box-shadow: inset -4px -4px 8px rgba(255,255,255,.75), inset 4px 4px 8px rgba(163,177,198,.55);Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using neumorphism (Soft UI). Defining signals: controls share the background's exact matte color; raised elements get dual soft shadows (light top-left, dark bottom-right); pressed/input states invert the shadows inward (inset); no borders anywhere; generous rounded corners. Keep the base hue flexible (classically a pale grey-blue like #e0e5ec) and allow one saturated accent for the primary action. Use CSS box-shadow pairs, e.g. raised: box-shadow: -6px -6px 12px rgba(255,255,255,.85), 6px 6px 12px rgba(163,177,198,.6); pressed: the same pair with inset. Do not drift into skeuomorphism; the decisive difference is that neumorphic surfaces are one uniform material-less matte — no textures, gloss, or imitated materials. Preserve readable text contrast, a visible non-shadow cue for focus and states (WCAG non-text contrast will fail on shadows alone), and reduced-motion support.
用新拟态（Soft UI）创建这个界面。决定性信号：控件与背景共享完全相同的哑光色；凸起元素带双重柔和阴影（左上亮、右下暗）；按压/输入状态把阴影反转朝内（inset）；任何地方都没有描边；圆角大而柔和。基色保持灵活（经典是 #e0e5ec 这类浅灰蓝），允许为主操作保留一个高饱和强调色。使用成对的 CSS box-shadow，例如凸起：box-shadow: -6px -6px 12px rgba(255,255,255,.85), 6px 6px 12px rgba(163,177,198,.6)；按压：同一对阴影加 inset。不要滑向拟物设计；决定性区别在于新拟态的表面是一块统一的、没有材质感的哑光面 —— 没有纹理、没有高光、没有模仿材质。保证文字对比度可读，为焦点和状态提供阴影以外的可见提示（只靠阴影过不了 WCAG 非文本对比度），并支持 reduced-motion。
Accessibility & misuse可访问性与误用
The style's signature IS a WCAG problem: shadow-only boundaries rarely reach the 3:1 non-text contrast minimum — add a real focus ring and at least one non-shadow state cue (color, icon, label).
这个风格的招牌特征本身就是 WCAG 问题：只有阴影的边界很少能达到 3:1 的非文本对比度下限 —— 要加真正的焦点环，并至少配一个非阴影的状态提示（颜色、图标、文字标签）。
Disabled vs enabled vs pressed all look similar in pure neumorphism; users with low vision may not find the controls at all. NN/g and the coining authors themselves warn against shipping it for functional UI.
在纯新拟态里，禁用、可用、按下的样子都差不多；低视力用户可能根本找不到控件。NN/g 和提出这个词的作者本人都警告过：别把它用在功能性界面上。
If you keep it, reserve it for large decorative containers and give interactive elements stronger contrast than the style would like.
如果一定要用，把它留给大型装饰性容器，并让可交互元素的对比度强过这个风格的本意。
Origin起源
A Dribbble-era trend: Alexander Plyuto's 2019 'Skeuomorph Mobile Banking' shots went viral, Jason Kelley's comment coined the name, and Michal Malewicz's 2019–2020 articles defined and then warned about it. It stayed mostly a concept-shot style — few shipping products survived its accessibility costs.
一场 Dribbble 时代的风潮：Alexander Plyuto 2019 年的「Skeuomorph Mobile Banking」概念图疯传，Jason Kelley 的一条评论造出了这个名字，Michal Malewicz 2019–2020 年的文章先是定义了它、随后又发出警告。它基本停留在概念稿阶段 —— 没什么上线产品扛得住它的无障碍代价。