06B · 令牌试片

示例页面 —— 用 06 的令牌画出来的 6 个真实屏幕

这一份不是最终高保真,是拿规范的色值、字号、间距、圆角把页面画出来,先看质感对不对。 全部为 H5 客户端(390×844)。每屏下面标了它到底在验证哪条规则。数值一律来自后台配置,此处只作展示。

09-28 下午更新:加入「色块层级」——关键区域用浅品牌色填充(深色只做小面积点缀)、 标题马克笔高亮、主卡柔和投影;页面顶部的淡绿渐变已去掉。同步已写回 06 规范。

09-28 二次更新(补图形层):上一版解决了"颜色太平",这一版解决"缺图案"。37 个统一规格的图标 (24 网格 / 1.6 描边 / 圆头 / currentColor,与 07 第 01B 章同一套)铺进六屏:列表行有了图标起点、 完成步骤打勾不打数字、队列状态有图形、下载与复制按钮带图标。 颜色一个没动,补的全是形状。

09-30 三次更新(补点缀撞色):同色系深浅绿 + 灰这套底色,层次够但眼睛没有落点—— 整屏读下来是一片绿。这一版加两组点缀色:珊瑚橘管"当前/强调"(当前步骤、扣分数字、最该看的那张卡), 暖黄管"数字/深底对撞"(马克笔、预扣中的那一格)。两组都不承担语义、不新增名额, 与实心色块共用"一屏 ≤4"那条线。用法与禁用条件见 07 第 1B.9 节。

brand-600 #0F6E63 brand-700 #0A554C brand-50 #E7F4F1 accent-600 #D14A32 accent-700 #B4402E accent-100 #FAD8CE mark-600 #F2B33D mark-100 #FBE8C8 画布 #F7F6F3 凹陷 #F1EFEA 描边 #E6E3DC ink #1C1B18 ink3 #6F6B62 success #2E7D4F warning #9A5B09 danger #B3261E info #1F5FA8

A1 落地页 唯一目标是注册

品牌调性定调:暖中性底 + 单一强调色,无渐变无插画堆砌。
9:41
好出片
不用出镜,
也能做人设 IP。
给一张照片、录 30 秒朗读,剩下的交给它。
一条能直接发的口播视频。
声音是你自己的 念 30 秒,复刻成你的音色
选题文案它给 不用想这周发什么
画面长你的样子 配色、字体、图片都能换
已有账号,直接登录

这屏在验证

  • 主 CTA 只有一个,落地页首屏除它之外全是辅助信息
  • 「领 30 积分」数值由后台配置下发,界面不写死
  • 样片入口不放在首屏主 CTA 之前——跳出去就回不来

C2 文案确认 闸门 + 扣分确认

这一步是整条链路的闸门:文案不确认,后面的积分一分都不会扣。
9:41
选题 2文案 3画面 4音色 5生成
本篇选题 换一个
社保断缴三个月,到底会有什么影响
文案(可以随便改,不扣积分) 428 字

很多人以为社保断缴只是少交几个月,其实真正麻烦的是它背后连着三件事。

第一件是医保。断缴的次月起,住院报销就停了,这时候生病要全额自己出。第二件是买房资格,很多城市要求连续缴纳,断一次就要重新算。

确认生成成片?
10积分
当前剩余 20 积分,生成后剩余 10 积分

这屏在验证

  • 扣分前必须显示「本次扣 N,剩余 M」,且二次确认
  • 文案编辑与选题重生成属免费项,界面上要明说「不扣积分」
  • 弹层是父页面的状态,不单独占一条路由

C4 画面与样式 分镜与配色合并成一页

移动端多一步就是多一次流失,所以模板与配色同屏。
9:41
选题 文案 3画面 4音色 5生成
社保断缴三个月,
到底会有什么影响
如真 · 财税
预览在你的手机上实时渲染,改一下立刻能看,不用等服务器。
画面只是帮你把话说清楚,不是抢注意力。
信息密度优先,动效克制。
竖屏 1080×1920 底部留白 320px

骨架 · 选一个
大字要点
清单体
图文卡
口播稿
对话体
配色 · 12 组里选
青绿
赭石
藏青
绛红
字体组合
思源宋体 · 标题 思源黑体 霞鹜文楷

这屏在验证

  • 分镜 + 配色同屏,不再拆成两页
  • 预览必须本地渲染——服务端渲染这两个页面就废了
  • 模板与配色全免费;自定义模板的额度提示与购买入口放在「我的模板」里,不在这屏
  • 可换的只有三个口子:骨架、配色、字体;默认模板不可破版

C5 选音色 全站唯一的音频试听位

声音像他是地基。音色必须在花积分之前能被听到。
9:41
选题 文案 画面 4音色 5生成
我的声音 已复刻 · 使用中
如真 · 本人音色
0:09
系统默认声音库 也能直接出片
沉稳男声
适合法律、财税、医疗
0:12
清晰女声
适合知识科普、职场
0:10
建议复刻你本人的声音,观众认的是你的语气。不拦着,你也可以先用默认声音试一条。

这屏在验证

  • audio 只允许出现在这里,其余页面零音频元素
  • 音色一律不提供下载——能在线听到就够了
  • 未复刻声音不阻断出片:默认选中一个音色,只提示不拦截
  • 「建议复刻」是不阻断的提示条,不压在按钮上

C6 生成中 取消文案随状态变

排队最痛的不是等,是人不敢走开。所以位次要看得见,取消要说得清。
9:41
可用积分
30
预扣中
13
预扣中的积分在成片交付后才结算;生成失败会原路释放。
1 社保断缴三个月,到底会有什么影响
生成中 · 62% · 已用 1 分 20 秒
2 为什么我不建议刚毕业就创业 排队中
第 1 位 · 预计 8 分钟
年终奖到底该不该并入综合所得 已完成
云端队列按平台并发依次出片,不能插队。你可以关掉页面,好了会通知你。

这屏在验证

  • 余额拆「可用」与「预扣中」两栏——只显示一个总数,用户会认定被吞了
  • 取消按钮文案随状态变:排队中可退回,生成中不退回,禁止统一写「取消」
  • 进度与位次可视化,禁止无意义转圈
  • 全站禁止出现 hold / settle / release 这类后端术语

C7 结果与下载 站内不播放

下载是用户唯一能看到并听到成片的途径,所以它必须最显眼,且点之前零弹窗。
9:41
社保断缴三个月,
到底会有什么影响
00:42 · 竖屏
已交付 青绿 · 大字要点 如真 · 本人音色
完整字幕 可复制
00:00很多人以为社保断缴只是少交几个月,其实真正麻烦的是它背后连着三件事。
00:08第一件是医保。断缴的次月起,住院报销就停了,这时候生病要全额自己出。
00:19第二件是买房资格。很多城市要求连续缴纳,断一次就要重新算。
00:31第三件,是很多人体检和报销时才发现的——慢病门诊待遇也跟着断。
文件保留 7 天,到期前会提醒你一次。下载后就不受影响了。

这屏在验证

  • 零 video 标签、禁用 GIF:预览只有封面 + 静态关键帧 + 字幕全文
  • 下载按钮是这屏唯一的主按钮,且点击前零弹窗
  • 「复制标题与文案」是留的最后一手——站内不能播放,用户没法边看边写
  • 作品留存 7 天,与「已成片永久可下载」不冲突:一个讲存储时长,一个讲权限
说清楚这份的边界
这是令牌试片,用途是确认视觉调性,不是最终高保真。里面所有页面都是静态的,点不动。 07-UI 组件库已交付(本页六屏的图形与它第 01B 章完全同源);下一份 08-高保真原型 才是可点击的完整链路,那一份出来时才会跑浏览器渲染、200% 缩放、键盘焦点、真机触摸热区这几项实测。