5.6 KiB
5.6 KiB
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. 右侧区域（登录表单区）
- 卡片式设计
- 登录卡片包含：
- 登录标题（系统登录）
- 用户名输入框
- 密码输入框
- 可选功能
- 登录按钮（登录系统）
- 系统信息提示
- 输入框统一高度，圆角设计，Focus 状态明显
- 登录按钮宽度占满卡片，视觉突出，Hover 与点击状态明显
三、导航栏和头部页面优化
1. 头部导航栏
- 主题色：
#409EFF - 增加现代化、扁平化设计风格
- 元素间距适中，图标文字清晰
- 鼠标悬停轻微动画或渐变效果
- 保留系统常用操作按钮
- 响应式设计，移动端可清晰显示
- 点击或悬停有明显视觉反馈
- 下拉菜单圆角、阴影、渐变效果
2. 左侧导航栏
- 支持固定或折叠
- 分组清晰（模块分组、功能分类）
- 主题色
#409EFF应用于选中菜单、高亮条 - 未选中菜单为淡灰色或半透明
- 图标统一风格（线性或扁平）
- 鼠标悬停颜色渐变或轻微背景动画
- 选中状态突出显示
- 可折叠菜单支持滑动动画
- 二级/三级菜单层级清晰
3. 响应式与整体体验
- 大屏幕：完整导航显示
- 小屏/移动端：自动折叠左侧导航栏，提供图标模式
- 动画过渡适中，操作反馈明确
- 头部与左侧导航颜色风格统一
- 系统主题色
#409EFF保持统一
四、UI设计规范
- 主主题色：
#409EFF - 卡片设计：圆角、轻微阴影、浅色或半透明背景
- 字体层级：
- 系统名称：最大
- 模块标题：中等
- 描述文本：常规
- 辅助说明：较小
- 页面交互体验：
- 登录表单顺畅，输入错误提示清晰
- 登录按钮反馈明显
- 页面加载快速
- 不影响原有登录逻辑
- 响应式适配：
- 大屏设备：左右布局显示
- 中等屏幕：缩小内容
- 移动端：左侧品牌区可隐藏，仅显示登录区域