wangxuming/XQKqueue

Fork 0

Files

wangxuming 68d61700d5 Initial commit

2026-07-12 15:53:24 +08:00

68 KiB

Raw Blame History

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

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

术语：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. 设计系统分层

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

规则：

共享语义，不共享密度。 “成功、部分失败、离线、数据延迟”等语义跨端一致，但尺寸和信息量按任务调整。
品牌与语义分离。 更换景区品牌色不能改变错误、警告、离线等状态含义。
公开投影与个人视图分离。 大屏组件不能直接复用游客个人状态卡，避免泄露身份和出现不合适的字号。
业务成功与设备送达分离。 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 字体栈

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 反馈层级

组件内即时反馈：pressed、disabled、提交中；
页面内持久状态：业务已生效、设备确认、数据陈旧；
错误摘要：跨字段或阻断流程的问题；
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 先完成业务叫号状态。设备只接模拟适配器，显示“未配置 / 模拟成功 / 模拟失败”。以下完整设备投递层级仅在后续真实硬件专项启用：

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

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

没有硬件 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 员工端批次编排

稳定结构：

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

12.3 确认策略

正常批次：

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

风险批次 [P1]：

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

12.4 业务结果与硬件扩展

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

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

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

13. 游客 H5 规范

13.1 信息优先级

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

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

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

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 屏幕结构

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

顶栏：景区/项目名、服务状态、当前时间；
主区：最新叫号批次，最大视觉权重；
辅区：入口/通道、号码数量、行动指令；
历史区：最近 3–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 上限	大屏批次整体换场

缓动：

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 批量叫号序列

员工端：

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

大屏：

收到 CallBatchActivated 后立即更新数据和时间戳；
旧主区 0–150ms 降低透明度；
新批次 50–350ms 整体淡入；
400ms 内完成，之后长期静态；
新事件打断旧时间线时，取消旧过渡并直接呈现最新快照；
再次叫号仅做一次 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 运营看板只使用三种信息：

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

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

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

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

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

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 前，按以下顺序交付并评审：

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

开发阶段的设计治理：

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

26. v1.0 现场校准输入

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

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

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

27. 官方参考资料

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

68 KiB Raw Blame History Unescape Escape