关于这个模板
RIVR 展示了为金融科技产品做首屏的一种做法，并把生成它的说明一起公开。标题是“Fluid Asset Streams”，首屏其余部分都围着它排。配色控制在灰色 #969BA2 打底之内，字体用 Helvetica。交付形式是 React 和 Tailwind CSS，收录于 800x599，所以画幅在任何一行代码写下去之前就已经定好。如果你要给别人提一版金融科技首屏的需求，就从这个构图起步，把题材换掉。下面引用的每一项都是那份简报里的数值，从 800x599 的画幅一直到最小的间距档。收录的提示词记录于 800x599，所以这一页引用的每个数值都能追回到它。
适合谁
- 先从字号从 12px 到 80px、14px 间距开始，让配色跟着走，因为这版首屏靠的就是间距。
- 给正在做金融科技产品首屏、背后还没有设计系统的独立创始人用。
- 给要改写一版首屏、标题长度又得和RIVR一样的内容负责人用。
包含哪些内容
- 导航条上不留多余. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 800x599 的构图上，自己没有底色，素材因此从它下面通到两边。一条导航只放一个操作。
- 间距档位是写明的. 尺寸是收录时就在需求简报里写下的（字号从 12px 到 80px、14px 间距），重建因此可以逐项核对，而不是大约像。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 清单，而不是卡片墙. 功能用 Helvetica 排成清单，而不是卡片栅格，页面因此密度高，在窄屏上也能很快扫完。清单左对齐到和标题同一条版心线。
- 导航不带底色. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 800x599 的构图上，自己没有底色，素材因此从它下面通到两边。字标占的位置不超过它那行字需要的宽度。
动效与交互
交互层就是这些控件
指针上的处理很少，而且写明了：悬停态只给按钮和链接，而不是每张卡片，只加在那些看起来就能点的元素上。状态很简单，因此能直接搬进任何组件体系。这份参考在 800x599 下收录。
有意做成静止
这里没有滚动库：800x599 的构图保持不动，只有会回应你的元素在动。只有响应指针的元素会动。
这套构图为什么适合金融科技
一个现成的首屏和这个首屏用的是同一批零件。区别在于这里按导航、数据行、功能列表、背景片段排序、用字号从 12px 到 80px、14px 间距去量，所以这一屏读起来是一条序列，而不是一个容器。它给金融科技读者的是一条通向主张的最短诚实路径。
RIVR 怎么安排第一次阅读的顺序
在这里，顺序就是设计。导航、数据行、功能列表、背景片段的摆放让主张先于证据落地，字号从 12px 到 80px、14px 间距定下两者之间的距离。金融科技读者先看到主张，再看到选项。
这个首屏背后的时序
动效只限于悬停态与按下态。这个首屏里没有任何动画超过需求简报允许的时长。这个首屏里没有为动而动的动画。这份参考在 800x599 下收录。
常见问题
RIVR 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 8,089 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么 RIVR 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 8,089 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
重建 RIVR 必须用 React 和 Tailwind CSS 吗？
RIVR 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
