1.7 KiB
1.7 KiB
企业设置管理系统设计规范
设计理念
采用现代简约的企业级设计风格，强调专业性和易用性，通过精致的视觉细节和流畅的交互动画提升用户体验。
色彩系统
- 主色调: 深蓝灰 (#2D3748) - 专业稳重
- 辅助色: 柔和蓝 (#4A90E2) - 交互元素
- 强调色: 温暖橙 (#F56500) - 重要操作
- 背景色: 浅灰白 (#F7FAFC) - 主背景
- 文本色: 深灰 (#2D3748) 和中灰 (#4A5568)
字体系统
- 标题字体: Noto Sans SC (粗体) - 现代感强
- 正文字体: Noto Sans SC (常规) - 清晰易读
- 字体层级:
- H1: 2.5rem (40px)
- H2: 2rem (32px)
- H3: 1.5rem (24px)
- 正文: 1rem (16px)
- 小字: 0.875rem (14px)
视觉效果
背景效果
- 使用液态金属位移效果作为页面背景
- 微妙的粒子动画增强视觉层次
交互动画
- 按钮悬停: 3D倾斜效果 + 阴影扩展
- 表单元素: 聚焦时边框发光效果
- 开关切换: 平滑的滑动动画
- 卡片悬停: 轻微上浮 + 阴影加深
图标系统
- 使用线性图标风格
- 统一的描边粗细 (2px)
- 悬停时填充动画
布局系统
- 网格系统: 12列响应式网格
- 间距系统: 4px基础单位的倍数
- 圆角: 统一使用8px圆角
- 阴影: 多层次阴影系统营造深度感
组件设计
登录表单
- 居中布局，最大宽度400px
- 半透明背景卡片
- 渐变边框装饰
设置面板
- 左侧导航栏 (固定宽度280px)
- 右侧内容区域 (自适应)
- 分组的设置卡片
开关控件
- iOS风格的滑动开关
- 颜色状态反馈
- 微动画过渡
输入控件
- 浮动标签设计
- 聚焦时动画效果
- 错误状态视觉反馈