Knowledge RAG

设计知识库

由社区维护、审核后发布，并在 Agent 页面创作前被 RAG 检索为设计约束。

13 条已发布原则 / 全库 192 条

复制外部动效组件、Lottie/Rive 播放器、Motion/GSAP 示例或 registry block 后，要把文字、状态、方向、时长、reduced-motion、pause/stop/hide、键盘路径和授权来源改成本地契约。

动效组件复制进仓库后不再是演示片段，而是本地交互资产。它必须同时满足品牌语气、语言方向、可访问降级、性能预算和来源授权。

滚动叙事的基本单位不是动画帧，而是可读章节：每章要有明确问题、文本锚点、视觉状态、静态 fallback 和可验证的滚动行为。

滚动叙事应把复杂机制拆成用户可停留、可跳过、可回到的证据链；动效只负责连接章节和状态，不应成为唯一内容载体。

餐饮、饮品和快商页面可以高能、有趣、有动效，但首屏必须把食欲转成菜单、价格、食材/营养证据和稳定下单路径。

食品电商的表现力只有在服务选择、信任和购买时才成立；动效、夸张字体、食材插画和品牌色必须把用户带回可检查的商品与下单行动。

滚动动效要区分 CSS scroll timeline、GSAP ScrollTrigger、Lenis smooth scroll 和普通原生滚动；不要为了沉浸感破坏阅读、锚点、键盘和移动端手感。

滚动是用户控制阅读节奏的输入，不是动画导演的时间轴。实现应优先保留原生滚动语义，再为确有价值的局部段落绑定轻量动效。

动效上线前要先分清目的、触发、可关闭性、性能属性和验证证据，不能只凭“看起来顺滑”通过。

好的动效解释变化，坏的动效制造额外负担。分诊的核心是把每个动画变成可说明、可降级、可测试、可清理的界面行为。

免费 stock video 可以让首屏更真实，但必须同时确认具体授权、人物/商标/地点权利、署名、poster、暂停控制、reduced-motion 和移动端性能。

背景视频不是动态壁纸。它只有在服务首屏信号、品牌语气或叙事证据，并且不破坏阅读、可访问性、授权和性能时，才适合进入生产界面。

分析 Awwwards 等获奖网站时，要把布局、配色、字体、交互、动效和可用性证据拆开记录，避免只说“高级、沉浸、好看”。

案例分析的价值不是模仿表面风格，而是把可验证的设计选择转化为可复用的判断和实现约束。

View Transition API 能让路由、筛选和详情切换更连续，但必须保留 URL、焦点、滚动、reduced-motion 和渐进增强边界。

页面转场的目标不是炫技，而是让用户理解同一对象在列表、详情、筛选和状态变化之间的连续关系。

滚动动效应帮助用户理解产品状态和叙事推进，而不是把信息藏在不可控的表演里。

叙事型页面的滚动动效必须服务因果、层级和节奏：每个运动段落都要解释一个状态变化或价值证据。

作品集动效应突出选择、进入、比较和记忆点，而不是让每个元素都表演。

作品集的交互价值在于帮助用户判断作者能力：项目选择、视觉细节、案例跳转和上下文过渡要比装饰动画更重要。

减少动效可访问性把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

用动效表达层级把一个高频界面判断转成可执行约束，帮助 Agent 在生成前做出更具体的布局、交互或可访问性选择。

动效应解释状态变化、空间关系或反馈，而不是单纯制造热闹。