这页不是“做得像”,而是按三种成熟方法重组。
首屏先回答“这是什么、为什么值得看、下一步去哪”。所以 hero 里不堆术语,先给主题、判断和入口。
信息可以更密,但不能更乱。层级靠版式、边框和间距建立,不靠刺眼颜色或重阴影硬分层。
动效只承担“焦点如何转移”的说明职责。这里保留 stagger、reading rail 和 hover focus,去掉持续发光背景。
Topic First · Clear Reading Path
这套子页把主题、判断和继续路径压进一条稳定的阅读线里:什么时候触发、触发后发生什么、在低动态偏好下如何降级。
ENTRY SIGNAL
Staggered Serif Reveal
STATE SIGNAL
Reading Rail
HOVER SIGNAL
Focus Cards
首屏先回答“这是什么、为什么值得看、下一步去哪”。所以 hero 里不堆术语,先给主题、判断和入口。
信息可以更密,但不能更乱。层级靠版式、边框和间距建立,不靠刺眼颜色或重阴影硬分层。
动效只承担“焦点如何转移”的说明职责。这里保留 stagger、reading rail 和 hover focus,去掉持续发光背景。
这套子页把信息阅读顺序作为主轴,把动效压缩到可解释、可验证的 contract:preview、section rail 和 focus 状态同步表达同一语义。
Suitable for · 内容首页 / 主题专题 / 方法论导览 / 知识型个人站
SIGNAL CONTRACTS
Briefing Editorial 是整站最完整的阅读型模板,所以这里直接复用共享 contract 组件,把首屏进入、阅读轨道、卡片焦点和路径交接写成统一规则。
Hero Reveal
When
首屏进入,标题区进入视口约 30%。
Then
三行标题按阅读顺序依次显现,主标题先建立焦点。
Duration
480ms enter / 80ms stagger
Easing
cubic-bezier(0.22, 1, 0.36, 1)
Reduced Motion
禁用位移,仅保留 opacity 渐显(120ms)。
Reading Rail
When
章节焦点切换或阅读阶段推进时。
Then
进度轨平滑更新到新位置,提示当前阅读段落。
Duration
1.2s width shift
Easing
ease-out
Reduced Motion
直接切换到目标宽度,不做连续动画。
Card Focus
When
鼠标悬停或键盘 focus 到信息卡时。
Then
卡片轻微抬升并增强边框,强调当前可交互对象。
Duration
140ms translate / border tint
Easing
ease-out
Reduced Motion
移除位移,仅保留边框与对比度变化。
Path Handoff
When
推荐路径状态轮换或入口焦点切换时。
Then
下一个入口提升不透明度并回到基线位置。
Duration
220ms opacity / y
Easing
cubic-bezier(0.2, 0, 0, 1)
Reduced Motion
仅切换 opacity,不做 y 方向位移。
先把首屏文案改成“这是什么 + 为什么重要 + 下一步去哪”,别先想动画形式。
动效只给三类对象:标题进入、当前阅读轨道、信息卡 hover。其他一律删减。
颜色保持暖白、浅灰、深墨三层关系,深色只留给按钮和关键焦点,不再让内容块回到黑底。