UI/UX Pro Max风格图鉴
Mobile补充

新拟态（移动）Neumorphism (Mobile)

单一 #E0E5EC 底色上做凸起与凹陷，紫罗兰作为唯一强调色。柔和统一，但需谨慎处理对比度与边界识别。

典型场景智能硬件 App · 车载控制 · 概念稿

编号85 年代Tools/Lifestyle 复杂度Medium 默认模式自动

效果示例

preview / neumorphism-mobile
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

同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现（数据标注：浅色 支持，深色 不建议）。

风格描述

单一 #E0E5EC 底色上做凸起与凹陷，紫罗兰作为唯一强调色。柔和统一，但需谨慎处理对比度与边界识别。

关键词

neumorphismsoft uidual shadowextrudedinsetclay surfacemonochromaticcool greyhapticceramicphysicaldepth

效果与动效

Full-screen #E0E5EC base, dual-layer shadow via nested View (light top-left + dark bottom-right), extruded convex resting state, inset concave pressed/input state, Reanimated scale 0.97 on press, shadow opacity interpolates 1→0.4 on press, Haptics Light on every interaction, 8pt grid, no blur shadows (no shadowRadius blend), nested depth (extruded card contains inset icon slot)

设计系统变量

--bg#E0E5EC
--text#3D4852
--muted#6B7280
--accent#6C63FF
--shadow-lightrgba(255,255,255,0.6)
--shadow-darkrgba(163,177,198,0.7)
--inset-bg#D1D9E6
--radius-card32px
--radius-button16px
--fontPlus Jakarta Sans or System

配色方案

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

主色 / Primary

Accent Violet #6C63FF, Clay Base #E0E5EC

辅色 / Secondary

Text Dark #3D4852, Text Muted #6B7280, Shadow Light rgba(255,255,255,0.6), Shadow Dark rgba(163,177,198,0.7), Inset Background #D1D9E6

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

适用场景

适合 / Best For

  • Minimal hardware controls
  • smart home apps
  • aesthetic utility tools
  • health monitors
  • brand showcase pages

避开 / Do Not Use For

  • High-density data
  • bright multi-color apps
  • apps needing strong visual hierarchy via color
  • dark-mode-only products

框架兼容

react-nativereact-native-shadow-2react-native-reanimated

能力矩阵

浅色模式支持
深色模式不建议
移动适配原生适配
转化导向弱Low-Conversion
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion

实现要点

落地清单

  • Single #E0E5EC base applied across all screens,
  • Dual shadow (light+dark) implemented via nested View,
  • Extruded resting state on cards/buttons,
  • Inset concave state on inputs,
  • Scale 0.97 press + shadow opacity interpolation,
  • Haptics Light on all presses,
  • No black shadows or white backgrounds,
  • Nested depth pattern (extruded→inset),
  • Accent #6C63FF on active/focus only,
  • 8pt grid spacing

CSS / 技术关键词

backgroundColor: '#E0E5EC', textPrimary: '#3D4852', textMuted: '#6B7280', accent: '#6C63FF', shadowLight: 'rgba(255,255,255,0.6)', shadowDark: 'rgba(163,177,198,0.7)', insetBg: '#D1D9E6', radiusCard: 32, radiusButton: 16, radiusPill: 999, shadowOffset: 6, shadowRadius: 10

衍生自 新拟态 / Neumorphism。

AI 提示词

Design a Neumorphism (Mobile) mobile interface using neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.