196 lines
5.6 KiB
Markdown
196 lines
5.6 KiB
Markdown
# XSynergy Web 管理平台 UI 设计说明
|
||
|
||
## 一、核心约定与不可修改内容（总览）
|
||
|
||
### 1. 核心功能不可修改
|
||
|
||
- **登录逻辑不可修改**：用户认证、密码验证及登录流程保持现有逻辑。
|
||
- **系统功能保留**：
|
||
- 用户管理、角色与权限管理
|
||
- 全局消息发送
|
||
- 远程协作记录管理
|
||
- **功能操作与交互**：
|
||
- 所有原有操作按钮（如头像、通知、快速操作）必须保留。
|
||
- 功能的基本可访问性和权限控制保持不变。
|
||
|
||
### 2. 主题色与按钮颜色
|
||
|
||
- **系统主色**：`#409EFF`
|
||
应用范围：
|
||
- 登录按钮、输入框 focus 状态
|
||
- 导航栏背景、选中菜单、高亮条
|
||
- 重要交互元素及图标高亮
|
||
- **登录按钮**：
|
||
- 宽度占满卡片，视觉突出
|
||
- Hover 与点击状态明显
|
||
- **输入框**：
|
||
- 高度统一，圆角设计
|
||
- Focus 状态明显
|
||
|
||
### 3. 整体风格与UI约定
|
||
|
||
- **风格统一**：
|
||
- 科技感强、现代化、企业级视觉
|
||
- 扁平化、简洁、清晰
|
||
- **字体层级**：
|
||
- 系统名称：最大字体
|
||
- 模块标题：中等字体
|
||
- 描述文本：常规字体
|
||
- 辅助说明：较小字体
|
||
- **卡片设计**：
|
||
- 圆角设计、轻微阴影、背景浅色或半透明
|
||
- **背景**：
|
||
- 深色科技风（深蓝、深灰、深色渐变）
|
||
- 可包含科技网格线、动态粒子或线条动画
|
||
|
||
### 4. 交互与响应式约定
|
||
|
||
- 登录表单输入顺畅，错误提示清晰，按钮反馈明显
|
||
- 页面适配不同屏幕尺寸：
|
||
- 大屏：左右布局同时显示
|
||
- 中屏：保持布局但缩小内容
|
||
- 移动端：左侧品牌区可隐藏，仅显示登录区域
|
||
- 导航栏与菜单：
|
||
- 左侧导航栏可固定或折叠
|
||
- 支持二级/三级菜单，子菜单层级清晰
|
||
- 动画过渡流畅，鼠标或触摸操作反馈明确
|
||
- 整体视觉与交互保持一致性，主题色统一
|
||
|
||
------
|
||
|
||
## 二、登录页面优化
|
||
|
||
### 1. 整体设计目标
|
||
|
||
- 现代化企业级设计风格
|
||
- 明显的科技感视觉效果
|
||
- 清晰的品牌展示
|
||
- 登录区域突出且易于操作
|
||
- 与系统主题颜色保持统一
|
||
- **不修改任何登录逻辑**
|
||
|
||
### 2. 页面整体布局结构
|
||
|
||
- 登录页采用 **左右双区域布局**：
|
||
|
||
```
|
||
页面
|
||
├── 背景层（科技网格/动态效果）
|
||
└── 内容容器
|
||
├── 左侧品牌展示区（约 55%）
|
||
└── 右侧登录表单区（约 45%）
|
||
```
|
||
|
||
- 品牌介绍与登录卡片在同一容器，页面整体居中显示
|
||
|
||
### 3. 背景设计（科技风格）
|
||
|
||
- 取消传统背景图片
|
||
- 可采用科技网格线、动态粒子、科技线条动画或渐变色背景
|
||
- 颜色偏深：深蓝、深灰、深色渐变
|
||
- 避免背景过亮，保证登录卡片突出
|
||
|
||
### 4. 左侧区域（品牌与产品介绍）
|
||
|
||
#### 品牌 Logo 与系统名称
|
||
|
||
- **XSynergy 管理平台**
|
||
- 企业级 AR 远程协作管理系统
|
||
- 系统名称字体较大，可搭配科技感字体和 Logo
|
||
|
||
#### 产品简介
|
||
|
||
- XSynergy 是企业 AR 远程协作平台
|
||
- 实现远程指导与问题解决
|
||
- 降低差旅成本、提升效率、促进知识沉淀
|
||
|
||
#### 核心能力展示（图标 + 简短说明）
|
||
|
||
- AR远程协作：现场人员与远程专家实时连接
|
||
- 实时音视频通信：保证远程协作顺畅
|
||
- AI智能辅助：识别现场问题，提高效率
|
||
- 远程协作记录：会议记录便于复盘
|
||
|
||
#### Web管理平台功能
|
||
|
||
- 用户管理：企业用户及第三方系统对接
|
||
- 角色与权限管理：精细化权限控制
|
||
- 全局消息发送：系统公告与通知
|
||
- 远程协作记录管理：统一管理历史数据
|
||
|
||
#### 产品优势
|
||
|
||
- 降低差旅成本
|
||
- 提升问题解决效率
|
||
- 突破地域限制
|
||
- 促进知识沉淀
|
||
|
||
### 5. 右侧区域（登录表单区）
|
||
|
||
- 卡片式设计
|
||
- 登录卡片包含：
|
||
1. 登录标题（系统登录）
|
||
2. 用户名输入框
|
||
3. 密码输入框
|
||
4. 可选功能
|
||
5. 登录按钮（登录系统）
|
||
6. 系统信息提示
|
||
- 输入框统一高度，圆角设计，Focus 状态明显
|
||
- 登录按钮宽度占满卡片，视觉突出，Hover 与点击状态明显
|
||
|
||
------
|
||
|
||
## 三、导航栏和头部页面优化
|
||
|
||
### 1. 头部导航栏
|
||
|
||
- 主题色：`#409EFF`
|
||
- 增加现代化、扁平化设计风格
|
||
- 元素间距适中，图标文字清晰
|
||
- 鼠标悬停轻微动画或渐变效果
|
||
- 保留系统常用操作按钮
|
||
- 响应式设计，移动端可清晰显示
|
||
- 点击或悬停有明显视觉反馈
|
||
- 下拉菜单圆角、阴影、渐变效果
|
||
|
||
### 2. 左侧导航栏
|
||
|
||
- 支持固定或折叠
|
||
- 分组清晰（模块分组、功能分类）
|
||
- 主题色 `#409EFF` 应用于选中菜单、高亮条
|
||
- 未选中菜单为淡灰色或半透明
|
||
- 图标统一风格（线性或扁平）
|
||
- 鼠标悬停颜色渐变或轻微背景动画
|
||
- 选中状态突出显示
|
||
- 可折叠菜单支持滑动动画
|
||
- 二级/三级菜单层级清晰
|
||
|
||
### 3. 响应式与整体体验
|
||
|
||
- 大屏幕：完整导航显示
|
||
- 小屏/移动端：自动折叠左侧导航栏，提供图标模式
|
||
- 动画过渡适中，操作反馈明确
|
||
- 头部与左侧导航颜色风格统一
|
||
- 系统主题色 `#409EFF` 保持统一
|
||
|
||
------
|
||
|
||
## 四、UI设计规范
|
||
|
||
- **主主题色**：`#409EFF`
|
||
- **卡片设计**：圆角、轻微阴影、浅色或半透明背景
|
||
- **字体层级**：
|
||
- 系统名称：最大
|
||
- 模块标题：中等
|
||
- 描述文本：常规
|
||
- 辅助说明：较小
|
||
- **页面交互体验**：
|
||
- 登录表单顺畅，输入错误提示清晰
|
||
- 登录按钮反馈明显
|
||
- 页面加载快速
|
||
- 不影响原有登录逻辑
|
||
- **响应式适配**：
|
||
- 大屏设备：左右布局显示
|
||
- 中等屏幕：缩小内容
|
||
- 移动端：左侧品牌区可隐藏，仅显示登录区域
|