Orbit Flora 生活方式落地页设计｜版式拆解与提示词

关于这个模板

Orbit Flora 留住了自己的决策链：生成这个落地页的需求简报有 9,402 个字符。整套配色是 #161616 打底、#FFFFFF 给文字、洋红色 #FD86DB 承担强调色，页面字体是 Inter。交付形式是单个组件，收录于 1454x1080，所以画幅在任何一行代码写下去之前就已经定好。动效是620ms 的过渡、cubic-bezier(.16, 1.3, 1)、一段循环视频打底，克制到文案依然是主角。当生活方式的落地页必须扛住一次文案改动、又不能重做设计时，它最有用。收录的提示词记录于 1454x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1454x1080 的画幅一直到最小的间距档。

适合谁

这个落地页服务的是那些得向没参加启动会的人解释 cubic-bezier(.16, 1.3, 1) 缓动曲线的团队。
在交接说明里写上单个组件，下一次构建就不必再从页面里倒推。
把落地页的结构整段借过来，再逐行对着 900px 断点换文案。

包含哪些内容

顶栏：字标、链接、一个操作. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #FD86DB 操作，全部压在需求简报最小的字阶上。标签短到能在 900px 下一行放下，当前项用字重标出，而不是加一个胶囊底。这条导航只有几个元素，不用组件库也能重建。
视频压在最底层. 1454x1080 的视频在文案后面循环播放 8.2s，静音、行内，两者之间没有任何色罩层。自动播放不可用时，1454x1080 的封面帧撑住构图，版式不会塌。
字阶是钳制的，不是分档跳的. 需求简报给标题用的是 57px 到 34px 的 clamp，长句子才不会在尴尬的位置折行。因为字阶是钳制过的，标题行在断点之间从来不会跳变。
一套字，克制着用. 字体是按职责分配的，不是混着用：Inter 同时承担展示文字和界面文字。展示字体只用一个字号，不会自己跟自己抢。就算换字体，也保留这些字号档位。

动效与交互

纵深由渲染给出

页面纵深来自渲染，而不是来自插画：一块 WebGL 画布，画幅因此不靠图片撑。周围的界面保持扁平，纵深因此全部由渲染承担。这份参考在 1454x1080 下收录。

全部动画预算

控件里的动效短且可重复：每次状态变化都是 620ms。写明的时长只覆盖状态变化，反馈正是这套动效里被规格管住的部分。

Orbit Flora 怎么安排第一次阅读的顺序

严格的顺序会让你以后失去灵活性。在折叠线以上加一个板块，55vh 高的板块、34px 间距就得重新切一遍，因为这条序列是承重的，不是装饰。生活方式读者先看到主张，再看到选项。

在 Orbit Flora 里先改什么

大多数人从强调色开始改。不如从主张开始：重写那行展示字，再在你的素材上重测洋红色 #FD86DB。在重新配色之前，先把文案和素材改完。

这份生活方式需求简报为什么站得住

一个现成的首屏和这个落地页用的是同一批零件。区别在于这里按导航、公告徽标、数据行排序、用55vh 高的板块、34px 间距、620ms 的过渡、cubic-bezier(.16, 1.3, 1) 缓动曲线去量，所以这一屏读起来是一条序列，而不是一个容器。它给生活方式读者的是一条通向主张的最短诚实路径。