APP 引导页设计3-优秀的引导页
引导页，虽是每个app必备，在实际的使用中，其设计的效果并不容易达不到预期，用户常常不会仔细浏览这些引导的信息，对于引导的内容信息的接收程度会打折扣，很难全部吸收；还有不少情况下用户会跳过引导，忽略引导想提供的帮助信息。那如何使引导页引起用户的兴趣，让他们花费一点精力去吸收引导的内容信息呢？什么是优秀的引导页呢？
失败的理由有很多，成功的理由就那么几个，在笔者看来，成功的引导页归纳起来，具备以下特点：有趣，格逼，情怀，态度。
有趣：就是令人眼前一亮，展现与用户息息相关的图文，把用户吸引其中，加入点小游戏，让用户觉得有趣好玩。
情怀：情怀是目前的流行语，人文关怀的代名词，具备人文关怀的引导页，可以让用户产生共鸣，烦躁的心情变得恬静，舒适，用户自然会往下翻。
格逼、态度：有格逼有态度的引导页，表现出APP的独特气质，与众不同。
OK，说了这么多，下面展示下案例，欣赏下优秀的引导页，看看他们是怎样表现有趣、情怀、格逼和态度的。
1、还记得微信6.1的引导页么？不得不说微信6.1的引导页文案非常精彩，前两页像一个小游戏，统计你送出和收获的点赞数，吸引你往下翻，后两页点赞太容易，当面夸太难，画龙点睛，充满人文关怀，令人眼前一亮。
2、在微信在推出4.0版本的时候，新增加了类似Path和Instagram一样的相册功能，并且可以把相册分享到朋友圈。这个功能的加入拓展了之间仅是沟通聊天工具的产品定义。在4.0版本的新功能引导中，它非常成功的讲诉了一个关于相册功能的故事，并且在设计内容时非常注意建立联系。在故事阐述中它一直强调用户可以怎么样，让用户能明确感觉到与自己的关系。
3、Vida的引导页，对于一个新概念的新产品，用户需要对这些新的概念或内容有所理解才能更好的使用产品。
4、Between 令人眼前一亮的引导页面，讲建立与用户使用情景匹配的场景，让用户能建立一种熟悉的感受，能让用户对引导的功能点感同身受。
5、知乎的引导页，每页抛出一个需告知的点，让用户感觉到产品与自己是有关系的，现在所说的内容是与我相关的，我需要花费精力来关注一下。
6、CSDN引导页，快速简洁，每页8个字，干扰少，清晰明了。
#本文同步发布到 pm263.com ，pm263为你提供更多更全的产品经理干货，欢迎大家访问。
app引导页和启动页有什么区别
我们在打开APP时候总会跳出一些页面，有人说是启动页也有人叫开机图，各种叫法让人傻傻分不清楚。那么在启动APP的时候我们看到的页面到底是什么，又有什么区别呢？下面就是关于启动页、闪屏、引导页的简单的归纳和总结，希望对大家有所帮助。UI基础知识：启动页、闪屏和引导页的区别01 启动页 (launch screen )1. 定义当app被用户打开时，在app启动过程中被用户所看到的过渡页面（或动画）都被我们统称为启动页。2. 作用APP在用户打开过程中需要一定的时间，启动页的展示是为了给用户一个过渡页面，缓解用户打开app时等待的焦虑心情。类似于在app在加载过程中loading动画一样，都是为了通过设计的手段来解决用户的焦虑情绪。3. 主要分类规范型和品牌推广型（1）规范型根据 iOS 和MD 的官方定义来，用户打开应用能立即使用是最好的体验，例如苹果系统自带的一些应用，是没有闪屏的；或者把闪屏设计的和首页很像，类似 国外的instagramUI基础知识：启动页、闪屏和引导页的区别（2）品牌推广型国内很多APP为了体现产品的品牌，强化用户对品牌的记忆，一般启动页会由：产品名称+产品形象（logo）+产品广告语（slogan）组成。闪屏设计多数较为精简，主要目的是为了突出产品特点，不宜内容太多，太过复杂，且不易经常更换，打断用户对品牌的认知记忆，类似国内的淘宝、优酷等。4. 交互方式启动页为一张静态图片，不可点击，不可跳过02 闪屏(splash screen )UI基础知识：启动页、闪屏和引导页的区别1. 定义闪屏页约等于启动页，又叫做开机广告。由于闪屏主要用于活动推广，商业上的广告宣传，容易造成用户排斥心理，所以这类闪屏多数有倒计时和跳过的功能。该页面出现在启动页之后，类似京东、爱奇艺等国内大多数应用，在冷启动出现启动页之后有时候紧接着还会出现广告闪屏。2. 主要分类广告推广型、活动推广型、节日关怀型。UI基础知识：启动页、闪屏和引导页的区别（1）广告推广型产品为了通过流量变现，在此区域给一些商家提供广告宣传。UI基础知识：启动页、闪屏和引导页的区别（2）活动推广型有时候产品在运营过程中会策划一些行销活动，该区域就作为活动的宣传口。活动推广型闪屏着重体现活动的主题，用户利益点，以及营造活动氛围。UI基础知识：启动页、闪屏和引导页的区别（3）节日关怀型在节假日到来时，很多APP会通过营造节日气氛来体现人文关怀。目的主要是通过情感化得设计给用户带来节日祝福，提升用户的对产品的好感度，提升产品本来的品牌调性。且此类闪屏多采用插画类的手法，对设计师的表现力比较强的需求。UI基础知识：启动页、闪屏和引导页的区别3. 交互方式引导页可以为一张静态图片，也可以是个动态短视频，有倒计时和可以跳过，跳过后进入app首页。03 引导页（onboarding screen）1. 定义用户第一次安装app或者app更新后首次启动时展示的3-5个可滑动的页面。主要是向用户展示产品的功能和产品亮点。2. 主要分类功能介绍性、推广介绍型、问题解决型（1）功能介绍性通过简洁明了的设计和通俗易懂的文案提炼产品特色功能，把产品信息传达给用户。需要注意的是保证信息展示一针见血，切记啰嗦反复，引导页数控制在5张以内，避免过多的页面造成用户反感。（2）推广介绍型主要目的是传达产品的思想和态度，告诉用户产品的使命和情怀。这一类的引导页需要做到吸引用户注意，引发用户的共鸣。（3）问题解决型问题解决类通过描述在实际生活中会遇到的问题，直击用户痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。3. 交互方式可以左右滑动切换页面，一般最后一页有引导按钮，可以寄点击进入app。总结启动页打开app时，展示的第一个页面，不可点击，无交互闪屏在app启动后出现的第2个页面，如app没有配置开机图，则不显示，直接从启动页跳到app首页；如果配置了开机图（闪屏），一般有倒计时，可以跳过进入首页，也可以点击跳转到相应的活动或专题页引导页时用户在安装或者更新后初次打开app出现的3-4张类似产品说明书似的介绍页面，可以左右切换，并在最后一个页面有引导按钮跳转到首页。（退出后，再次打开app则不再出现该页面，除非卸载重装）本文由 @Sevenmoon 原创发布于人人都是产品经理。未经许可，禁止转载题图来自Unsplash，基于CC0协议
如何设计受欢迎的APP引导页
1
目的区分
根据引导页的目的、出发点不同，可以将其分为功能介绍类、使用说明类、推广类、问题解决类，一般引导页不会超过5页。
功能介绍类
功能介绍类引导页主要是对产品的主要功能进行展示，让用户对产品主功能有一个大致的了解。采用的形式大多以文字配合界面、插图的方式来展现。
以易信为例，采用文字与水彩插图结合的方式，文字分为2个层次，大标题与小标题，大标题是对主功能的概括，小文字是对其功能模块的详细描述或进一步补充说明。
2
使用说明类
使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。这类引导页大多采用箭头、圆圈进行标识，以手绘风格为主。以虾米音乐的引导页为例，对于较难发现的播放队列、歌词的操作方式进行的箭头引导来说明。
3
推广类
推广类引导页除了有一些产品功能的介绍外，更多是想传达产品的态度，让用户更明白这个产品的情怀，并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。而制作精良、有趣的引导页，用户会驻足观赏。
以淘宝旅行为例，淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用，在你出行前就帮你计划好所有的行程安排，只要一个行李箱，说走就走，与产品的理念相契合。而另外一款应用，选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。
4
问题解决类
问题解决类通过描述在实际生活中会遇到的问题，直击痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。例如QQ浏览器的引导页设计，通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题（搜不到小说、看小说花钱、小说更新需要等）。
5
表现方式
文字与界面组合
这是最常见的引导页面，简短的文字+该功能的界面，主要是运用在功能介绍类与使用说明类引导页。这种方式能较为直接地传达产品的主要功能，缺点在与过于模式化，显得千篇一律。
6
文字与插图组合
文字与插图的组合方式也是目前常见的形式之一。插图多具象，以使用场景、照片为主，来表现文字内容。
7
动态效果与音乐
除了静态页面外，开始流行具有动态效果的页面。在单个页面采用动画的形式，考虑好各个组件的先后快慢，打破原有的沉寂，让页面动起来。同时结合动效可以考虑页面间切换的方式，将默认的左右滑动改为上下滑动或过几秒自动切换到下一页。在浏览引导页的时候，可以试着加入一些与动效节奏相符合的音乐，会是一种更加新颖的方式。
8
视频展示
在打开后通过播放视频的方式来介绍产品或传递一种理念，这种方式多见于偏生活记录类的应用，如拍照、运动类应用，给人传达青春活力、积极乐观的生活态度。优点：直观，动感，生活化。缺点：应用较大，视频播放会出现卡顿的情况。
9
总结
以上已经针对引导页的目的差异以及表现方式进行了相关归类，在具体的设计中还得注意一些原则，它们会让你的设计更加吸引人，信息传达的效果更好。
文案言简意赅，突出核心
根据爱尔兰哲学家汉密尔顿观察发现的7±2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7±2个。因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。如果表达起来困难，可以辅助一小段文字进行解释或补充。因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。
精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。
10
视觉聚焦
在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。
视觉聚焦包括两部分，一是文案的处理，要注意层次，主标题与副标题要形成对比；二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律，从上到下，从左到右，从大到小。因此可以根据这个视线流的规律来进行引导页的设计。
如下图为天猫客户端的引导页，分析其视觉流发现，浏览的顺序从插图到主文案，再到辅助文案，缺点在首次看到的是插图而不是文案，插图相对文字理解相对困难，因此未能快速地获取该页的主要信息，可以考虑将文案与插图的位置进行互换，这样会好一些。
11
富于情感化
文案具象化
通过具体的元素、场景来表现文案，采用写实、半写实的方式进行表现，有些应用还会配以水彩风格。以天猫为例，天猫是一款购物应用，在设计上通过商场、店铺的实际场景的具体描绘，渲染轻松、欢快的购物过程。
12
页面动效、页面间交互方式的差异化
之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。
而页面间的切换方式除了传统的卡片左右滑动的方式外，可以结合线条、箭头等进行引导，通常会配合动效。例如网易新闻客户端、印象笔记·食记，它们在引导页的设计上采用了线条作为主线贯穿整个引导页面，小圆点显示当前的浏览进度，滑动的过程中有滚动视差的效果。
13
与产品、公司基调相一致
引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致，这样在用户还未使用具体产品前就给产品定下一个对应的基调。产品的特性决定了引导页的风格，产品是消费类、娱乐类、工具类还是其他，根据不同的产品特性决定了引导页是走轻松娱乐、小清新，还是规整、趣味性的风格，在最终的表现形式上也就会有完全不同的展现，是插图、界面、动画还是其他。如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等，通过对比就能发现他们在引导页设计上的差异。
这样一方面有利于产品一脉相承，与产品使用体验相一致；另一方面也会进一步强化公司形象。
14
总结
想做好引导页的设计，在理解用户对引导页需求的基础上，怀揣热爱产品的情怀，依靠精致的布局，巧妙的构思，贴切的氛围渲染，再加一点点特色。当然光讲是枯燥的，还是需要设计师在具体的设计中不断实践，总结出新的观点与方法，探索出别具一格的引导页设计。
如何做好App的引导页
一、 目的区分
根据引导页的目的、出发点不同，可以将其分为功能介绍类、使用说明类、推广类、问题解决类，一般引导页不会超过5页。
1.功能介绍类
功能介绍类引导页主要是对产品的主要功能进行展示，让用户对产品主功能有一个大致的了解。采用的形式大多以文字配合界面、插图的方式来展现。
以易信为例，采用文字与水彩插图结合的方式，文字分为2个层次，大标题与小标题，大标题是对主功能的概括，小文字是对其功能模块的详细描述或进一步补充说明。
2、使用说明类
使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。这类引导页大多采用箭头、圆圈进行标识，以手绘风格为主。以虾米音乐的引导页为例，对于较难发现的播放队列、歌词的操作方式进行的箭头引导来说明。
3、推广类
推广类引导页除了有一些产品功能的介绍外，更多是想传达产品的态度，让用户更明白这个产品的情怀，并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。而制作精良、有趣的引导页，用户会驻足观赏。
以淘宝旅行为例，淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用，在你出行前就帮你计划好所有的行程安排，只要一个行李箱，说走就走，与产品的理念相契合。而另外一款应用，选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。
4、问题解决类
问题解决类通过描述在实际生活中会遇到的问题，直击痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。例如QQ浏览器的引导页设计，通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题(搜不到小说、看小说花钱、小说更新需要等)。
二、表现方式
1、文字与界面组合
这是最常见的引导页面，简短的文字+该功能的界面，主要是运用在功能介绍类与使用说明类引导页。这种方式能较为直接地传达产品的主要功能，缺点在与过于模式化，显得千篇一律。
2、文字与插图组合
文字与插图的组合方式也是目前常见的形式之一。插图多具象，以使用场景、照片为主，来表现文字内容。
3、动态效果与音乐
除了静态页面外，开始流行具有动态效果的页面。在单个页面采用动画的形式，考虑好各个组件的先后快慢，打破原有的沉寂，让页面动起来。同时结合动效可以考虑页面间切换的方式，将默认的左右滑动改为上下滑动或过几秒自动切换到下一页。在浏览引导页的时候，可以试着加入一些与动效节奏相符合的音乐，会是一种更加新颖的方式。
4、视频展示
在打开后通过播放视频的方式来介绍产品或传递一种理念，这种方式多见于偏生活记录类的应用，如拍照、运动类应用，给人传达青春活力、积极乐观的生活态度。优点：直观，动感，生活化。缺点：应用较大，视频播放会出现卡顿的情况。
三、 总结
以上已经针对引导页的目的差异以及表现方式进行了相关归类，在具体的设计中还得注意一些原则,它们会让你的设计更加吸引人，信息传达的效果更好。
1、文案言简意赅，突出核心。
根据爱尔兰哲学家汉密尔顿观察发现的7±2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7±2个。因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。如果表达起来困难，可以辅助一小段文字进行解释或补充。因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。
精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。
2、视觉聚焦
在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。视觉聚焦包括两部分，一是文案的处理，要注意层次，主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律，从上到下，从左到右，从大到小。因此可以根据这个视线流的规律来进行引导页的设计。
如下图为天猫客户端的引导页，分析其视觉流发现，浏览的顺序从插图到主文案，再到辅助文案，缺点在首次看到的是插图而不是文案，插图相对文字理解相对困难，因此未能快速地获取该页的主要信息，可以考虑将文案与插图的位置进行互换，这样会好一些。
3、富于情感化
A、文案具象化
通过具体的元素、场景来表现文案，采用写实、半写实的方式进行表现，有些应用还会配以水彩风格。以天猫为例，天猫是一款购物应用，在设计上通过商场、店铺的实际场景的具体描绘，渲染轻松、欢快的购物过程。
B、页面动效、页面间交互方式的差异化
之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。
而页面间的切换方式除了传统的卡片左右滑动的方式外，可以结合线条、箭头等进行引导，通常会配合动效。例如网易新闻客户端、印象笔记·食记，它们在引导页的设计上采用了线条作为主线贯穿整个引导页面，小圆点显示当前的浏览进度，滑动的过程中有滚动视差的效果。
4、与产品、公司基调相一致
引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致，这样在用户还未使用具体产品前就给产品定下一个对应的基调。产品的特性决定了引导页的风格，产品是消费类、娱乐类、工具类还是其他，根据不同的产品特性决定了引导页是走轻松娱乐、小清新，还是规整、趣味性的风格，在最终的表现形式上也就会有完全不同的展现，是插图、界面、动画还是其他。如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等，通过对比就能发现他们在引导页设计上的差异。
这样一方面有利于产品一脉相承，与产品使用体验相一致;另一方面也会进一步强化公司形象。
以来往为例，来往是一款针对个人用户的及时通讯应用，主打扎堆、阅后即焚、敲门等与微信不一样有趣的功能，也是想给用户创造不一样的IM沟通方式。因此在引导页的设计上通过趣味性、甚至有点搞怪的动作与表情来表现来往是这样一款有趣、欢乐多的产品。
又如网易彩票，引导页的主色选用了与网易自身的红色相一致的红色，在公司产品系统性上保持高度的一致性。
总之：想做好引导页的设计，在理解用户对引导页需求的基础上，怀揣热爱产品的情怀，依靠精致的布局，巧妙的构思，贴切的氛围渲染，再加一点点特色。当然光讲是枯燥的，还是需要设计师在具体的设计中不断实践，总结出新的观点与方法，探索出别具一格的引导页设计。
