10 套互斥骨架 · 全部可交互

同一套功能,十种完全不同的做法。

十套原型共享同一套业务流程与交互引擎(上传 → 核对 → 诊断 → JD 匹配 → 改写 → 付费 → 导出), 但在布局骨架、视觉语言、导航结构、叙事顺序四个维度上互不重复。
每一套都是单文件 HTML,纯原生 CSS/JS,无外部依赖,双击即可打开。

10
套互斥骨架
7
个功能区块 / 套
0
外部依赖 · 单文件
20/20
桌面+移动端冒烟测试通过

四个差异维度是怎么错开的

避免"换个皮肤"的假多样:每套至少在一个维度上与其余九套结构性不同。

维度覆盖情况
布局骨架单列纵向 / 悬浮层 / 双栏文字流 / 左栏+右滚 / 关卡地图 / 聊天流 / 12 列拼贴 / 指标栅格 / 左右分屏 / 中央竖轴 —— 十套零重复
导航结构顶部进度条(01/02/03/05/06/07/08)、左侧常驻侧栏(04)、分段柄(09)、中轴轨道(10)
叙事顺序结果前置(01/08)、过程前置(05/10)、随时可跳(04/09)、线性推进(06)
操作反馈数字滚动 / 环形生长 / 骨架屏 / 打字机 / 关卡点亮 / 中轴填充 / 分割拖拽 / 彩带落屑 / Toast / 抖动
11

海报首页 Hero Poster

HERO POSTER
布局骨架大卡片海报墙 · 7/5 + 5-4-3 阶梯
配色
字体 / 圆角无衬线 16px / r=20
记忆点核心优势即视觉主体 · 滚动逐级入场
实时预览 · 可滚动
优势
  • 首屏即完成"差异化是什么"的说服,不靠文案堆砌
  • 五张海报对应一条完整转化链:免费→匹配→缺口→复用→隐私
  • 氛围光球 + 逐级入场 + 数字滚动,动效密度最高
代价
  • 页面短(2400px),深度内容需另开二级页
  • 动效多,低端安卓机需注意降级
01

极简白 Minimal Pro

MINIMAL PRO
布局骨架全宽单列 · 超宽留白
配色
字体 / 圆角无衬线 16px / r=8
记忆点分数即焦点 · 单列纵向叙事
实时预览 · 可滚动
优势
  • 认知负荷最低,任何人都看得懂
  • 分数环是天然视觉锚点
  • 实现最简单,1 天可完成
代价
  • 缺差异化,像"又一个工具站"
  • 纯静态,留存激励弱
  • 首屏信息密度低
02

暗黑实验室 Dark Lab

DARK LAB
布局骨架悬浮 HUD · 霓虹发光
配色
字体 / 圆角无衬线 15px / r=10
记忆点实时状态条 · 四角括号 · 扫描线
实时预览 · 可滚动
优势
  • 科技感强,"AI 在算"的感知最足
  • 悬浮 HUD 持续反馈成本
代价
  • 暗色对中年求职者不友好
  • 长时间阅读疲劳
  • 打印/截图投递场景违和
03

杂志排版 Editorial

EDITORIAL
布局骨架宋体衬线 · 首字下沉
配色
字体 / 圆角宋体衬线 17px / r=0
记忆点罗马数字章节 · 下划线输入框
实时预览 · 可滚动
优势
  • "专业文档"气质,建立信任快
  • 和"简历"这个物件的调性最契合
代价
  • 移动端宋体渲染不稳
  • 表单元素朴素,操作反馈弱
  • 年轻用户觉得老气
04

左侧栏工作台 Workbench

WORKBENCH
布局骨架左固定侧栏 + 右滚动
配色
字体 / 圆角无衬线 15px / r=8
记忆点7 步导航常驻 · 进度可见
实时预览 · 可滚动
优势
  • "我做到哪了"永远可见,长流程最不易迷路
  • 天然适合多岗位版本管理
  • 侧栏可扩展成历史记录
代价
  • 移动端要整体降级为底栏
  • 占用横向空间,内容区变窄
05

关卡地图 Quest

QUEST
布局骨架游戏化 · XP 成长
配色
字体 / 圆角无衬线 15.5px / r=14
记忆点等级圆章 · 星星 · 立体按钮
实时预览 · 可滚动
优势
  • 完成感最强,最能推动走完全程
  • 对 00 后应届生吸引力明显
代价
  • 和"求职严肃场景"有调性冲突
  • 可能被 HR 视角视为不专业
06

对话流 Chat

CHAT
布局骨架聊天流 · 气泡推进
配色
字体 / 圆角无衬线 15.5px / r=18
记忆点AI 头像 · 打字机光标
实时预览 · 可滚动
优势
  • 交互范式已被 ChatGPT 教育,零学习成本
  • "AI 顾问陪你改"的心理暗示强
代价
  • 长文本在气泡里可读性差
  • 不易并排对比多岗位
  • 不适合展示结构化报告
07

Bento 拼贴 Bento

BENTO
布局骨架12 列栅格拼贴
配色
字体 / 圆角无衬线 15px / r=16
记忆点异形卡片 · 玻璃拟态
实时预览 · 可滚动
优势
  • 视觉最新,截图传播性好
  • 信息密度高,一屏放得下全部结论
代价
  • 栅格排布维护成本高
  • 移动端退化严重
  • 信息层级容易失焦
08

数据仪表盘 Dashboard

DASHBOARD
布局骨架指标条 · 环形分数
配色
字体 / 圆角无衬线 13.5px / r=6
记忆点KPI 指标条 · 网格背景
实时预览 · 可滚动
优势
  • "简历是数据问题"的框架最清晰
  • 指标条利于横向比较多个版本
代价
  • 信息密度大,非数据岗会觉得杂
  • 字号小,中年用户吃力
09

分屏对照 Split

SPLIT
布局骨架左右 50/50 · 可拖分割柄
配色
字体 / 圆角无衬线 15px / r=4
记忆点逐行 diff 高亮 · 缺口定位
实时预览 · 可滚动
优势
  • 把"差在哪"做到最直观,是核心差异化的最佳载体
  • 拖动交互有探索感,停留时长高
代价
  • 移动端必须堆叠,失去对照意义
  • 首屏看不到分数,冲击力弱于 01
10

时间轴纵向 Timeline

TIMELINE
布局骨架中央竖轴 · 左右交替
配色
字体 / 圆角无衬线+衬线标题 / r=12
记忆点中轴进度填充 · 节点逐个点亮
实时预览 · 可滚动
优势
  • "整条流程还剩几步"感知最强,最利留存
  • 滚动推进带来持续参与感
代价
  • 页面长,跳转节点要额外导航
  • 左右交替在窄屏失效

怎么选

这不是"挑一个最好看的"。十套是十种产品假设的具象化, 真正要验证的是:用户走完整个流程的意愿,来自哪个环节的什么感受。

保守方案
01 极简白 + 09 分屏对照

01 承担"第一眼看得懂",09 承担"核心差异化看得见"。两者拼装成一个完整站点的两个区段。

留存优先
04 工作台 + 10 时间轴

04 解决"我做到哪了",10 解决"还剩几步"。适合把"多岗位海投"做成主要使用场景。

差异化优先
09 分屏对照

"左右对照 + 拖动分割柄"是最难被抄、也最能直接证明"JD 定向匹配"价值的交互形态。