实时预览 · 可滚动
优势
- 首屏即完成"差异化是什么"的说服,不靠文案堆砌
- 五张海报对应一条完整转化链:免费→匹配→缺口→复用→隐私
- 氛围光球 + 逐级入场 + 数字滚动,动效密度最高
代价
- 页面短(2400px),深度内容需另开二级页
- 动效多,低端安卓机需注意降级
十套原型共享同一套业务流程与交互引擎(上传 → 核对 → 诊断 → JD 匹配 → 改写 → 付费 → 导出),
但在布局骨架、视觉语言、导航结构、叙事顺序四个维度上互不重复。
每一套都是单文件 HTML,纯原生 CSS/JS,无外部依赖,双击即可打开。
避免"换个皮肤"的假多样:每套至少在一个维度上与其余九套结构性不同。
| 维度 | 覆盖情况 |
|---|---|
| 布局骨架 | 单列纵向 / 悬浮层 / 双栏文字流 / 左栏+右滚 / 关卡地图 / 聊天流 / 12 列拼贴 / 指标栅格 / 左右分屏 / 中央竖轴 —— 十套零重复 |
| 导航结构 | 顶部进度条(01/02/03/05/06/07/08)、左侧常驻侧栏(04)、分段柄(09)、中轴轨道(10) |
| 叙事顺序 | 结果前置(01/08)、过程前置(05/10)、随时可跳(04/09)、线性推进(06) |
| 操作反馈 | 数字滚动 / 环形生长 / 骨架屏 / 打字机 / 关卡点亮 / 中轴填充 / 分割拖拽 / 彩带落屑 / Toast / 抖动 |
这不是"挑一个最好看的"。十套是十种产品假设的具象化, 真正要验证的是:用户走完整个流程的意愿,来自哪个环节的什么感受。
01 承担"第一眼看得懂",09 承担"核心差异化看得见"。两者拼装成一个完整站点的两个区段。
04 解决"我做到哪了",10 解决"还剩几步"。适合把"多岗位海投"做成主要使用场景。
"左右对照 + 拖动分割柄"是最难被抄、也最能直接证明"JD 定向匹配"价值的交互形态。