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风格的滑动开关
|
||
- 颜色状态反馈
|
||
- 微动画过渡
|
||
|
||
### 输入控件
|
||
- 浮动标签设计
|
||
- 聚焦时动画效果
|
||
- 错误状态视觉反馈 |