UI/UX Pro Max风格图鉴
General推荐

新拟态Neumorphism

控件从同色底板中「挤」出来：左上受光、右下投影，按下则反过来凹陷。柔和无描边，适合小面积的开关、旋钮与播放控制，不适合大面积正文。

典型场景智能家居 · 控制面板 · 概念原型

编号02 年代2020s Modern 复杂度Medium 默认模式自动

效果示例

preview / neumorphism
Nova 产品方案定价 开始使用

Design System

同一套组件
不同的性格

色彩、字体、圆角与材质，决定了界面的气质。

主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50

同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。

风格描述

控件从同色底板中「挤」出来：左上受光、右下投影，按下则反过来凹陷。柔和无描边，适合小面积的开关、旋钮与播放控制，不适合大面积正文。

关键词

Soft UIembosseddebossedconvexconcavelight sourcesubtle depthrounded (12-16px)monochromatic

效果与动效

Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow

设计系统变量

--border-radius14px
--shadow-soft-1-5px -5px 15px
--shadow-soft-25px 5px 15px
--color-light#F5F5F5
--color-primarysingle pastel

配色方案

色值取自风格数据，不足时补充主题令牌

主色 / Primary

Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8

辅色 / Secondary

Tints/shades (±30%), gradient subtlety, color harmony

强调色在页面底色上的对比度约 3.5:1，适合大字与图形，正文需另配深色。

适用场景

适合 / Best For

  • Health/wellness apps
  • meditation platforms
  • fitness trackers
  • minimal interaction UIs

避开 / Do Not Use For

  • Complex apps
  • critical accessibility
  • data-heavy dashboards
  • high-contrast required

框架兼容

tailwindcss-in-js

能力矩阵

浅色模式支持
深色模式有条件支持
移动适配可适配
转化导向中Medium
渲染成本低无额外开销
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion

实现要点

落地清单

  • Rounded corners 12-16px consistent,
  • Multiple shadow layers (2-3),
  • Pastel color verified,
  • Monochromatic palette checked,
  • Press animation smooth 150ms

CSS / 技术关键词

border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press

下辖变体：新拟态（移动）。

AI 提示词

Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.