FAQ CTA 健康行动号召设计｜版式拆解与提示词

关于这个模板

FAQ CTA 是面向健康或身心类产品的行动号召区参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。它以“Send Money Worldwide at the Best Rates”开场，给这句话整个版心，而不是把它缩进一张卡片里。配色是白色 #F0F0F0 打底、亮红色 #FF4B2B 承担强调色，字体用 Inter。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。动效只限于6.5s 的过渡。当健康的行动号召区必须扛住一次文案改动、又不能重做设计时，它最有用。

适合谁

把行动号召区的结构整段借过来，再逐行对着 640x468 画幅换文案。
给正在做健康或身心类产品行动号召区、背后还没有设计系统的独立创始人用。
用提示词给行动号召区提需求的人，会把这份 9,456 字符的提示词当作起点。

包含哪些内容

一行到底，不做抽屉. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #FF4B2B 操作，全部压在需求简报最小的字阶上。链接比字标小一档，#FF4B2B 操作是导航条上唯一有分量的元素。
每个尺寸都写下来了. 版式是对着一组固定值（10px 间距、6.5s 的过渡）解出来的，首屏在任何宽度下因此都保持成构图。清单里最小和最大的两个值，划定了这套构图的取值范围。
气质由字体承担. 字体定在 Inter 上，需求简报给这套字分配了明确的职责，而不是为了花样去混搭。字重、字距和字号档位全部写明，换字体也不会丢掉层级。字体和固定字号配对使用，展示行和界面文字因此始终是一家人。把字阶转成灰度核一遍。
内容切成面板. 本该放一整段文案的地方，这一页放了一组面板，行动号召区因此扫得完。面板顺序就是阅读顺序，不依赖任何位置暗示。这份参考在 640x468 下收录。

动效与交互

第一屏上的实时场景

这里的设计决定是运行时渲染（一块 WebGL 画布），版式也为它留出了空间。渲染是最后一个就绪的元素，所以页面在它加载完之前的状态也得成立。这份参考在 640x468 下收录。

只有指针状态，没有别的

每个可交互元素只做一件事（悬停态只给按钮和链接，而不是每张卡片、在原位切换内容的标签页或手风琴），状态才因此可预期。悬停态和聚焦态写在一起，指针和键盘拿到的信息因此一样。悬停时不要给版式加动画。这份参考在 640x468 下收录。

在 FAQ CTA 里先改什么

先改承诺，别先改装饰。把“Send Money Worldwide at the Best Rates”重写成一句能说清你做什么的话，再用 Inter 按需求简报里的主标题字号排。把亮红色 #FF4B2B换成你自己的强调色，并在动别的东西之前先对着白色 #F0F0F0检查一遍。换一个品牌，整套画幅都能接着用。

这个行动号召区怎么重排

宽屏下构图是密的，窄屏下动效带减少动态效果分支。两种状态需求简报都写了。窄屏下没有丢掉任何重要的东西。这份参考在 640x468 下收录。

这个行动号召区做对了什么

它对健康或身心类产品有效，是因为它从不要求读者自己去拼信息。页面直接把这句话说出来了：“Send Money Worldwide at the Best Rates”。版式、字体和颜色都已经定好（白色 #F0F0F0 和亮红色 #FF4B2B，用 Inter），所以第一屏读起来是一个完整的论点，而不是一堆零件。它给健康读者的是一条通向主张的最短诚实路径。