L1
主体坐在页面底色上
不加框、不加底。主内容区不是卡片。
UI 设计交付
12 屏 40 态高保真设计稿 · 设计 Token · 信息架构与交互规则。
01 / 高保真 UI 设计稿12 屏 · 40 态 · 双端
全部设计稿由生产 HTML 在固定 viewport 下渲染，与可运行 Demo 逐像素一致——设计稿即真源。每屏含默认态与全部异常／结果态。
会议发现 scr-discover
参会者 · 多语言首页、多维筛选、AI 推荐带理由 · 6 个状态
默认态390x844
英文态390x844
深色态390x844
加载态390x844
空态390x844
AI 降级态390x844
场次详情 scr-session
参会者 · 双时区并列、容量与语言支持 · 2 个状态
默认态390x844
禁用态390x844
预约申请 scr-booking
参会者 · 时区确认、冲突白话解释、候补 · 3 个状态
默认态390x844
成功态390x844
错误态390x844
共同时段求解器 scr-solver
参会者 · 热力交集、Top3 候选、降级三态投票 · 4 个状态
默认态390x844
加载态390x844
成功态390x844
错误态390x844
我的行程 scr-itinerary
参会者 · 纵向旅程轨、AI 编排优化 · 3 个状态
默认态390x844
空态390x844
成功态390x844
变更与通知中心 scr-changes
参会者 · 影响先行、替代方案、一键接受 · 5 个状态
默认态390x844
英文态390x844
空态390x844
成功态390x844
错误态390x844
参会凭证 scr-pass
参会者 · 动态凭证、盖章核验、改期翻转 · 3 个状态
默认态390x844
成功态390x844
错误态390x844
预约审核队列 scr-review
会务 · 通过／拒绝／退回，状态实时回流 · 3 个状态
默认态390x844
空态390x844
成功态390x844
变更发布与回执追踪 scr-ops-change
会务 · 多语言摘要审定、已读与未响应分组 · 3 个状态
默认态390x844
成功态390x844
错误态390x844
现场核销台 scr-checkin
会务 · 深色工作台，四种固定核验结果 · 4 个状态
默认态390x844
成功态390x844
错误态390x844
禁用态390x844
预约与到会统计 scr-stats
会务 · 北极星与护栏指标 · 2 个状态
默认态390x844
加载态390x844
系统管理端 scr-admin
管理员 · 权限矩阵、隐私三机制、审计日志 · 2 个状态
默认态390x844
锁定态390x844
02 / 设计 TOKEN票据是唯一的内容母题
视觉方向：实时参会旅程 · 票据形式语言。全站深浅双主题（CSS 变量 + data-theme + 本地记忆 + 顶部切换）。
色彩 亮色 / 暗色
暖象牙 背景
#f7f3ea / #0f0f0d纸面 surface
#fffdf8 / #171714近黑 文字
#171714 / #fffdf8日光橙 · 主行动
#bd3b08 / #ff7438草绿 · 成功
#247a36 / #30d158深蓝 · 稳定信息
#2457a6 / #7fa7ef琥珀 · 警示
#9a5a09 / #ff9f0a红 · 失效与拒绝
#b92c35 / #ff453a橙色只用于主行动与「现在」，绿色只表达成功，蓝色用于稳定信息。QR 扫描面在两个主题下都保持白底黑码。
字阶
| 用途 | 字号 | 说明 |
|---|---|---|
| 大时间 / 凭证主信息 | 34 / 28 | 等宽数字 ui-monospace，可逐位核对 |
| 页面标题 | 21 | 负字距 −0.01em |
| 正文 | 15 / 17 | 行高 1.6–1.72 |
| 标签与元数据 | 10 / 11 / 13 | 时区缩写、ID、时间戳一律等宽 |
容器分级与形状
L2
内容单元只有分隔线
列表项、行程节点用 1px 分隔线，不升级为卡片。
L3
卡片是特权容器
每屏至多 2 个。卡片泛滥，「重要」就失去信号价值。
投影
投影本身是状态
普通卡片无投影；只有当前有效凭证允许 level2 投影。按钮圆角 8px，不做胶囊。
组件语言
| 组件 | 规则 |
|---|---|
| 票据（唯一母题） | 三档共用穿孔与撕裂虚线：场次＝紧凑票 · 预约结果与变更＝标准票 · 参会凭证＝完整票 |
| 双时区块 | 全站唯一版式真源：本地时间在前、举办地时间在后，各标时区缩写；跨日带日期标记 |
| AI 便签 | AI 建议与告警使用便签形态（直角、左粗边），禁止做成票 |
| 状态 pill | 文字 + 颜色双编码，不靠颜色单独表意 |
| 动效 | 凭证状态变化 420ms 单次落定无回弹；扫描动效 2200ms 线性循环 |
设计红线
- AI 输出必须有常驻标识、理由、人工确认入口与降级状态，四者缺一不可。
- 不使用穿孔票据以外的复古隐喻：禁 MRZ 码、禁盖章做旧、禁复古纸纹。
- 单一 SVG 图标体系，禁 emoji 当图标。
- 深浅双主题、键盘焦点、系统缩放与「减少动态效果」均须支持。
03 / 信息架构与交互规则六个功能组，一条对象关系链
核心对象关系
Event 大会 → Track 专题 → Session 场次 → Booking 预约 → Itinerary 行程 → Pass 凭证 → Check-in 核验。
Change 变更单关联 Session，驱动 Booking、Itinerary 与 Pass 三者状态更新——这条链就是「可同步、可追溯」的实现基础。
功能组与导航
| 功能组 | 环节 | 内容 |
|---|---|---|
| 发现与预约 | ①② | 会议发现 · 场次详情 · 预约提交 · 跨时区求解 |
| 个人参会旅程 | ④ | 我的行程 · 冲突与移动提醒 · 日程同步 · AI 行程优化 |
| 变更与通知 | ⑤ | 变更摘要 · 影响说明 · 替代方案 · 确认与改约 |
| 凭证与到场 | ⑥ | 动态凭证 · 状态与替换关系 · QR 核验 · 核验记录 |
| 会务运营 | ③ | 预约审核 · 变更发布 · 现场核销 · 统计看板 |
| 平台管理 | 横切 | 用户与角色 · 语言与时区 · 权限与审计 |
移动端（390–767）底部页签 + 单列滚动流；平板沿用页签、居中单列；桌面端（≥1280）左侧竖排导航按角色过滤，核销台与运营台为真正的多栏终端布局，不是移动端拉伸。
四条交互原则
原则 一
时间优先
核心场景同时显示本地时间与举办地时间，跨日必须带日期标记。
原则 二
状态前置
预约、变更、凭证、核验的状态始终紧邻主操作，不藏在二级页。
原则 三
人工确认
AI 推荐、求解、优化与变更摘要，均不得自动替用户提交。
原则 四
可恢复
拒绝、失败、离线、过期与误操作，均提供返回、重试、替代或撤销路径。
逐屏异常与降级
| 页面 | 异常与降级 |
|---|---|
| 会议发现 | 加载＝推荐区骨架，筛选与完整列表仍可用；空态保留筛选条件并提供一键清空；AI 降级＝提示不可用，列表回退时间与热度排序 |
| 场次详情与预约 | 满员进候补；需审核进「审核中」；提交失败保留已填信息；跨时区冲突进求解器，不覆盖原预约 |
| 共同时段求解 | 选择候选后需二次确认；AI 失败切换为「可参加／勉强／不可参加」三态投票 |
| 我的行程 | 冲突用常驻警示（非 toast）；AI 优化支持逐项采纳、整组采纳与撤销 |
| 变更通知 | 摘要先给影响再给原文；旧凭证失效后明确指向新凭证，不允许继续扫码 |
| 动态凭证 | 待生成状态不渲染 token；已核验／过期／取消均有文字状态，不靠颜色单独表意 |
| 现场核销台 | 结果收敛为成功／重复／失效／离线四态；离线写入待回传队列；重复与失效必须拦截并给人工处理入口 |
通用反馈
- 不可用按钮必须说明原因，而不是静默禁用；表单错误就地显示并保留输入。
- Toast 只确认轻量动作，关键结果必须留在页面中，用户回头能找到。
- 支持键盘焦点、语义标签、系统缩放与「减少动态效果」偏好。