适用设计场景
- 招聘落地页在说明应聘方式之前先介绍雇主形象。
- 招募活动官网将视觉主题与加入方式及应聘信息相结合。
- 滚动品牌故事页将长篇叙事组织为若干个独立的视觉场景。
招聘页面亮点
- 八个滚动场景从驾驶舱介绍到应聘流程，依次展开。
- 统一的月球视觉主题月球、轨道路径与像素图形贯穿各个场景。
- 带编号的应聘流程图四个编号节点将流程转化为一条可视化路线。
招聘网站设计预览
1 / 8
用八个场景讲述招聘页面的故事
这份 Kimi 招聘页重建案例并非一个内容依次经过视口的长页面，而是将八个场景叠加在同一视觉舞台上，并通过滚动进度驱动各场景的不透明度、位置、缩放与模糊值的变化。其效果更接近在演示文稿帧之间切换，而非浏览一个常规的职位列表页面。
这一区别既解释了它在招聘网站设计上的视觉吸引力，也说明了其局限性。场景序列可以营造强烈的氛围，但实用信息必须在过渡动效之外保持可访问。希望查看应聘流程的访客，与探索品牌故事的访客，面对的是截然不同的任务。
| 序列段落 | 呈现内容 | 需保留的信息 |
|---|---|---|
| 介绍与月球场景 | 组织身份与月球探索背景。 | 确保即使在滚动之前，访客也能识别这是一个招聘页面。 |
| 加入与自定义职位 | 加入邀请与"自定义职位"入口。 | 用文字而非仅靠视觉隐喻来说明可用的下一步操作。 |
| 应聘流程与结尾 | 四节点流程图与最终邀请。 | 故事结束后，确保应聘指引和真实目标链接仍可访问。 |
滚动位置如何转化为场景切换
源代码将页面可滚动的行程映射到 0 到 7 的位置，对应八个场景各一个。当某个场景最接近当前位置时，它即成为当前场景。相邻场景在切换期间可保持部分可见，这正是在两个节点之间截图时画面可能显得柔化或重叠的原因。
| 滚动位置 | 源代码的处理方式 | 读者所见 |
|---|---|---|
| 恰好停在某个场景 | 该场景不透明度达到 1，基于距离的模糊值降至 0。 | 一帧稳定的画面，适合阅读或截图。 |
| 滚动至下一场景的中途 | 相邻两个场景的不透明度均为 0.5，模糊值约为 1.3px。 | 混合过渡状态，并非任何一个区块的清晰截图。 |
| 超出该场景 | 该场景不透明度降至 0，更近的场景成为当前场景。 | 前一个构图淡出，而非像普通文档一样继续向下滚动。 |
轨道式应聘路径上的四个编号节点
应聘场景将流程转化为一条月球路线。节点 1 标有电脑图标与"提交"字样，位于画面中下方附近；节点 2 在其左侧，节点 3 和 4 沿轨道上方延续。由于几何形状并非常见的从左到右时间轴，数字编号承担了引导阅读顺序的职责。
路径串联节点，编号标明顺序
轨道线条说明四个节点属于同一流程，但它本身并不指示从哪里开始或沿哪个方向行进。超大尺寸的数字标记补充了这一缺失的顺序。同样的区别在蜿蜒的引导流程或插画式流程图中同样适用。
插图并非完整的操作说明
该场景标注了应聘流程，但所提供的重建版本将其渲染为图片。一个可运行的页面仍需将实际的步骤名称、要求和目标链接以文字形式呈现，且这些内容在手机上竖向排列时也应保持可读。
视觉重建在哪些地方需要真实的 HTML
OpenDesign 将此作为黑客松官方示例和视觉研究案例制作，而非 Moonshot 的委托项目。这一区别在实现层面清晰可见：场景 2 至 8 均为所提供的参考图片，且这些图片标记了 aria-hidden。切换当前场景并不会使图片内部的标签以可访问文本的形式呈现。
将标题置于背景图片之外
在可运行的版本中，场景的标题和说明文字应保持为可选中的文本。背景可以承载驾驶舱、星空或月球的视觉效果，但不应成为应聘说明的唯一载体。
将动效与信息访问分离
在减少动效时提供稳定、可读的布局，并提供直达流程的路径。这是一项改进建议，并未在所提供的重建版本中得到验证。访客不应非得掌握滚动动效才能找到下一步操作。
这份招聘网站设计案例展示了什么
本案例展示的是场景构图与滚动联动动效，而非实际在招岗位或可运行的应聘后端。案例中刻意采用的像素化参考美术风格并非矢量图，导出原始分辨率也无法消除这一风格限制。请将其用于研究叙事结构与过渡机制；如需实际应聘信息，请访问雇主的官方渠道。
如何在 OpenDesign 中创作招聘网站设计
明确故事内容与实用信息
从贵组织自身的介绍、加入方式和应聘步骤出发。在请求视觉主题之前，明确哪些信息已确认、哪些仍为占位符。
建议提示词为一个虚构的研究工作室创作招聘网站设计。在介绍、加入方式、团队故事、应聘流程和结尾邀请中统一使用月球探索主题。保持招募导航标签的字面含义与可读性。将标题和带编号的流程构建为语义化文本，而非单张图片。使用带标签的占位职位和禁用的占位应聘操作，不得暗示存在实时招募后端。包含一套可读的减少动效布局。
先打磨一个场景过渡
请 OpenDesign 连接介绍场景与下一个场景，同时保留可读的静态状态。确认过渡效果不会遮蔽招聘目的或延迟访客获取加入信息，再将该效果推广至整个页面。
在不借助视觉隐喻的情况下测试流程
以纯文本形式阅读应聘步骤，并检查其在移动端的排列顺序。确认实际链接指向真实目标，占位符已明确标注。只有在这之后，再为信息添加轨道路径或其他装饰性处理。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
