5.5 让页面更高级的效果 转载

来源:https://github.com/datawhalechina/vibe-vibe

本节目标:了解那些让页面看起来"很贵"的常见效果,掌握每个效果对应的提示词,需要时直接让 AI 实现。

有些页面一看就很"贵",但你说不清为什么。其实它们用了很多标准化的高级效果。老师傅说:"这些效果都有名字,知道名字就能让 AI 帮你做。"

每个效果都有实时预览和对应的 AI 提示词,可以直接复制使用。

过渡效果

让元素的出现和变化不那么突兀——不是"啪"地蹦出来,而是优雅地滑进画面。

按钮特效

按钮是用户点击最多的元素,一个有质感的按钮能让整个页面提升一个档次。

视觉特效

纯视觉层面的点缀,让页面看起来更精致。

滚动效果

你刷 Apple 官网时,图片和文字像是在不同速度移动,有前有后——这就是滚动效果在起作用。

交互效果

用户动手参与的效果——拖、滑、靠近,让页面从"看"变成"玩"。

使用原则

⚠️ 少即是多

一个页面最多用 2-3 个高级效果。全都要 = 花里胡哨。

  1. 先做功能,再加效果。效果是锦上添花,不是雪中送炭
  2. 移动端谨慎使用。复杂动画在手机上可能卡顿
  3. 性能优先。如果一个效果让页面变慢,果断去掉
  4. 有意义的动画。每个动画都应该传达信息或引导注意力,不是为了炫技

ℹ️ 本章总结

你现在有了一个完整的 UI/UX 工具箱:AI 设计工具帮你快速出原型,组件库提供现成的积木,动画库让页面动起来,灵感网站和风格关键词帮你跟 AI 精确沟通,高级效果让页面看起来更专业。记住老师傅的话:工具只是手段,理解用户才是核心

最后编辑:Alex 2026-03-05 11:39:51