Style 02 / ui-ux-pro-max

Neumorphism

以“软实体”感为核心:柔和高光 + 阴影塑造可触感组件。适合强调舒缓和亲和体验的产品,但必须严格控制对比度与可读性。

返回导航站

设计系统定位

依据技能中的“Style Selection + UX + Accessibility”组合:保留 Neumorphism 的触感语言,同时避免低对比造成的可访问性问题。

Soft ShadowRounded GeometryLow-Noise SurfaceCalm InteractionReadable Contrast

组件建议

  • 卡片、按钮、表单控件使用统一圆角和阴影半径。
  • 禁用状态采用亮度变化,不仅靠颜色区分。
  • 重要按钮采用强调色,避免全部组件同层级。

配色系统(Color Mood)

Base#E7EEE7
Highlight#F5FAF4
Text#1B2A22
Accent#2F7A59

字体与动效(Typography + Motion)

  • 正文行高 1.6 左右,保持轻松阅读节奏。
  • 微交互动效 180-300ms,避免剧烈位移与弹跳。
  • 优先 transform / opacity,减少布局抖动。

反模式(Anti-patterns)

  • 所有元素都做内凹/外凸,导致信息层级失真。
  • 文字色过浅,背景过亮,阅读对比不足。
  • 悬停仅靠阴影变化,没有焦点态与语义反馈。

交付前检查(Pre-delivery Checklist)

  • 正文对比度 >= 4.5:1,关键按钮对比度更高。
  • 键盘导航可达,焦点轮廓在浅色背景上可见。
  • 移动端 375px 无横向滚动,卡片间距不拥挤。
  • 每个交互元素在 hover/focus/active 都有明确反馈。

示例组件区

操作组件

展示按钮层级与表单输入状态。

数据组件

CTR6.8%
Conv.3.2%
Engagement+18%
NPS52