Wellness Companion 健康落地页设计｜版式拆解与提示词

关于这个模板

Wellness Companion 用一份收录下来的需求简报，解决了面向健康或身心类产品做落地页时的问题。颜色只用了深蓝色 #1A1A1E 打底，正文排的是 Helvetica, Arial。交付形式是 React 和 Tailwind CSS，收录于 1440x1080，所以画幅在任何一行代码写下去之前就已经定好。动效只限于0.5s 的过渡、cubic-bezier(0.22, 1, 0.36, 1)、一段循环视频打底。当健康的落地页必须扛住一次文案改动、又不能重做设计时，它最有用。下面引用的每一项都是那份简报里的数值，从 1440x1080 的画幅一直到最小的间距档。收录的提示词记录于 1440x1080，所以这一页引用的每个数值都能追回到它。

适合谁

这一版落地页服务的是需要一屏证据、证明健康的文案能扛住 5.9s 的循环视频的创始人。
用提示词给落地页提需求的人，会把这份 4,095 字符的提示词当作起点。
给要改写一版落地页、标题长度又得和Wellness Companion一样的内容负责人用。

包含哪些内容

需求简报点了名. 需求简报把数值点了名：12px 间距、0.5s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。清单里最小和最大的两个值，划定了这套构图的取值范围。先量，再调。
循环就是背景板. 素材是一段 5.9s 的片段，按 cover 裁进 1440x1080 的画幅，任何宽度下都不会出现黑边。按 1440x1080 或更宽的尺寸导出，cover 裁切就继续成立。
结构交给卡片. 栅格替你把阅读顺序排好了：每块面板分量相同、各讲一个观点，用 Helvetica, Arial 的小字号排，结构始终看得见。面板内的小标题比自己那块正文高一档，而不是比页面标题低一档。
数值一路带进构建. 需求简报把数值点了名：12px 间距、0.5s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。清单里最小和最大的两个值，划定了这套构图的取值范围。搬版式的时候把数值一起搬走。

动效与交互

只有指针状态，没有别的

页面只在能被操作的地方给出回应：按需翻页浏览内容的滑块组件，除此之外什么都不动。可交互目标大到能点，指针处理在这些目标上保持一致。这份参考在 1440x1080 下收录。

环境动效交给循环

整个环境层就是一段 5.9s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。

Wellness Companion 里什么在动

这里的每一次过渡都挂着一个数字。所以0.5s 的过渡、5.9s 的循环视频可以按值逐个移植，而不用靠手感重调。这个落地页里没有为动而动的动画。

把 Wellness Companion 当规格书读

截图告诉你页面长什么样，需求简报告诉你为什么。12px 间距、0.5s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线把这两者之间的差补上。这个落地页里没有任何一处依赖默认值。

健康或身心类产品能从这里得到什么

一个现成的首屏和这个落地页用的是同一批零件。区别在于这里按标题、公告徽标、数据行、卡片栅格、倒计时排序、用12px 间距、0.5s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线去量，所以这一屏读起来是一条序列，而不是一个容器。 Wellness Companion 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。