中华成语(城韵)大赛 · 用户端 H5 界面设计稿
P01–P29 全部页面状态,
用同一套样例数据(洛阳 · 第 2 赛季第 14 天)串起「答题 → 入账 → 为城市贡献 → 城市排名 → 城城 CP → 兑换」的完整叙事,
可直接用于设计评审、前端切图与验收对照。
00 设计判断与交付口径DECISION FIRST
动笔前先把三个会影响返工的问题摆上台面。这三条不确认,后面的页面做得再细也是白做。
22 / 24 / 25 三个数
需求文档标题写「22 页」,页面地图实列 P01–P24,还原为 22 = 24 − P03 − P24(P03 是 P02 的第二态,P24 已标 P2)。 本稿在此基础上补了 P29 赛季荣誉——需求漏掉了赛程收官这一页,不补则 31 天积累无处落地。 故本稿为 29 个编号全部出图 / 27 页交付,P03、P28 作「状态页 / 延后页」保留,删减不影响其余页面。
重心不是答题页
答题页只考验排版;真正决定这个产品成立与否的是把冷公式翻译成因果。 本稿提炼出三条「界面承诺」,固定位置、不允许被活动运营改动: 结算页解释 G/A 差异、城市页显示「差 X 人拿满加成」、CP 页用双向条。「见 §12」
克制是公信力
单屏纹样 ≤ 1 处,全站只有一个整幅插画位(首屏)。错误态刻意不用红绿对照——红是主色, 用它标「错」会与整体调性冲突;错误改用灰 + 图标 + 明确的补救动作。
▍本稿对需求文档的 5 处设计侧补充(请确认)
| 编号 | 文档现状 | 本稿处理 | 依据 / 风险 |
|---|---|---|---|
| G-01 | 未定义全局底部导航 | 定 5 tab:首页 / 城市 / CP / 闯关 / 我的。权益(兑换·抽奖·公益)挂在「我的」与首页快捷,不占 tab | 5 tab 是上限;权益使用频次低于主线的判断 |
| G-02 | P03 单列为页 | 作为 P02 的第三态(同一流程条),可独立深链 | 流程不应出现两个「下一步」 |
| G-03 | 数字规则只规定城市分 1 位小数 | 个人分同样保留 1 位(96.1 而非 96)。整数化会让五行拆解手算对不上 | 结算页「可手算校验」是验收项 |
| G-04 | 未登录「可看榜」 | 补围观态:榜单/城市页/CP 页只读可看,答题、兑换、贡献明细软拦截(不弹硬登录框) | 拉新主要靠分享落地页 |
| G-05 | 答题页未规定提交反馈层级 | 增加弱网横幅「已保存本题答案」+ 恢复当前题,不与扣分挂钩 | FR-QZ-03/05 的界面表达 |
▍本稿统一使用的样例数据(跨页可校验)
林砚 · 洛阳 · 系数 1.0
20 题 · 96.1 分 · 对 17
G 1,846.0 · A 可用 946
洛阳 公平榜 7/16 · 总分 128,460.5
3.2%(4,317 人)· C_participate 1.13
1.01%(1,292.2 / 128,460.5)
洛阳 × 泉州 68.4 · 金级
100A = 1 元 · 日额度剩 3,800A
01 全局视觉规范DESIGN TOKENS
沿用策划案汇报物料已确立的红金政务文化风,保证「方案 → 产品」视觉连续。以下为前端可直接落地的变量表。
▍色彩
| 层级 | 字号 / 行高 | 字体 | 用法 |
|---|---|---|---|
| 结算总分 | 38 / 44 | 宋体 600 | 金色大字,唯一使用处 |
| 成语展示 | 34 / 50 | 宋体 600 | 答题题干、关卡名,字距 +0.06em |
| 页面标题 | 22 / 32 | 宋体 600 | 城市名、城际 CP 名、区块大标 |
| 区块标题 | 15–16 / 24 | 黑体 600 | 卡片内小节 |
| 正文 | 14–15 / 24 | 黑体 400 | 移动端不小于 15,兼顾中老年 |
| 辅助 / 说明 | 11–12 / 18 | 黑体 400 | 口径说明、时间戳 |
| 榜单数字 | 17–32 | 黑体 600 tabular | 启用 tabular-nums 保证对齐 |
| 项 | 规范 | 说明 |
|---|---|---|
| 栅格 | 8pt | 页边距 16px,卡片内 13–14px |
| 圆角 | 12 / 11 / 8 | 卡片 12,选项与券 11,标签 8 |
| 描边 | 1px #EFE6D8 | 卡片必带,禁用投影叠三层 |
| 阴影 | 0 6px 18px rgba(60,40,20,.06) | 仅浮层与选中卡使用 |
| 触控区 | ≥ 48×48 | 选项卡高 ≥ 56 |
| 纹样 | ≤ 1 处 / 屏 | 城砖纹仅作分隔(见首屏) |
| 数字格式 | 千分位 · 1 位小数 | 城市分/CP/百分比均 1 位;A 为整数 |
01B 适老化改版规范ELDER-FIRST REVISION
用户主体是学习强国渠道的退休机关人员,大致 55–75 岁。v1.0 的字号体系是按年轻用户设的——正文 11–13px,辅助文字低到 9px,这个尺寸对老花眼基本不可读。v1.1 把整套字阶上调,同时砍掉每屏的次要信息。字号放大后 24 屏塞不进 812px,帧高改为自适应长屏,页面该滚动就滚动,不再为了"一屏装完"牺牲字号。
■字号对照表
| 层级 | v1.0 | v1.1 | 依据 |
|---|---|---|---|
| 关键数字(总分 / 得分) | 38px | 42–46px | 一屏只应有一个视觉焦点,老人靠它判断"我今天怎么样" |
| 页面主标题 | 15px | 20px | 告诉用户"这是哪一页",必须一眼看清 |
| 正文与选项 | 12–14px | 16–17.5px | 16px 是移动端适老化下限,低于它阅读速度断崖式下降 |
| 辅助说明 | 10–11px | 14–14.5px | 可以小,但不能小于 14px;同时只保留必要说明 |
| 标签 / 徽标 / 角标 | 9–9.5px | 13px | v1.0 最小到 8.5px,已接近不可读 |
| 行高 | 1.5–1.65 | 1.7–1.8 | 行距拉开,减少串行 |
■四条硬规则(验收项,不是建议)
全站正文 16–17.5px,辅助文字 14px 起。任何低于 14px 的文本都要么放大、要么删除——没有第三种处理。
答题选项 66px、主按钮 56px、底栏 68px。老年人手指精度下降、常有轻微手抖,小热区会直接变成误触。
每屏最多一个主操作、一句解释。v1.0 里"一屏三块卡 + 两行注解"的密度必须拆开或删减。
"G / A 双分"这类缩写对目标用户是黑话。首屏与结算页一律用"总分 / 贡献分",符号只在流水明细里出现。
■从可点 Demo 回灌:六条被验证过的排版决策
先用可点原型跑通了 15 屏(cheng.cnpoker.club),再把这些决策回灌到本稿。原型的好处是"装不下"会立刻暴露——稿子里装不下只会被裁掉,看不出来。以下六条不是审美偏好,是在 375×812 里实测通过的。
| 决策 | 具体做法 | 为什么这么做 |
|---|---|---|
| ① 三行卡改三列 | 首屏原有「CP / 闯关 / 权益」三行,每行标签+数值+说明共三排,改为一列一项(标签在上、大数字在中、一句状态在下) | 三行版占 282px,三列版占 93px。信息一个没少,但老人一眼扫完一列,不用在行间来回找 |
| ② 双分卡两行制 | 结算页「累计积分 / 可用积分」改为标签与数字同一行、解释另起一行;流水页顶部三个缩写改为「累计积分 / 可用积分 / 已兑换」 | 原来"标签 / 数字 / 说明"三层堆叠,放大字号后每块纵向吃掉 88px;两行制把它压到 60px 且更易读 |
| ③ 券卡收两行 | 四张券由「券名 / 需 X A / 库存 + 操作」三排改为「券名 + 状态(右)」与「需 X A · 库存 · 有效期」两排 | 第三排原本只放"库存 128"和"立即兑换"两个短元素,却是纵向最贵的一排。状态右对齐后,"还差 2,054A"反而更醒目 |
| ④ 去重不删信息 | P07 删「城韵释义」卡(内容移入 P18 关卡)、P19 删「今日任务」卡(结算页已有)、P24 删「最近中奖名单」卡(改为概率卡右上角入口)、P09 删尾注(P20 已有) | 同一信息出现在两页,第二页就是噪声。删的是重复呈现,不是信息本身——每条都留了去处 |
| ⑤ 合规文字只压行数 | P26 六问压到五问、每问答案不超过两行;P27 状态说明去掉"不展示判定规则"的独立句,并入原因类别 | 合规内容不能删。压缩的是措辞密度,保留的是"结论先行":老人读规则只读第一句 |
| ⑥ 次级操作降为文字链 | 结算页底部两个并列按钮(云游泉州 / 看 CP 进度)改为一行文字链 | 一屏两枚同等权重的按钮,等于没有主操作。主按钮只有一个:去挑战 |
■回灌前后高度实测(375 宽,超出 812 的像素数)
| 帧 | 回灌前 | 回灌后 | 主要动作 |
|---|---|---|---|
| P01 首屏 | +274 | +21 | 三行卡改三列、答题卡去掉重复时长 |
| P02 实名与选城 | +159 | +28 | 城市列表 4 行减到 3 行、隐私说明收一句 |
| P03 城市确认 | +166 | 0 | 24 小时冷静期并入勾选卡、系数说明收一句 |
| P05 结算 | +232 | +68 | 双分卡两行制、因果链去标题、次级按钮降文字链 |
| P07 城市主页 | +218 | +12 | 删城韵释义卡、参与率卡两句合一 |
| P14 云游包 | +210 | +24 | 题组 4 组减到 3 组、已获积分并入头部卡 |
| P18 关卡内页 | +156 | +59 | 输入框 150→96、评分维度收一句 |
| P19 我的 | +66 | 0 | 删与结算页重复的今日任务卡 |
| P22 兑换中心 | +123 | 0 | 四张券卡各收一排 |
| P23 兑换单 | +83 | 0 | 客服入口并入订单信息卡 |
| P24 抽奖 | +151 | +4 | 删中奖名单卡,改为概率卡右上角入口 |
| P26 规则 | +283 | +40 | 六问压五问、答案各压到两行内 |
| P27 申诉 | +226 | +51 | 表单单排改双列、求助入口收成一行 |
| 其余 11 帧 | — | ≤ +59 | 未改动内容,仅受益于全局行高与间距 |
回灌并补 CP 四帧、改绑城口径后,最长的一帧是 P05(880px),29 帧里有 17 帧正好 812px(含新增的 P10 / P11 / P12 / P16 / P29)。帧高跟随内容,不再统一裁到 812。理由是:统一高度会逼着每一屏去"凑满"或"硬塞",前者产生废话、后者产生截断,两种都是真实 App 里不存在的行为。真实手机是滚动的,本稿就按可滚动来画。
如果你的评审必须"一屏一图对齐",我可以把超出的 12 帧压到 812(最高 P05 880 / P18 871 / P27 863 / P26 852)——代价是 P05 再删因果链、P26 再删一问、P27 再删提交表单的附件位。这三处都属于"删了会掉信息",所以我没删。
02 信息架构与页面地图INFORMATION ARCHITECTURE
5 个一级分区承载主线,3 个兜底页与 1 个收官页不入导航。层级控制在 3 层以内:tab → 列表 → 详情,答题与兑换流程为线性流(可返回上一步,不可跳步)。
收官(本稿补)
P29赛季荣誉与年度报告合计 29 个页面编号 · P0 共 22 页 · P1 共 6 页 · P2 共 1 页(P10 / P11 / P12 / P16 / P29 为本稿补页)。底栏 5 tab 常驻于城市/CP/闯关/我的四组;答题与流程页隐藏底栏以独占注意力。
03 组件与栅格COMPONENT INVENTORY
29 页共 14 类组件(P29 不新增组件类型,全部复用),其中 6 类为「机制可视化」专用件,不允许被其他活动页面复用改造——它们承载的是计分口径,不是装饰。
| 组件 | 类型 | 规格要点 | 出现页 |
|---|---|---|---|
| 选项卡 | 交互 | 高 ≥ 56,选中=红描边 + 3px 外发光;不揭晓对错,0.4s 自动下一题 | P04 P18 |
| 20 段进度 | 机制件 | 每段=1 题,2px 间隙;已答=红,当前=淡金脉动,未答=#EDE3D3 | P04 |
| 结算五行拆解 | 机制件 | 每行右侧「?」展开公式;五行之和必须等于大字(1 位小数) | P05 |
| 双轨卡 G / A | 机制件 | 并列等宽,各带一句固定释义,不可折叠、不可换序 | P05 P19 |
| 因果链 | 机制件 | 三段竖排,每段带时间/系数角标;线段用金→红渐变表示「汇入」 | P05 |
| 双向条 | 机制件 | 左右分置、中线为 0,左城红、右城金;禁止堆叠条 | P13 |
| 参与率进度 | 机制件 | 必须带「差 X 人 / 拿满 ×1.20」文案,纯进度条不合格 | P07 |
| 榜单行 | 数据 | 名次 22px 固定宽 + 城名 + 档位标记 + 分数右对齐;本城高亮不带跳转箭头 | P08 P09 |
| 券卡 | 交易 | 左面值区 82px 固定宽,右侧含所需 A、有效期、适用范围;缺额态置灰不隐藏 | P22 |
| 码卡 | 交易 | 二维码 + 6 位数字码 + 60s 刷新倒计时,防截图说明常驻 | P23 |
| 时间轴 | 叙事 | 互访/流水共用;节点色区分「计入 vs 未计入」 | P15 P20 |
| 空 / 异常 / 降级 | 状态 | 三件套:原因一句 + 补救动作一个 + 客服入口 | 全局 |
| 骨架屏 | 加载 | 榜单 3 行灰块;提交用「正在为洛阳计入…」文案替代菊花 | P08 P05 |
| 金晕 Toast | 反馈 | 连对 3/5/8 触发,金色径向渐隐 600ms,不遮挡题干 | P04 |
04 入口 · 归属P01 – P03
这一组只解决一件事:3 秒内让用户知道自己代表哪座城。首屏不允许出现轮播 banner,主视觉只放一张整幅插画与一段话。
时序约束:P01 展示的是「登录并确认城市之后」的主场景;首访未登录态为纯品牌开屏,不得出现任何城市名、名次、个人贡献或参与率——这些数据此时尚未产生,提前出现即穿帮。
成语中国
城韵共鉴
每一句成语,都有它的城。
你答的每一题,都算进你的城。
整幅插画位唯一使用处;城砖纹仅作一次分隔,不叠加。 新用户空态:城市卡整块替换为「选择你的城市 · 16 城已入册」,不给「暂无数据」。 禁止:轮播 banner、倒计时催促、弹窗签到。
未找到你的城市?进入候补池预报名 ›
平台不推断归属地(不读手机号归属地、不读定位),不给推荐位、不做默认勾选,用户从 16 城列表里自己点。 只允许 16 座入册城市之一。城市未入册的用户先为其中一座出战,同时投候补池(P29),下届优先评估。 绑定即锁定唯一主场,1.0 全额、永不折算;折算只发生在另设的心仪城市(P11 / P12)。 搜索框常驻,列表最多 6 行后滚动,避免一屏塞 16 城造成选择瘫痪。 禁止:预选、默认勾选、按手机号归属地自动定位,或把「常住地」写成「代表城市」。
告知仍要「可算」不只「可说」:用 96.1 → 96.1 的全额入账证明「主场不打折」,而不是只写「系数 1.0」。 同时把「心仪城市 ×0.7」提前预告一行,用户在这里就知道后面还有一个选择要做,不会到 P11 才意外。 禁止:把心仪城市的 0.7 混进本页的折算说明——两件事发生在两个不同的城,混写必然引发客诉。
05 主线答题P04 – P06
答题页是全站最重的一页,但它要「安静」:不揭晓对错、不催促、不博弈。所有解释压力都后移到结算页,一次讲清。
选中即锁定并微动效,0.4 秒后自动下一题——减少一次点击就少一次流失。 倒计时环常态为红;最后 10 秒才转金色脉冲,用暖色提醒而非红色焦虑。 弱网横幅「已保存本题答案」常驻底部;切后台返回直接恢复到第 7 题。 横屏时全屏遮罩提示「请竖屏作答」,不渲染半破版题干。
五行必须复现方案公式 P_day=(B+T+S)×C_streak+M:(51.0+10.0+6.0)×1.3+9.0=96.1。前 3 行相加得小计 67.0,连续天数是乘数不是加分项(+20.1=67.0×0.3),末行任务分不过乘数。这是可验收项,不允许四舍五入到整数。 城韵诠释(主观题)不进这五行:它走独立流水,评审分 1:1 入账 G/A 并计入荣耀榜,否则「每天 20 题的分」就不纯了。 「只增不减 / 花掉不掉榜」两句固定常驻,字号不小于 10px、位置不可移动——它是用户理解成本最高处。 因果链第三段给出前后总分(128,364.4 → 128,460.5):绑定主场 ×1.0,96.1 全额汇入,前后差必须等于本轮得分,用户要能手算验证。折算只发生在心仪城市(×0.7),主场永不折算。 禁止:把双轨合并成「共 1,846 积分」一个数字。
柱状图缺卡日用「缺」字标注而非留空——留空会被读成加载失败。 错题仅本人可见,且不含他人作答分布(避免变相泄题)。
06 城市与榜单P07 – P09
城市页不是数据陈列,是动员工具。三榜只做位置告知,真正的转化点只有两个:「差 X 人拿满加成」与「我的贡献占比」。
答题占比
贡献构成用环不用饼:环内只放一个百分比,两个数在右侧列表给出,与总分吻合才允许上线。 城韵释义置于末位并与审校状态绑定,避免未审校内容把城市页变成营销位。
本城高亮但整行不可点(点进去会与底部 tab 的城市页重复),只在右侧显示名次变化。 「审核中」标签替代隐藏:数据可疑的城市降权展示但仍上榜,避免"突然消失"引发质疑。 降级态:服务不可用时原位展示最近快照 + 时间戳,不显示空白或转圈。
云游包那条必须显式标注「计入 G/A 但不计入本城」,否则会被误读为漏计。 改城历史用灰字保留并注明归属城,正面解释 FR-ACC-06,而不是悄悄消失。 冲正筛选独立成 tab,让"被扣过分的用户"能自己找到那条记录。
07 城际 CP 值P10 – P16
CP 是这个产品最容易被做成「抽卡」的地方,也是最不该做成抽卡的地方。界面必须让人看见双向——单方面刷分不该有奖励感。
这一组共 7 帧,按用户真实顺序排:先讲清「能选支持谁、不能选谁和谁配」(P10)→ 设 1 座心仪城市(P11)→ 每天三通道怎么支持(P12)→ 看这对 CP 的四维(P13)→ 云游(P14)→ 查记录与衰减(P15)→ 赛季末见证认证(P16)。原稿缺 P10 / P11 / P12 / P16,用户看不到「选择」与「支持」这两步。
全组共用一条口径:主场 ×1.0 永不折算,心仪城市 ×0.7;个人产出心动值,城市收到的同源心动值汇总后排出CP 值排行榜。任何一帧把两者混写,就算错。
答案是分两层:个人只能选心仪城市(1 座,只代表「我支持谁」),产出的是心动值;城与城之间的 CP 值是这座城市收到的、按来源城市拆分汇总后的心动值排名,个人指定不了(方案 5.5 / FR-CP-04)。 前三步里前两步属于用户,第三步是系统计算——界面必须画出这条边界,否则用户会以为「多刷几题就能配到想配的城」。 心动值不是「投票」:它是行为产出(云游 ×0.7、助威、核销),只有汇聚到城市层、按四维加权后才成为 CP 值,不能一人多票。 禁止:把心仪城市写成「CP 意向」「配对选择」「为它拉票」,也禁止把心动值直接等同 CP 值。 CP 值是对称的:由
Heart(A→B) 与 Heart(B→A) 合成后排名。排行榜可以按来源城市拆开看两个方向,但排序用合成值——否则「双方互为最高」这条认证前提会几乎无法成立。
只设 1 座:个人有好恶才有叙事,但一座心的容量只有一个——3 座会让「支持」退化成打卡清单,且每日 3 题云游额度被摊薄。 改选不迁移历史、也不清零连续天数:已发生的云游记录留在原城,衰减照算,但「换城」本身不算中断——否则规则形同虚设,用户第 7 天前不敢换。 列表按各城收到的心动值排序,只做选择辅助,不显示全国排名,避免变成第二张榜。 禁止:把心仪城市做成「CP 意向投票」或「拉票助力」,那就回到拉郎配。
三条通道产出同一个东西——心动值:云游(6.3)+助威(0.2)+核销(0.5)=7.0,四维加权后才是这一对城的 CP 值。不是三种打卡。 个人贡献必须可归因(FR-CP-09):6.3 / 0.2 / 0.5 三个数必须能在 CP 详情页对上,对不上即为口径错误。 云游得分 6.3 = 3 题 × 3.0 × 0.7:入个人 G/A,同时入泉州城市总分,不动洛阳一分。 衰减提示常驻(FR-CP-10):中断第 3 天起降 70%,第 6 天起降 30%——只作用于心动值,不动已到手的积分与城市分;换心仪城市不清零连续天数。 禁止:付费加速、礼物加成、把助威做成打赏。
四维之和必须等于 CP_Value(0.4×71+0.3×66+0.2×70+0.1×62=68.4),这是可验收项。 连线粗细随 CP 值变化,但不做动效呼吸,避免变成游戏化炫耀。 未认证态:连线转灰虚线 + 顶部文案「倡议配对,非官方 CP,仍可参与第四关」。 禁止:CP 抽卡、CP 送礼、CP 排行榜。
题组按主题切块(3 题一组),让 12 题看起来像"逛一座城"而不是"再做一遍卷子"。 衰减档位(3 天内 100%)直接显示在规则卡里,不做隐藏机制。
时间轴节点用实心/空心区分「计入」与「未计入」,不依赖颜色单独表达(无障碍)。 衰减口径写在本页而非只写在规则页,因为用户是在这里产生疑问的。 换心仪城市不清零连续天数(R-11 已定):衰减只对「未参与」计,不对「换城」计,否则「每 7 天可换」形同虚设。
必须同时给出:顺位、名额占用、是否递延、以及落选城的去向——三件事缺一件,申诉就会集中爆发。 倡议配对用灰虚线 + 「非官方 CP」标注,与认证态在视觉上不可混淆(FR-CP-11)。 未配对城市给「明年再投」的明确出口,而不是空白——空态即流失。 禁止:把落选写成「差一点就成功」,那是诱导继续投行为的博彩式话术。
08 闯关P17 – P18
五关是「月度节奏器」,不是积分来源。设计上要让人一眼看出:现在能打哪一关、下一关什么时候开、为什么我还不能打。
五关横向丝路长卷,一屏可见 3.5 关,制造"前面还有"的空间感;不加地图缩略图。 已通关显示金色印记 ✓,颜色用青绿而非红色,避免与"可挑战"抢注意力。 第二关门槛刻意用「近 30 日积分」而非累计,中途加入者才可达。
今天的洛阳,把这份"值得被抄写"的劲头放在了别处:一株牡丹的花期、一段龙门石窟的凿痕、一碗汤的清晨……
自动保存时间戳常驻输入框底部,给"会不会丢稿"一个明确答案。 评分维度公开,但不显示他人分数与排名,防止比稿式攀比。 计时环复用答题页组件(同尺寸同心跳逻辑),保持跨页一致。
09 我的P19 – P21
个人中心是本产品唯一需要「讲清两套积分」的地方。G 与 A 必须始终并列,任何"合并显示"的诱惑都要拒绝。
G 用主文字色、A 用红色:红色在这里表示"可以用",不是警告。 任务分上限直接写在进度条下方,避免"我做了 5 个任务为什么只加 10 分"。 申诉入口不藏在二级菜单,放在列表末尾常驻。
G 与 A 双列同排,一眼看出哪些操作只动一边(兑换只扣 A,答题两边都加)。 连续天数重置作为一条独立记录,而不是隐藏在小字里。 冲正 tab 单独存在,风控裁定后的扣减必须可被用户自己找到。
每枚证书带唯一编号,点「验真」进入公开校验页(供转发后被他人核验)。 「共 4,318 人达成,你是第 714 位」——稀缺性来自真实统计,不用「仅剩」式话术。 分享按钮在此页出现但默认不带分数,避免把荣誉变成攀比。
10 权益P22 – P25
权益区三条铁律:余额与额度常驻、缺额不隐藏只置灰、汇率变更必须 T-1 公示。这里每一条都直接对应客诉。
缺额不隐藏:券照常展示,右侧写「还差 2,054A」。隐藏会让用户以为本城没券。 汇率下调用一条常驻公示条承接(D3 要求的 T-1 公示),文案必须带「当前订单不受影响」。 库存 0 的券保留但置灰,附带「补货待定」,比直接消失更可信。 禁止:限时倒计时、"仅剩 3 张"式催单。
2 · 商户扫码核销,单券单次有效
3 · 不找零、不折现,逾期作废
6 位数字码字距 0.34em + tabular-nums,柜台隔 1 米也能读清(核销端的真实场景)。 「请勿截图转赠」常驻,配合动态码防复用(FR-RD-06)。 核销失败必须有客服入口,且带订单号直传,客服不用再问"您是哪一单"。
「谢谢参与」格子用金色描边而非灰色,避免挫败感过分突出。 消耗 50A 写在按钮上,不做成"免费抽一次"的假免费。 底注明确"不构成博彩",与合规声明互链(P26)。
项目页给出筹款进度,捐赠才有"参与一件事"的实感,而不是扣分。 匿名选项放正文可见位置,不做成二级设置。 凭证编号可验真,与荣誉墙共用同一套验真页。
11 兜底P26 – P28
兜底页是「出事后用户唯一还愿意相信你的地方」。三页共同原则:说清原因、给出动作、留住客服,且不暴露风控规则细节。
奖品为文化产品,单份价值 ≤ 5 万元,中奖公示 ≥ 7 天。
14 周岁以下默认学习模式;证件号不落库。
第一问就是「小城也能赢」——这是活动最大的认知门槛,也最容易被误解为"内定"。 每条可跳全文;全文页做锚点,不做 PDF 下载。 合规声明用灰底块收口,与正文问答区分层级,但不得折叠隐藏。
明确写「个人积分不受影响」,否则用户会以为整个账号被清零。 时间轴四段让用户看到处理进度,而不是"提交后石沉大海"。 主动写「不展示具体判定规则」——把不透明解释成保护机制,而不是隐瞒。
预报名页必须给「当下可以做什么」——把已入册城市绑为主场就能 1.0 参赛,别让用户白来一趟。 热度排名让预报名变成集体行动,为第二届积累"城市竞争"的势能。 标 P2,首届若不启用,需在 P02 的"未找到你的城市"处改成客服工单入口,避免死链。
11B 收官 · 赛季荣誉SEASON FINALE — P29
需求文档的页面地图止于 P24(候补池),缺了赛程结束那天的那一页。没有它,用户 31 天的答题、积分、徽章在 12-31 之后全部失去「被看见」的出口。本帧按 P05 的规格补齐:一个终榜数字、四项个人数据、三枚徽章、一段口径说明。
赛后 7 天发纪念章与证书 · 兑换通道延至 01-31
终榜数字必须自带算法与「外推」标注(284,448.3 = 128,460.5 × 31/14),否则开发会把样例数当真实数写死、运营会拿它对外发布。 城市总分与个人积分分列两处,不可互相推算:前者是人均口径(总分 ÷ 参赛人数),后者是累计口径(只增不减)。同一个「4,087.6」不能既当城市分又当个人分。 三枚徽章里「五关全通」置灰而非隐藏——未达成项必须可见,荣誉墙才构成下赛季的目标,而不是一张已完成清单。 参与天数写「29 / 31 天」而不是「29 天」:分母在场,用户才知道自己差在哪。 禁止做成「恭喜获得 XX 大奖」式促销页。本页只呈现事实与口径,不发奖、不催分享、不留悬念。
12 八页设计承诺DESIGN CONTRACT
以下 8 条不是建议,是验收项。任何一条被改掉,这个产品的公信力叙事就断了——包括"为了好看"而改。
| 页面 | 不可动的设计 | 为什么不能动 | 验收方式 |
|---|---|---|---|
| P04 | 不揭晓对错、不显示剩余机会、不红闪催促 | 答题期的任何博弈暗示都会把文化活动读成抽奖游戏 | 设计评审逐条签字;前端不得接入对错态样式 |
| P05 | 五行拆解之和 = 大字总分 | 手算对不上,用户立刻怀疑积分被吞 | 自动化用例:任何得分组合下五行求和等于总分(1 位小数) |
| P05 | G / A 并列 + 两句固定释义常驻 | 这是全场理解成本最高处,不能靠用户自己悟 | 两句话不可折叠、字号 ≥ 10px、位置不可移出首屏 |
| P05 | 因果链三段,第三段给出前后总分 | "我的分算数"必须可验证,不能只是口号 | 第三段必须含「↑N」与两个总分数字 |
| P07 | 参与率必须显示「差 X 人拿满加成」 | 这是把 C_participate 变成动员力的唯一界面 | 缺文案即不通过;测算口径需同时展示 |
| P13 | 四维用双向条,且四维加权 = CP_Value | 改用堆叠条会掩盖单向性,"双向奔赴"叙事崩塌 | 手算校验 + 禁止使用 stacked bar 组件 |
| P22 | 余额 / 汇率 / 日额度三数常驻,缺额置灰不隐藏 | "兑到一半没额度"与"以为本城没券"是两个高频投诉 | 三数在滚动时吸顶;缺额券保留在列表中 |
| P09/16 | 每条流水含来源 / 系数 / 时间 / 是否计入 | 明细是信任页,一条对不上全盘皆输 | 字段缺失的流水不允许上生产;抽查 10 条可复算 |
13 状态设计与无障碍STATES & A11Y
六类状态必须逐页标注,验收会看。本稿的重点页已内含空态/异常态示例,其余状态以本节为准。
| 状态 | 出现页 | 界面要求 | 文案示例 |
|---|---|---|---|
| 空态 | P01 新用户 / P21 无荣誉 / P13 无 CP | 给下一步动作,不给"暂无数据" | 「先选一座城,你的每一题都会算进它的名字」 |
| 加载态 | P08 榜单 / P05 提交 | 骨架屏 3 行;提交用进度文案替代菊花 | 「正在为洛阳计入…」 |
| 异常态 | P04 中断 / P22 兑换失败 / P23 核销失败 | 原因一句 + 补救动作一个 + 客服入口 | 「本题答案已保存,刷新后从第 7 题继续」 |
| 降级态 | P08 榜单服务不可用 | 展示最近快照 + 时间戳,不留白 | 「榜单更新中,以下为 14:15 数据」 |
| 冻结态 | P27 | 原因类别 + 影响范围 + 申诉入口,不透露规则 | 「个人积分不受影响,城市贡献暂不计入」 |
| 届末态 | 全站 | 30 天兑换倒计时 + 荣誉回顾入口;榜单只读 | 「本届已定格。你还有 30 天兑换 A」 |
▍无障碍与适老化
· 系统字号放大至 130% 不破版:P04 题干按 1.3 倍预留两行高度。
· 触控区 ≥ 48×48;选项高 ≥ 56。
· 图形信息(双向条、进度环、20 段进度)必须带
aria-label 文字等价,如「热度 71 分,本城 38.2,泉州 32.8」。· 榜单支持纯文本模式(去掉档位色块,改为文字「B 档」)。
· 对比度:正文 ≥ 4.5:1;金色仅用于 ≥ 22px 数字或图标,不用于正文。
· 不使用纯色块闪烁;连击光晕 ≤ 600ms 且可被系统「减少动态效果」关闭。
▍数字呈现统一规则
· A 值为整数(积分兑换以 A 为单位,不出现小数)。
· 所有榜单标注「数据更新于 hh:mm」;所有金额标注「100A = 1 元」当前汇率与生效日。
· 排名变化用 ↑↓ + 名次差,不用折线(5 个月数据点太少)。
· 数字用
font-variant-numeric: tabular-nums,保证榜单右对齐。· 同一数字在 P05 / P07 / P09 / P20 出现时必须同源:前端只读快照,禁止二次聚合。
14 待确认与风险盲点OPEN ITEMS
以下问题不解决,本稿不能进入切图阶段。前 5 项依赖需求文档的 D1–D7,后 7 项是本稿在设计过程中新发现的问题。
▍依赖上游决策(阻塞设计)
| 编号 | 问题 | 影响页面 | 若不定,会怎样 |
|---|---|---|---|
| D1 | 实名与地域数据来源 | P02 P03 | P02 要出 3 个分支(自动填充/自主申报/上传证明),当前只画了自动填充 + 推荐 |
| D2 | 容器形态(App 内 H5 / 独立域名) | 全局 | 底部 tab 与返回栈行为不同;分享落地页需不需要独立首屏未定 |
| D3 | 汇率下调触发方式 | P22 | 当前用「常驻公示条」承接;若自动调价需加变更前二次确认弹层 |
| D6 | 未成年人策略 | P02 P24 | 学习模式是独立流程还是 P02 的一个开关,决定要不要多一帧 |
| D7 | 榜单刷新粒度 | P08 P07 | 5 分钟快照可写"更新于 hh:mm";准实时则要改成"实时"并加抖动说明 |
▍本稿新发现的风险盲点(建议逐条过)
| 编号 | 盲点 | 建议动作 |
|---|---|---|
| R-01 | 倡议池没有独立页面。需求文档要求 K=2 下"必须做好倡议池页面的体验兜底",但页面地图 24 项里没有这一页 | 本稿用 P13 未认证态承接。若 D4 维持 K=2,建议补 1 帧「倡议配对池」或在 P07 增加引流位(P2 的 FR-CP-12 已提到首页推荐位) |
| R-02 | 16 城可一屏 10 行,100 城时榜单结构必须换(分档/搜索/分页),而这一点在届中改会造成用户认知断裂 | 首届即预留"分组 + 搜索"入口(可按 A/B/C 档折叠),把结构成本前置,避免第五届重做 |
| R-03 | 未登录围观态只出了登录态样式。分享落地流量大,围观态是首屏第一印象 | 补 2 帧:P08 围观态(隐藏答题入口,改为"代表你的城市参赛")、P07 围观态(隐藏贡献明细) |
| R-04 | 同一数字出现在 4 个页面(128,460.5 / 96.1 / 1,846.0 / 68.4),前端若各自聚合必然出现"三个页面三个数字" | 设计层明确:所有数值只读快照接口,页面不得做任何加减;接口返回 updated_at 并强制展示 |
| R-05 | 学习强国容器的返回栈:H5 内 tab 切换若用 pushState,会把容器返回键污染成"一路退回首页" | D2 确认后,tab 切换用 replaceState;答题流程用 pushState(需要"返回上一步"语义) |
| R-06 | 券包与抽奖的"价值公示"口径不一致:P24 有单份 ≤ 5 万,P22 券包未标总价值 | P22 券包补充"本券池预算 X 万元 / 已核销 Y"公示入口,与有奖销售合规口径对齐 |
| R-07 | 适老化 130% 字号下,P05 五行拆解 + 因果链同屏会溢出(当前已接近 812 满载) | 把"因果链"在 130% 字号下折叠为两段(合并 1、2 段),保留第三段的排名变化——它才是情绪落点 |
| R-08 | 心仪城市(P11,1 座)是本稿新增产品件,需求文档 FR-CP 系列无对应条款;若不补口径,开发会把它误做成「CP 意向投票」(已定:改称「心仪城市 + 心动值」,见 FR-CP-14) | 需求下一版补 FR-CP-14:心仪城市只决定云游入口与心动值写入对象;产出 ×0.7 入该城总分,心动值按来源城市拆分汇总后成为该城的 CP 值排行榜,个人不构成对 CP 值的直接投票 |
| R-09 | CP 四维里的「文化共鸣」由内容侧标签计算,运营若手工调整标签,历史 CP 值会漂移 | 标签版本号入快照,CP 值一律定格,不允许按当期标签反算历史值(与 FR-CP-06 的 P95 截断同一条纪律) |
| R-10 | 已定「不推断、纯自选」,于是没有技术校验兜底:用户可在 16 城中任选一座为主场并按 ×1.0 计分,等于给非居住城市刷分;31 天赛期内只错一次就锁死。(原「三源自述不一致」问题随「不推断」消失,风险转为无校验) | 不做事前拦截,改做事后异常识别:一人一号 + 设备绑定;同一设备/证件多城 1.0、某城新增账号在赛期后段集中爆发 → 进复核池。申诉只开「首次绑定后 48 小时内撤回」。文案不再宣称「主场=常住地」,只说「你选的城市」,不承诺无法验证的事实 |
| R-12 | 首届只有 16 个入册城市,绝大多数地级市不在册:非入册用户也要从 16 城中选 1 座并按 ×1.0 计分。风险不在规则,而在叙事——用户会问「我凭什么为这座城市出战」(已定:16 城任选 + 候补) | 已定:非入册用户从 16 城中自选 1 座出战,同时投候补预报名(P29)。文案统一说「你选择为哪座城市出战」,不写「代表所在区域」「就近绑定」,也不承诺与居住地一致。城市分按人均计,人多的大城不会因此更容易上榜 |
| R-11 | 心仪城市「每 7 天可换 1 次」与 P15 的衰减系数互相拉扯:若换城即清零连续天数,用户会在第 7 天前不敢换,规则形同虚设(已定:换城不清零) | 已定 ①:换城不中断连续天数——衰减只对「未参与」计,不对「换城」计。P11 按钮旁与 P15 口径页都要写明,避免客服口径不一 |
| R-13 | 「心动值」与「CP 值」两个概念极易被混用:前者是个人产出的行为量,后者是城市层按来源城市拆分汇总后的结果。混写会让用户以为「我刷心动值就是在刷 CP 值」,进而被包装成拉票 | 全站锁死三层口径:心仪城市(选谁)→ 心动值(我产出多少)→ CP 值排行榜(该城按来源城市拆分汇总后的排名)。出现「为某城拉票」「CP 意向」「心动值=CP 值」即为口径错误,验收逐帧核 |
2 · 本稿 29 帧确认版式后,按 23 页口径裁减 P03 / P28,交前端切图。
3 · 同步产出「只读快照数字规范」一页给后端,这是 R-04 的唯一根治方式。