BACK TO LIBRARY
BRIEFING EDITORIAL · READING SYSTEM

Topic First · Clear Reading Path

把 Motion Atlas
翻译成一套
阅读型子页面。

这套子页把主题、判断和继续路径压进一条稳定的阅读线里:什么时候触发、触发后发生什么、在低动态偏好下如何降级。

ENTRY SIGNAL

Staggered Serif Reveal

STATE SIGNAL

Reading Rail

HOVER SIGNAL

Focus Cards

Best Minds Behind The Page

这页不是“做得像”,而是按三种成熟方法重组。

Steve Krug
Don’t Make Me Think

首屏先回答“这是什么、为什么值得看、下一步去哪”。所以 hero 里不堆术语,先给主题、判断和入口。

Edward Tufte
Envisioning Information

信息可以更密,但不能更乱。层级靠版式、边框和间距建立,不靠刺眼颜色或重阴影硬分层。

Val Head
UI Animation Principles

动效只承担“焦点如何转移”的说明职责。这里保留 stagger、reading rail 和 hover focus,去掉持续发光背景。

Live Motion Profile
Topic
Summary
Paths
Library

这套子页把信息阅读顺序作为主轴,把动效压缩到可解释、可验证的 contract:preview、section rail 和 focus 状态同步表达同一语义。

Suitable for · 内容首页 / 主题专题 / 方法论导览 / 知识型个人站

SIGNAL CONTRACTS

把阅读型动效写成团队可复用的 contract。

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 方向位移。

Where To Use It

适合那些先立主题,再展开内容的页面。

AI 内容站首页:每周一个主题,但首页仍然先讲判断框架。
研究/案例子页:先给 thesis,再给 why it matters,最后给继续阅读。
招聘或个人介绍页:保留可信阅读气质,只在关键节点加低频反馈。
Transfer Playbook
Step 01

先把首屏文案改成“这是什么 + 为什么重要 + 下一步去哪”,别先想动画形式。

Step 02

动效只给三类对象:标题进入、当前阅读轨道、信息卡 hover。其他一律删减。

Step 03

颜色保持暖白、浅灰、深墨三层关系,深色只留给按钮和关键焦点,不再让内容块回到黑底。