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