2.6 KiB
2.6 KiB
后台界面视觉统一调整方案
一、设计差异分析
前台设计风格
- 颜色方案：深色背景
#050505，金色强调色#d4b383，半透明效果 - 排版样式：Inter/Noto Sans SC 字体，金色标题，白色文本
- 组件风格：玻璃效果、卡片设计、模糊背景
- 交互模式：平滑过渡动画，精细悬停效果
后台设计风格
- 颜色方案：浅色背景
#f5f7fa，蓝色强调色#3b82f6，实色背景 - 排版样式：默认字体，普通标题，深色文本
- 组件风格：传统企业后台设计，没有玻璃效果
- 交互模式：简单过渡，基础悬停效果
二、调整方案
1. 颜色方案统一
- 背景色：将后台背景改为
#050505，与前台保持一致 - 强调色：替换蓝色
#3b82f6为前台金色#d4b383 - 文本色：改为白色或浅灰色，与前台保持一致
- 边框色：使用半透明边框，与前台卡片风格统一
2. 组件风格统一
- 玻璃效果：为侧边栏、头部添加
glass-nav效果 - 卡片设计：后台卡片改为
art-card风格，半透明背景 - 按钮样式：统一使用前台的按钮样式，圆角、悬停效果
- 图标风格：使用 Lucide Icons，统一图标颜色和大小
3. 排版样式统一
- 字体：使用与前台相同的 Inter/Noto Sans SC 字体
- 标题样式：统一标题样式，如大写、金色等
- 文本大小：统一文本大小和行高
4. 交互模式统一
- 过渡动画：添加平滑过渡动画
- 悬停效果：统一悬停效果，使用金色强调
- 点击反馈：添加精细的点击反馈
三、具体调整点
1. AdminLayout.vue
- 修改背景色为
#050505 - 侧边栏添加
glass-nav效果 - 头部添加
glass-nav效果 - 按钮和链接使用金色
#d4b383作为强调色 - 添加平滑过渡动画
2. 表单组件
- 统一表单样式，使用玻璃效果
- 输入框样式与前台保持一致
- 按钮样式与前台保持一致
3. 表格组件
- 表格背景改为半透明
- 表头样式与前台保持一致
- 行悬停效果与前台保持一致
4. 其他组件
- 模态框样式与前台保持一致
- 通知样式与前台保持一致
- 加载状态样式与前台保持一致
四、预期效果
- 后台界面与前台界面视觉风格统一
- 消除当前存在的视觉突兀感
- 提升整体产品的设计统一性
- 增强用户体验连贯性
- 保持后台功能的可用性和专业性
通过以上调整，后台界面将与前台界面保持视觉统一，同时保持后台功能的专业性和可用性。