---
title: "5.5 让页面更高级的效果"
description: "视差滚动、3D 翻转、骨架屏...那些让页面显得'高级'的效果"
---

# 5.5 让页面更高级的效果

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

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

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

## 过渡效果

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

<TransitionEffects />

## 按钮特效

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

<ButtonEffects />

## 视觉特效

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

<VisualEffects />

## 滚动效果

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

<ScrollEffects />

## 交互效果

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

<InteractionEffects />

## 使用原则

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

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

---

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