# 景区排队叫号系统 UI/UX 设计范式

> 文档版本：v1.0  
> 日期：2026-07-10  
> 状态：已确认开发基线；景区 VI、设备尺寸和现场阅读距离作为后续校准输入，不阻塞开发  
> 关联规划：[景区项目排队叫号系统：案例调研与完整规划](./scenic-queue-system-plan.md)

术语：ETA 是技术文档中的“预计时间”缩写。所有游客、员工和管理界面必须写“预计等待时间”或“预计叫号时间”，不直接显示“ETA”。

### 阅读与执行标记

- **MUST**：开发与验收底线，除非正式变更本规范；
- **SHOULD**：推荐默认值，项目有证据时可调整并记录理由；
- **MAY**：可选增强；
- **[MVP] / [P1]**：交付阶段；未标阶段的规则默认属于 MVP 基线；
- **[现场输入]**：需要在现场 UAT 前补齐的 VI、设备或环境参数，不表示产品与技术基线仍未确认。

快速导航：1–4 为方向与依据，5–12 为基础系统与批量叫号，13–16 为四端规范，17–22 为跨端规则，23–27 为治理、验收与来源。

## 1. 设计决策摘要

本项目采用：

> **公共服务导视型 Calm Utility（Public-service Wayfinding UI）**

它把公共服务系统的事务清晰度、机场/公共交通的导视能力、现场运营工具的稳定性，以及克制的景区品牌识别合在一起。它不是旅游营销落地页，也不是霓虹、玻璃拟态、数据驾驶舱式的“科技大屏”。

已冻结的产品与实现约束：

- 一人一号，不建立同行组或 `party_size`；手机号必填，姓氏/称谓选填，称谓默认“游客”，不采集法定性别。
- 同一手机号可有多个活动号码；取号时先显示脱敏重复提示，员工确认后可继续并记录审计。
- 每项目配置固定 `N`，员工只执行“叫下一批”；系统严格 FIFO 呼叫队首连续 `N` 个有效等待号码，不足时呼叫全部剩余号码。
- 过号后原号失效；仍需排队时创建新号进入队尾，并保留新旧号码关联。
- 预计等待时间首期同时提供固定批次和连续放行模板，每个项目二选一。
- 中心服务是唯一写入权威，断网时停止数字化取号/叫号并切换人工预案。
- 员工和管理员首期使用内置账号密码；前端 React，后端 Go + GORM，数据库 PostgreSQL。
- 首期硬件只提供统一接口、成功/失败模拟器和测试日志，不接真实设备。
- 留存基线为：个人关联 30 天、原始排队业务事件 90 天、登录/权限/网络安全日志至少 6 个月、后台操作审计 1 年、个人信息保护影响评估相关记录 3 年。

设计北极星是五个词：

- **可信**：真实显示业务状态、更新时间、预计时间的不确定性和硬件回执，不制造“好像成功”的假象。
- **清晰**：一个视图只有一个主任务；关键号码、人数、预计时间和下一步动作能被快速扫读。
- **耐候**：适应强光、远距、弱网、噪声、单手、湿手、低端设备和长时间值守。
- **低焦虑**：游客知道“现在怎样、还要多久、接下来做什么”；员工知道“将叫谁、是否生效、设备是否收到”。
- **简单**：高频操作直接可见，异常操作收进二级入口；不把后台的数据结构和技术状态暴露给一线员工。

整体设计参数：

| 参数 | 全局基线 | 解释 |
|---|---:|---|
| Design Variance | 3 / 10 | 低变异、稳定、不过度模板化；品牌感集中在有限区域 |
| Motion Intensity | 2 / 10 | 动效只解释状态和帮助视线定位 |
| Visual Density | 5 / 10 | 四端共享中等基线，再按任务分别覆盖 |

四端覆盖值：

| 终端 | Variance | Motion | Density | 首要目标 |
|---|---:|---:|---:|---|
| 游客 H5 | 3 | 2 | 3 | 一眼理解个人状态与下一步 |
| 员工 H5 | 2 | 2 | 7 | 高压现场下快速、准确、可恢复 |
| 公示大屏 Web | 2 | 默认 1 | 3 | 远距、强光、多人同时扫读 |
| 管理 Web | 2 | 1 | 6 | 运营看板、项目设置、日志和账号的清晰管理 |

## 2. 适用范围与非目标

### 2.1 适用范围

本文约束以下界面：

- 员工 H5：员工账号登录后只保留“叫号、取号”。叫号页展示当前批次、队首预览和固定主操作；每次叫下一批自动结束上一批；取号页核对等待队列；
- 游客 H5：[MVP] 个人排队状态、预计等待区间、提醒、过号和服务异常；[P1] 游客自助取号；
- 大屏 Web：实体公示屏展示当前叫号、最近批次、队列概况、服务公告、数据新鲜度和播报状态；
- 管理 Web：管理员账号登录后的运营概览、项目与预计时间设置及大屏中心。大屏中心呈现全项目公开运行状态并支持全屏监控；设备、账号权限、日志和审计按后续范围扩展。

### 2.2 非目标

- 不用同一组件密度强行统一四端；
- 不以首页宣传、景区视频或大幅风景图作为核心体验；
- 不使用玻璃拟态、渐变字、霓虹发光、3D 翻转、滚动劫持或游戏化排队；
- 不把暗色模式等同于大屏设计；
- 不把动画完成、浏览器计时器或声音播放完成当成业务成功；
- 不单独设计或部署运营数据看板应用；运营概览和大屏中心均是管理端入口，实体公示大屏仍是独立只读页面；
- 不提供匿名员工端、匿名管理端或匿名运营看板；
- 大屏只公开每日可读票号，不公开手机号、姓氏、称谓或其他身份信息；系统不采集法定性别。票号不作为私密查询凭证，首期不提供公开身份字段配置。

## 3. 研究依据与采用方式

本范式不是复制某个产品的视觉皮肤，而是吸收成熟系统中已验证的原则：

| 来源 | 采用内容 | 不照搬内容 |
|---|---|---|
| GOV.UK / NHS | 从用户需要出发、把复杂留给系统、明确错误恢复、可访问组件、低认知负担 | 英国政府/医疗品牌色和品牌外观 |
| USWDS | 语义设计 token、移动优先网格、状态不只依赖颜色 | 美国政府品牌风格 |
| TfL / FAA / 英国交通部 | 无衬线、高对比、远距文字、环境光和实时信息规则 | 交通线路专用识别系统 |
| WCAG 2.2 / GB/T 37668-2019 | 对比度、焦点、缩放、目标尺寸、状态消息、动效控制 | 只为“过检测”而牺牲真实场景可用性 |
| Waitwhile / Qmatic 等排队产品 | 个人状态页与公示屏分离、批量操作预览、设备/叫号状态拆分 | 厂商未公开或无法核验的员工 UI 细节 |
| Material / Fluent / Apple / Motion / GSAP | 快速、可预测、可关闭的状态动效；明确工具边界 | 营销型大动效、逐项炫技和滚动叙事 |

### 3.1 已核验的成熟 UI 模式

| 模式 | 公开证据 | 本项目采用方式 |
|---|---|---|
| Visitor Status Ticket | Qmatic Mobile Ticket 和 Waitwhile 状态页都把当前状态、票号、预计等待时间、队列进度和下一步作为个人页主层级 | 游客端采用单一主状态卡；叫到后由“等待信息”切换为“入口行动” |
| Operational Call Card | Qmatic Serve 以当前服务对象/下一位和主叫号操作为中心；Waitwhile 采用状态列 + 详情抽屉 + 固定操作 | 员工 H5 把叫号、取号和核验拆为三个场景；叫号页使用当前批次、下批候选和固定底部主操作，不做缩小版后台表格 |
| Batch Action Bar | Waitwhile 公开支持多选后批量 Serve、Alert、No Show 等 | 借鉴批量汇总，但本项目由服务端按固定 `N` 选择队首连续号码，并增加原子批次和模拟硬件结果语义 |
| Call Takeover | Qmatic/Waitwhile 公示屏均让最新叫号成为主区域，并保留最近历史 | 大屏最新批次持续占主视觉，最近 3–5 批作为防漏读历史，不用瞬时 toast |
| Live Ops Strip | Waitwhile Analytics 与 Qmatic Operations/BI 区分实时运营和历史分析 | 管理端实时页只放可驱动当下动作的队列/设备异常，历史趋势另页分析 |
| Offline Trust Banner | Wavetec 的低连接指导强调显式离线、待同步/失败和设备健康 | 中心服务是唯一写入权威；所有端显示数据新鲜度，离线时停写且禁止伪实时 |
| Hardware Receipt Tray | Qmatic/Wavetec 可核验多硬件闭环，但未公开完整局部失败 UI | 本项目自定义“业务结果 + 各通道 ACK + 单通道重试”模式 |

公开资料边界同样重要：Waitwhile 可核验批量操作，但不能证明固定 `N` 队首选号、事务原子性、并发冲突或硬件 ACK；Qmatic 可核验单票叫号、转移、过号和多硬件，但未公开多人原子批量叫号；Wavetec 可核验硬件/低连接能力，未公开本项目所需的完整部分失败界面。因此这些能力必须按本文自有模式设计和 POC，不能用厂商营销图替代验收。

设计类本机 skill 的采用边界：

- `design-taste-frontend` 只用于“反模板化、品牌克制、视觉一致性”检查。该规范本身声明不适合后台、数据表和多步骤产品 UI，因此管理端与员工流程以成熟公共服务/企业组件模式为主。
- `ui-ux-pro-max` 用于检索风格、色彩、排版、可访问性和数据图表候选；数据库中误匹配的 App Store 落地页、奢华衬线字体、Video-first Hero 已排除。
- `GSAP` 只作为复杂时间线工具的参考，不作为全局动画库。MVP 默认不引入；只有大屏多区域换批确实需要可中断同步时间线且原生/CSS 无法清晰完成时才启用。

## 4. 设计系统分层

```mermaid
flowchart TB
    A["基础层<br/>颜色、字体、间距、圆角、焦点、动效"] --> B["语义层<br/>操作、状态、信息新鲜度、业务/设备回执"]
    B --> C["共享组件层<br/>表单、按钮、状态条、批次卡、设备回执、日志"]
    C --> D1["游客 H5<br/>低密度、单任务"]
    C --> D2["员工 H5<br/>高密度、强反馈"]
    C --> D3["公示大屏<br/>远距、高对比"]
    C --> D4["管理 Web<br/>表格、版本、审计"]
    E["景区品牌层<br/>Logo、品牌主色、入口/空状态图像"] --> D1
    E --> D3
```

规则：

1. **共享语义，不共享密度。** “成功、部分失败、离线、数据延迟”等语义跨端一致，但尺寸和信息量按任务调整。
2. **品牌与语义分离。** 更换景区品牌色不能改变错误、警告、离线等状态含义。
3. **公开投影与个人视图分离。** 大屏组件不能直接复用游客个人状态卡，避免泄露身份和出现不合适的字号。
4. **业务成功与设备送达分离。** `CallBatch` 已生效、设备已接收命令和设备执行成功是不同状态，且大屏、广播等通道分别回执。

## 5. 色彩系统

### 5.1 原则

- “中性底色 + 单一品牌主色 + 暖色提醒 + 语义状态色”；
- 颜色永远不是唯一状态线索，必须同时有图标、文字、形状或位置；
- 不直接复制 GOV.UK、NHS、USWDS 的品牌色；
- 游客与员工 H5 浅色优先，适应户外；大屏使用安装现场校准的专用配置，不跟随操作系统主题；
- 核心文字达到 WCAG 2.2 AA；大屏当前号码和关键指令以 7:1 为推荐目标。

### 5.2 临时品牌与基础 token

在景区 VI 提供前，使用“晴空蓝 + 暖阳橙”作为可替换临时层：

| Token | 色值 | 用途 | 已计算对比 |
|---|---|---|---:|
| `color.page` | `#F5F7FA` | 页面底色 | — |
| `color.surface` | `#FFFFFF` | 卡片、表单、表格 | — |
| `color.ink` | `#0B1220` | 主文字 | 对 page 17.45:1 |
| `color.text.secondary` | `#475467` | 次级说明 | 对 page 7.16:1 |
| `color.primary` | `#0B67D1` | 主操作、链接、当前选择 | 对 white 5.42:1 |
| `color.primary.soft` | `#E8F1FC` | 信息背景 | primary 对其 4.75:1 |
| `color.accent.warm` | `#C34A0A` | 少量提醒/品牌点缀 | 对 white 4.88:1 |
| `color.border.strong` | `#667085` | 必要控件边界 | 对 white 4.97:1 |
| `color.focus` | `#FFBF47` | 键盘焦点外环 | 与 ink 11.41:1 |

状态 token：

| 状态 | 前景 | 浅背景 | 文案示例 |
|---|---|---|---|
| 信息 | `#0B67D1` | `#E8F1FC` | “数据更新于 14:32” |
| 成功 | `#137A4B` | `#EAF7F0` | “业务叫号已生效” |
| 警告 | `#8A4B08` | `#FFF4E5` | “广播设备尚未确认” |
| 危险/错误 | `#B42318` | `#FDECEC` | “叫号未提交，请重试” |
| 中性/离线 | `#344054` | `#F2F4F7` | “当前显示上次成功数据” |

### 5.3 大屏专用色

先提供两种安装配置，最终以现场亮度和反光测试选择：

| 配置 | 背景 | 主文字 | 当前批次强调 | 使用条件 |
|---|---|---|---|---|
| Display-HC Dark | `#07101F` | `#FFFFFF` | `#FFB000` | 室内、遮光较好、电视/LED |
| Display-Daylight Light | `#F7F9FC` | `#0B1220` | `#0B67D1` | 高环境光或浅底更清晰的设备 |

Dark 配置中白字对背景为 19.04:1，暖黄对背景为 10.39:1。两种配置都禁止用低对比照片、视频、渐变和玻璃层作为信息底。

### 5.4 焦点状态

键盘焦点建议采用“双环”：

- 内边：2px `#0B1220`；
- 外边：3px `#FFBF47`；
- 不以移除 `outline` 后只留阴影；
- 焦点不能被 sticky header、dialog 或滚动容器遮挡。

## 6. 中文排版与数字

### 6.1 字体栈

```css
font-family:
  -apple-system,
  BlinkMacSystemFont,
  "PingFang SC",
  "Microsoft YaHei",
  "Noto Sans CJK SC",
  "Noto Sans SC",
  sans-serif;
```

若需要跨设备高度一致，生产环境优先自托管 Noto Sans SC/Source Han Sans 的必要字重；否则使用系统字体栈降低加载风险。

字体规则：

- 仅使用 Regular 400、Semibold 600、Bold 700 三档；
- 不使用细体、斜体、描边字、压缩字、手写体和奢华衬线展示字；
- 中文不做装饰性宽字距，正文左对齐，不两端对齐；
- 数字启用 `font-variant-numeric: tabular-nums`，避免票号、人数和预计等待时间更新时横向跳动；
- 票号可使用同一字体的等宽数字特性，不为“科技感”单独引入难读的代码字体；
- 汉字、拉丁字母、数字、冒号、斜杠和单位必须做混排、断行和缺字测试。

### 6.2 建议字号

| 场景 | 辅助 | 正文/控件 | 小标题 | 核心状态 |
|---|---:|---:|---:|---:|
| 游客 H5 | 14px | 16–18px | 22–24px | 32–40px |
| 员工 H5 | 15–16px | 17–18px | 22–24px | 28–36px |
| 管理 Web | 14px | 14–16px | 20–24px | 按内容，不追求大字 |
| 大屏 | 不用固定 CSS px 验收 | 以物理字符高度验收 | 同左 | 当前号码最大 |

行高：

- 中文正文 1.5–1.65；
- 标题 1.2–1.35；
- 大屏号码 1.0–1.12；
- 按钮与单行控件不压缩到影响汉字上下留白。

正文建议：

- 游客说明每行约 24–32 个汉字；
- 长文不超过约 60–70 个西文字符等效宽度；
- 多步骤说明拆成短句和编号，不用大段居中正文。

## 7. 网格、间距与形状

### 7.1 网格

- 主间距网格：8px；
- 4px 只用于图标、边框与组件内部微调；
- H5：员工端、游客端和内部登录卡以 390px 为固定设计宽度，窄于 390px 时缩至视口 100%；使用 4 列概念网格和 16px 左右边距；
- 管理端：12 列网格，常规事务内容宽约 1024–1200px；超宽区域只给日志/数据表；
- 大屏：按设备可视区建立安全区，初始预留四周 5%，再用 overscan/裁切实测校准。

间距 token：

| Token | 值 | 典型用途 |
|---|---:|---|
| `space.1` | 4px | 图标内部微调 |
| `space.2` | 8px | 紧邻元素 |
| `space.3` | 12px | 标签与字段 |
| `space.4` | 16px | H5 基本间距 |
| `space.6` | 24px | 区块内边距 |
| `space.8` | 32px | 大区块分隔 |
| `space.12` | 48px | 页面章节 |
| `space.16` | 64px | 大屏/宽屏主要分区 |

### 7.2 圆角、边框和阴影

- 表单、按钮：8–10px；
- 信息卡：12px；
- 大屏主要面板：12–16px，避免过圆；
- 状态标签可用胶囊形，普通按钮和卡片不全部做胶囊；
- 默认 1px 边框，关键选择/焦点 2px；
- 阴影只用于浮层、抽屉和需要层级分离的临时面板；
- 员工端、管理端主要靠分组、留白和分割线，不靠“每块都是浮起卡片”。

## 8. 图标、图片与品牌

### 8.1 图标

- 全项目只选一个成熟线性图标家族；
- 16/20/24/32 四档，笔画与字号匹配；
- 状态图标必须配文字，不能让员工猜图标；
- 不使用 emoji 作为产品图标；
- 禁止把相似图标分别用于“业务失败”和“设备未确认”。

建议语义：

| 语义 | 图形方向 | 必配文字 |
|---|---|---|
| 排队中 | 时钟 | 排队中 |
| 即将叫号 | 铃铛 | 请留意叫号 |
| 已叫到 | 扬声器/方向箭头 | 请前往入口 |
| 已到场/已核验 | 核验对勾 | 已到场 |
| 服务中/入场中 | 方向箭头 | 正在入场 |
| 已完成 | 完成对勾/旗标 | 本次排队已完成 |
| 已过号 | 提示圆 | 已过号，请联系工作人员 |
| 数据延迟 | 断链/时钟 | 数据更新于 HH:mm |
| 设备未确认 | 设备 + 提示 | 设备尚未确认 |

### 8.2 景区图片

可用位置：

- [P1] 游客自助取号入口的有限品牌区；
- 空状态或非关键帮助页；
- 管理端景区项目封面；
- 不遮挡文字的静态背景边缘。

禁用位置：

- 当前号码、个人状态、预计等待时间、批量叫号、设备回执和错误信息底部；
- 大屏关键信息区；
- 表格、图表和日志区；
- 自动播放视频、轮播和视差背景。

### 8.3 VI 替换策略

景区 VI 到位后，只替换：

- Logo、品牌主色 alias、少量暖色点缀；
- 游客入口/空状态图像；
- 允许的品牌文案和插画。

不能改变：

- 状态色含义、对比度、焦点、字号、触控目标；
- 批量叫号和硬件回执层级；
- 大屏信息安全区和公共隐私规则。

## 9. 交互基础规则

### 9.1 触控、鼠标与键盘

- H5 所有可点击区至少 48×48 CSS px；
- WCAG 2.2 AA 的 Target Size (Minimum) 底线是 24×24 CSS px（含例外）；本项目因户外、高压和湿手场景主动采用更严格的 48×48px 产品基线，不能把 48px 误写成 WCAG 原文要求；
- 员工主操作按钮高 56px；批量叫号底部主按钮可为 60–64px；
- 相邻危险操作至少间隔 8px；
- label 整体可点，不只让 radio/checkbox 的小图标可点；
- 按下后 100ms 内给出视觉反馈，但业务状态只在服务端确认后改变；
- 管理端完整支持键盘、可见焦点、合理 tab 顺序和 Escape 关闭非阻断浮层；
- 户外真机必须测试单手、湿手、戴薄手套和低端 Android。

### 9.2 主操作

- 每个视图只有一个视觉主操作；
- 主操作文字直接写结果，例如“叫下一批（5 个号码）”，不用“确定”“提交”；
- 普通、可逆、符合规则的高频操作不反复弹确认；
- MVP 不提供跳序、临时修改 `N`、手选和批次撤回；[P1] 若后续启用，使用阻断确认并要求原因；
- 删除、停服等危险操作与主操作在空间和颜色上分离。

### 9.3 反馈层级

1. **组件内即时反馈**：pressed、disabled、提交中；
2. **页面内持久状态**：业务已生效、设备确认、数据陈旧；
3. **错误摘要**：跨字段或阻断流程的问题；
4. **toast**：只用于非关键、可短暂消失的信息，不能独自承载叫号成功、设备失败或数据延迟。

### 9.4 加载与刷新

- 不用空白页和无限 spinner 代替信息；
- 刷新时保留上一版数据，并显示“正在更新”和上次更新时间；
- 不使用无限 shimmer；
- 超过短暂等待时显示静态文案、经过时长和可执行下一步；
- 实时列表更新保持空间稳定，不自动把员工当前正在操作的行移走。

## 10. 共享组件清单

首批设计系统至少包含：

| 类别 | 组件 |
|---|---|
| 导航 | App Header、员工任务切换、管理侧边栏、面包屑 |
| 输入 | Text Field、Phone Field、Select、Radio Group、Checkbox、Date/Time、Search、Filter |
| 操作 | Primary/Secondary/Danger Button、Icon Button、Split Action（仅必要时） |
| 反馈 | Inline Message、Error Summary、Status Banner、Toast、Progress Text、Empty State |
| 队列 | Ticket Identity、Queue Summary、预计等待区间、Position Summary、Call Batch Card |
| 批量 | Batch Composer、Batch Size Meter、Ticket Selection Row、Batch Preview、Conflict Banner |
| 设备 | Device Channel Status、Delivery Receipt、Retry Action、Device Health Summary |
| 数据 | Data Table、Pagination、Column Visibility、Filter Bar、Audit Timeline、Version Diff |
| 浮层 | Dialog、Bottom Sheet、Drawer、Popover；按风险和屏幕选择 |
| 公示 | Current Batch Panel、Recent Batch List、Service Notice、Freshness Indicator |

组件必须设计以下状态：

- default、hover、focus、pressed、selected、disabled；
- loading、empty、partial、success、warning、error；
- offline、stale、reconnecting、permission denied；
- concurrency conflict、device pending、device partial failure；
- reduced motion 与 200% 文本缩放。

## 11. 业务状态语言

### 11.1 游客可见状态

| 状态 | 主文案 | 下一步 | 视觉 |
|---|---|---|---|
| 排队中 | “正在排队” | “可暂时离开，请留意更新” | 中性/信息 |
| 接近叫号 | “请留意叫号” | “建议返回入口附近” | 暖色提醒 |
| 已叫到 | “您的号码已叫到” | “请前往 2 号入口” | 高对比成功/行动 |
| 等待核销 | “请在入口出示号码” | 明确入口与宽限时间 | 信息 |
| 已到场/已核验 | “已到场” | “请按现场指引等待入场” | 信息/成功 |
| 服务中/入场中 | “正在入场” | “请按工作人员指引通行” | 信息 |
| 已完成 | “本次排队已完成” | 可关闭页面 | 成功 |
| 已过号 | “已过号” | “请联系工作人员处理” | 警告，不羞辱用户 |
| 已取消 | “排队已取消” | 可重新取号条件 | 中性 |
| 项目暂停 | “项目暂时停止叫号” | 原因、更新时间、恢复预期 | 持久警告 |
| 数据延迟 | “当前为上次成功数据” | “更新于 14:32，正在重连” | 离线/陈旧 |

### 11.2 员工业务与设备状态

MVP 先完成业务叫号状态。设备只接模拟适配器，显示“未配置 / 模拟成功 / 模拟失败”。以下完整设备投递层级仅在后续真实硬件专项启用：

```text
业务叫号
  ├─ 正在提交
  ├─ 已生效
  └─ 未生效 / 冲突

设备投递
  ├─ 待发送
  ├─ 已接收，执行结果未知
  ├─ 执行中
  ├─ 执行成功
  ├─ 可重试失败
  ├─ 最终失败
  └─ 命令已过期
```

没有硬件 ACK 时只能写“已发送”或“执行结果未知”，不能写“播报成功”。“已确认”也必须说明确认层级：设备已接收、正在执行或执行成功。设备失败不回滚已生效的 `CallBatch`，但必须给出重试、切换备用通道和人工告知的路径。

### 11.3 文案结构

错误/异常遵循：

> 发生了什么 → 当前数据/业务是否仍有效 → 用户下一步做什么

示例：

- MVP 示例：“叫号已生效，但广播模拟器返回失败。公示屏已更新；核心队列不受影响。”
- 差：“设备异常。”
- 好：“队列已被另一位员工更新。请检查最新 3 个候选号码后再叫号。”
- 差：“版本冲突，请刷新。”

### 11.4 排队单状态到界面映射

| 领域状态 | 游客 H5 | 员工 H5 主操作 | 大屏 | 辅助技术通知 |
|---|---|---|---|---|
| `WAITING` | 正在排队 | 选入下一批、取消 | 只显示队列概况 | 预计等待时间有意义变化时 polite |
| `CALLED` | 已叫到/等待核验 | 重叫、到场、过号 | 当前/最近叫号 | 游客本人一次性 assertive |
| `ARRIVED` | 已到场 | 开始服务/入场、异常取消 | 可从当前叫号移入已到场统计 | polite |
| `SERVING` | 正在入场/服务中 | 完成、授权异常处理 | 不再作为待到场号码 | 默认不播报 |
| `COMPLETED` | 本次排队已完成 | 只读；逆向需高权限 | 不公开个人结果 | polite 一次 |
| `MISSED` | 已过号，请联系员工重新取号 | 创建新排队单并关联原号 | 按配置保留过号提示 | 警告摘要 |
| `CANCELLED` | 排队已取消 | 只读；必要时新建排队单 | 不显示 | polite 一次 |

MVP 员工端 MUST 将 `ARRIVED` 与 `SERVING` 合成一个“已到场/入场”操作；数据层可保留两个领域时间点。`COMPLETED` 永远表示本次服务完成，不等同于刚到场。

### 11.5 叫号批次状态到界面映射

| `CallBatch` 状态 | 员工标签与允许操作 | 大屏保留规则 | 设备回执关系 |
|---|---|---|---|
| `ACTIVE` | “本批进行中 · X 个号码待到场”；可重叫、逐个到场/过号 | 按到场窗口和活动批次规则保留仍待到场号码 | 模拟适配器只返回成功/失败；真实硬件接入后再展示通道回执 |
| `PARTIALLY_RESOLVED` | “部分处理 · 已处理 A/B 个号码”；只处理剩余成员，不允许整批撤回 | 只保留仍处于 `CALLED` 的成员，已处理成员退出待到场主区 | 原叫号回执保留；对失败通道可显式重叫/重试，不重做业务批次 |
| `RESOLVED` | “本批已结束”；展示到场/过号/取消汇总，只读且不可删除 | 退出当前叫号区；按配置进入有限历史 | 回执作为历史证据保留，迟到 ACK 只更新设备记录 |
| `[P1] WITHDRAWN` | “本批已撤回”；展示原因、操作人和成员后续处理 | 立即退出当前叫号；发布纠正后的权威快照 | 硬件接入后定义取消/失效能力 |

UI MUST 直接读取服务端 `CallBatch.status`，不能通过成员列表临时汇总推断。MVP 只使用 `ACTIVE / PARTIALLY_RESOLVED / RESOLVED`；`WITHDRAWN` 放 P1。

### 11.6 运营状态与数据新鲜度矩阵

| 运营状态 | 游客 H5 | 员工允许操作 | 大屏 | 预计等待时间 |
|---|---|---|---|---|
| `CLOSED` 未开放 | 展示开放信息 | 不可取号/叫号/核验 | 未开放 | 不显示分钟 |
| `OPEN` 运行中 | 正常状态页 | 正常取号、叫号、核验 | 正常叫号 | 正常区间 |
| `PAUSED` 暂停 | 号码保留、展示原因 | 禁止新取号/叫号；可核验已叫号 | 暂停原因和现场指引 | 隐藏分钟，恢复后重算 |
| `FINISHED` 当日结束 | 今日服务已结束 | 只读/收尾 | 已结束 | 不显示 |

MVP 只设计以上四种状态。[P1] 确有现场需求时，再拆分“仅暂停取号”“仅暂停叫号”和“清队中”。

数据新鲜度由 `last_success_at`、`queue_revision` 连续性、实时连接状态和部署模式共同决定，阈值按站点配置：

| 新鲜度 | 必须呈现 | 写操作规则 |
|---|---|---|
| 实时 | 正常数据；必要时显示最近更新时间 | 正常 |
| 正在重连 | 保留上次数据、更新时间和重连状态 | 停止新取号/叫号；恢复并确认权威 revision 后再提交 |
| 数据陈旧 | 持久警告、弱化/隐藏预计时间、说明旧数据时间 | 停止新取号/叫号，切换现场备用流程 |
| 离线 | 最后成功快照、旧数据时间、纸质号码/人工广播指引 | 禁止任何数字化写入和伪成功 |

## 12. 批量叫号设计范式

### 12.1 核心原则

- `CallBatch` 是一个原子业务对象，不是前端循环调用单号按钮；
- 一人一号，每张有效等待票计为一人；同时显示项目固定 `N` 与本批实际号码数量；
- MVP 严格 FIFO、不跳号、不手选；队列不足 `N` 时叫出全部剩余号码；
- 批次内所有票号同时出现，禁止逐号揭示、stagger、翻牌或滚动数字；
- UI 不使用乐观成功；按钮立即响应，但只能在服务端事务成功后写“已生效”。

### 12.2 员工端批次编排

稳定结构：

1. 顶部：项目状态、资源/入口、数据更新时间；
2. 中部：下一批候选号码，显示票号、等待时长和特殊标记；
3. 批量条：项目固定 `N`、本批实际号码数和队列剩余数，但不只靠颜色；
4. 批次预览：系统自动选出的队首连续号码；员工不能在日常流程修改成员；
5. 底部固定操作区：唯一主按钮“叫下一批（5 个号码）”；
6. 提交后：业务结果和各设备回执在原位置持续展示。

### 12.3 确认策略

正常批次：

- 预览完整且规则允许时，点击主按钮直接提交；
- 防重复点击由交互层处理，并由服务端幂等和队列锁保证正确性；
- 不为每次高频正常叫号增加“是否确定”弹窗。

风险批次 [P1]：

- 临时修改 `N`、越过 FIFO、手工选人、撤回/重排时弹确认；
- 弹层必须说明影响对象、人数、原因字段和审计后果；
- 危险确认按钮使用具体动词，如“确认跳过并叫号”，不用“确定”。

### 12.4 业务结果与硬件扩展

MVP 结果卡只显示“第 18 批已生效：5 个号码”和模拟适配器的成功/失败。真实硬件以后续专项接入后，再分别展示：

| 层级 | 示例 |
|---|---|
| 业务 | “第 18 批已生效：5 个号码” |
| 公示 | “大屏执行成功 · 14:32:08”或“大屏已接收，执行结果未知” |
| 语音 | “广播可重试失败：功放离线” |
| 通知 [P1] | “短信 4 成功 / 1 待重试” |

设备回执变化只更新自己的状态徽标，不重播主叫号动画，也不把整批写成“失败”。

## 13. 游客 H5 规范

### 13.1 信息优先级

游客状态页按以下顺序组织：

1. **项目与当前状态**：明确项目名称，以及排队中、请留意、已叫到、已过号等；
2. **我的号码与下一步**：票号、入口/通道、行动指令；
3. **预计时间**：区间、可信度、更新时间；
4. **队列进展**：前方约多少个号码、当前叫号；
5. **帮助与规则**：迟到、取消、暂停、隐私和联系方式。

页面不先展示全局统计，不把“景区介绍”放在个人状态之前。

### 13.2 游客自助取号 [P1]

MVP 由员工代取号；游客端先交付私密状态页。P1 启用自助取号时，表单使用单列、渐进披露：

- 先选项目/资源，再填写一人一号所需字段；
- 手机号必填；姓氏和称谓选填，称谓未选择时默认“游客”；不展示或采集法定性别字段；
- 每个字段旁说明用途，隐私说明在提交前可见；
- 不用 placeholder 代替 label；
- 表单错误在提交后集中摘要，并在字段旁给出相同的具体修正方式；
- 保留已填写内容，服务故障不伪装成输入错误；
- 成功后生成每日可读票号；公开票号只用于现场识别，不能单独用于查询个人状态。内部 ID 和私密查询 token 使用高熵随机值。

### 13.3 个人状态卡

核心布局：

- 状态眉题：“正在排队”；
- 大号票号：“A123”；
- 主预测：“预计 25–35 分钟叫到”；
- 可信度/异常：“参考性中 · 14:32 更新”；
- 队列位置：“前方约 8 个号码”；
- 下一步：“可暂时离开，建议在叫号前 X 分钟返回”（X 为项目配置，不在界面写死）。

预计等待时间：

- 显示区间，不显示看似精确的“27 分 43 秒”；
- 默认按 5 分钟粒度；
- 明确区分“预计叫到号”和“预计开始体验”；
- 低可信时解释原因，例如“项目刚恢复，预测数据较少”；
- 数据陈旧时保留上次值，但在视觉上降级并显示更新时间。
- 项目暂停时不继续显示旧预计时间；改为“号码已保留，恢复后重新估算”，避免把失效预测当承诺。

### 13.4 被叫到

- 不弹抢焦点 modal；
- 页面顶部出现持久、高对比行动横幅；
- 一次性辅助技术通知：“您的号码 A123 已叫到，请前往 2 号入口”；
- 清楚显示宽限规则和入口位置；
- 视觉、声音和 [P1] 短信/通知互为补充，任一失败不让页面失去行动信息。

### 13.5 页面稳定性

- 预计等待时间、人数和当前号更新不改变主卡位置；
- 不逐秒倒计时，不做老虎机数字；
- 不因实时消息把用户滚回顶部；
- 用户展开的帮助、规则和无障碍设置在刷新后保持；
- 从后台恢复先拉取权威快照，不补播旧提示音或动画。

## 14. 员工 H5 规范

### 14.1 首页与任务结构

员工首页不是指标仪表盘，而是值守工作台：

- 首次进入必须完成账号登录；不使用共享匿名账号；
- 固定顶部：当前登录账号、从已授权项目中选择当前项目、营业状态、在线/离线和当前时间；
- 主区：当前批次、下一批候选、等待队列；
- 固定底部：唯一主操作“叫下一批”；
- 一级入口只保留取号、队列、叫号；重叫、过号后重新取号、历史和设备放入“更多”；
- 告警优先按“是否阻断叫号”排序，不按技术模块排序。

切换项目必须清空当前勾选、批次预览和搜索条件，并再次显示目标项目名称，防止员工把 A 项目的游客叫入 B 项目。

### 14.2 信息密度

- 支持紧凑列表，但每行仍保证 48px 触控目标；
- 票号、等待时长、特殊标记位置稳定；
- 当前操作对象用边框、背景、勾选和文字同时标识；
- 日常叫号由系统按当前项目固定 `N` 自动选择队首连续号码，员工只核对“本批几个号码”；手工多选仅在后续授权异常处理中出现；
- 列表发生实时变化时，保留员工当前选择并显示冲突条，不静默重排；
- 高密度不等于小字，正文以 17–18px 为现场起点。

### 14.3 取号与查找

- 员工代取号和游客自助取号共享校验规则；
- 检测同一手机号已有活动排队单时，先显示脱敏提示；同一手机号允许多个活动号码，员工明确确认后继续取号，并显示“本次确认将记录到审计”；
- 搜索结果默认只显示完成任务需要的信息；
- 完整手机号在员工端和管理端的授权业务列表中直接与票号、姓氏/称谓和状态对应展示，便于现场联系与核对；跨项目、匿名和公示路由不得取得该字段；
- 搜索、取号和叫号入口在视觉上区分，防止员工把“创建”误当“查找”。

### 14.4 并发与恢复

当另一位员工先完成叫号：

- 保留当前屏幕和选择；
- 页面内显示：“队列已被李师傅于 14:32 更新”；
- 列出候选集变化；
- 提供“检查最新批次”，不直接重复提交；
- 已失效选择用明确文字说明原因。

当网络中断：

- 显示离线状态和上次同步时间；
- 中心服务是唯一写入权威，禁止新取号、叫号或假装离线成功；
- 只允许安全的本地查看/草稿动作；
- 恢复后先同步 revision，再允许新叫号。

### 14.5 设备区 [后续真实硬件专项]

员工无需理解厂商协议。设备健康按任务呈现：

- “大屏可用 / 数据延迟 / 未连接”；
- “广播可用 / 未启用 / 未确认”；
- “打印机缺纸 / 离线”；
- 每个状态给出影响和下一步；
- 设备详情、日志和高级重试在二级页面，主叫号页只保留阻断性摘要。

### 14.6 叫号后的现场处理

当前批次卡必须支持完整闭环：

- **重叫**：沿用同一 `CallBatch`，创建新的叫号尝试；展示已重叫次数和最近时间；
- **到场/入场**：一个按钮完成核验并推进到 `SERVING`，支持整批或逐个号码处理；
- **[P1] 分开记录到场与开始服务**：只有入口拥堵分析确有需要时才拆成两个按钮；
- **完成**：仅从服务中推进到 `COMPLETED`，按钮文案写“完成本批服务”，不写“已入场”；
- **过号**：显示宽限是否到期和受影响号码；需要继续排队时创建新号进入队尾，明确展示原号已失效和新号关联；
- **[P1] 撤回/重排**：MVP 不提供；确有现场需求时再定义权限、原因和新位置；
- **异常取消**：MVP 只允许取消未叫号排队单；叫号后的复杂逆向取消放 P1。

[后续真实硬件专项] 扫码器、物理按钮等上行 `DeviceEvent` 到达时，页面再增加来源、处理结果和去重状态。MVP 只需保证批次部分到场时同时显示“已到场号码数”和“仍待到场号码数”。

## 15. 公示大屏 Web 规范

### 15.1 屏幕结构

大屏只承载现场公示，不承担管理或安全控制：

1. 顶栏：景区/项目名、服务状态、当前时间；
2. 主区：最新叫号批次，最大视觉权重；
3. 辅区：入口/通道、号码数量、行动指令；
4. 历史区：最近 3–5 个批次，防止观众错过瞬时更新；
5. 底栏：数据更新时间、广播状态、服务公告。

每台公示屏默认绑定一个 `project_id`，页面不提供临时项目下拉框；需要更换项目时由管理端重新绑定，避免多个项目票号混屏。

当前号码必须持续可见，不能被轮播、广告、风景视频或公告覆盖。

### 15.2 批量号码

- 连续号段可显示“A120–A124”，同时显示“5 个号码”；
- 不连续票号按两至三行稳定网格显示；
- 票号数量超过安全显示容量时，调整业务批次/分屏规则，不把字号无限缩小；
- 所有号码同时出现；消失条件绑定 `CALLED` 状态、配置的到场窗口和活动批次保留规则，不以“出现下一批”作为唯一条件；
- “再次叫号”增加静态标签和时间，不让号码弹跳或闪烁。

### 15.3 远距阅读

大屏不以设计稿 CSS px 作为最终验收指标。初始采用更保守的：

> 关键字符物理高度 ≥ 最远有效阅读距离 × 1%

| 最远有效阅读距离 | 关键字符建议最低物理高度 |
|---:|---:|
| 8m | 80mm |
| 10m | 100mm |
| 15m | 150mm |
| 20m | 200mm |

电子实时显示可参考“观看距离 ÷ 137.5”的字符高度基线，但当前叫号优先采用更保守的 1% 规则。该规则主要来自拉丁字符资料，中文必须现场二次验证。

验收环境：

- 上午、正午、傍晚；
- 正视和主要斜视角；
- 室内灯光、窗边强光、反光和阴影；
- 实际屏幕、实际播放器/工控机、实际分辨率；
- 断网、数据陈旧和音频未授权。

### 15.4 安装配置

每台大屏保存独立配置：

- 方向、分辨率、可视安全区、最远阅读距离；
- Dark / Daylight 色彩方案；
- 字符物理高度校准；
- 标准 / 低动效 / 无动效，默认低动效；
- 浏览器播报是否启用、备用设备通道；
- 环境光亮度策略和人工亮度上限；
- 设备配对、心跳和最后数据时间。

### 15.5 大屏内容禁令

- 手机号、姓氏和称谓不公开；系统不采集法定性别，首期不提供公开身份字段配置；
- 不用跑马灯传达关键叫号；
- 不使用红绿作为唯一对比；
- 不持续 pulse、呼吸、闪烁；
- 不滚动旧消息，不恢复前台后补播；
- 不让公告和营销内容与叫号争夺主视觉；
- 不在同一页面提供闸机、启航等安全关键控制。

## 16. 管理 Web 规范

### 16.1 导航

建议一级信息架构：

- 运营看板；
- 项目设置；
- 设备；
- 账号权限；
- 日志；
- 系统与隐私。

侧边栏稳定，不用大量悬浮卡片作为导航。顶部始终显示当前登录账号和“全部项目/当前项目”筛选；进入设置、设备和日志详情时必须选定一个项目。

管理端所有路由，包括运营看板，都必须先完成账号登录和服务端角色校验；没有管理权限时不渲染看板数据或侧边栏入口。

### 16.2 总览

运营看板就是管理端首页，不是独立应用。默认展示全部项目的一张列表：项目状态、等待号码数/人数、当前叫号、预计等待时间、最后更新时间和设备模拟异常。顶部只保留 4 个汇总数字：运行项目数、总等待人数、异常项目数、模拟接口异常数。

选择一个项目后，再展示该项目今日叫号/完成人数、简单等待趋势和最近异常。不要把所有指标做成等宽“大数字卡”，也不提供自由拼装看板。

### 16.3 项目与预计时间设置

每个项目使用一张简单表单：项目名称、票号前缀、营业状态、固定批量人数 `N`、宽限时间，以及“连续放行/固定批次”二选一的预计时间模板和对应参数。两种模板都属于首期能力。

- 保存后直接生效，并记录修改人、时间和前后值；
- 页面显示上一版值，可由有权限的管理员恢复；
- 不做草稿审批、定时发布、公式编辑器或历史数据模拟；
- 校验错误定位到字段，跨字段错误在顶部摘要；
- 暂停项目使用单独的醒目开关和原因，不藏在预计时间参数里。

### 16.4 数据表和日志

- 默认左对齐文本、右对齐数字；
- 时间、票号、人员、动作、结果、设备回执列位置稳定；
- 列筛选、排序、分页和导出状态可见；
- MVP 只固定关键列；[P1] 再提供列显示配置和保存视图；
- 高风险日志显示前后值和关联业务事件 ID；
- 日志列表不做逐行 layout animation；
- 行点击区与行内操作分开，避免误触；
- 状态不能只有红绿圆点，必须有文字。

### 16.5 账号与权限

- 员工和管理员使用可追溯的个人账号；不建议多人共享一个登录账号；
- 首期使用系统内置账号密码，登录界面支持限流后的明确等待提示、管理员重置后的首次改密和会话被吊销状态；预留 OIDC/SSO，但不在首期显示不可用入口；
- 角色权限按能力分组，显示作用域；
- 高风险权限用明确说明，不用技术缩写；
- 修改前展示将获得/失去的能力；
- 禁用账号与删除账号分开；
- 最近登录、设备、修改人和审计记录可查；
- 权限不足提示说明当前缺少什么以及如何申请，不泄露敏感资源。

### 16.6 设备接口

MVP 不建设完整设备管理页面。项目设置中只保留“设备接口：未配置 / 模拟器”，以及“模拟成功 / 模拟失败”测试按钮和最近一次测试结果。

硬件型号确认并单独纳入范围后，才增加设备注册/配对、项目绑定、在线/心跳、最近命令、执行回执和重试页面。证书轮换、Webhook/API 密钥、主备链路和驱动版本属于后续高级设置。

### 16.7 隐私与数据治理

- 按字段展示处理目的、是否必填、保存期限、到期动作和可访问角色；
- 字段基线固定为手机号必填、姓氏/称谓选填、称谓默认“游客”，不采集法定性别；
- 留存页显示已确认期限：个人关联在完成/取消/过号后 30 天删除，原始排队业务事件 90 天后匿名化，登录/权限/网络安全日志至少 6 个月，后台操作审计 1 年，个人信息保护影响评估相关记录 3 年；
- 公开大屏投影字段使用单独白名单，默认只有票号、批次、入口和非个人统计；
- 数据导出先显示范围、敏感字段、用途和审批状态；下载链接短时有效并留审计；
- 支持按游客/排队单处理查询、更正、删除或匿名化流程，并标明法定/安全日志例外；
- 完整手机号只进入受账号、角色和项目范围保护的员工/管理读模型；批量导出、留存规则修改和匿名化任务仍记录操作人、原因和前后值；
- 受托短信、云服务或硬件厂商显示处理范围、合同状态和最近数据传输；
- 仪表盘只展示汇总结果，不让管理员通过小样本筛选重新识别个人。

## 17. 响应式与设备适配

### 17.1 断点

设计断点是布局决策起点，不是设备型号列表：

| 名称 | 宽度 | 用途 |
|---|---:|---|
| Compact | 320–767 CSS px | 游客/员工手机 |
| Medium | 768–1023 | 平板、横屏员工端 |
| Desktop | 1024–1439 | 管理端、部分值守台 |
| Wide | ≥1440 | 宽表格和大屏配置台 |
| Display | 按物理屏幕配置 | 公示大屏，不套普通响应式 |

### 17.2 H5

- 固定参考画布宽度为 390px；桌面打开员工端/游客端时也保持该宽度并居中，不扩展成桌面双列；
- 320、375、390、414px 必测；320/375px 使用 100% 宽度，414px 及更宽视口仍保持 390px；
- 只固定宽度，不固定页面高度；长内容和员工队列表正常纵向滚动，宽表格只在自身容器横向滚动；
- 关键操作在安全区内，兼容浏览器底栏和刘海；
- 键盘弹起不遮挡当前字段和提交按钮；
- 横屏不把控件横向拉得过宽；
- 200% 文本放大后仍可完成取号和叫号；
- 避免非必要双向滚动。

### 17.3 管理端

- 1024px 起可完成核心任务；
- 小于推荐宽度时，表格可受控横向滚动，但操作列和关键标识保持可见；
- 管理端手机视图可提供告警查看和有限操作，不强行压缩完整规则编辑器；
- 不用浏览器缩放代替响应式设计。

### 17.4 大屏

- 每种硬件建立独立 viewport/profile；
- 不把 1080p 设计简单等比放到 4K；
- 用实物毫米、观看距离和安全区验收；
- 对 LED 点距、电视 overscan、浏览器缩放、系统 DPI 和屏幕方向分别记录。

## 18. 动效与 GSAP 规范

### 18.1 总体原则

动效采用“克制、快速、状态优先”：

- 只用于确认操作、解释状态变化和帮助视线定位；
- 不让用户等待，不作为理解状态的唯一方式；
- `CallBatch` 内成员始终作为整体出现；
- 动画、业务提交、设备命令和语音并行响应同一业务事件，互不作为成功条件；
- 项目目标是零主动闪烁。

### 18.2 工具边界

| 工具 | 允许 | 禁止 |
|---|---|---|
| CSS | hover、focus、pressed、颜色、透明度、短距离 transform | 复杂跨区编排 |
| React 原生/CSS 轻量过渡方案 | 少量条件面板、dialog/drawer、短列表进入/退出；确有需要时可评估 Motion | 实时队列整表 reorder、持续 layout animation |
| GSAP | 仅在验证有必要时处理大屏可中断的多区域换批 | 按钮、后台表格、游客预计时间、ScrollTrigger、ScrollSmoother、Draggable、SplitText |
| GSAP Flip | 少量非关键布局连续性 | 票号、批次成员和业务顺序 |

MVP 优先 CSS；如果 CSS 已能清晰完成大屏 150ms 交叉淡化，则不引入 GSAP。同一 DOM 节点和同一 CSS 属性只能由一种动画引擎控制。

### 18.3 动效 token

| Token | 时长 | 用途 |
|---|---:|---|
| `motion.instant` | 0ms | 队列顺序、数据表、无动效模式 |
| `motion.press` | 100ms | 按钮 pressed |
| `motion.fast` | 150ms | 状态、设备回执、错误文字 |
| `motion.standard` | 200ms | 轻量浮层、游客状态卡 |
| `motion.state` | 300ms | 员工批次卡整体更新 |
| `motion.large` | 400ms 上限 | 大屏批次整体换场 |

缓动：

```text
standard  cubic-bezier(.2, 0, 0, 1)
enter     cubic-bezier(0, 0, 0, 1)
exit      cubic-bezier(.3, 0, 1, 1)
linear    只用于真实、确定的进度
```

禁止 elastic、bounce、back、过冲 spring。H5 位移不超过 8px，大屏标准模式不超过 12px。

### 18.4 批量叫号序列

员工端：

1. t=0：按钮 100ms pressed，同时提交请求并显示静态“正在提交叫号”；
2. 等服务端时不逐号播放、不使用循环数字；
3. 成功后旧批次卡 150ms 淡出，新批次卡在 250–300ms 内整体淡入，最多上移 8px；
4. 所有票号同时出现；
5. 响应到达即恢复允许的操作，不等动画结束；
6. 设备回执以 150ms 交叉淡化独立更新，不重播批次动画；
7. 失败用图标、文字和边框出现，不 shake、不闪红。

大屏：

1. 收到 `CallBatchActivated` 后立即更新数据和时间戳；
2. 旧主区 0–150ms 降低透明度；
3. 新批次 50–350ms 整体淡入；
4. 400ms 内完成，之后长期静态；
5. 新事件打断旧时间线时，取消旧过渡并直接呈现最新快照；
6. 再次叫号仅做一次 150–200ms 色彩强调和静态标签。

### 18.5 Reduced Motion

交互端提供“跟随系统 / 减少动效 / 关闭动效”，大屏提供设备级模式，默认低动效。

减少动效：

- 移除位移、缩放、视差、spring、stagger 和布局移动；
- 只保留不超过 100ms 的透明度/高亮，或直接切换；
- React 动效方案必须跟随 `prefers-reduced-motion`；若使用 Motion，显式设置 `MotionConfig reducedMotion="user"`；
- GSAP 使用 `gsap.matchMedia()`，条件变化和卸载时 kill/revert；
- 代码不得依赖 `transitionend` 或 `onComplete`；
- 关闭动效时所有 duration 为 0ms。

### 18.6 后台标签页

- `document.hidden` 时停止装饰动画、浏览器音频和视频；
- 不积压 timeline；
- 回到前台先拉服务端快照和 revision，再订阅事件；
- 不补播隐藏期间的动画、提示音或语音；
- 预计等待时间、过号和宽限期只使用服务端时间；
- [后续真实硬件专项] 本地设备网关不受浏览器页面可见性控制。

## 19. 可访问性规范

### 19.1 标准基线

- 全端达到 WCAG 2.2 AA；
- 中国场景同时以 GB/T 37668-2019 为测试基线；
- 对交互动效主动采用 WCAG 2.3.3“可关闭”的更高要求；
- 关键大屏文字尽量达到 7:1；
- 设计评审不能只看自动化扫描，必须结合真实内容、设备和上下文。

### 19.2 可感知

- 普通文本 ≥4.5:1，大字 ≥3:1，必要控件边界/图形 ≥3:1；
- 状态不只依赖颜色；
- 视觉、语音和文字至少两种通道互补；
- 200% 文本缩放不丢内容或功能；
- 320 CSS px 宽度无非必要双向滚动；
- 图标有可访问名称，装饰图标对辅助技术隐藏；
- 视频/音频若未来加入，必须有可访问替代和控制。

### 19.3 可操作

- H5 触控目标 ≥48×48px；
- 焦点顺序符合视觉流程，焦点始终可见；
- dialog 打开后管理焦点，关闭后返回触发点；
- 无键盘陷阱；
- 自动更新、滚动或移动内容可停；本项目关键页不使用持续运动；
- 时间限制显示剩余和延期方式；业务时间不由客户端倒计时决定。

### 19.4 可理解与健壮

- label、错误摘要和字段错误完整关联；
- live region 在更新前已存在于 DOM；
- 普通更新使用 `role="status"` / polite / atomic；
- 游客自己的号码被叫到可一次性使用 assertive；
- 大列表默认 `aria-live="off"`，主动打开日志时才使用 `role="log"`；
- 后台更新不抢焦点；
- 页面 `lang="zh-CN"`，混合语言片段按需要标记；
- 业务状态、错误和设备回执有稳定可测试的语义名称。

### 19.5 屏幕阅读器摘要

不要逐行朗读批次成员。推荐摘要：

- 员工：“已呼叫第 18 批，共 5 个号码。模拟设备执行成功。”
- 游客：“您的号码 A123 已叫到，请前往 2 号入口。”
- 普通更新：“预计等待时间调整为 25 至 35 分钟，更新于 14 点 32 分。”
- 数据延迟：“当前显示 14 点 32 分的上次成功数据，正在重连。”

## 20. 数据可视化

MVP 运营看板只使用三种信息：

1. 跨项目状态表：项目、状态、等待号码数/人数、当前叫号、预计等待时间、设备模拟异常；
2. 单项目今日趋势：等待人数和完成人数两条折线；
3. 异常列表：暂停、数据陈旧、设备离线和近期高风险操作。

所有图表提供同数据表，轴、单位、时间范围和更新时间始终可见。不用 3D、仪表盘 speedometer、彩虹渐变、实时流动动画或自由拼装组件。[P1] 项目对比、预测误差带、热力图和高级报表在有明确运营问题时再增加。

## 21. 硬件扩展、音频与弱网体验

### 21.1 硬件界面边界 [后续真实硬件专项]

以下是预留的后续集成契约，不属于 MVP 验收。首期只实现统一接口、成功/失败模拟器和测试日志；浏览器页面不暴露厂商协议：

```mermaid
flowchart LR
    S["队列核心"] --> B["业务事件<br/>CallBatchActivated"]
    B --> U["页面状态更新"]
    B --> C["DeviceCommand"]
    C --> G["本地设备网关"]
    G --> D1["大屏 / LED"]
    G --> D2["广播 / TTS"]
    G --> D3["打印 / 扫码 / 物理按钮"]
    D1 --> E["DeviceEvent<br/>ACK / 心跳"]
    D2 --> E
    D3 --> E2["DeviceEvent<br/>扫码 / 按钮 / ACK / 心跳"]
    E --> G
    E2 --> G
    G --> S
    S --> U
```

设计要求：

- 员工看到业务与设备两级结果；
- 大屏显示自己的连接、数据时间和播报是否启用；
- 设备失败有“影响、当前替代通道、下一步”；
- 设备重试不重复改变业务状态；
- 上行扫码、按钮和心跳显示来源、接收时间与去重结果；重复或乱序事件不得重复推进业务；
- 同一物理大屏只能有一个主渲染链路，备用链路明确切换。

### 21.2 音频

- 员工点击叫号可触发不超过 1 秒的确认音，必须可静音并有等价视觉反馈；
- 大屏浏览器音频需值守人员主动启用，并检测 `play()` 失败；
- 自动音频超过 3 秒需独立暂停/停止/音量控制；
- [后续真实硬件专项] 生产设备语音可优先本地网关，浏览器语音为明确备用；
- 按 `business_event_id` 去重，单通道串行，显式“重叫”才再次播放；
- 语音和画面从同一业务事件生成，但不通过动画 callback 串联。

### 21.3 弱网

四种数据新鲜度：

| 状态 | 表现 | 操作 |
|---|---|---|
| 实时 | 不特别强调 | 正常 |
| 正在重连 | 保留上次数据 + 更新时间 | 停止新取号/叫号，恢复并同步 revision 后再开放 |
| 数据陈旧 | 持久警告，弱化预计时间可信度 | 停止写入并切换备用流程 |
| 离线 | 明确无法验证最新队列，展示纸质号码/人工广播指引 | 禁止全部数字化写入和伪成功 |

任何页面都不能只显示“网络错误”。必须告诉用户：

- 当前看到的是否是旧数据；
- 已提交操作是否已被服务端接收；
- 是否可以安全重试；
- 现场备用流程是什么。

## 22. 内容、隐私与称谓

### 22.1 内容风格

- 用短句、主动语态、常用词；
- 标题表达用户任务，不用内部模块名；
- 按钮用动作结果；
- 避免“操作失败”“未知异常”“请稍后”等空泛文案；
- 首次出现技术/业务词时解释；
- 时间统一为本地时区和 24 小时制，更新时间精确到分钟，审计日志精确到秒；
- 预计时间使用“预计”“约”“区间”，不写“保证”。

### 22.2 隐私

- 游客个人页使用不可猜测链接/token，页面不把手机号放入 URL；
- 游客个人页只显示联系手机号尾四位用于本人核对，不返回或展示完整手机号；
- 普通日志、埋点、错误报告和设备命令默认不含完整手机号；
- 员工界面在已授权项目的业务列表中直接显示完整手机号，且不得通过日志、埋点、错误报告或跨项目接口扩散；
- 手机号必填，姓氏/称谓选填，称谓默认“游客”；不收集、推断或展示法定性别；
- 同一手机号可以关联多个活动号码；重复提示只用于防误操作，员工确认后继续并留审计；
- 大屏、广播只使用每日可读票号；该票号不能单独查询个人状态；
- 姓氏/称谓不公开，首期不提供项目级公开例外；
- 未成年人仍使用独立的一人一号排队单，可复用监护人手机号；不在大屏建立儿童身份特征。

### 22.3 建议术语

| 推荐 | 避免 |
|---|---|
| 排队号码 / 等待号码 | 客户组、同行组 |
| 排队号码 / 票号 | 身份号码 |
| 预计 25–35 分钟 | 还剩 29 分 13 秒 |
| 已叫到 | 已服务（尚未入场时） |
| 设备尚未确认 | 播报成功（无 ACK 时） |
| 数据更新于 14:32 | 实时数据（已经陈旧时） |
| 已过号，请联系工作人员重新取号 | 恢复原号 / 恢复原位置 |

## 23. 明确禁止的设计模式

- 玻璃拟态、霓虹描边、渐变字和低对比透明层；
- “三张等宽大卡 + 大数字”套满所有后台首页；
- 风景图、宣传视频或动态背景压在号码、预计等待时间和状态文字下；
- 所有元素都做圆角胶囊；
- 票号老虎机、计数滚动、文字 scramble、逐号飞入；
- 号码弹跳、循环缩放、红色闪烁、无限 pulse、confetti；
- 跑马灯、自动轮播和整屏切换承载关键叫号；
- 错误 shake；
- ScrollTrigger/滚动劫持进入业务流程；
- 队列更新时整表自动移动；
- 把“业务已生效”和“设备执行成功”合并成一个绿色成功；
- 用 placeholder 代替 label；
- toast 作为唯一成功/失败反馈；
- 为追求密度缩小 H5 触控区和中文字；
- 为追求品牌感改变语义色或降低对比度；
- 把大屏当普通网页等比放大；
- 隐藏标签页恢复后补播错过的动画或声音；
- 在 GSAP `onComplete` 中提交业务、解锁按钮或发硬件命令。

## 24. 设计验收门槛

### 24.1 全端

- [ ] 共享语义 token、状态词典和隐私规则；
- [ ] WCAG 2.2 AA 与 GB/T 37668-2019 基线；
- [ ] 状态在灰度截图中仍可辨认；
- [ ] 所有错误说明发生了什么、当前是否有效、下一步；
- [ ] 弱网、离线、旧数据和权限不足均有完整状态；
- [ ] 无主动闪烁、持续运动、老虎机数字或无意义动画；
- [ ] 业务逻辑不依赖动画、前端 timer 或浏览器音频；
- [ ] 景区 VI 替换后重新跑对比度和品牌/语义分离评审。

### 24.2 H5

- [ ] 320/375/414/768px 测试；
- [ ] 触控目标 ≥48×48px；
- [ ] 200% 文本放大仍可完成核心任务；
- [ ] 键盘、刘海、底部安全区和横屏正常；
- [ ] 低端 Android、强光、单手、湿手/薄手套测试；
- [ ] 取号失败保留已填内容；
- [ ] 游客实时更新不抢焦点、不强制滚动。

### 24.3 批量叫号

- [ ] 主按钮显示本批实际号码数量，批次预览同时显示项目固定 `N`；
- [ ] 批次预览显示队首连续成员、固定 `N` 和规则来源；
- [ ] 并发冲突不静默覆盖；
- [ ] 所有批次成员原子出现，无逐号动效；
- [ ] MVP 业务成功与模拟适配器成功/失败相互独立；
- [ ] [后续真实硬件专项] ACK 能区分已接收、执行中、执行成功、可重试失败、最终失败和过期；
- [ ] [后续真实硬件专项] 设备部分失败仍能清楚判断业务是否已生效；
- [ ] [后续真实硬件专项] 扫码/按钮/心跳等上行事件重复或乱序时不重复推进业务；
- [ ] 防重依赖服务端幂等/锁，不只依赖按钮置灰；
- [ ] MVP 没有跳序、临时修改 `N`、手选和撤回入口；[P1] 若启用则另做权限与审计验收。

### 24.4 大屏

- [ ] 按最远阅读距离和物理字符高度验收；
- [ ] 上午/正午/傍晚及斜视角测试；
- [ ] 实际分辨率、overscan、DPI 和安全区校准；
- [ ] 当前号码持续可见，不被公告/营销覆盖；
- [ ] 公共内容只显示票号，绝不含手机号、姓氏或称谓；系统不采集法定性别，首期没有身份公开例外配置；
- [ ] 数据更新时间、离线/陈旧和播报未启用可见；
- [ ] 标准/低动效/无动效配置有效，默认低动效；
- [ ] 断线十分钟恢复只显示最新快照，不补播旧声音。

### 24.5 管理端

- [ ] 项目预计时间设置显示当前值、上一版、作用项目、修改人和修改时间；
- [ ] 表格键盘可用，列/筛选/单位/时区明确；
- [ ] 图表有等价数据表；
- [ ] 日志可定位业务事件和设备回执；
- [ ] 权限修改显示前后影响；
- [ ] MVP 只提供统一设备接口、模拟成功/失败和测试记录；注册、配对、心跳与完整回执只在后续真实硬件专项验收；
- [ ] 数据字段目的、必填性、留存/到期动作、公开投影白名单和受托方范围可查；
- [ ] 手机号必填，姓氏/称谓选填且称谓默认“游客”；同手机号多活动号码的提示、确认与审计可验收；
- [ ] 30 天个人关联删除、90 天业务事件匿名化、6 个月安全日志、1 年后台审计和 3 年影响评估相关记录均有可验证任务与配置；
- [ ] 员工/管理业务列表中的完整手机号严格受账号、角色和项目范围保护；游客页只有尾四位，公示屏没有手机号；敏感导出和留存规则变更有权限、原因、审批与审计；
- [ ] 1024px 可完成核心任务，大表横向滚动受控。

### 24.6 性能

- [ ] 动画只用 transform/opacity 为主；
- [ ] 4K 大屏不对整张画布交叉淡化；
- [ ] 新批次作为一个合成单元；
- [ ] `will-change` 只在需要时短暂使用；
- [ ] 新事件会取消旧 timeline；
- [ ] 4× CPU throttle 和低端 Android 下无阻断性卡顿；
- [ ] 大屏换批期间无超过 50ms 的主线程 long task；
- [ ] 表格使用分页/虚拟化，不动画数百行。

## 25. 设计到开发的交付顺序

在写业务 UI 前，按以下顺序交付并评审：

1. **现场与 VI 输入**：Logo、品牌色、设备尺寸/亮度、最远阅读距离、员工设备、硬件清单；
2. **任务流与低保真**：[MVP] 游客状态、员工代取/批量叫号、公示屏换批、管理项目设置；[P1] 游客自助取号；
3. **状态矩阵**：正常、空、加载、弱网、离线、陈旧、冲突、部分失败、权限不足；
4. **设计 token**：颜色、字体、间距、焦点、动效、断点；
5. **核心组件**：表单、状态条、批次卡、设备回执、项目表格和修改记录；
6. **关键屏高保真**：四端各核心屏及紧急/异常状态；
7. **可交互原型**：批量叫号、游客被叫到、公示屏换批、项目设置保存；
8. **现场与无障碍验证**：真机、真屏、阅读距离、强光、噪声、弱网、屏幕阅读器；
9. **设计签字**：产品、运营、开发、QA、硬件/现场负责人；
10. **进入实现并持续回归**。

开发阶段的设计治理：

- 语义 token 是唯一颜色/间距来源，不在页面散落硬编码；
- 每个新组件先说明复用失败原因；
- 设计评审同时检查正常状态和异常状态；
- 每次硬件型号或景区 VI 变化都触发相关回归；
- 设计规范和产品规划的状态名、事件名保持一致。

## 26. v1.0 现场校准输入

产品、业务规则、技术栈、断网行为、身份字段、留存和首期硬件范围已经冻结。以下事项不阻止开发，只需在高保真品牌定稿或现场 UAT 前补齐：

1. 是否已有景区 VI：Logo、标准色、禁用色、字体和图片规范；
2. 首批员工设备：手机/平板型号、浏览器、是否戴手套；
3. 首批大屏：尺寸、分辨率、屏幕类型、点距、亮度、朝向和最远阅读距离；
4. 大屏环境：室内/半室外/室外、反光和遮阳；
5. 人工广播与纸质号码预案的负责人、话术和恢复联网切换步骤；
6. 后续真实硬件专项的型号、协议、驱动、网络拓扑、ACK、错误码和心跳能力。

在未提供 VI 时，本文件的蓝/暖橙方案可用于低保真之后的临时视觉探索，但不能在未评审的情况下被解释为景区正式品牌。

## 27. 官方参考资料

所有链接于 2026-07-10 核验：

### 公共服务与布局

- [GOV.UK Government Design Principles](https://www.gov.uk/guidance/government-design-principles)
- [GOV.UK Layout](https://design-system.service.gov.uk/styles/layout/)
- [GOV.UK Error Message](https://design-system.service.gov.uk/components/error-message/)
- [GOV.UK Error Summary](https://design-system.service.gov.uk/components/error-summary/)
- [GOV.UK Focus States](https://design-system.service.gov.uk/get-started/focus-states/)
- [NHS Colour](https://service-manual.nhs.uk/design-system/styles/colour)
- [NHS Buttons](https://service-manual.nhs.uk/design-system/components/buttons)
- [NHS Error Message](https://service-manual.nhs.uk/design-system/components/error-message)
- [USWDS Theme Color Tokens](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [USWDS Accessibility](https://designsystem.digital.gov/documentation/accessibility/)
- [USWDS Layout Grid](https://designsystem.digital.gov/utilities/layout-grid/)
- [USWDS Spacing Units](https://designsystem.digital.gov/design-tokens/spacing-units/)

### 导视、大屏与中文

- [TfL Design Standards](https://tfl.gov.uk/info-for/business-and-advertisers/design-standards?intcmp=4530)
- [TfL Text Legibility Standard](https://content.tfl.gov.uk/tfl-text-legibility-standard-issue03.pdf)
- [TfL Standard for Products](https://content.tfl.gov.uk/tfl-standard-for-tfl-products.pdf)
- [FAA Airport Signing and Graphics](https://www.faa.gov/documentLibrary/media/Advisory_Circular/150_5360_12f.pdf)
- [UK DfT Inclusive Mobility](https://assets.publishing.service.gov.uk/media/61d32bb7d3bf7f1f72b5ffd2/inclusive-mobility-a-guide-to-best-practice-on-access-to-pedestrian-and-transport-infrastructure.pdf)
- [GB/T 37668-2019 信息技术 互联网内容无障碍可访问性技术要求与测试方法](https://openstd.samr.gov.cn/bzgk/std/newGbInfo?hcno=35ECC696805C1A67C93B74FB6D0D8EFB)
- [工信部：互联网应用适老化及无障碍改造专项行动](https://www.miit.gov.cn/jgsj/xgj/gzdt/art/2021/art_eddf498ded1b44829644bf20d28c9f6f.html)
- [W3C 中文排版需求](https://www.w3.org/TR/clreq/)

### 可访问性

- [W3C WCAG 2.2](https://www.w3.org/TR/WCAG22/)
- [Understanding Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color)
- [Understanding Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
- [Understanding Target Size](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [Understanding Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages)
- [Understanding Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide)
- [Understanding Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions)
- [Understanding Three Flashes](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes)
- [Understanding Audio Control](https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html)

### 动效与运行时

- [Material 3 Easing and Duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
- [Apple Human Interface Guidelines: Motion](https://developer.apple.com/design/human-interface-guidelines/motion)
- [Apple Reduced Motion Evaluation Criteria](https://developer.apple.com/help/app-store-connect/manage-app-accessibility/reduced-motion-evaluation-criteria)
- [Fluent 2 Motion](https://fluent2.microsoft.design/motion)
- [Microsoft Timing and Easing](https://learn.microsoft.com/en-us/windows/apps/design/motion/timing-and-easing)
- [MotionConfig and reducedMotion](https://motion.dev/docs/react-motion-config)
- [GSAP matchMedia](https://gsap.com/docs/v3/GSAP/gsap.matchMedia%28%29/)
- [GSAP Timeline](https://gsap.com/docs/v3/GSAP/Timeline/)
- [GSAP Context](https://gsap.com/docs/v3/GSAP/gsap.context%28%29/)
- [MDN prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion)
- [MDN Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)
- [MDN Autoplay Guide](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay)
- [MDN ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions)

### 排队产品模式

- [Qmatic Mobile Ticket](https://www.qmatic.com/products/mobile-ticket)
- [Qmatic Mobile Ticket ETA](https://www.qmatic.com/product-updates/introducing-estimated-wait-time-in-mobile-ticket)
- [Qmatic Digital Signage](https://www.qmatic.com/products/display-signage/)
- [Waitwhile Visits Page and Bulk Actions](https://help.waitwhile.com/en/articles/8061037-navigating-the-visits-page)
- [Waitwhile Customer Status Page](https://help.waitwhile.com/en/articles/9949637-the-customer-status-page-real-time-updates-for-your-customers)
- [Waitwhile Serving Display](https://help.waitwhile.com/en/articles/11370712-how-to-use-the-waitlist-display-to-direct-customers-to-a-counter)
- [Waitwhile Managing the Waitlist](https://help.waitwhile.com/en/articles/8016100-managing-the-waitlist)
- [Waitwhile Analytics](https://help.waitwhile.com/en/articles/9250541-analytics-overview)
- [Qmatic Serve View](https://docs.qmatic.io/en/staff-user-guides/user-guide--serve-view.html)
- [Wavetec Low-connectivity Kiosk Guidance](https://www.wavetec.com/blog/best-practices-of-kiosk-installations-in-low-connectivity-zones/)