AI-DOTA / UI & INTERACTION DESIGN
AI-DOTA 智能诊断平台
让复杂诊断逻辑，看得清、配得准、可追溯。
企业平台 · UI 与交互重构 · 场景编排 · 任务诊断
WORKSPACEUI / UX
REDESIGN
让逻辑清晰，
让诊断有据。
SCENARIO EDITOR ↗
项目背景与重构范围
AI-DOTA 面向车辆诊断场景，将信号、日志、DTC、DID 等信息组织为诊断逻辑，并通过任务执行查看诊断结论、趋势与过程记录。本次重构覆盖平台界面、场景编排、任务诊断及配置管理模块。
场景构建
组织场景组与场景，通过节点、连线和配置面板表达诊断逻辑。
任务诊断
关联车辆与场景，配置输入数据，在结果页核对结论及信号趋势。
平台管理
以统一的检索、筛选、上传和权限配置模式承载后台管理工作。
从界面变化，定义重构重点
保留专业诊断能力，将重构重点放在信息组织与操作方式上：画布承担逻辑关系，侧栏承担节点配置，列表承担管理，详情页承担结果解释。
保留上下文
由大弹窗配置改为画布侧栏，让节点与参数处于同一工作视野。
重新分组操作
将节点添加、画布工具和场景提交分开组织，明确操作对象与层级。
建立稳定秩序
统一按钮、表格、状态标签及配置容器，使不同模块保持相同阅读方式。
工作框架：管理、编排与诊断
平台导航与专业工作区分别承担定位和操作。全局导航保持模块入口，顶部保留当前页面与关键操作，主体根据列表、画布、表单和结果分析四类任务切换。
工作框架：管理、编排与诊断UI / INTERACTION DESIGN
列表工作区
筛选条件 → 创建与批量操作 → 数据表格 → 分页。
画布工作区
场景名称与验证 → 节点关系 → 节点侧栏 → 画布工具。
诊断工作区
任务信息 → 结论优先级 → 信号趋势 → 日志与溯源。
场景编排：让关系成为主角
通过可视化节点与连线组织诊断路径。节点以图标、名称和连接端口形成统一结构；判断分支保留 Y/N 与颜色双重线索，减少仅凭颜色理解逻辑的依赖。
场景编排：让关系成为主角UI / INTERACTION DESIGN
节点识别
日志、信号、小结、车控、DTC、DID 采用类型图标与颜色区分。
逻辑分支
普通连线表达任务关联，判断节点以绿色 Y 与红色 N 表达两条路径。
分层操作
节点操作位于卡片内，画布工具位于底部，逻辑验证与完成位于顶部。
配置重构：在画布内完成参数编辑
将原先居中弹窗中的配置迁移至右侧面板，以“信号配置—计算配置—结果类型—锚点配置”组织表单。配置内容按选择逐步展开，保留专业参数，同时控制单次关注范围。
配置重构：在画布内完成参数编辑UI / INTERACTION DESIGN
按配置类型展开
同／同时刻配置关注取值来源与时间，跳变配置进一步呈现信号阈值、初始值与目标值等参数。
按结果类型切换
条件计算以表达式、判断和值组织；数值计算切换为输入、滑动平均或窗函数等设置。
复杂内容独立承载
锚点配置通过开关展开区分触发条件及小结，使复杂设定保持清晰层级。
创建任务：从身份到输入数据
任务表单按基础信息、场景配置和任务配置分组。VIN 与任务名称定义对象，场景组与场景定义诊断范围，信号、日志及故障时间等输入集中在任务配置区。
创建任务：从身份到输入数据UI / INTERACTION DESIGN
基础信息
以 VIN 和任务名称建立任务标识，必填标记紧邻字段名称。
场景与数据
关联场景组及具体场景，按数据类型呈现上传、导入和诊断配置。
就地帮助
格式限制与诊断含义通过字段旁提示补充，上传后显示文件名称及移除入口。
诊断结果：结论与证据并置
结果页以左侧诊断结论、右侧趋势与日志构成分析工作区。结论进一步拆分为诊断属性、根本原因和处理方案，让结果阅读从“是什么”延伸到“为什么”与“如何处理”。
诊断结果：结论与证据并置UI / INTERACTION DESIGN
优先级与结论
以标签组织结论优先级，区分诊断属性、原因和方案。
趋势与时间范围
多信号图例、查询入口和时间范围滑块共同构成信号核对区域。
记录与动作
诊断日志位于趋势下方，评价、下载、编辑与溯源集中于页头。
诊断溯源与人工评价
在结果页内通过侧边抽屉查看完整诊断过程，以时间线、事件名称及数值说明组织记录；通过简洁评价弹窗提交任务状态和备注，保留主页面的诊断语境。
诊断溯源与人工评价UI / INTERACTION DESIGN
完整过程记录
通过时间线组织诊断事件与数值，提供分页和导出入口。
状态判断与备注
评价弹窗聚焦异常／正常与备注两项内容，以保存动作记录反馈。
管理页面：统一高频操作模式
将查询、批量操作、行内操作、分页和上传反馈形成可重复使用的模式。场景、信号与账号权限采用一致的基础结构，同时保留各自业务对象的差异。
管理页面：统一高频操作模式UI / INTERACTION DESIGN
分类管理
标签与规则树并置，合并查询与行内操作的使用路径。
独立配置
每个账号对应一张卡片，权限类型、描述与车辆范围集中呈现。
上传反馈
空状态显示格式与大小限制，文件加入后显示名称、进度及移除入口，主操作随状态变化。
视觉语言与组件体系
以深色导航建立稳定框架，浅灰底色承载工作区，白色卡片区分内容层级。紫色用于主操作与焦点，节点色、状态色分别服务于类型识别和业务状态。
文字层级
页面标题强调当前对象，分组标题组织内容，辅助文本与占位内容降低视觉权重。
容器与间距
面板、分组卡片与字段容器分层使用，一致的圆角、分隔和留白强化内容归属。
操作与状态
主按钮采用紫色填充，次操作使用描边或文字；开关、标签与选中态保持清晰反馈。
重构归纳与后续验证
本次重构在保留诊断能力的基础上，形成了更一致的管理界面、可视化编排工作区与诊断结果阅读结构。重构围绕配置承载方式、工具分区、内容层级与组件一致性展开，将复杂能力组织为清晰的工作界面。
界面与交互变化
大弹窗改为侧栏配置，画布工具集中；管理页与任务页采用统一的卡片、表格和操作样式。
设计意图
在编辑参数时保留逻辑上下文，以分组与按需展开管理复杂性，并让诊断结论与过程记录相邻。
验证方向
围绕配置完成率、误操作率、表达式可读性、诊断信息定位与权限批量编辑开展任务测试。