Vibe Coding 网页动效词典（下篇）：组件反馈、布局过渡与页面转场

你已经会让内容淡入、让卡片交错出现，也知道视差滚动、磁吸按钮和鼠标跟随该怎么说。可一到产品页面，新的问题又来了：弹窗突然蹦出来，菜单展开像页面坏了一下，加载时整块内容凭空消失，切到详情页以后用户不知道自己去了哪里。

这些都属于第三层剩下的内容：组件改变状态时，画面具体怎么过渡。比如“点击按钮”是触发方式，“弹窗从触发按钮附近放大并出现”才是动效类型。

这套词典仍然按照四层结构来组织：

第一层：技术工具——用什么实现
第二层：触发方式——什么时候开始
第三层：动效类型——画面具体怎么动
第四层：UX 规则——怎样动才好用

上篇已经讲过工具和触发方式，中篇补了文字、滚动和指针动效。下篇从第 37 个词继续，先补齐第三层，最后再讲第四层的五条 UX 规则。

一、组件打开、关闭与切换

组件动效经常由点击触发，但“点击”无法告诉 AI 菜单该从哪里出现、背景要不要变暗、关闭时怎样返回。下面七个词，覆盖导航、弹窗、标签页和消息提示中最常见的状态变化。

37. Accordion：折叠展开

折叠展开用于隐藏和显示一段内容。点击标题后，内容区域沿垂直方向打开；再次点击时收起，并让下面的内容平稳让位。

常见类型：

• 问答列表向下展开答案。

• 设置面板展开更多选项。

• 侧边栏展开二级目录。

• “查看详情”打开一段补充内容。

• 加号在展开后变成减号。

适合： 常见问题、设置项、目录和需要节省空间的长列表。收起后要保留清楚的标题，用户才能再次找到它。

交给 AI：

问答列表使用折叠展开（Accordion）。点击问题后，答案从标题下方向下展开，下面的内容平稳下移；再次点击时按原路径收起。展开项保持高亮，加号同步变成减号。

38. Dropdown / Tooltip / Popover：锚定浮层

这几个名字都指依附在某个触发点附近的浮层。Tooltip 是短提示，通常由悬停或键盘聚焦触发；Popover 可以放按钮等可操作内容；Dropdown 是一组选项；Mega menu 则是导航栏展开的大型多列菜单。它们出现和关闭时，都要让用户看出浮层属于哪个触发点。

常见类型：

• 点击头像后展开账号菜单。

• 悬停导航项后显示多列菜单。

• 选择框向下打开选项列表。

• 图标旁边出现一条短提示。

• 点击按钮后打开带操作项的小浮层。

• 空间不足时改为向上展开。

适合： 导航、账号操作、筛选器、图标说明和选择框。浮层要从触发点附近出现，关闭时也回到同一位置；重要操作不能只放在悬停才会出现的 Tooltip 里。

交给 AI：

导航使用下拉菜单（Dropdown）。鼠标悬停或键盘聚焦产品入口时，菜单从导航项下方展开并轻微淡入；指针移出菜单区域后平稳关闭。普通图标说明使用短提示（Tooltip），带操作按钮的浮层使用 Popover。手机端改为点击展开。

39. Modal / Dialog transition：弹窗过渡

Modal 和 Dialog 都指覆盖在当前页面上方的弹窗。出现时通常先让背景变暗，再让弹窗淡入、放大或从下方进入；关闭时沿相反方向离开。

常见类型：

• 确认弹窗在画面中央轻微放大。

• 登录弹窗从触发按钮附近出现。

• 图片预览从缩略图扩展到中央。

• 警告弹窗快速出现并保持稳定。

• 手机端弹窗从底部进入。

适合： 确认操作、登录、图片预览、重要提醒和短表单。弹窗打开后，背景内容不能继续抢注意力。

交给 AI：

点击“删除”后打开确认弹窗（Modal）。背景遮罩先轻微变暗，弹窗随后在中央淡入并小幅放大；关闭时按相反顺序退出。弹窗打开期间锁定背景滚动，并把键盘焦点放进弹窗。

40. Drawer / Bottom sheet：抽屉与底部面板

Drawer 是从页面边缘滑出的抽屉，Bottom sheet 是从屏幕底部升起的面板。它们适合承载比弹窗更多的内容，同时保留用户对原页面的方位感。

常见类型：

• 购物车从右侧滑入。

• 手机导航从左侧打开。

• 筛选条件从页面边缘进入。

• 分享选项从手机底部升起。

• 向下拖动关闭底部面板。

适合： 导航、购物车、筛选器、详情面板和移动端操作。抽屉从哪一侧进入，就从哪一侧离开，不要换方向。

交给 AI：

点击购物车后打开右侧抽屉（Drawer）。抽屉从右侧滑入，背景同时出现轻微遮罩；关闭时向右退回。手机端让抽屉接近全屏，并支持向下滑动关闭。

41. Tab transition：标签页切换

标签页切换发生在同一块区域内部。用户点击另一个标签后，选中指示器先移动到新标签，下面的内容再切换，让操作与结果连成一次动作。

常见类型：

• 下划线滑到新的标签。

• 胶囊背景在标签之间移动。

• 内容交叉淡化。

• 新内容按左右方向滑入。

• 数据加载完成后再切换内容。

适合： 价格周期、商品详情、设置页面和数据面板。标签很多时不要让内容大幅飞来飞去，短距离移动或交叉淡化已经足够。

交给 AI：

标签页切换使用平滑过渡（Tab transition）。点击新标签后，选中指示器先滑到对应位置，内容区域再交叉淡化；容器高度平稳调整，避免下面的页面突然跳动。

42. Carousel / Slider transition：轮播与滑块切换

Carousel 和 Slider 都用于在固定区域里切换多张图片或卡片。常见动作是左右滑动、交叉淡化，或者让当前卡片缩小后退到旁边。

常见类型：

• 图片左右滑动切换。

• 两张图片交叉淡化。

• 中央卡片放大，两侧卡片缩小。

• 拖拽后吸附到最近一张。

• 自动播放，用户操作后暂停。

适合： 商品图、案例、评价、作品和短步骤介绍。轮播里要有上一张、下一张和当前位置，不能只靠自动播放。

交给 AI：

案例区使用轮播切换（Carousel）。用户点击箭头或横向拖拽时，当前卡片向左离开，下一张从右侧进入并吸附到中央；显示当前位置，用户操作后暂停自动播放。

43. Toast / Snackbar：轻提示消息

Toast 或 Snackbar 是短暂出现的操作反馈，常见于“保存成功”“已复制”“网络断开”。它不会像弹窗一样中断任务，显示片刻后会自动离开。

常见类型：

• 从页面顶部或底部滑入。

• 在角落淡入并停留。

• 多条消息依次堆叠。

• 带一个撤销按钮。

• 错误消息保持更久，等待用户处理。

适合： 保存、复制、加入购物车、网络状态和不需要立刻回答的提示。关键错误不能只闪一下就消失，要给用户继续处理的入口。

交给 AI：

复制链接后显示轻提示（Toast）。提示从页面底部轻微上移并淡入，显示“已复制”，停留片刻后淡出；连续操作时更新同一条提示，不要让多条消息遮住页面。

二、数字、加载与结果反馈

这一组动效出现在用户等待结果的时候。它们要告诉用户系统正在做什么、已经完成到哪里、最终成功还是失败。只放一个旋转图标，往往回答不了这些问题。

44. Animated counter / Odometer：数字计数与翻牌

数字计数让数值从旧结果平滑变化到新结果。Odometer 指像里程表一样逐位翻动数字，常用于关键数据和统计结果。

常见类型：

• 数字从零增长到最终值。

• 旧数值平滑更新到新数值。

• 每一位数字上下翻动。

• 百分比与进度条同步增长。

• 金额变化时短暂标出增减方向。

适合： 数据概览、销售额、里程、完成率和关键成绩。数字必须停在准确结果上，动画不能让用户误读数值。

交给 AI：

数据卡片进入视口后播放数字计数（Animated counter）。数字从旧值平滑增长到最终结果，只播放一次；千位分隔符和单位始终保持稳定，动画结束后显示准确数值。

45. Skeleton loading：骨架屏加载

骨架屏先用灰色占位块展示页面大致结构，真实内容加载完成后再替换进去。用户能提前看到标题、图片和列表会出现在哪里，页面也不容易突然跳动。

常见类型：

• 卡片标题与正文使用灰色条占位。

• 图片位置显示固定比例的色块。

• 列表先显示多行相同骨架。

• 占位块缓慢明暗呼吸。

• 一道柔和高光从骨架表面经过。

适合： 信息流、商品列表、个人主页和结构已经确定的异步内容。等待时间很短时直接显示内容，没必要让骨架闪一下。

交给 AI：

内容加载时显示骨架屏（Skeleton loading）。骨架块保持与真实卡片相同的尺寸和布局，并使用轻微的明暗呼吸；数据到达后平滑替换为真实内容，页面位置不能跳动。

46. Loading indicator：加载指示与进度

加载指示分成两类。系统不知道何时完成时，用旋转图标、跳动圆点或循环进度条，只表达“还在工作”；系统知道已经完成多少时，用百分比、进度条或步骤编号显示真实进度。

常见类型：

• 按钮内部出现小型旋转图标。

• 三个圆点依次跳动，表示正在生成。

• 文件上传显示完成百分比。

• 圆形进度环逐渐填满。

• 批量任务显示已完成数量。

适合： 提交、搜索、生成、上传、下载和导出。等待变长以后，要补充状态文字和取消入口；能够计算进度时，就不要一直让用户看着圆圈旋转。

交给 AI：

提交后显示加载指示（Loading indicator）。无法估算进度时，在按钮内显示旋转图标并禁止重复点击；能够计算进度时，改为显示真实百分比和进度条。任务完成后进入成功或失败状态。

47. Success / Error feedback：成功与错误反馈

成功和错误动效负责确认结果。成功常用勾选、颜色变化和轻微放大；错误常用边框变色、提示文字或一次短促抖动。

常见类型：

• 对勾沿路径绘制出来。

• 按钮从加载状态变成成功状态。

• 输入框错误时短促左右抖动。

• 错误字段出现说明文字。

• 操作完成后内容更新并高亮一次。

适合： 表单提交、付款、保存、上传和关键操作。颜色只能辅助表达，成功与错误还要有图标或文字说明。

交给 AI：

提交完成后显示结果反馈（Success / Error feedback）。成功时让按钮变为对勾并显示“已保存”；失败时让对应输入框短促抖动一次，并在下方显示具体错误原因和修正方法。

48. Icon morphing：图标形变

图标形变让一个图标平滑变成另一个图标，常用来表示同一按钮的状态已经改变。汉堡菜单变成关闭叉号、播放变成暂停，都是这一类。

常见类型：

• 三条菜单线变成关闭叉号。

• 加号变成减号。

• 播放三角形变成暂停双线。

• 收藏空心图标变成实心。

• 箭头旋转表示展开与收起。

适合： 同一个按钮承担两种相反状态时。图标变化以后，按钮的位置和点击范围要保持稳定。

交给 AI：

菜单按钮使用图标形变（Icon morphing）。导航关闭时显示三条横线，打开后平滑变成关闭叉号；两种状态共用同一个按钮位置，键盘用户也能读取当前展开状态。

三、布局变化与页面转场

组件内部的动效解决局部状态，下面三个词负责更大的空间变化：卡片重新排序、一个元素跨页面延续，以及整张页面进入和退出。它们的共同任务，是让用户看懂“旧位置怎样变成新位置”。

49. Layout animation：布局过渡

布局过渡用于元素增删、排序或尺寸变化。旧位置与新位置之间会出现连续移动，周围内容也会一起让位，不会瞬间跳到结果。

常见类型：

• 筛选后卡片重新排列。

• 删除一项后，下面的列表向上补位。

• 拖拽卡片时其他卡片自动让出位置。

• 展开卡片后周围布局平稳调整。

• 网格在不同列数之间重新排布。

前端资料中常见的 FLIP animation，就是实现布局过渡的一种思路。零基础写提示词时直接描述“从旧位置平滑移动到新位置”已经够用。

交给 AI：

筛选结果使用布局过渡（Layout animation）。卡片从旧位置平滑移动到新位置，隐藏项淡出，剩余卡片自然补位；不要让整个列表闪烁或重新从头入场。

50. Shared element transition：共享元素转场

共享元素转场会让两个界面中的同一个元素保持连续。比如点击商品卡片后，卡片里的图片一边放大、一边移动到详情页主图的位置，用户能看到自己点的东西去了哪里。

常见类型：

• 卡片图片扩展为详情页主图。

• 头像移动到个人主页顶部。

• 小播放器扩展成完整播放页。

• 缩略图放大为全屏预览。

• 列表中的标题移动到详情页标题栏。

适合： 列表到详情、图库预览、音乐播放和具有明确主物体的页面。两端没有同一个可识别元素时，普通页面转场更清楚。

交给 AI：

从作品卡片进入详情页时使用共享元素转场（Shared element transition）。卡片中的主图连续放大并移动到详情页顶部，标题跟随到新位置；返回列表时按原路径恢复到原卡片。

51. Page transition：页面转场

页面转场描述旧页面怎样离开、新页面怎样进入。它发生在路由切换或章节跳转时，范围比组件动效更大。

常见类型：

• 旧页面淡出，新页面淡入。

• 新页面从右侧进入，表示继续前进。

• 返回时沿相反方向退出。

• 一块色幕扫过画面完成切换。

• 页面先轻微缩小，再进入下一个空间。

适合： 作品集、品牌网站、应用页面和章节式故事。普通内容网站使用短促淡化就够了，复杂转场会让每次点击都变慢。

交给 AI：

路由切换使用页面转场（Page transition）。进入下一层页面时，新页面从右侧轻微滑入并淡入；返回时沿相反方向退出。转场期间保留加载反馈，并避免整页长时间空白。

四、第四层：UX 规则——怎样动才好用

到这里，第三层的常用词已经讲完。第四层不再增加视觉花样，它负责约束前面所有动效：用户能不能看懂、能不能继续操作、在手机和键盘上能不能完成同一件事。

52. Feedback：反馈

反馈是用户做出操作后，界面立即告诉他“我收到了”。悬停变色、按钮按下、出现加载、保存成功和错误说明，都属于反馈。

检查一个操作时，可以顺着这条线看：

• 操作前：用户看得出哪里能点。

• 操作时：按钮有按下或加载状态。

• 操作后：页面明确显示成功或失败。

• 失败后：用户知道怎样修正或重试。

交给 AI：

给所有可操作组件补齐反馈（Feedback）。悬停、键盘聚焦和按下时要有清楚的状态变化；异步操作显示加载，完成后显示成功或错误结果，并提供下一步操作。

53. Affordance：操作暗示

Affordance 常翻译为“可供性”，对零基础读者更好记的说法是操作暗示。按钮的形状告诉用户可以点击，下划线告诉用户这是一条链接，拖拽把手告诉用户这里能移动。

常见操作暗示：

• 按钮拥有清楚的边界和文字。

• 链接使用下划线、颜色或箭头。

• 可拖拽区域显示把手或抓取光标。

• 可展开项带箭头、加号或状态文字。

• 输入框拥有标签、边框和键盘焦点样式。

动效要强化这些信号。一个看起来像普通文字的按钮，即使悬停后很炫，用户也可能根本不会把鼠标移过去。

交给 AI：

强化组件的操作暗示（Affordance）。可点击按钮要有清楚边界，可展开区域显示方向箭头，可拖拽卡片显示把手；动效只用于确认这些已有信号，不要把关键操作隐藏到悬停之后。

54. Focus：焦点与注意力

Focus 在网页里有两层含义：视觉上把注意力引向当前任务，操作上让键盘焦点落在正确位置。弹窗打开后背景变暗属于前者，键盘光标进入弹窗属于后者。

常见要求：

• 主操作比次要操作更醒目。

• 弹窗打开后，注意力留在弹窗内。

• 键盘聚焦状态清楚可见。

• 关闭弹窗后，焦点回到原按钮。

• 动画结束后，用户知道下一步看哪里。

交给 AI：

使用焦点与注意力规则（Focus）。弹窗打开时弱化背景，把键盘焦点移动到弹窗中的第一个操作；关闭后把焦点还给原按钮。所有可操作元素都保留清楚的键盘聚焦样式。

55. Reduced motion：减少动态

有些用户会在系统中开启“减少动态”，因为大幅缩放、视差和持续跟随可能引起眩晕。网页可以读取这项偏好，为他们换成更安静的版本。

需要优先减弱的效果：

• 大幅视差和滚动缩放。

• 长距离飞入飞出。

• 自动循环和持续旋转。

• 光标拖尾、背景追随和强烈闪烁。

• 无法暂停的图片序列与自动轮播。

减少动态以后，状态变化仍然要看得懂。可以保留短促淡化、颜色变化、进度和成功提示，让功能继续正常工作。

交给 AI：

支持减少动态（Reduced motion）。检测到用户开启减少动态后，关闭视差、滚动缩放、光标拖尾和自动循环，把大幅位移改为短促淡入淡出；保留加载、成功和错误等必要反馈。

56. Input modality support：鼠标、触屏与键盘适配

Input modality 指用户通过鼠标、触屏还是键盘操作页面。网页不能把关键功能只交给鼠标悬停：手机没有持续悬停，键盘用户也不会移动鼠标，所以同一个功能要为不同输入方式准备入口。

常见替代关系：

• 鼠标悬停，对应键盘聚焦。

• 桌面端悬停展开，手机端点击展开。

• 拖拽排序，同时提供上移和下移按钮。

• 光标跟随效果，触屏端改为静态。

• 左右滑动，同时保留上一项和下一项按钮。

交给 AI：

完善不同输入方式适配（Input modality support）。所有悬停功能都提供键盘聚焦状态，手机端改为点击；拖拽和滑动之外保留可见按钮。装饰性的指针跟随在触屏设备上关闭。

五、最后把四层写进一句提示词

现在再看一条完整的 Vibe coding 动效描述：

使用项目现有的动画工具实现商品详情交互。

用户点击商品卡片时，用共享元素转场把卡片主图连续放大到详情页；返回时按原路径恢复。加入购物车后，按钮先显示短暂加载，再变成成功对勾，同时从页面底部出现“已加入购物车”的轻提示。

弹窗和抽屉打开后要锁定背景滚动，并正确移动键盘焦点。手机端把悬停操作改为点击；用户开启减少动态时，取消大幅位移和缩放，改用短促淡入淡出。

这段话里，四层已经齐了：

• 技术工具： 使用项目现有方案，不随意增加依赖。

• 触发方式： 点击卡片、加入购物车、返回页面。

• 动效类型： 共享元素转场、加载、成功反馈、轻提示。

• UX 规则： 焦点、触屏替代、减少动态。

六、把喜欢的网页变成自己的动效素材库

三篇动效词典到这里就结束了。这 56 个词不用一次背完，它们更像一套观察网页的坐标。以后遇到喜欢的页面，先亲手操作一遍：移动鼠标、点击按钮、滚动页面、打开菜单，再留意画面怎么回应你。

观察时按四层往下拆：

1. 触发方式： 是悬停、点击、滚动、拖拽，还是页面加载后自动开始？

2. 动效类型： 是淡入、交错出现、视差滚动、磁吸、布局过渡，还是共享元素转场？

3. 结束状态： 鼠标移开以后怎样恢复？返回上一页时是否按原路径回去？加载完成以后显示什么？

4. UX 规则： 操作有没有反馈？用户看得出哪里能点吗？手机和键盘能完成同样的任务吗？减少动态以后还能看懂吗？

看到一个好动效，就截张图或录一小段屏幕，把它记成下面这几行：

网页或页面：【在哪里看到】
操作对象：【按钮、卡片、标题、图片……】
触发方式：【悬停、点击、滚动……】
动效类型：【磁吸、视差、共享元素转场……】
结束状态：【移开后回正、完成后显示对勾……】
UX 处理：【手机替代、键盘焦点、减少动态……】
我想用在：【自己网站的哪个位置】

比如你收藏了一张会跟随鼠标倾斜的作品卡片，发给AI帮你分析触发方式、动效类型、如何互动的。

然后把它放到自己的网站里，只试一个局部。确认文字仍然好读、按钮仍然好点、手机上没有问题，再决定是否保留。这样的记录积累十几条以后，你会慢慢形成自己的动效素材库，也会知道哪些效果适合自己的内容。

下一次再向 AI 描述网页，你说的就不会只有“高级一点”“丝滑一点”。你能说清楚谁触发、什么东西动、怎样结束、需要照顾哪些用户，AI 才能把你脑子里的感觉做出来。

先从收藏夹里最喜欢的一张网页开始：操作一遍，拆一个动效，记下一条，再放进自己的网站。

往期回顾

嵌入推文（联网查看）

嵌入推文（联网查看）

嵌入推文（联网查看）

嵌入推文（联网查看）

嵌入推文（联网查看）

关于作者

Punk｜中科大管理学硕士｜AI提示词、AI小白教程｜Punk系列Skills作者｜3个月赚了8位数｜Learn in Public｜FDE文章浏览量240w｜@AdrianPunk115