# 企业设置管理系统设计规范 ## 设计理念 采用现代简约的企业级设计风格,强调专业性和易用性,通过精致的视觉细节和流畅的交互动画提升用户体验。 ## 色彩系统 - **主色调**: 深蓝灰 (#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风格的滑动开关 - 颜色状态反馈 - 微动画过渡 ### 输入控件 - 浮动标签设计 - 聚焦时动画效果 - 错误状态视觉反馈