Averra Testimonials 创意机构与工作室客户评价设计｜版式拆解与提示词

关于这个模板

Averra Testimonials 是一个只靠一份书面简报搭出来的创意机构客户评价区，这一页记录的就是那份简报。标题是“A truly collaborative process from start to finish. The results completely exceeded our initial expectations”，客户评价区其余部分都围着它排。整页都建立在白色 #EBEFE5 打底、黑色 #111111 给文字、亮黄绿色 #A5E038 承担强调色之上。交付形式是 React 和 Tailwind CSS，所以整个客户评价区可以直接搬进项目，不需要设计交接。动效只限于0.04s 的过渡、cubic-bezier(0.22, 1, 0.36, 1)、一段循环视频打底。对于需要在第一屏就显得刻意的创意机构或工作室客户评价区，它是一份合适的参考。

适合谁

要给这次构建估工时的产品经理，会把 1920x1208 画幅读成工作范围。
给需要把客户评价区的范围收进一个迭代、并且不新增任何素材的产品经理用。
这一版客户评价区服务的是需要一屏证据、证明创意机构的文案能扛住 4.6s 的循环视频的创始人。

包含哪些内容

链接只在一个断点收起. 这一行的对比只花在一个地方：#A5E038 操作；字标和链接都退回正文色。链接比字标小一档，#A5E038 操作是导航条上唯一有分量的元素。
尺寸写在需求简报里，不在一套比例里. 版式走的是绝对值，不是比例：28px 间距、0.04s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。
素材上不加色罩. 素材干的是氛围的活，不是叙事：一段 1920x1208 下的 4.6s 循环，垫在所有东西后面。自动播放不可用时，1920x1208 的封面帧撑住构图，版式不会塌。
数值一路带进构建. 版式走的是绝对值，不是比例：28px 间距、0.04s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。数值才是设计，其余只是摆放。

动效与交互

交互层就是这些控件

每个可交互元素只做一件事（悬停态只给按钮和链接，而不是每张卡片、按需翻页浏览内容的滑块组件），状态才因此可预期。状态很简单，因此能直接搬进任何组件体系。这份参考在 1920x1208 下收录。

到达顺序才是关键

入场动效花在页面自己的信息上，而不是花在包围它的框架上：标题逐词出现。跑完之后的画面就是需求简报里那张静帧的构图，所以这段动态是加分，不是必需。不要再加第二个入场。这份参考在 1920x1208 下收录。

创意机构或工作室能从这里得到什么

这套设计在一屏之内就把话说完。素材是一段 4.6s 的 1920x1208 循环。素材负责氛围，文案负责主张，28px 间距、0.04s 的过渡把两者分开。它给创意机构读者的是一条通向主张的最短诚实路径。

这个客户评价区背后的数字

两个人在同时复刻时，靠眼睛是定不住构图的。需求简报消掉了这场争论：28px 间距、0.04s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线，只说一次。这个客户评价区里没有任何一处依赖默认值。

这个客户评价区背后的顺序

导航先确立产品身份，并给回访者一条熟悉的路。页面的顺序是刻意安排的。标题占主标题字号，支撑句说明产品能做什么，亮黄绿色 #A5E038强调色标记主操作，下一步从不会有疑问。除此之外没有别的东西抢注意力：第一个决策点之前没有卡片栅格，这正是客户评价区在创意机构类项目里不显沉重的原因。创意机构读者先看到主张，再看到选项。