打开一个新 App，第一眼看到的往往是几张滑动的引导页。别小看这几屏内容，它决定了用户是继续用下去，还是直接卸载。很多人觉得引导页就是放几张好看的图加点文字，其实没那么简单。做得好，能快速建立信任；做不好，再好的产品也可能被划走。
抓住前三秒，别让用户思考
用户打开应用时注意力最集中的就是前几秒。引导页第一屏一定要直击痛点。比如一款记账 App，与其写‘功能强大、数据安全’，不如直接说‘30秒记清每一笔开销’。语言要像朋友聊天一样自然，避免堆砌术语。
图文搭配要有逻辑，不是随便拼贴
常见的错误是图很美，但和文字对不上。比如页面写着‘极速启动’，配图却是一个人慢悠悠喝咖啡。正确做法是让视觉强化信息。如果强调‘离线可用’，就画个手机在地铁隧道里依然能操作的场景。用户眼睛扫过去，不用读字也能get到重点。
少即是多，别把引导页当说明书
见过最多的一次连着七八页引导，看完都忘了第一张讲啥。一般 3 到 4 页足够。每页只讲一件事：一个是核心功能，一个是使用场景，一个是差异化优势。剩下的细节，留给实际界面去展示。
动效要克制，别为了炫技添堵
适当的微动效能吸引注意，比如按钮轻轻弹跳提示可点击。但全程粒子爆炸、3D 翻转，不仅加载慢，还容易让人头晕。尤其低端机型上卡一下，好感度直接归零。简单淡入滑动，兼容性最好。
给老用户留条路
很多人忽略这一点：已经看过引导页的用户，不该每次更新都强制重看。加个‘跳过’按钮是最基本的。更贴心的做法是在设置里提供‘重新查看引导页’的选项，既尊重新手，也不烦老人。
代码示例：简单的引导页结构
如果是自己开发，HTML 结构可以这样组织：
<div class="onboarding-container">
<div class="onboarding-slide active">
<img src="step1.png" alt="记录支出">
<h4>随手记，不遗漏</h4>
<p>买杯咖啡也能一秒记账</p>
</div>
<div class="onboarding-slide">
<img src="step2.png" alt="查看报表">
<h4>看得清，管得住</h4>
<p>每周花销自动汇总成图表</p>
</div>
<button class="skip-btn">跳过引导</button>
<div class="dots-indicator">
<span class="dot active"></span>
<span class="dot"></span>
</div>
</div>配合 CSS 控制轮播和动画，保持轻量。关键是让用户感觉流畅，而不是在‘看演示’。