新手引导轮播
Onboarding Carousel
第一次打开 App 时的那几屏:大图、一个卖点、一排圆点,最后落到「开始使用」。
iOSAndroid 安卓HarmonyOS 鸿蒙移动 Web / 小程序引导与入门全屏组件
大白话说明
引导轮播用 3–4 屏把产品最打动人的价值讲完:每屏一个卖点,配图风格统一,底部圆点报进度,最后一屏放开始按钮。右上角常驻「跳过」,老用户和急脾气都不勉强。
什么时候用
产品价值一句话说不清、或核心功能需要先建立概念时,用它争取 15 秒的讲解时间。
什么时候不用
价值一眼明了的工具类产品别硬上引导——直接让人用,第一次操作里再教(渐进式引导)。
细节与变体
- 每屏文案:一句标题(卖点)+ 一行说明,多一个字都是负担
- 插画风格必须统一:人物比例、配色、线条一套到底
- 最后一屏的按钮是整屏唯一的实心按钮,别放第二个 CTA
配套效果见下方「可用效果」。
配套提示词(点开填空、复制)
可用效果
参考实现(开源)
- Open Doodles 插画 ↗ CC0-1.0 · 免费(CC0)
手绘风免费插画:涂鸦人物与场景,空状态和引导页的常用粮草。
- Open Peeps 人物插画 ↗ CC0-1.0 · 免费(CC0)
可拼装的人物插画系统:脸、发型、姿势自由组合,人物一致性难题的现成解。
- React Native 模板(Obytes) ↗ MIT · 免费(MIT)
Expo 移动 App 的生产级脚手架:导航、状态、表单、测试都预置好,移动模板的分层标杆。