关于这个模板

把 Talent Collective 当作落地页规格书来读:这些数值在页面动手之前就先写下来了。配色控制在灰色 #BAB8B5 打底之内,字体用 Geist。交付形式是 React 和 Tailwind CSS,收录于 1904x1080,所以画幅在任何一行代码写下去之前就已经定好。动效是700ms 的过渡、一段循环视频打底,克制到文案依然是主角。当创意机构与工作室的落地页必须扛住一次文案改动、又不能重做设计时,它最有用。下面引用的每一项都是那份简报里的数值,从 1904x1080 的画幅一直到最小的间距档。收录的提示词记录于 1904x1080,所以这一页引用的每个数值都能追回到它。

适合谁

  • 产品市场的人需要落地页在背后有6.5s 的循环视频时依然好读。
  • 用提示词给落地页提需求的人,会把这份 9,583 字符的提示词当作起点。
  • 给要改写一版落地页、标题长度又得和Talent Collective一样的内容负责人用。

包含哪些内容

  • 一行到底,不做抽屉. 字标占住左边缘,链接从它右边排开,全部用 Geist 排,所以这条导航条属于下面的页面,而不是另一套系统。导航条悬在 1904x1080 的构图上,自己没有底色,素材因此从它下面通到两边。
  • 尺寸钉在需求简报里. 这里没有一样东西是靠眼睛估的。规格钉死了 40px 间距、700ms 的过渡,剩下的版式都从这些值推导出来。数值是从收录的提示词里抄下来的,不是反推的,重渲染也不会丢。
  • 导航条上不留多余. 字标占住左边缘,链接从它右边排开,全部用 Geist 排,所以这条导航条属于下面的页面,而不是另一套系统。导航条悬在 1904x1080 的构图上,自己没有底色,素材因此从它下面通到两边。这条导航只有几个元素,不用组件库也能重建。
  • 要片段,不要插画. 一段静音循环视频按 1904x1080、6.5s 铺满画幅,以 cover 裁切,文案叠在它上面。需求简报不允许在视频上压叠加层,所以画面不会被压灰。循环短到 6.5s,眼睛会把它读成肌理,而不是一条时间轴。

动效与交互

短而写明的时长

悬停、按下和聚焦都在 700ms 内完成,界面因此显得即时。同一组时长在控件之间复用,交互因此像一套系统。反馈的时间要卡准。

是循环,不是时间轴

环境动感来自 1904x1080 的 6.5s 循环,而不是滚动特效,页面因此保持平静,文字也更好读。片段短到能循环而不露接缝,这比它的分辨率更重要。拍摄或导出按 1904x1080 或更宽的尺寸。

Talent Collective 怎么安排第一次阅读的顺序

一屏、一个行动,中间是导航、标题、数据行、功能列表、页脚。需求简报把这个顺序钉死,而不是把首屏交给一摞板块自己决定。创意机构读者先看到主张,再看到选项。这份参考在 1904x1080 下收录。

在 Talent Collective 里先改什么

可复用的是构图,题材归你。保住40px 间距、700ms 的过渡,把文字、素材和品牌标识换掉。新加的元素如果不能帮助说清产品主张或下一步动作,就该挪到折叠线以下。

这个落地页怎么重排

宽屏下构图是密的,窄屏下字阶是流体的,而不是阶梯式的。两种状态需求简报都写了。窄屏下没有丢掉任何重要的东西。这份参考在 1904x1080 下收录。

常见问题

复制 Talent Collective 的需求简报,我能拿到什么?

简报是从页面上收录下来的,共 9,583 个字符,覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本,发给 Studio 则会用同一份描述把请求预先填好。

能用别的技术栈重建 Talent Collective 的落地页吗?

Talent Collective 是用 React 和 Tailwind CSS 构建的,条目标注只是说明出处。简报写的是位置、尺寸和时长,所以任何能设字体、能摆元素的前端框架都能重建。

Talent Collective 能用在客户项目里吗?

简报是描述,不是转授权别人素材的许可。结构和数值可以留下,素材和品牌标识要换成你自己的;客户问起版式出处时,说明来源即可。这份参考在 1904x1080 下收录。

在 Studio 里复刻

先拿参考,再到 Studio 里替换内容与视觉细节。