阿格莱亚身着新拟态风格:柔和的同色浮雕圆盘,浅粉灰底

艺术风格 · 美学百科全书

新拟态

Neumorphism

新拟态是"软 UI":元素与背景同色,只靠一对明暗阴影挤出柔软的浮雕感。

约 2019–2021 年 · 线上设计社区(Dribbble)

向下看看 ↓

简介

2019 年 11 月,设计师亚历山大·普柳托在 Dribbble 发了一组银行 App 概念稿,标题是"如果拟物化继续演化会怎样"。稿子迅速走红:浅灰底面上的圆角卡片,没有边框,没有颜色区分,只靠一对明暗阴影——左上亮、右下暗——让人看出它是"从表面挤出来的"。术语由杰森·凯利 / 米哈乌·马莱维奇提出(命名归属有分歧,见文末说明)。

手法只有一句话:元素与背景同色,深度全靠阴影。它介于拟物与扁平之间——有拟物的立体感,没有拟物的材质堆砌;有扁平的克制,没有扁平的平。视觉上安静优雅,但代价是对比度过低、可访问性差:按钮和背景几乎一个颜色,用户很难一眼认出"这是能按的"。

2020 年,macOS Big Sur 采用了部分新拟态元素(圆角图标与半透明),算是它进主流系统的一步。但 2021 年后热度消退,让位于玻璃拟态。今天的共识是:只宜作装饰性组件(音乐播放器、仪表盘),关键控件禁用——对比度不达 WCAG,就不要让它承担操作。

英文定义:Neumorphism is "soft UI": elements share the background's color, and a single pair of light and dark shadows extrudes a soft relief.

第一个 prompt

要跟 AI 说这个风格,第一句话就这么说。直接复制就能用。

中文
用新拟态风格设计一个音乐播放器界面:浅灰同色底面、圆角卡片从表面轻轻挤出、左上亮右下暗的柔和双阴影,安静、柔软、极简。
English
Design a music player UI in neumorphic style: a light grey same-color surface, rounded cards gently extruded from it, soft dual shadows — light top-left, dark bottom-right — quiet, soft, minimal.

变体

  • 仪表盘

    用新拟态风格设计一个智能家居仪表盘:同色圆角开关与滑块、柔和浮雕、米白单色系,平静、克制、触感温和。

    Design a smart-home dashboard in neumorphic style: same-color rounded switches and sliders, soft relief, a warm off-white monochrome palette — calm, restrained, gently tactile.

  • 品牌

    用新拟态风格设计一个冥想 App 的首页:淡粉灰底面、压入式圆形按钮、几乎没有文字装饰,呼吸感、安静、克制。

    Design a meditation app home screen in neumorphic style: a pale pink-grey surface, pressed-in round buttons, almost no text decoration — breathing room, quiet, restrained.

  • 网页

    用新拟态风格做一个网页计算器小部件:同色圆角按键、按下时由凸变凹,柔软、好玩、只作装饰。

    Build a web calculator widget in neumorphic style: same-color rounded keys that sink from raised to pressed when tapped — soft, playful, decorative only.

风格卡

给机器用的规格。工作台拼装时,真正调用的就是这张卡。

配色

#E0E5EC

浅灰底 · 底色·经典新拟态底

#FFFFFF

亮影白 · 左上高光

#A3B1C6

暗影灰蓝 · 右下阴影

#6D7B8D

文字深灰 · 正文

#8FA3BF

点缀蓝灰 · 选中态

#E9E4DA

米白变体 · 暖色底

字体
细无衬线。开源替代:Inter Light(OFL)、Roboto Light(Apache 2.0)、Poppins Light(OFL);字重 300–400,标题不加粗、靠字号分层。注意:细字 + 低对比是双重可读性风险,正文慎用。
构图
同色卡片阵列;圆角半径大(16–24px);间距均匀、留白充足;光源固定左上;凸起与凹陷成对出现(按钮凸、输入框凹)。
形态
圆角矩形与圆形;无尖角;无边框线——只靠阴影定边界。
质感与母题
柔和双阴影的"挤压塑料/压纹纸"感;母题:挤出的按钮、压入的输入框、圆角开关、圆形旋钮。
禁忌
关键控件(提交、支付、删除)禁用新拟态;不用高饱和色(会破坏同色浮雕);不用多色混搭;不在深色底上硬套(暗影会消失);不全屏使用。

画廊

几幅代表作。每幅只看一点:它最能说明这个风格的那一点。

普柳托银行 App 概念

亚历山大·普柳托 · 2019 · 版权期

看:新拟态的起点——"如果拟物化继续演化";浅灰底面 + 双阴影的全部语法都在这里。

查看介绍(Wikipedia)↗

马莱维奇《Neumorphism in user interfaces》

米哈乌·马莱维奇 · 2019 · 版权期

看:术语的定名文章,作者在现场 1 小时做出的新拟态演示;第一篇就警告了可访问性问题。

查看原文(UX Collective)↗

macOS Big Sur 界面元素

苹果 · 2020 · 版权期

看:新拟态进主流系统的一步——圆角图标与半透明;但苹果并未全盘采用。

查看介绍(Wikipedia)↗

华为 HarmonyOS 智慧屏界面

华为 · 2019 · 版权期

看:2019 年 8 月发布的 Honor Vision 智慧屏界面,被列为新拟态的早期实例。

查看介绍(Wikipedia)↗

Dribbble 新拟态概念稿浪潮

各作者 · 2019–2020 · 版权期

看:成百上千张概念稿在几个月内涌现,又在批评声中退潮——一次完整的微趋势生命周期。

查看文章(Built In)↗

历史流变

  1. 2019 年 8 月 华为 HarmonyOS 智慧屏(Honor Vision)发布,被后世列为新拟态早期实例。
  2. 2019 年 11 月 普柳托在 Dribbble 发布"Skeuomorph Mobile Banking"概念稿,迅速走红。
  3. 2019 年 12 月 马莱维奇发表《Neumorphism in user interfaces》,术语定名并走红;同文即警告可访问性问题。
  4. 2020 年 Dribbble 与 Behance 上新拟态概念稿成潮;11 月 macOS Big Sur 发布,带入部分新拟态元素。
  5. 2021 年 热度消退,玻璃拟态接棒成为主流。
  6. 2021 年 12 月 马莱维奇提出黏土拟态,被定位为新拟态的"友好继任者"。

关键人物

  • 亚历山大·普柳托——银行 App 概念稿作者,新拟态视觉的起点。
  • 米哈乌·马莱维奇——定名并推广了新拟态(也是玻璃拟态与黏土拟态的命名者)。
  • 杰森·凯利——在评论中率先提出 "neuomorphism" 一词(命名归属有分歧)。

演变与影响

从拟物化与扁平化之间来——拟物的深度 + 扁平的克制;高峰短暂,死于可访问性;直接后代是玻璃拟态(2020)与黏土拟态(2021);教训长久:美不能以牺牲可识别为代价,这条教训写进了后来的每一个深度风格。

相关条目

相关流派

各流派页逐篇发布,发布后转为链接。

搭得好的组件

关键词:新拟态、软 UI、双阴影、同色浮雕、可访问性、普柳托、马莱维奇

草稿。画廊五件全部在版权期,一律只作文字 + 外链;命名归属有分歧:Wikipedia 称术语由 Jason Kelly 在 2019 年造出,马莱维奇自述是 Kelly 写了 "Neuomorphism" 后他去掉一个 "o" 定名,IxDF 则归于马莱维奇——本篇不取单方说法。英文全文翻译后补。