Neumorphism
目录
整体风格
新拟态风格 (Neumorphism)：通过柔和的阴影、低对比度色彩和嵌入/浮动效果，模拟物理世界的立体感
阴影：内外双重
box-shadow实现浮起或嵌入效果背景色：
- 使用浅色调 (如：米白色
#F5F5F5、淡蓝灰#E8ECF2)，避免高对比度，提升温和清新感 - 遵守 "60-30-10" 色彩法则，使视觉效果更具层次感
- 60% 主色调：米白色 (
#F5F5F5) - 30% 次要色：淡蓝灰 (
#E8ECF2) - 10% 点缀色：高级灰 (
#B8C6D9)
- 60% 主色调：米白色 (
- 渐变色：按钮等交互元素使用渐变 (如：
linear-gradient(135deg, #E8ECF2, #F5F5F5)) 提升视觉吸引力
- 使用浅色调 (如：米白色
UI 元素风格
主要 UI 控件 (卡片、按钮、输入框等)，采用圆角和三级阴影设计，结合黄金分割比例和交互动画
- 圆角：
12-16px，双重阴影效果，模拟浮动/按下质感 - 阴影：
- 一级阴影 (轻微浮动)：
8px模糊度 - 二级阴影 (中度浮动)：
12px模糊度 - 三级阴影 (强烈浮动)：
16px模糊度
- 一级阴影 (轻微浮动)：
- 黄金分割比例：卡片宽高和间距时使用黄金分割比例 1:1.618
- 交互性
- 悬停：阴影增大，轻微上浮 (
0.2s) - 点击：内嵌阴影，快速下沉 (
0.1s) - 释放：缓慢回弹 (
0.3s) - 使用
ease-out确保平滑过渡，动画效果平滑过渡，保证视觉效果的流畅性和自然感
- 悬停：阴影增大，轻微上浮 (
字体
- 字体选择：简洁无衬线字体 (如：
Roboto、Inter、Open Sans)，确保良好的可读性和现代感， - 字体颜色：浅灰色或低对比黑色 (如：
#B8C6D9)，标题加粗，正文较轻 - 字体大小
- 大标题：
24px，粗体 - 副标题：
20px，半粗体 - 正文：
16px，常规 - 说明文字：
14px，细体
- 大标题：
交互效果
- 按钮悬停：阴影增大，呈现浮动感
- 点击反馈：内嵌阴影，模拟按下效果
- 平滑过渡：使用
ease-out使按钮、阴影、大小等变化有 "缓出缓入" 功效 - 三段式动画：悬停 (
0.2s上浮)、点击 (0.1s下沉)、释放 (0.3s回弹)
图标和装饰
- 图标设计：简洁线条，避免复杂细节，与新拟态风格一致
- 阴影：微弱阴影效果，增强浮动感，提升层次感
- 渐变：微小渐变 (如：
#E8ECF2到#F5F5F5) 使图标更加灵动和细腻
布局
间距
- 使用
8px倍数 (8px、16px、24px、32px)，确保整洁 - 确保 UI 组件有足够的 "呼吸空间"，避免界面过于拥挤，提升用户体验
- 使用
网格布局：使用模块化栅格系统，保持清晰整齐的排版风格，支持响应式设计，适配不同的屏幕尺寸
- 桌面端：
12列栅格 - 平板端：
8列栅格 - 移动端：
4列栅格
- 桌面端：
响应式设计
- 桌面与移动端适配，移动端垂直布局
- 动态调整元素显示，确保一致性和可操作性
颜色和视觉平衡
低饱和度中性色：避免鲜艳色，保持温和感
阴影对比：阴影与背景轻微对比，增强浮动感
纹理背景：透明度
5%-10%的渐变或线性图案，增加精致感
细节和品质感
精致设计：柔和线条，避免粗糙
边框：
0.5px边框，颜色稍深 (如：#E8ECF2)圆角差异化
主要容器：
16px次要容器：
12px按钮元素：
8px