设计系统定位
依据技能中的“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