Vibe Coding 视觉词典（下篇）：滚动动作、提示加载、视觉风格与高级效果

第五章：滚动与动作 Scroll & Motion​

滚动与动作决定页面如何“活起来”。它回答的是：内容何时出现、用户滚动时会发生什么，以及页面怎样在不打断阅读的前提下建立节奏。​

滚动出现 Scroll Reveal​

元素在进入视口时逐渐出现，常见变化包括淡入、轻微上移或缩放。它的作用是建立阅读节奏，而不是让每个元素都表演一次。​

适合： 长页面、个人介绍、项目案例、数据区块、章节过渡。​

​

代码块​

Plain Text

为 Punk 的个人网站添加 Scroll Reveal。​

标题、正文、项目卡片进入视口时淡入并向上移动 16px，动画时长控制在 400—600ms；​

同一组卡片使用轻微错峰，不要让整页所有元素同时动画；​

用户启用 prefers-reduced-motion 时取消位移动画，只保留即时显示或轻微淡入。​

​

视差滚动 Parallax​

前景、中景和背景以不同速度移动，制造空间深度。效果越大越容易干扰阅读，因此适合用在局部视觉，而不是整页持续晃动。​

适合： Hero、品牌故事、作品封面、沉浸式章节、视觉型个人网站。​

​

代码块​

Plain Text

为 Punk 的首页 Hero 添加轻量 Parallax。​

背景抽象山形移动速度最慢，中层半透明网页面板使用中等速度，前景标题保持接近正常滚动速度；​

移动距离控制在较小范围，禁止大幅缩放和快速位移；​

移动端降低效果，reduced motion 模式下完全关闭视差。​

​

阅读进度条 Scroll Progress Indicator​

根据页面滚动位置显示阅读进度，常见形式是顶部细线、侧边刻度或圆形百分比。它告诉用户还剩多少内容。​

适合： 推特长文落地页、博客、案例研究、教程、文档。​

​

代码块​

Plain Text

在 Punk 的长篇文章页顶部添加 Scroll Progress Indicator。​

使用 3px 深绿色进度线，从左向右反映当前阅读百分比；​

导航栏保持 Sticky，进度条位于导航底部；不要遮挡内容，并使用 requestAnimationFrame 或 CSS Scroll-driven Animation 实现平滑更新。​

​

滚动吸附 Scroll Snap​

用户滚动后，内容会自动停在预设位置，像翻页一样对齐到某一张卡片或某一个完整章节。​

适合： 横向作品集、全屏章节、移动端卡片浏览、产品故事。​

​

代码块​

Plain Text

为 Punk 的精选作品区添加 CSS Scroll Snap。​

​

横向滚动 Horizontal Scroll​

内容沿水平方向浏览，可以显示一排项目、时间线或视觉画廊。它应当有明确的方向提示，否则用户容易不知道还能继续滑动。​

适合： 项目画廊、时间线、客户 Logo、移动端作品浏览、横向叙事。​

​

代码块​

Plain Text

为 Punk 的项目档案创建 Horizontal Scroll。​

桌面端展示 3.5 张卡片，让下一张卡片露出一部分作为继续浏览提示；​

支持触控板和触摸滑动，并提供左右箭头；​

卡片保持键盘可聚焦，手机端使用自然横向滚动。​

​

无限滚动 Infinite Scroll​

用户接近列表底部时自动加载下一批内容，不需要手动翻页。它适合连续消费内容，但不适合需要精确定位和返回某一页的任务。​

适合： 动态内容流、灵感墙、AI 图片库、社交列表、探索页。​

​

代码块​

Plain Text

为 Punk 的 AI 灵感流实现 Infinite Scroll。​

每次加载 12 个项目，在列表底部设置 sentinel，并使用 IntersectionObserver 在 sentinel 接近视口时请求下一页；​

加载期间显示 Skeleton；加载失败时显示 Retry 按钮；​

保存滚动位置，避免返回页面时丢失当前位置。​

​

跑马灯 Marquee​

文字、Logo 或标签持续横向移动，形成动态信息带。现代网页通常使用 CSS 动画实现，而不是旧式 marquee 标签。​

适合： 客户 Logo、技能列表、活动信息、品牌口号、作品标签。​

​

代码块​

Plain Text

​

悬停微交互 Hover Micro-interaction​

鼠标经过按钮、链接或卡片时发生细小变化，例如上移、边框加深、箭头移动或图片轻微放大。微交互用于确认“这个东西可以点”。​

适合： 项目卡片、按钮、链接、导航项、图片画廊。​

​

代码块​

Plain Text

为 Punk 的项目卡片添加 Hover Micro-interaction。​

鼠标进入时卡片上移 4px，边框由浅灰变为深绿色，封面图轻微放大到 1.03，右下角箭头向右移动 4px；​

动画使用 180—240ms ease-out；​

键盘 focus-visible 状态提供同等清晰反馈，不要只依赖 hover。​

​

错峰动画 Staggered Animation​

同一组元素不是同时出现，而是按很短的间隔依次进入。它能强化顺序和节奏，但间隔过长会让页面显得迟钝。​

适合： 卡片网格、菜单项、数据列表、Logo 墙、功能模块。​

​

代码块​

Plain Text

为 Punk 的四张能力卡片添加 Staggered Entrance。​

第一张进入视口后开始动画，其余卡片每隔 70ms 依次淡入并上移 12px；总等待时间不要超过 300ms；​

重复滚动时不要反复播放；reduced motion 模式下让所有卡片直接显示。​

​

滚动驱动动画 Scroll-driven Animation​

动画进度由滚动位置决定，而不是由固定时间决定。例如滚动到章节中段时，进度线正好走到一半。​

适合： 进度图、产品拆解、数字叙事、背景变化、章节动画。​

​

代码块​

Plain Text

在 Punk 的项目案例页使用 Scroll-driven Animation。​

​

第六章：提示与加载 Feedback & Loading​

提示与加载决定用户等待时看到什么、出错时怎么办、操作完成后如何确认。它回答的是：系统现在处于什么状态，以及用户下一步应该做什么。​

骨架屏 Skeleton Screen​

真实内容加载前，先显示与最终布局相似的灰色占位结构。它不能让网络变快，但能减少页面突然跳动和空白等待感。​

适合： 项目卡片、文章列表、Dashboard、详情页、图片画廊。​

​

代码块​

Plain Text

为 Punk 的项目列表设计 Skeleton Screen。​

骨架结构必须与最终卡片尺寸一致，包含封面占位、标题线、两行文字和标签占位；​

​

懒加载 Lazy Loading​

首屏之外的图片、视频或模块在接近视口时才加载，减少初始页面需要下载的资源。​

适合： 长页面、图片库、作品集、嵌入视频、文章推荐区。​

​

代码块​

Plain Text

为 Punk 的作品集实现 Lazy Loading。​

首屏 Hero 图片正常加载，不要设置 lazy；​

首屏以下的 img 和 iframe 使用 loading="lazy"；为图片预先设置 width、height 或 aspect-ratio，避免布局跳动；​

重要项目封面提供合适的 srcset 和 sizes，不要把所有资源都延迟加载。​

​

加载转圈 Loading Spinner​

用循环旋转图标表示系统正在处理，但不说明还需要多久。它只适合等待时间短、进度不可预测的任务。​

适合： 短请求、局部刷新、按钮处理、图片生成准备阶段。​

​

代码块​

Plain Text

Punk 网站提交短请求时显示 Loading Spinner。​

Spinner 只出现在正在更新的局部区域，不要遮罩整个页面；​

同时显示“正在加载项目”文字；​

超过 8 秒后追加更明确的等待说明和取消入口；​

动画在 reduced motion 模式下改为静态状态图标。​

​

进度条 Progress Bar​

显示任务已经完成多少，适合能够计算进度的上传、生成或多步骤任务。确定型进度条比不断转圈更能建立预期。​

适合： 文件上传、AI 生成、导出、数据同步、安装流程。​

​

代码块​

Plain Text

为 Punk 的 AI 图片导出任务添加 Determinate Progress Bar。显示 0—100% 进度、当前阶段名称和取消按钮；​

​

加载按钮 Loading Button​

用户点击提交后，按钮进入处理中状态，通常禁用重复点击，并把原文字替换为加载图标和状态说明。​

适合： 保存、发布、登录、生成、上传、表单提交。​

​

代码块​

Plain Text

Punk 的联系表单点击 Send Message 后，把按钮切换为 Loading Button：禁用重复提交，文字改为“Sending…”并显示小型 Spinner；​

保持按钮宽度不变，避免界面跳动；​

请求成功后显示“Sent”，失败后恢复可点击状态并显示错误原因。​

​

空状态 Empty State​

列表或页面没有内容时的正式界面，而不是一片空白。好的空状态会解释为什么为空，并给出下一步行动。​

适合： 新用户后台、搜索无结果、收藏夹、项目列表、通知中心。​

​

代码块​

Plain Text

为 Punk 的新项目页面设计 Empty State。​

中心显示一个简洁抽象图形、标题“还没有项目”、一句说明和“创建第一个项目”按钮；​

如果是筛选导致无结果，改为“没有匹配的项目”，并提供清除筛选按钮；不要使用消极或责备用户的文案。​

​

错误状态 Error State​

任务失败后明确告诉用户发生了什么、哪些内容受到影响，以及是否需要重新操作。错误状态不应只有红色或一个错误代码。​

适合： 表单失败、加载失败、权限问题、断网、404 与 500 页面。​

​

代码块​

Plain Text

为 Punk 的项目加载失败设计 Error State。​

显示清晰标题“项目暂时无法加载”、简短原因、Retry 按钮和返回项目列表链接；保留已经加载的其他内容，不要清空整个页面；​

错误信息使用图标、文字和颜色共同表达，并通过 role="alert" 或合适的 live region 通知辅助技术。​

​

重试状态 Retry State​

错误发生后提供重新执行操作的入口，并在重试过程中显示新的加载状态。它是错误恢复流程，而不仅是一颗按钮。​

适合： 网络请求、图片上传、AI 生成、同步任务、列表加载。​

​

代码块​

Plain Text

Punk 的图片上传失败后显示 Retry State。​

保留失败文件的缩略图和文件名，标出“上传失败”，提供 Retry 和 Remove 两个操作；​

点击 Retry 后只重新上传该文件，并切换为进度状态；​

成功后替换为完成状态，不要要求用户重新选择所有文件。​

​

乐观更新 Optimistic UI​

用户操作后，界面先假设操作会成功并立即更新，再在后台发送请求。失败时需要撤销变化并说明原因。​

适合： 点赞、收藏、简单状态切换、排序、轻量编辑。​

​

代码块​

Plain Text

Punk 的项目收藏按钮使用 Optimistic UI。​

点击后立刻把图标切换为已收藏并更新计数，同时后台发送请求；​

请求失败时恢复原状态，显示非阻塞错误提示并提供重试；​

不要把支付、删除账号等不可逆或高风险操作做成乐观更新。​

​

行内验证 Inline Validation​

用户输入时或离开字段后，在输入框附近显示具体错误，而不是提交后只在页面顶部说“表单有问题”。​

适合： 注册、联系表单、支付、设置、搜索条件。​

​

代码块​

Plain Text

为 Punk 的 Contact Form 添加 Inline Validation。​

邮箱字段在 blur 后检查格式，错误信息显示在输入框下方并说明如何修正；输入正确后显示简洁确认状态；​

不要在用户输入第一个字符时立刻报错；提交失败时把焦点移动到第一个错误字段，并在顶部提供错误摘要。​

​

第七章：视觉风格 Visual Styles​

视觉风格决定页面给人的第一印象。它回答的是：页面看起来克制还是张扬、像杂志还是像工具、是轻盈通透还是厚重直接。风格必须服务内容，而不是把所有流行效果堆在一起。​

极简主义 Minimalism​

减少非必要颜色、装饰和组件，通过留白、字体层级和少量重点内容建立秩序。极简不等于什么都没有，而是每个元素都有理由存在。​

适合： 个人主页、设计师作品集、产品介绍、写作网站、高端品牌。​

​

代码块​

Plain Text

为 Punk 设计一个 Minimalist Portfolio。​

使用米白背景、黑色正文和单一深绿色强调色，限制字体、圆角和阴影种类；首页只保留姓名、身份、精选项目和联系入口；​

通过大留白和清晰排版建立层级，不要加入多余渐变、发光效果或装饰图标。​

​

编辑杂志风 Editorial Design​

借鉴杂志和出版物的排版方式，强调大标题、图文比例、栏目节奏、页码和引语。​

适合： 个人品牌、文章站、摄影集、案例研究、文化内容。​

​

代码块​

Plain Text

为 Punk 的 Journal 设计 Editorial Layout。​

使用超大文章标题、窄正文栏、跨栏图片、章节编号、首字下沉和 pull quote；正文保持舒适行长和行高；​

不要把每段内容都放进卡片，让页面更接近现代独立杂志。​

​

瑞士风 Swiss Style​

强调网格、无衬线字体、客观排版、清晰对齐和有限颜色。它通常看起来理性、精确、系统化。​

适合： 设计工作室、建筑网站、作品目录、品牌系统、活动海报页。​

​

代码块​

Plain Text

为 Punk 的作品索引使用 Swiss Style。​

采用严格的 12 列网格、左对齐无衬线字体、明显编号和细分隔线；​

颜色仅使用米白、黑和深绿色；​

项目信息按年份、类别和角色对齐排列，避免装饰性手写字体与复杂阴影。​

​

玻璃拟态 Glassmorphism​

使用半透明面板、背景模糊、细边框和层叠关系，营造玻璃悬浮感。玻璃面板必须有足够对比度，不能让文字融进背景。​

适合： AI 产品、科技首页、数据面板、空间化 Hero、控制中心。​

​

代码块​

Plain Text

为 Punk 的 AI 工具首页添加克制的 Glassmorphism。​

深绿色抽象背景上叠加两到三层半透明面板，使用 backdrop-filter: blur(16px)、低透明白色背景和细亮边框；​

正文区域保持高对比度，不要让所有卡片都透明，也不要使用过度霓虹发光。​

​

新野兽派 Neo-brutalism​

使用粗边框、高对比配色、直接排版和明显阴影，保留原始感，但比早期网页野兽派更系统、更适合产品界面。​

适合： 创作者网站、实验产品、活动页、年轻品牌、独立工具。​

​

代码块​

Plain Text

为 Punk 的实验项目页使用 Neo-brutalist Style。​

采用粗黑边框、硬阴影、大字号标题和深绿色重点按钮；​

组件保持清晰网格与可读性​

​

深色模式 Dark Mode​

使用深色背景与浅色文字，降低暗环境中的强光感。它不是简单把黑白反转，而是要重新调整对比度、阴影、边框和图片。​

适合： 开发者工具、创作后台、媒体产品、夜间阅读、AI 应用。​

​

代码块​

Plain Text

为 Punk 网站实现完整 Dark Mode。使用 prefers-color-scheme 读取系统偏好，并提供手动切换和本地保存；​

深色背景避免纯黑，正文使用柔和浅灰，深绿色调整为更亮的可见色；表单、滚动条和原生控件同步 color-scheme；​

检查两种模式下的对比度和图片表现。​

​

单色与双色 Monochrome / Duotone​

用一种主色或两种颜色控制整个视觉系统，通过明度、面积和材质变化建立层次。​

适合： 品牌主页、摄影网站、作品目录、专题页、极简产品。​

​

代码块​

Plain Text

为 Punk 的个人网站使用 Monochrome + Duotone 视觉系统。​

全站以米白、黑和深绿色构成，项目图片转换为低饱和绿色双色调，​

鼠标悬停后恢复少量原色；保证文字、边框和按钮层级清楚，不要让所有元素使用相同深浅。​

​

网格渐变 Gradient Mesh​

多个柔和色块在页面中交融，形成具有空间感的抽象背景。它比普通线性渐变更自然，但容易抢走正文注意力。​

适合： Hero 背景、AI 产品、活动页、抽象个人品牌、登录页。​

​

代码块​

Plain Text

​

颗粒与噪点 Grain / Noise Texture​

在纯色或渐变上叠加细小颗粒，减少数字画面的塑料感，增加印刷、胶片或纸张质感。​

适合： 编辑设计、品牌网站、抽象背景、海报式 Hero、作品封面。​

​

代码块​

Plain Text

在 Punk 网站的米白背景和深绿色 Hero 上添加非常轻的 Grain Texture。​

噪点透明度保持低，使用可重复的小型纹理或 CSS/SVG filter，不影响文字清晰度；不要给表单和正文区域增加明显颗粒；​

移动端控制纹理资源大小，避免使用超大背景图片。​

​

新拟态 Neumorphism / Soft UI​

通过同色系的亮暗阴影，让按钮和面板像从背景中凸起或凹下。它视觉柔和，但边界和可访问性容易不足。​

适合： 小型控制组件、播放器、实验界面、展示型仪表盘。​

​

代码块​

Plain Text

为 Punk 的实验性音乐控制器使用局部 Neumorphism。​

仅对播放、音量和模式按钮使用同色亮暗阴影，保留清晰文字、图标和 focus outline；​

主要导航、表单与长文本不要使用新拟态；按下状态需要通过阴影、位置和颜色共同表达。​

​

第八章：高级效果与体验 Advanced Effects & Quality​

高级效果不等于更复杂。真正成熟的网页会同时考虑表现力、可访问性、兼容性和性能。它回答的是：哪些效果值得做，以及怎样避免效果反过来伤害体验。​

自定义光标 Custom Cursor​

用自定义圆点、文字或预览替代或补充系统光标，常用于展示当前可执行动作，例如 View、Drag 或 Open。​

适合： 创意作品集、图片画廊、实验网站、拖拽区域。​

​

代码块​

Plain Text

为 Punk 的桌面作品画廊添加 Custom Cursor。​

默认显示小型绿色圆点，悬停项目图片时扩展并显示“View”，进入横向画廊时显示“Drag”；​

保留原生光标作为可用后备，触屏设备不启用；不要让自定义光标产生明显延迟，也不要遮挡表单与正文。​

​

磁吸按钮 Magnetic Button​

鼠标靠近按钮时，按钮或内部文字轻微朝光标方向移动，形成被吸引的感觉。​

适合： 主要 CTA、作品入口、联系按钮、创意首页。​

​

代码块​

Plain Text

为 Punk 首页的 View Work 按钮添加轻量 Magnetic Effect。​

只有当光标距离按钮较近时，按钮内容最多偏移 6px，鼠标离开后快速回到原位；按钮本身不能逃离点击区域；​

触屏和 reduced motion 模式下关闭磁吸，只保留普通 hover 状态。​

​

三维倾斜卡片 3D Tilt Card​

卡片根据光标位置轻微旋转，并改变内部层次或高光，形成具有深度的立体反馈。​

适合： 精选项目、产品卡片、收藏卡、视觉作品、实验性主页。​

​

代码块​

Plain Text

为 Punk 的 Featured Project 卡片添加 3D Tilt。​

光标移动时 rotateX 和 rotateY 最大不超过 5deg，封面、文字和高光使用很小的 Z 轴层次；鼠标离开后平滑归位；​

移动端和 reduced motion 模式关闭倾斜，卡片点击区域保持稳定。​

​

聚光灯悬停 Spotlight Hover​

光标经过大卡片或网格时，局部出现柔和光斑，突出当前区域并弱化周围内容。​

适合： Dashboard、深色界面、功能网格、项目卡片、定价表。​

​

代码块​

Plain Text

在 Punk 的深色功能网格上添加 Spotlight Hover。​

使用鼠标位置控制径向渐变，光斑范围只覆盖当前卡片附近，亮度克制；​

焦点进入卡片时提供静态高亮替代；不要使用持续追踪的强烈发光，也不要降低文字对比度。​

​

图片与文字蒙版 Image / Text Mask​

让图片或动态纹理只显示在文字、圆形或自定义形状内部，制造强烈但可控的视觉焦点。​

适合： Hero 大标题、项目封面、章节数字、品牌标语。​

​

代码块​

Plain Text

为 Punk 首页标题“MAKE IDEAS VISIBLE”添加 Text Mask，低饱和抽象动画只显示在文字内部；​

在不支持 background-clip: text 的环境中回退为深绿色实心文字；​

标题必须保持可选择、可读和语义化，不要把重要文字只做成图片。​

​

裁切揭示 Clip-path Reveal​

元素通过圆形、矩形或多边形裁切区域逐渐展开，像幕布被打开一样展示图片或页面。​

适合： 项目切换、图片入场、章节过渡、按钮预览、全屏菜单。​

​

代码块​

Plain Text

​

WebGL / Three.js Hero​

使用 GPU 渲染实时 3D、粒子、材质或交互场景，可以创造普通 CSS 难以实现的空间视觉。​

适合： 科技产品、AI 品牌、实验作品集、数据艺术、交互叙事。​

​

代码块​

Plain Text

为 Punk 的首页制作一个轻量 Three.js Hero。​

场景包含一个低多边形抽象球体和三层半透明界面平面，跟随鼠标产生非常轻微视差；限制几何体数量、纹理尺寸和像素比；​

页面隐藏时暂停渲染；移动端使用简化场景，低性能或 WebGL 不可用时显示静态海报图。​

​

视图过渡 View Transitions​

页面或界面状态切换时，让旧内容与新内容平滑衔接，例如项目卡片自然放大为详情页封面。​

适合： 项目列表到详情页、SPA 状态切换、多页网站导航、图片画廊。​

​

代码块​

Plain Text

Punk 的项目卡片点击后使用 View Transition 进入详情页。​

卡片封面与详情页 Hero 共享 view-transition-name，让图片从卡片位置自然扩展；过渡控制在 300—450ms；浏览器不支持时正常导航；​

不要让过渡影响焦点、阅读位置或返回按钮行为，并在 reduced motion 下跳过动画。​

​

减少动态 Reduced Motion​

当用户系统开启“减少动态效果”时，网站降低或移除非必要位移、缩放、视差和自动播放，保留功能与信息反馈。​

适合： 所有包含动画、滚动效果、视差或 3D 的网页。​

​

代码块​

Plain Text

为 Punk 网站完整支持 prefers-reduced-motion: reduce。​

关闭 Parallax、磁吸按钮、3D Tilt、自动 Marquee 和大范围页面过渡；​

Scroll Reveal 改为直接显示或短淡入；Carousel 停止自动播放；所有功能仍可操作，不能因为关闭动画而隐藏内容或丢失状态反馈。​

​

性能预算 Performance Budget​

在开发前为脚本、图片、字体、请求数量和关键性能指标设定上限，避免视觉效果无限增加导致网站越来越慢。​

适合： 图片型作品集、动画网站、AI 产品、营销页、WebGL 项目。​

​

代码块​

Plain Text

为 Punk 的个人网站制定 Performance Budget：​

移动端首屏 JavaScript 尽量控制在 170KB gzip 以内，首屏关键图片使用现代格式并严格压缩，WebGL 场景延迟到需要时加载，字体不超过两个家族和必要字重；​

在 CI 中运行 Lighthouse 或等价检查，超过预算时提示优化，不要为了动画牺牲核心内容加载。​

​

一段可以直接复制的完整提示词​

​

代码块​

Plain Text

​

​