Part 1：视觉、Motion & 基础组件交互

第一部分：视觉与 Motion​

第一章 页面进入与基础动效​

​

#GrKwrieMshHU text { white-space: pre; }#GrKwrieMshHU .fb0 { stroke: var(--N900-FG, 0.15); }#GrKwrieMshHU .fb0 {stroke: rgba(31,35,41, 0.15)}#GrKwrieMshHU .fx0 { stroke-miterlimit: 10; }#GrKwrieMshHU .fx0 {stroke-miterlimit: 10}#GrKwrieMshHU .fa1 { fill: rgb(187, 191, 196); }#GrKwrieMshHU .fa1 {fill: rgb(187, 191, 196)}#GrKwrieMshHU .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#GrKwrieMshHU .fx1 {font-style: normal}#GrKwrieMshHU .fx2 { text-anchor: middle; }#GrKwrieMshHU .fx2 {text-anchor: middle}#GrKwrieMshHU .fx3 { dominant-baseline: central; }#GrKwrieMshHU .fx3 {dominant-baseline: central}#GrKwrieMshHU .fx4 { stroke: none; }#GrKwrieMshHU .fx4 {stroke: none}#GrKwrieMshHU .fc0 { fill: var(--text-caption); }#GrKwrieMshHU .fc0 {fill: #646a73}#GrKwrieMshHU .fa2 { fill: var(--text-link-disabled); }#GrKwrieMshHU .fa2 {fill: rgb(187, 191, 196)}#GrKwrieMshHU .fa3 { fill: rgb(255, 240, 245); }#GrKwrieMshHU .fa3 {fill: rgb(255, 240, 245)}#GrKwrieMshHU .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#GrKwrieMshHU .fx5 {font-style: normal}#GrKwrieMshHU .fx6 { text-anchor: start; }#GrKwrieMshHU .fx6 {text-anchor: start}#GrKwrieMshHU .fx7 { dominant-baseline: alphabetic; }#GrKwrieMshHU .fx7 {dominant-baseline: alphabetic}#GrKwrieMshHU .fc1 { fill: rgb(233, 30, 99); }#GrKwrieMshHU .fc1 {fill: rgb(233, 30, 99)}#GrKwrieMshHU .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#GrKwrieMshHU .fx8 {font-style: normal}#GrKwrieMshHU .fc2 { fill: rgb(51, 51, 51); }#GrKwrieMshHU .fc2 {fill: rgb(51, 51, 51)}#GrKwrieMshHU .fb1 { fill: var(--N900-FG, 0.15); }#GrKwrieMshHU .fb1 {fill: rgba(31,35,41, 0.15)}#GrKwrieMshHU .fb2 { fill: rgb(240, 240, 240); }#GrKwrieMshHU .fb2 {fill: rgb(240, 240, 240)}#GrKwrieMshHU .fa4 { fill: var(--bg-body); }#GrKwrieMshHU .fa4 {fill: #fff}ABCD12345678910111213术语效果说明给 AI 的描述话术（可直接复制）典型场景淡入 Fade In淡出 Fade Out上滑进入 Slide Up下滑进入 Slide Down左侧滑入 Slide Left右侧滑入 Slide Right缩放进入 Scale In缩放退出 Scale OutSpring InStagger RevealMask RevealPage Transition元素逐渐出现元素逐渐消失从下方滑入从上方进入从左侧进入从右侧进入从小到正常尺寸缩小后消失弹簧式出现多元素错峰出现遮罩揭示页面转场元素出现时 opacity 从 0 过渡到 1，持续 300ms，使用 ease-out。元素退出时 opacity 从 1 降到 0，动画完成后再隐藏元素。元素从下方 20px 滑入当前位置，同时 opacity 从 0 变为 1。元素从上方 16px 向下进入，同时完成淡入。元素从左侧 24px 滑入，持续 350ms。元素从右侧 24px 滑入，并逐渐显示。元素从 scale 0.95 放大到 1，并同步淡入。元素关闭时缩小到 0.96，并降低透明度。元素出现时加入轻微 spring overshoot，然后稳定到最终位置。列表子元素依次出现，每项延迟 50ms。使用 overflow hidden 或 mask 从下向上逐渐揭示内容。路由切换时旧页面淡出，新页面淡入并上移 10px。标题、正文弹窗、提示卡片、内容块Dropdown、通知SidebarDrawerModalPopoverCTA卡片列表大标题SPA

​

第二章 Scroll 滚动交互​

​

#PIxgrmDMfVnQ text { white-space: pre; }#PIxgrmDMfVnQ .fb0 { stroke: var(--N900-FG, 0.15); }#PIxgrmDMfVnQ .fb0 {stroke: rgba(31,35,41, 0.15)}#PIxgrmDMfVnQ .fx0 { stroke-miterlimit: 10; }#PIxgrmDMfVnQ .fx0 {stroke-miterlimit: 10}#PIxgrmDMfVnQ .fa1 { fill: rgb(187, 191, 196); }#PIxgrmDMfVnQ .fa1 {fill: rgb(187, 191, 196)}#PIxgrmDMfVnQ .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#PIxgrmDMfVnQ .fx1 {font-style: normal}#PIxgrmDMfVnQ .fx2 { text-anchor: middle; }#PIxgrmDMfVnQ .fx2 {text-anchor: middle}#PIxgrmDMfVnQ .fx3 { dominant-baseline: central; }#PIxgrmDMfVnQ .fx3 {dominant-baseline: central}#PIxgrmDMfVnQ .fx4 { stroke: none; }#PIxgrmDMfVnQ .fx4 {stroke: none}#PIxgrmDMfVnQ .fc0 { fill: var(--text-caption); }#PIxgrmDMfVnQ .fc0 {fill: #646a73}#PIxgrmDMfVnQ .fa2 { fill: var(--text-link-disabled); }#PIxgrmDMfVnQ .fa2 {fill: rgb(187, 191, 196)}#PIxgrmDMfVnQ .fa3 { fill: rgb(255, 240, 245); }#PIxgrmDMfVnQ .fa3 {fill: rgb(255, 240, 245)}#PIxgrmDMfVnQ .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#PIxgrmDMfVnQ .fx5 {font-style: normal}#PIxgrmDMfVnQ .fx6 { text-anchor: start; }#PIxgrmDMfVnQ .fx6 {text-anchor: start}#PIxgrmDMfVnQ .fx7 { dominant-baseline: alphabetic; }#PIxgrmDMfVnQ .fx7 {dominant-baseline: alphabetic}#PIxgrmDMfVnQ .fc1 { fill: rgb(233, 30, 99); }#PIxgrmDMfVnQ .fc1 {fill: rgb(233, 30, 99)}#PIxgrmDMfVnQ .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#PIxgrmDMfVnQ .fx8 {font-style: normal}#PIxgrmDMfVnQ .fc2 { fill: rgb(51, 51, 51); }#PIxgrmDMfVnQ .fc2 {fill: rgb(51, 51, 51)}#PIxgrmDMfVnQ .fb1 { fill: var(--N900-FG, 0.15); }#PIxgrmDMfVnQ .fb1 {fill: rgba(31,35,41, 0.15)}#PIxgrmDMfVnQ .fb2 { fill: rgb(240, 240, 240); }#PIxgrmDMfVnQ .fb2 {fill: rgb(240, 240, 240)}#PIxgrmDMfVnQ .fa4 { fill: var(--bg-body); }#PIxgrmDMfVnQ .fa4 {fill: #fff}ABCD12345678910111213141516术语效果说明给 AI 的描述话术典型场景Smooth ScrollAnchor ScrollScroll ProgressScroll RevealScroll SnapHorizontal ScrollParallaxStickySticky SectionHide on ScrollShrink HeaderInfinite ScrollLoad MoreBack to TopScroll Spy平滑滚动锚点定位阅读进度滚动显现滚动吸附横向滚动视差吸顶局部固定向下隐藏导航滚动缩小导航无限滚动加载更多返回顶部滚动目录高亮点击锚点导航时平滑滚动至目标区域，并考虑固定导航高度。点击目录项后滚动至对应标题，而不是瞬间跳转。页面顶部显示 3px 阅读进度条，随滚动从左向右增长。元素进入 viewport 20% 后触发淡入上移动画。每个 section 使用 scroll snap，松手后自动吸附最近页面。指定区域将纵向滚动转换为横向卡片移动。背景滚动速度约为前景的 60%，形成轻微空间感。元素滚动至顶部后保持固定。左侧介绍 sticky，右侧内容继续正常滚动。向下滚动时收起 Header，向上滚动立即恢复。滚动超过 60px 后导航高度从 80px 缩小至 56px。距底部 300px 时自动加载下一页。点击按钮追加下一批内容，不刷新已有数据。滚动超过一屏后显示返回顶部按钮。根据当前阅读 section 自动高亮对应目录。官网文档长文Landing Page整屏官网案例墙Hero导航产品介绍手机网站官网Feed列表文档Docs

​

第三章 Hover 悬停反馈​

​

#EMGxKXOasyQO text { white-space: pre; }#EMGxKXOasyQO .fb0 { stroke: var(--N900-FG, 0.15); }#EMGxKXOasyQO .fb0 {stroke: rgba(31,35,41, 0.15)}#EMGxKXOasyQO .fx0 { stroke-miterlimit: 10; }#EMGxKXOasyQO .fx0 {stroke-miterlimit: 10}#EMGxKXOasyQO .fa1 { fill: rgb(187, 191, 196); }#EMGxKXOasyQO .fa1 {fill: rgb(187, 191, 196)}#EMGxKXOasyQO .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#EMGxKXOasyQO .fx1 {font-style: normal}#EMGxKXOasyQO .fx2 { text-anchor: middle; }#EMGxKXOasyQO .fx2 {text-anchor: middle}#EMGxKXOasyQO .fx3 { dominant-baseline: central; }#EMGxKXOasyQO .fx3 {dominant-baseline: central}#EMGxKXOasyQO .fx4 { stroke: none; }#EMGxKXOasyQO .fx4 {stroke: none}#EMGxKXOasyQO .fc0 { fill: var(--text-caption); }#EMGxKXOasyQO .fc0 {fill: #646a73}#EMGxKXOasyQO .fa2 { fill: var(--text-link-disabled); }#EMGxKXOasyQO .fa2 {fill: rgb(187, 191, 196)}#EMGxKXOasyQO .fa3 { fill: rgb(255, 240, 245); }#EMGxKXOasyQO .fa3 {fill: rgb(255, 240, 245)}#EMGxKXOasyQO .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#EMGxKXOasyQO .fx5 {font-style: normal}#EMGxKXOasyQO .fx6 { text-anchor: start; }#EMGxKXOasyQO .fx6 {text-anchor: start}#EMGxKXOasyQO .fx7 { dominant-baseline: alphabetic; }#EMGxKXOasyQO .fx7 {dominant-baseline: alphabetic}#EMGxKXOasyQO .fc1 { fill: rgb(233, 30, 99); }#EMGxKXOasyQO .fc1 {fill: rgb(233, 30, 99)}#EMGxKXOasyQO .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#EMGxKXOasyQO .fx8 {font-style: normal}#EMGxKXOasyQO .fc2 { fill: rgb(51, 51, 51); }#EMGxKXOasyQO .fc2 {fill: rgb(51, 51, 51)}#EMGxKXOasyQO .fb1 { fill: var(--N900-FG, 0.15); }#EMGxKXOasyQO .fb1 {fill: rgba(31,35,41, 0.15)}#EMGxKXOasyQO .fb2 { fill: rgb(240, 240, 240); }#EMGxKXOasyQO .fb2 {fill: rgb(240, 240, 240)}#EMGxKXOasyQO .fa4 { fill: var(--bg-body); }#EMGxKXOasyQO .fa4 {fill: #fff}ABCD12345678910111213术语效果说明给 AI 的描述话术场景Hover LiftImage ZoomUnderline SlideMagnetic ButtonTiltSpotlightBorder GlowIcon ShiftIcon RotateHover PreviewHover ActionCursor Follow悬停上浮图片放大下划线展开磁铁按钮3D 倾斜聚光灯边框发光图标位移图标旋转悬停预览悬停操作栏光标跟随Hover 时卡片 translateY(-4px)，阴影轻微增强。Hover 时图片在容器内放大至 1.05 倍，超出部分裁剪。Hover 链接时下划线从左向右展开。鼠标靠近按钮后按钮最多向光标方向移动 8px。根据鼠标位置控制 rotateX / rotateY，最大 6°。Hover 时以鼠标坐标为中心显示 radial-gradient 光晕。Hover 后增加主题色柔光边框。Hover 按钮时箭头向右移动 4px。Hover 时图标轻微旋转 10～15°。Hover 超过 300ms 后展示简要内容预览。卡片 Hover 后显示编辑、复制、删除按钮。装饰元素缓动跟随鼠标，但不影响点击。卡片图集导航CTA产品卡AI 官网科技卡片CTA工具栏文件、视频后台创意网站

​

第四章 Cursor 鼠标指针交互​

​

#DpJyTkFHxOoV text { white-space: pre; }#DpJyTkFHxOoV .fb0 { stroke: var(--N900-FG, 0.15); }#DpJyTkFHxOoV .fb0 {stroke: rgba(31,35,41, 0.15)}#DpJyTkFHxOoV .fx0 { stroke-miterlimit: 10; }#DpJyTkFHxOoV .fx0 {stroke-miterlimit: 10}#DpJyTkFHxOoV .fa1 { fill: rgb(187, 191, 196); }#DpJyTkFHxOoV .fa1 {fill: rgb(187, 191, 196)}#DpJyTkFHxOoV .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#DpJyTkFHxOoV .fx1 {font-style: normal}#DpJyTkFHxOoV .fx2 { text-anchor: middle; }#DpJyTkFHxOoV .fx2 {text-anchor: middle}#DpJyTkFHxOoV .fx3 { dominant-baseline: central; }#DpJyTkFHxOoV .fx3 {dominant-baseline: central}#DpJyTkFHxOoV .fx4 { stroke: none; }#DpJyTkFHxOoV .fx4 {stroke: none}#DpJyTkFHxOoV .fc0 { fill: var(--text-caption); }#DpJyTkFHxOoV .fc0 {fill: #646a73}#DpJyTkFHxOoV .fa2 { fill: var(--text-link-disabled); }#DpJyTkFHxOoV .fa2 {fill: rgb(187, 191, 196)}#DpJyTkFHxOoV .fa3 { fill: rgb(225, 234, 255); }#DpJyTkFHxOoV .fa3 {fill: rgb(225, 234, 255)}#DpJyTkFHxOoV .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#DpJyTkFHxOoV .fx5 {font-style: normal}#DpJyTkFHxOoV .fx6 { text-anchor: start; }#DpJyTkFHxOoV .fx6 {text-anchor: start}#DpJyTkFHxOoV .fx7 { dominant-baseline: alphabetic; }#DpJyTkFHxOoV .fx7 {dominant-baseline: alphabetic}#DpJyTkFHxOoV .fc1 { fill: rgb(31, 35, 41); }#DpJyTkFHxOoV .fc1 {fill: rgb(31, 35, 41)}#DpJyTkFHxOoV .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#DpJyTkFHxOoV .fx8 {font-style: normal}#DpJyTkFHxOoV .fc2 { fill: rgb(51, 51, 51); }#DpJyTkFHxOoV .fc2 {fill: rgb(51, 51, 51)}#DpJyTkFHxOoV .fb1 { fill: var(--N900-FG, 0.15); }#DpJyTkFHxOoV .fb1 {fill: rgba(31,35,41, 0.15)}#DpJyTkFHxOoV .fb2 { fill: rgb(240, 240, 240); }#DpJyTkFHxOoV .fb2 {fill: rgb(240, 240, 240)}#DpJyTkFHxOoV .fa4 { fill: var(--bg-body); }#DpJyTkFHxOoV .fa4 {fill: #fff}ABCD1234567术语效果说明AI 描述话术场景Custom CursorCursor LabelCursor ScaleCursor BlendDrag CursorDisabled Cursor自定义鼠标光标文字光标缩放反色光标拖拽光标禁用指针使用圆形自定义 Cursor，进入可点击元素时改变大小。Hover 图片时 Cursor 内显示 View / Drag 等文字。Hover 可交互元素时 Cursor 放大至 1.5 倍。Cursor 使用 mix-blend-mode 保证复杂背景可见。可拖动区域显示 grab，拖动时显示 grabbing。Disabled 元素使用 not-allowed cursor。Portfolio案例页官网创意网站Carousel表单

​

第五章 Button 按钮交互​

​

#gHDmOMULChrw text { white-space: pre; }#gHDmOMULChrw .fb0 { stroke: var(--N900-FG, 0.15); }#gHDmOMULChrw .fb0 {stroke: rgba(31,35,41, 0.15)}#gHDmOMULChrw .fx0 { stroke-miterlimit: 10; }#gHDmOMULChrw .fx0 {stroke-miterlimit: 10}#gHDmOMULChrw .fa1 { fill: rgb(187, 191, 196); }#gHDmOMULChrw .fa1 {fill: rgb(187, 191, 196)}#gHDmOMULChrw .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#gHDmOMULChrw .fx1 {font-style: normal}#gHDmOMULChrw .fx2 { text-anchor: middle; }#gHDmOMULChrw .fx2 {text-anchor: middle}#gHDmOMULChrw .fx3 { dominant-baseline: central; }#gHDmOMULChrw .fx3 {dominant-baseline: central}#gHDmOMULChrw .fx4 { stroke: none; }#gHDmOMULChrw .fx4 {stroke: none}#gHDmOMULChrw .fc0 { fill: var(--text-caption); }#gHDmOMULChrw .fc0 {fill: #646a73}#gHDmOMULChrw .fa2 { fill: var(--text-link-disabled); }#gHDmOMULChrw .fa2 {fill: rgb(187, 191, 196)}#gHDmOMULChrw .fa3 { fill: rgb(255, 240, 245); }#gHDmOMULChrw .fa3 {fill: rgb(255, 240, 245)}#gHDmOMULChrw .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#gHDmOMULChrw .fx5 {font-style: normal}#gHDmOMULChrw .fx6 { text-anchor: start; }#gHDmOMULChrw .fx6 {text-anchor: start}#gHDmOMULChrw .fx7 { dominant-baseline: alphabetic; }#gHDmOMULChrw .fx7 {dominant-baseline: alphabetic}#gHDmOMULChrw .fc1 { fill: rgb(233, 30, 99); }#gHDmOMULChrw .fc1 {fill: rgb(233, 30, 99)}#gHDmOMULChrw .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#gHDmOMULChrw .fx8 {font-style: normal}#gHDmOMULChrw .fc2 { fill: rgb(51, 51, 51); }#gHDmOMULChrw .fc2 {fill: rgb(51, 51, 51)}#gHDmOMULChrw .fb1 { fill: var(--N900-FG, 0.15); }#gHDmOMULChrw .fb1 {fill: rgba(31,35,41, 0.15)}#gHDmOMULChrw .fb2 { fill: rgb(240, 240, 240); }#gHDmOMULChrw .fb2 {fill: rgb(240, 240, 240)}#gHDmOMULChrw .fa4 { fill: var(--bg-body); }#gHDmOMULChrw .fa4 {fill: #fff}ABCD1234567891011术语效果说明AI 描述话术场景Press FeedbackRippleLoading ButtonSuccess ButtonError ButtonIcon MorphSplit ButtonHold to ConfirmCopy FeedbackFloating Action Button按压反馈点击涟漪加载按钮成功状态错误状态图标变形分裂按钮长按确认复制反馈悬浮按钮pointer down 时 scale 到 0.97，松开恢复。点击位置产生圆形波纹并扩散淡出。请求中显示 Spinner + 处理中，并禁止重复提交。成功后按钮切换为勾选 + 已完成。请求失败后按钮显示失败状态并允许重试。Menu 图标点击后平滑变为 X。主区域执行默认操作，右侧箭头打开附加菜单。持续按住 1 秒后执行危险操作，并显示进度。点击复制后图标变为勾选并显示“已复制”。页面右下角固定主要操作按钮。按钮Material UI提交保存API 请求Navigation后台删除API Key移动端

​

第十三章 Card 卡片交互​

​

​

第十四章 List 列表交互​

​

​

第四十五章 Motion System 动效系统​

最后这一章不要只列动画，而是告诉用户 怎么控制 AI 做出来的动画质量。​

​

​

第九十九章 Interaction Token / 交互 Token​

建议把它做成设计系统部分。​

​

​

​

​

​

第二部分：基础组件交互​

第六章 Component State 组件状态​

这是 Vibe Coding 最容易被忽略的一章。​

​

​

第十一章 Modal 与浮层​

​

​

第七章 Navigation 导航​

​

​

第十二章 Toast 与反馈提示​

​

​

第八章 Form 表单交互​

第十五章 Table 表格交互​

这一章非常重要。​

​

​

第十六章 Pagination 分页​

​

​

第六十四章 Stepper / 步骤流程​

​

​

第六十五章 Wizard / 向导式交互​

​

​

第六十六章 Progressive Disclosure / 渐进式披露​

​

​

第六十七章 Toggle / Checkbox / Radio 选择控件​

​

​

第六十八章 Segmented Control / 视图切换​

​

​

第六十九章 Workspace Tabs / 工作区标签​

​

​

第八十一章 Overlay / 浮层定位系统​

这个很值得补，因为 AI 经常把 Popover、Tooltip 做出屏幕。​

​

​

第八十二章 Layer / Z-index 层级系统​

​

​

​