Vibe Coding 网页动效词典（下篇）：组件反馈、布局过渡与页面转场
你已经会让内容淡入、让卡片交错出现，也知道视差滚动、磁吸按钮和鼠标跟随该怎么说。可一到产品页面，新的问题又来了：弹窗突然蹦出来，菜单展开像页面坏了一下，加载时整块内容凭空消失，切到详情页以后用户不知道自己去了哪里。
这套词典仍然按照四层结构来组织：
代码块
Plain Text
第一层：技术工具——用什么实现
第二层：触发方式——什么时候开始
第三层：动效类型——画面具体怎么动
第四层：UX 规则——怎样动才好用
一、组件打开、关闭与切换
组件动效经常由点击触发，但“点击”无法告诉 AI 菜单该从哪里出现、背景要不要变暗、关闭时怎样返回。下面七个词，覆盖导航、弹窗、标签页和消息提示中最常见的状态变化。
Accordion：折叠展开
折叠展开用于隐藏和显示一段内容。点击标题后，内容区域沿垂直方向打开；再次点击时收起，并让下面的内容平稳让位。
常见类型：
•
问答列表向下展开答案。
•
设置面板展开更多选项。
•
侧边栏展开二级目录。
•
“查看详情”打开一段补充内容。
•
加号在展开后变成减号。
适合： 常见问题、设置项、目录和需要节省空间的长列表。收起后要保留清楚的标题，用户才能再次找到它。
代码块
Plain Text
问答列表使用折叠展开（Accordion）。点击问题后，答案从标题下方向下展开，下面的内容平稳下移；再次点击时按原路径收起。展开项保持高亮，加号同步变成减号。
Dropdown / Tooltip / Popover：锚定浮层
这几个名字都指依附在某个触发点附近的浮层。Tooltip 是短提示，通常由悬停或键盘聚焦触发；Popover 可以放按钮等可操作内容；Dropdown 是一组选项；Mega menu 则是导航栏展开的大型多列菜单。它们出现和关闭时，都要让用户看出浮层属于哪个触发点。
常见类型：
•
点击头像后展开账号菜单。
•
悬停导航项后显示多列菜单。
•
选择框向下打开选项列表。
•
图标旁边出现一条短提示。
•
点击按钮后打开带操作项的小浮层。
•
空间不足时改为向上展开。
适合： 导航、账号操作、筛选器、图标说明和选择框。浮层要从触发点附近出现，关闭时也回到同一位置；重要操作不能只放在悬停才会出现的 Tooltip 里。
代码块
Plain Text
导航使用下拉菜单（Dropdown）。鼠标悬停或键盘聚焦产品入口时，菜单从导航项下方展开并轻微淡入；指针移出菜单区域后平稳关闭。普通图标说明使用短提示（Tooltip），带操作按钮的浮层使用 Popover。手机端改为点击展开。
Modal / Dialog transition：弹窗过渡
Modal 和 Dialog 都指覆盖在当前页面上方的弹窗。出现时通常先让背景变暗，再让弹窗淡入、放大或从下方进入；关闭时沿相反方向离开。
常见类型：
•
确认弹窗在画面中央轻微放大。
•
登录弹窗从触发按钮附近出现。
•
图片预览从缩略图扩展到中央。
•
警告弹窗快速出现并保持稳定。
•
手机端弹窗从底部进入。
适合： 确认操作、登录、图片预览、重要提醒和短表单。弹窗打开后，背景内容不能继续抢注意力。
代码块
Plain Text
点击“删除”后打开确认弹窗（Modal）。背景遮罩先轻微变暗，弹窗随后在中央淡入并小幅放大；关闭时按相反顺序退出。弹窗打开期间锁定背景滚动，并把键盘焦点放进弹窗。
Drawer / Bottom sheet：抽屉与底部面板
Drawer 是从页面边缘滑出的抽屉，Bottom sheet 是从屏幕底部升起的面板。它们适合承载比弹窗更多的内容，同时保留用户对原页面的方位感。
常见类型：
•
购物车从右侧滑入。
•
手机导航从左侧打开。
•
筛选条件从页面边缘进入。
•
分享选项从手机底部升起。
•
向下拖动关闭底部面板。
适合： 导航、购物车、筛选器、详情面板和移动端操作。抽屉从哪一侧进入，就从哪一侧离开，不要换方向。
代码块
Plain Text
点击购物车后打开右侧抽屉（Drawer）。抽屉从右侧滑入，背景同时出现轻微遮罩；关闭时向右退回。手机端让抽屉接近全屏，并支持向下滑动关闭。
Tab transition：标签页切换
标签页切换发生在同一块区域内部。用户点击另一个标签后，选中指示器先移动到新标签，下面的内容再切换，让操作与结果连成一次动作。
常见类型：
•
下划线滑到新的标签。
•
胶囊背景在标签之间移动。
•
内容交叉淡化。
•
新内容按左右方向滑入。
•
数据加载完成后再切换内容。
适合： 价格周期、商品详情、设置页面和数据面板。标签很多时不要让内容大幅飞来飞去，短距离移动或交叉淡化已经足够。
代码块
Plain Text
标签页切换使用平滑过渡（Tab transition）。点击新标签后，选中指示器先滑到对应位置，内容区域再交叉淡化；容器高度平稳调整，避免下面的页面突然跳动。
Carousel / Slider transition：轮播与滑块切换
Carousel 和 Slider 都用于在固定区域里切换多张图片或卡片。常见动作是左右滑动、交叉淡化，或者让当前卡片缩小后退到旁边。
常见类型：
•
图片左右滑动切换。
•
两张图片交叉淡化。
•
中央卡片放大，两侧卡片缩小。
•
拖拽后吸附到最近一张。
•
自动播放，用户操作后暂停。
适合： 商品图、案例、评价、作品和短步骤介绍。轮播里要有上一张、下一张和当前位置，不能只靠自动播放。
代码块
Plain Text
案例区使用轮播切换（Carousel）。用户点击箭头或横向拖拽时，当前卡片向左离开，下一张从右侧进入并吸附到中央；显示当前位置，用户操作后暂停自动播放。
Toast / Snackbar：轻提示消息
Toast 或 Snackbar 是短暂出现的操作反馈，常见于“保存成功”“已复制”“网络断开”。它不会像弹窗一样中断任务，显示片刻后会自动离开。
常见类型：
•
从页面顶部或底部滑入。
•
在角落淡入并停留。
•
多条消息依次堆叠。
•
带一个撤销按钮。
•
错误消息保持更久，等待用户处理。
适合： 保存、复制、加入购物车、网络状态和不需要立刻回答的提示。关键错误不能只闪一下就消失，要给用户继续处理的入口。
代码块
Plain Text
复制链接后显示轻提示（Toast）。提示从页面底部轻微上移并淡入，显示“已复制”，停留片刻后淡出；连续操作时更新同一条提示，不要让多条消息遮住页面。
二、数字、加载与结果反馈
这一组动效出现在用户等待结果的时候。它们要告诉用户系统正在做什么、已经完成到哪里、最终成功还是失败。只放一个旋转图标，往往回答不了这些问题。
Animated counter / Odometer：数字计数与翻牌
数字计数让数值从旧结果平滑变化到新结果。Odometer 指像里程表一样逐位翻动数字，常用于关键数据和统计结果。
常见类型：
•
数字从零增长到最终值。
•
旧数值平滑更新到新数值。
•
每一位数字上下翻动。
•
百分比与进度条同步增长。
•
金额变化时短暂标出增减方向。
适合： 数据概览、销售额、里程、完成率和关键成绩。数字必须停在准确结果上，动画不能让用户误读数值。
代码块
Plain Text
数据卡片进入视口后播放数字计数（Animated counter）。数字从旧值平滑增长到最终结果，只播放一次；千位分隔符和单位始终保持稳定，动画结束后显示准确数值。
Skeleton loading：骨架屏加载
骨架屏先用灰色占位块展示页面大致结构，真实内容加载完成后再替换进去。用户能提前看到标题、图片和列表会出现在哪里，页面也不容易突然跳动。
常见类型：
•
卡片标题与正文使用灰色条占位。
•
图片位置显示固定比例的色块。
•
列表先显示多行相同骨架。
•
占位块缓慢明暗呼吸。
•
一道柔和高光从骨架表面经过。
适合： 信息流、商品列表、个人主页和结构已经确定的异步内容。等待时间很短时直接显示内容，没必要让骨架闪一下。
代码块
Plain Text
内容加载时显示骨架屏（Skeleton loading）。骨架块保持与真实卡片相同的尺寸和布局，并使用轻微的明暗呼吸；数据到达后平滑替换为真实内容，页面位置不能跳动。
Loading indicator：加载指示与进度
加载指示分成两类。系统不知道何时完成时，用旋转图标、跳动圆点或循环进度条，只表达“还在工作”；系统知道已经完成多少时，用百分比、进度条或步骤编号显示真实进度。
常见类型：
•
按钮内部出现小型旋转图标。
•
三个圆点依次跳动，表示正在生成。
•
文件上传显示完成百分比。
•
圆形进度环逐渐填满。
•
批量任务显示已完成数量。
适合： 提交、搜索、生成、上传、下载和导出。等待变长以后，要补充状态文字和取消入口；能够计算进度时，就不要一直让用户看着圆圈旋转。
代码块
Plain Text
提交后显示加载指示（Loading indicator）。无法估算进度时，在按钮内显示旋转图标并禁止重复点击；能够计算进度时，改为显示真实百分比和进度条。任务完成后进入成功或失败状态。
Success / Error feedback：成功与错误反馈
成功和错误动效负责确认结果。成功常用勾选、颜色变化和轻微放大；错误常用边框变色、提示文字或一次短促抖动。
常见类型：
•
对勾沿路径绘制出来。
•
按钮从加载状态变成成功状态。
•
输入框错误时短促左右抖动。
•
错误字段出现说明文字。
•
操作完成后内容更新并高亮一次。
适合： 表单提交、付款、保存、上传和关键操作。颜色只能辅助表达，成功与错误还要有图标或文字说明。
代码块
Plain Text
提交完成后显示结果反馈（Success / Error feedback）。成功时让按钮变为对勾并显示“已保存”；失败时让对应输入框短促抖动一次，并在下方显示具体错误原因和修正方法。
Icon morphing：图标形变
图标形变让一个图标平滑变成另一个图标，常用来表示同一按钮的状态已经改变。汉堡菜单变成关闭叉号、播放变成暂停，都是这一类。
常见类型：
•
三条菜单线变成关闭叉号。
•
加号变成减号。
•
播放三角形变成暂停双线。
•
收藏空心图标变成实心。
•
箭头旋转表示展开与收起。
适合： 同一个按钮承担两种相反状态时。图标变化以后，按钮的位置和点击范围要保持稳定。
代码块
Plain Text
菜单按钮使用图标形变（Icon morphing）。导航关闭时显示三条横线，打开后平滑变成关闭叉号；两种状态共用同一个按钮位置，键盘用户也能读取当前展开状态。
三、布局变化与页面转场
组件内部的动效解决局部状态，下面三个词负责更大的空间变化：卡片重新排序、一个元素跨页面延续，以及整张页面进入和退出。它们的共同任务，是让用户看懂“旧位置怎样变成新位置”。
Layout animation：布局过渡
布局过渡用于元素增删、排序或尺寸变化。旧位置与新位置之间会出现连续移动，周围内容也会一起让位，不会瞬间跳到结果。
常见类型：
•
筛选后卡片重新排列。
•
删除一项后，下面的列表向上补位。
•
拖拽卡片时其他卡片自动让出位置。
•
展开卡片后周围布局平稳调整。
•
网格在不同列数之间重新排布。
前端资料中常见的 FLIP animation，就是实现布局过渡的一种思路。零基础写提示词时直接描述“从旧位置平滑移动到新位置”已经够用。
代码块
Plain Text
筛选结果使用布局过渡（Layout animation）。卡片从旧位置平滑移动到新位置，隐藏项淡出，剩余卡片自然补位；不要让整个列表闪烁或重新从头入场。
Shared element transition：共享元素转场
共享元素转场会让两个界面中的同一个元素保持连续。比如点击商品卡片后，卡片里的图片一边放大、一边移动到详情页主图的位置，用户能看到自己点的东西去了哪里。
常见类型：
•
卡片图片扩展为详情页主图。
•
头像移动到个人主页顶部。
•
小播放器扩展成完整播放页。
•
缩略图放大为全屏预览。
•
列表中的标题移动到详情页标题栏。
适合： 列表到详情、图库预览、音乐播放和具有明确主物体的页面。两端没有同一个可识别元素时，普通页面转场更清楚。
代码块
Plain Text
从作品卡片进入详情页时使用共享元素转场（Shared element transition）。卡片中的主图连续放大并移动到详情页顶部，标题跟随到新位置；返回列表时按原路径恢复到原卡片。
Page transition：页面转场
页面转场描述旧页面怎样离开、新页面怎样进入。它发生在路由切换或章节跳转时，范围比组件动效更大。
常见类型：
•
旧页面淡出，新页面淡入。
•
新页面从右侧进入，表示继续前进。
•
返回时沿相反方向退出。
•
一块色幕扫过画面完成切换。
•
页面先轻微缩小，再进入下一个空间。
适合： 作品集、品牌网站、应用页面和章节式故事。普通内容网站使用短促淡化就够了，复杂转场会让每次点击都变慢。
代码块
Plain Text
路由切换使用页面转场（Page transition）。进入下一层页面时，新页面从右侧轻微滑入并淡入；返回时沿相反方向退出。转场期间保留加载反馈，并避免整页长时间空白。
四、第四层：UX 规则——怎样动才好用
到这里，第三层的常用词已经讲完。第四层不再增加视觉花样，它负责约束前面所有动效：用户能不能看懂、能不能继续操作、在手机和键盘上能不能完成同一件事。
Feedback：反馈
反馈是用户做出操作后，界面立即告诉他“我收到了”。悬停变色、按钮按下、出现加载、保存成功和错误说明，都属于反馈。
检查一个操作时，可以顺着这条线看：
•
操作前：用户看得出哪里能点。
•
操作时：按钮有按下或加载状态。
•
操作后：页面明确显示成功或失败。
•
失败后：用户知道怎样修正或重试。
代码块
Plain Text
给所有可操作组件补齐反馈（Feedback）。悬停、键盘聚焦和按下时要有清楚的状态变化；异步操作显示加载，完成后显示成功或错误结果，并提供下一步操作。
Affordance：操作暗示
Affordance 常翻译为“可供性”，对零基础读者更好记的说法是操作暗示。按钮的形状告诉用户可以点击，下划线告诉用户这是一条链接，拖拽把手告诉用户这里能移动。
常见操作暗示：
•
按钮拥有清楚的边界和文字。
•
链接使用下划线、颜色或箭头。
•
可拖拽区域显示把手或抓取光标。
•
可展开项带箭头、加号或状态文字。
•
输入框拥有标签、边框和键盘焦点样式。
动效要强化这些信号。一个看起来像普通文字的按钮，即使悬停后很炫，用户也可能根本不会把鼠标移过去。
代码块
Plain Text
Focus：焦点与注意力
Focus 在网页里有两层含义：视觉上把注意力引向当前任务，操作上让键盘焦点落在正确位置。弹窗打开后背景变暗属于前者，键盘光标进入弹窗属于后者。
常见要求：
•
主操作比次要操作更醒目。
•
弹窗打开后，注意力留在弹窗内。
•
键盘聚焦状态清楚可见。
•
关闭弹窗后，焦点回到原按钮。
•
动画结束后，用户知道下一步看哪里。
代码块
Plain Text
使用焦点与注意力规则（Focus）。弹窗打开时弱化背景，把键盘焦点移动到弹窗中的第一个操作；关闭后把焦点还给原按钮。所有可操作元素都保留清楚的键盘聚焦样式。
Reduced motion：减少动态
有些用户会在系统中开启“减少动态”，因为大幅缩放、视差和持续跟随可能引起眩晕。网页可以读取这项偏好，为他们换成更安静的版本。
需要优先减弱的效果：
•
大幅视差和滚动缩放。
•
长距离飞入飞出。
•
自动循环和持续旋转。
•
光标拖尾、背景追随和强烈闪烁。
•
无法暂停的图片序列与自动轮播。
减少动态以后，状态变化仍然要看得懂。可以保留短促淡化、颜色变化、进度和成功提示，让功能继续正常工作。
代码块
Plain Text
Input modality support：鼠标、触屏与键盘适配
Input modality 指用户通过鼠标、触屏还是键盘操作页面。网页不能把关键功能只交给鼠标悬停：手机没有持续悬停，键盘用户也不会移动鼠标，所以同一个功能要为不同输入方式准备入口。
常见替代关系：
•
鼠标悬停，对应键盘聚焦。
•
桌面端悬停展开，手机端点击展开。
•
拖拽排序，同时提供上移和下移按钮。
•
光标跟随效果，触屏端改为静态。
•
左右滑动，同时保留上一项和下一项按钮。
代码块
Plain Text
五、最后把四层写进一句提示词
现在再看一条完整的 Vibe coding 动效描述：
代码块
Plain Text
使用项目现有的动画工具实现商品详情交互。
用户点击商品卡片时，用共享元素转场把卡片主图连续放大到详情页；返回时按原路径恢复。加入购物车后，按钮先显示短暂加载，再变成成功对勾，同时从页面底部出现“已加入购物车”的轻提示。
弹窗和抽屉打开后要锁定背景滚动，并正确移动键盘焦点。手机端把悬停操作改为点击；用户开启减少动态时，取消大幅位移和缩放，改用短促淡入淡出。
这段话里，四层已经齐了：
•
技术工具： 使用项目现有方案，不随意增加依赖。
•
触发方式： 点击卡片、加入购物车、返回页面。
•
动效类型： 共享元素转场、加载、成功反馈、轻提示。
•
UX 规则： 焦点、触屏替代、减少动态。
六、把喜欢的网页变成自己的动效素材库
三篇动效词典到这里就结束了。这 56 个词不用一次背完，它们更像一套观察网页的坐标。以后遇到喜欢的页面，先亲手操作一遍：移动鼠标、点击按钮、滚动页面、打开菜单，再留意画面怎么回应你。
观察时按四层往下拆：
触发方式： 是悬停、点击、滚动、拖拽，还是页面加载后自动开始？
动效类型： 是淡入、交错出现、视差滚动、磁吸、布局过渡，还是共享元素转场？
结束状态： 鼠标移开以后怎样恢复？返回上一页时是否按原路径回去？加载完成以后显示什么？
UX 规则： 操作有没有反馈？用户看得出哪里能点吗？手机和键盘能完成同样的任务吗？减少动态以后还能看懂吗？
看到一个好动效，就截张图或录一小段屏幕，把它记成下面这几行：
代码块
Plain Text
比如你收藏了一张会跟随鼠标倾斜的作品卡片，发给AI帮你分析触发方式、动效类型、如何互动的。
然后把它放到自己的网站里，只试一个局部。确认文字仍然好读、按钮仍然好点、手机上没有问题，再决定是否保留。这样的记录积累十几条以后，你会慢慢形成自己的动效素材库，也会知道哪些效果适合自己的内容。
下一次再向 AI 描述网页，你说的就不会只有“高级一点”“丝滑一点”。你能说清楚谁触发、什么东西动、怎样结束、需要照顾哪些用户，AI 才能把你脑子里的感觉做出来。
先从收藏夹里最喜欢的一张网页开始：操作一遍，拆一个动效，记下一条，再放进自己的网站。