Aurex Finance 金融科技落地页设计｜版式拆解与提示词

关于这个模板

Aurex Finance 展示了为金融科技产品做落地页的一种做法，并把生成它的说明一起公开。整套配色是黑色 #000000 打底、白色 #FFFFFF 给文字、灰调蓝色 #AFDDFF 承担强调色，页面字体是 Manrope。交付形式是 React 和 Tailwind CSS，收录于 1920x1410，所以画幅在任何一行代码写下去之前就已经定好。动效是900ms 的过渡、cubic-bezier(0.16, 1, 0.3, 1)、一段循环视频打底，克制到文案依然是主角。如果你要给别人提一版金融科技落地页的需求，就从这个构图起步，把题材换掉。下面引用的每一项都是那份简报里的数值，从 1920x1410 的画幅一直到最小的间距档。收录的提示词记录于 1920x1410，所以这一页引用的每个数值都能追回到它。

适合谁

需要先看数字的设计师：字号从 12px 到 68px、20px 间距，全部引自需求简报。
这一版落地页服务的是需要一屏证据、证明金融科技的文案能扛住 6.5s 的循环视频的创始人。
用提示词给落地页提需求的人，会把这份 29,337 字符的提示词当作起点。

包含哪些内容

导航是刻意做细的. 导航条上只有字标、板块链接和一个 #AFDDFF 按钮，尺寸按字号从 12px 到 68px、20px 间距定，永远不会长成第二个页头。链接比字标小一档，#AFDDFF 操作是导航条上唯一有分量的元素。
视频压在最底层. 构图是压在 1920x1410 的片段之上搭起来的，不是摆在旁边，所以素材永远不会被塞进面板或加上边框。循环短到 6.5s，眼睛会把它读成肌理，而不是一条时间轴。
数值一路带进构建. 需求简报把数值点了名：字号从 12px 到 68px、20px 间距、900ms 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。清单短到审核的人能一个元素一个元素地核。搬运页面时保留这些写明的数值。
是数据带，不是表格. 统计数字是当字体来处理的：数字用展示字号，标签用需求简报里最小的字阶，颜色只走 #AFDDFF 或正文色，而不是找一张彩色卡片垫着。数字带 #AFDDFF 强调色，周围一切都留在正文色上。别给数字加框。

动效与交互

不靠滚动库的环境动效

环境动感来自 1920x1410 的 6.5s 循环，而不是滚动特效，页面因此保持平静，文字也更好读。片段短到能循环而不露接缝，这比它的分辨率更重要。

状态变化也有时长

这里的动效用毫秒计量：900ms缓动是 cubic-bezier(0.16, 1, 0.3, 1)这就是全部的动画预算，而且花在状态变化上，不在滚动时间轴上。控件之间复用同一个值，时长就不会各自漂移。时长是设计的一部分，不是收尾工序。

把这个落地页变成你自己的

换进你自己的素材时，保住裁切和图层顺序。素材是一段 6.5s 的 1920x1410 循环。正是这个摆放位置让文案保持可读。在重新配色之前，先把文案和素材改完。

对金融科技来说成立的地方

一屏只留给读者一个决定，这就是这套版式的代价：其余内容全部下移到折叠线以下。需求简报写明了字号从 12px 到 68px、20px 间距、900ms 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线，好让下面的板块保持同样的节奏。 Aurex Finance 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。