工业级地面控制站 (GCS) 交互规范 · 实测量取验证
RobotUI 人机工程设计规范
00 核心设计心智
深黑基底防眩光、天蓝专司选中与高亮、红色绝对专属于紧急告警与物理急停；工业平板画布严格锁定 1024 × 600 固定比例并支持双向等比自适应；信息信噪比严格收敛——正常态紧凑折叠不占屏、异常态高亮变色自动置顶；安全动作单击即生效并依靠限时撤销兜底，严禁降低应急效率的长按等待。
01 画布尺寸与自适应缩放
1024 px（物理基准宽）
600 px（高）
顶栏区域（50px · 设备名 / 模式胶囊 / 遥测读数 / 急停）
主视区（相机实拍图传 / 地图导航 / 3D 姿态孪生）
底栏动作抽屉（56px · 站立 / 开始运动 / 阻尼）
| 技术项 | 规格值 | 业务原由与工程约束 |
|---|---|---|
| 基准舞台 | 1024 × 600 | 严禁流式混排！工业控制台高信息密度是经手调定稿的，流式会导致按键比例失真 |
| 缩放机制 | transform: scale(...) | 通过 JavaScript 监听窗口尺寸，计算 min(w/1024, h/600) 双向等比缩放居中 |
| 缩放下限 | 0.40 | 极小窗口或画中画时阻断过度缩小，确保字体在物理极限下仍能辨识 |
| 缩放上限 | 不设上限（Infinity） | 接入大屏监视器或全屏演示时完整铺满，严防四周出现局促的黑色死空 |
| 外壳预留 | 宽 −44px、高 −160px | 给顶部控制台外壳、系统状态栏留出视觉呼吸安全区 |
02 色彩语义与设计令牌（Design Tokens）
色彩语义铁律：红色（
#ef4444）具有绝对排他性，严禁用于普通装饰、普通图标或普通提示！仅专属于「急停按钮」与「系统紧急故障告警」。当前选中态一律统一使用天蓝色 #38bdf8。主行动 / 选中
--blue-primary
正常 / 在线
--green
次级警示
--amber
急停 / 致命告警
--red
底盘舞台暗黑
--stage
悬浮毛玻璃卡片
--card
常规微弱描边
--line-dim
天蓝聚焦柔光
--glow-primary
03 字体阶梯与等宽防抖排版
| 用途类别 | 字体栈（Font Family） | 对齐与抗抖要求 |
|---|---|---|
| UI 中文界面 | "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif | 界面主次文本，统一设定 -webkit-font-smoothing: antialiased |
| 仪表遥测数字 | "Microsoft YaHei", "Segoe UI", sans-serif（--ff-hud） | 等宽特性（tabular-nums）+ 严格右对齐！通过 OpenType tnum 特性确保高频刷新时绝对零颤动 |
字号阶梯规范（严格收敛为 7 档）
21px 主标
--fs-h1: 21px
用于：启动页一级核心标题（"选择控制方式"）
15px 卡片标
--fs-h2: 15px
用于：模式选择卡标题、动作主标题
14px 正文
--fs-body: 14px
用于：下拉选择大项、设备名称标识
12.5px 交互项
--fs-ui: 12.5px
用于：急停文字、浮层 Toast 提示条
12px 页签
--fs-tab: 12px
用于：顶栏外壳页签、次级菜单
11px 胶囊
--fs-pill: 11px
用于：顶栏 3 个核心控制胶囊文本
10px 徽标
--fs-tag: 10px
用于：默认模式标记 em、单位辅助角标
04 形状、圆角与层次阶梯
4px
--r-badge (徽标)
6px
--r-item (下拉项)
8px
--r-btn (按钮/急停)
10px
--r-cam (下拉面板)
12px
--r-card (模态卡片)
14px
--r-stage (舞台大框)
20px
--r-pill (胶囊全圆)
05 动效节奏与硬件帧率门控
| 动效令牌 | 数值规格 | 标准用途 |
|---|---|---|
| --e-out | cubic-bezier(.16, 1, .3, 1) | 界面入场、弹窗展开、滑块到位缓动 |
| --e-spring | cubic-bezier(.34, 1.36, .5, 1) | 卡片升起、悬浮反馈弹性微动 |
| --t-1 (.13s) | 130 ms | 微交互：悬停轻微高亮、手指按下即时反馈 |
| --t-3 (.34s) | 340 ms | 组件展开、抽屉上浮入场 |
| 帧率门控 | 严格 60 FPS 锁帧 | 阻断 iPad Pro / 120Hz ProMotion 峰值能耗；切后台时严格调用 stop() 停帧 |
06 核心组件交互与手套级触控热区
顶栏状态胶囊（触控热区 44px 扩展）：
🎮 遥控器模式
🌐 运动模式
⚡ 限速 1.5 m/s
🛑 急停
热区扩展技术实现：视觉保持 32px 紧凑高度，通过
.top .pill::after 伪元素向外上下扩展 6px、左右扩展 3px，物理触控热区无损扩展至 44px，完美符合工业人机触控安全标准。07 急停机制与方案 B 二段式确认闭环
① 触发急停：单击即生效
无论顶栏还是底栏，急停单击瞬间物理切断电机动力，绝不设置任何长按等待；顶栏所有模式切换键瞬间置灰灰度锁定（
pointer-events:none）。➔
② 解除触发：0.9s 静默自检
点击「解除急停」切断物理闭锁，系统进入 0.9s 静默硬件回路自检（
checking），杜绝弹窗打断视线；若自检期再次受击则重新闭锁。➔
③ 动力使能：人工二次确认
自检通过后系统进入待命（
checked），底栏「开始运动」高亮脉冲呼吸闪烁，必须由操作员二次主动点击方可恢复动力。08 3D 机械犬数字孪生与触地反解规范
| 验收标准 | 量化指标要求 | 实测实装数据（CDP 矩阵） | 状态判定 |
|---|---|---|---|
| 1. 四脚共面 | 四只脚底 Y 极差 $\le 0.01$ | 实测极差：启动页 0.0017 / 站姿 0.0017 / 趴姿 0.0020 | ✅ 满分通过 |
| 2. 真实贴地 | $\mid\text{足底 Y} - \text{地平面 Y}\mid \le 0.01$ | 实测误差：地平面 $Y=0.003$ 时足底 $Y=0.0031$（误差 0.0001） | ✅ 满分通过 |
| 3. 趴姿腹部净空 | 机身降低后腹底间隙在 $0 \sim 0.03$ 之间 | 实测净空：0.0250（2.5 厘米），绝不陷入地面 | ✅ 满分通过 |
| 4. 蹲坐动力学 | 后腿收屈蹲坐，机身呈仰角抬升 | 实测仰角：+12.6°，机身高度 $Y=-0.58$，前后足端阴影动态收缩 | ✅ 满分通过 |
| 5. 接触阴影盘 | 消除悬浮与失重感 | 配置 4 组四足柔和阴影盘（Contact Blob Shadow），随姿态平滑跟随 | ✅ 满分通过 |
四足机器人动作全集字典与两端对齐标准（Tab 1–3 与 Tab 4）：
四足机器人地面控制站统一收敛为 4 项基础姿态 + 2 项动力安全 + 6 项特种机动作业。两端采用相同语义字典，避免控制歧义：
核心姿态组 (4 项)
站立 (stand) · 坐下 (sit) · 趴下 (lie) · 匍匐 (crawl)
动力安全组 (2 项)
开始运动 (enable) · 阻尼防跌 (damp)
特种作业与应急 (6 项)
翻身脱困 (flip) · 差速转身 (rot) · 挡鼠板 (guard) · 高台阶梯 (stair) · 平地跳跃 (jump) · 后空翻 (backflip)
操控手感三大工业规范：① 8% 触控死区（0.08 防微颤拦截）；② 0.24s 机械弹簧阻尼回弹（
cubic-bezier(.34, 1.56, .64, 1) 真实手感）；③ 160ms 平滑数值衰减（松手时速度与转向平滑归零，防画面生硬突变）。09 规范执行情况与资产清单
核心设计令牌执行合规率
100%（核心架构全覆盖）
| 核心资产文件 | 文件职责与角色 | 约束状态 |
|---|---|---|
界面原型.html | 唯一正版原型（包含全部 4 个页签），功能总成真值源 | 活跃主迭代（严禁改错） |
界面原型-试稿.html | 干净 3 页签外部送审副本（零子文件依赖，离线双击即跑） | 专供试稿与外部快速评阅 |
设计规范.html | 本规范本体，可视化工业级设计交互规范全集 | 唯一交互与视觉标准 |
新版遥控台.html | 第 4 个页签独立沙箱控制台本体 | 与界面原型同级协同 |
归档/ | 历史设计资产（旧版原型、历史报告、原始素材） | 绝对只读 · 严禁修改 |