字重对比拉到 3 档以上
标题用 700–800 字重，副题 400，标签 500 并加 0.22em 字距。三者差值 ≥ 300，错位叠压时视觉层级才立得住。
阈值：主标题字间距 −0.03em，副题不超过 62ch。
01 / 实用指导清单
把「科技跃动」做进 AI 平台页面的 6 条硬指标
以下每条都给出可直接执行的参数与验收阈值，按序落地，2 人日可完成一版高保真页面。
色块拼贴控制在 3 块内
用 primary 30% 面积、accent 10% 面积，其余 60% 交给 surface/bg。硬阴影统一 0 12px 30px，避免多套阴影打架。
避坑：不要给每个色块都加高饱和描边。
颗粒噪点叠 5% 即可
radial-gradient 3px 点阵铺满根容器，opacity 0.05、pointer-events:none。超过 8% 会压缩文字锐度，移动端 OLED 上尤其明显。
验收：放大 200% 后正文边缘仍清晰。
scroll-snap 只吸附主视觉段
仅 Hero 轨道启用 scroll-snap-type:x mandatory，正文区保持自然滚动；吸附段宽度 88%，确保下一段露出 12% 作为可滚动暗示。
避坑：全站吸附会让长文阅读者频繁被拽回。
数字滚动计数要可降级
计数时长 0.45s、缓动 cubic-bezier(.16,1,.3,1)；prefers-reduced-motion 下直接显示终值，不做任何位移与淡入。
指标：动画帧率稳定 ≥ 55fps。
响应式先锁断点再调密度
1600px 起卡片 3→4 列、容器放宽到 1680px；1024px 单列化；380px 下按钮占满宽且高度 ≥ 44px，长模型名强制 break-word。
验收：320px 视口无横向滚动条。
02 / 图文混排特写
把 AI 平台的三个核心动作，排版成可读的跃动
非对称栅格：左文右图 1.15:0.85，图片统一 4:3 裁切，避免图片高度抖动影响阅读节奏。
输入 → 推理 → 反馈，每步都有视觉节拍
用户点击「生成」后，界面按 3 个阶段给出反馈，让等待可感知、可预期，把抽象的模型推理变成看得见的节奏。
- 0–300ms：按钮下沉 2px + 主色进度细线，告知「已受理」。
- 300ms–2s：骨架屏 + 数字滚动计数，展示 token 处理进度。
- 结果到达：卡片以 14px 位移淡入，硬阴影从 sh-1 升到 sh-2。
响应式设计不是缩放，是重新排版
同一套令牌在四档宽度下重排：桌面用错位叠压的双栏，平板收成单栏并保留色块，手机把标签改为横向滚动的胶囊按钮。
- ≥1600px：容器 1680px，卡片 4 列，标题字号放大一级。
- 1024–1600px：容器 1140px，特性卡 3 列，图文左右分栏。
- 640–1024px：单列堆叠，图在上文在下，间距收到 16px。
- ≤380px：内边距 8px，按钮整宽，长词强制断行。
03 / 客户评价
排版改动之后，用户行为数据怎么说
来自三家不同规模 AI 平台团队的真实反馈，均围绕极致用户体验指标。
「把首屏从居中大标语换成横向拼贴轨道后，新用户完成首次提问的比例从 41% 升到 58%，他们更愿意先横向滑一屏看产品在做什么。」
「推理等待阶段加了数字滚动计数和进度细线，误以为卡死而重复点击的情况几乎消失，客服相关工单下降明显。」
「FAQ 从折叠列表改成 6 问 6 答的紧凑排版后，帮助中心跳出率下降，用户更愿意自己先找答案再开工单。」
04 / 核心能力卡片
6 项能力，支撑 AI 平台的创意排版体系
标签页切换分组查看，每张卡都给出可验证的量化落点。
非对称栅格系统
提供 1.15:0.85、1:1、2:1 三种列比，配合 4/8pt 间距令牌，任意区块可重排而不破版。
落地成本：1 套栅格覆盖 92% 页面
文字即主视觉
超大字号 + 描边字 + 高亮底纹三件套，让模型名称、能力标签本身成为构图主体。
首屏文字占比建议 35%–45%
色块拼贴与硬阴影
主色块 30% 面积、强调色 10% 点亮，阴影统一三级景深，拼贴不再脏乱。
色彩占比：60 / 30 / 10
颗粒噪点质感
3px 点阵叠层、5% 不透明度，给数字界面一点印刷质地的温度，同时不损伤文字锐度。
建议仅根容器叠加一次
数字滚动计数
0.45s 计数 + 位移淡入，用于响应时长、并发数、准确率等关键指标。
降级：减少动效时直显终值
横向吸附轨道
Hero 采用 scroll-snap 横向轨道，88% 段宽 + 12% 露边，形成可探索的叙事节奏。
吸附段数量建议 ≤ 6
05 / 常见问题 FAQ
创意排版落地时最常被问到的 6 个问题
回答尽量给参数，不给口号。
超大字重对比会不会牺牲可读性？
不会，但要守两条线：正文不低于 16px、行长不超过 62ch；大字只用于标题与关键数字，且字间距收紧到 −0.03em 以内，避免字与字散开。
着色块拼贴时如何不显得廉价？
限制彩色数量：主色 1 种 + 强调色 1 种，其余用中性底。阴影只用一套方向（向下），且不超过三级景深；描边一律 1px 用 line 色，不用高饱和描边。
颗粒噪点会不会影响性能？
用 CSS 背景点阵而非图片噪点，零额外请求；叠层设 pointer-events:none，透明度 5%。实测对首屏 LCP 影响小于 10ms。
scroll-snap 在长页面上安全吗？
仅对 Hero 轨道启用，正文区关闭；轨道内每段宽度 88%，并保留键盘左右方向键可操作，触控与键盘都不被劫持。
数字滚动计数如何保证无障碍？
终值直接写在 DOM 里作为可读文本，动画只做视觉过渡；prefers-reduced-motion 下跳过动画。对比度保持在 4.5:1 以上。
这套版式能复用到控制台内页吗？
可以，但要降密度：内页去掉横向吸附轨道，色块拼贴缩减为单块，颗粒噪点保留；栅格与令牌完全复用，改版成本约 0.5 人日/页。