前言
当你第一次打开一款应用的时候常常会看到精美的引导页设计，它们在你未使用产品之前提前告知你产品的主要功能与特点，第一次印象的好坏会极大地影响到后续的产品使用体验。因此各个公司都在努力将这几个页面设计好，从一开始就引人入胜。那接下来我跟大家一起来探讨关于引导页的设计。
今天从是什么、为什么、怎么做来谈论引导页。
申明:这篇文章是借鉴的相关的文章，很多经验并非原创，再次向原作者表示感谢。
一、什么是引导页？
所谓引导页，就是引导用户学习app用法或了解app作用的页面，其核心在于“引导”二字。在此情况下，若一个号称引导页的东西不能达到让用户学习app的用法，或了解app相关，都不能使真正意义上的引导页。
APP引导页是一个新用户的专属礼。引导新用户了解APP的一个过程。同时也是每一次迭代新版APP之后的标识身份。
引导页的分类：
根据引导页的目的、出发点不同，可以将其分为功能介绍类、使用说明类、推广类、问题解决类，一般引导页不会超过5页。
一、目的区分
1.功能介绍类
功能介绍类引导页主要是对产品的主要功能进行展示，让用户对产品主功能有一个大致的了解。采用的形式大多以文字配合界面、插图的方式来展现。
2、使用说明类
使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。这类引导页大多采用箭头、圆圈进行标识，以手绘风格为主。以虾米音乐的引导页为例，对于较难发现的播放队列、歌词的操作方式进行的箭头引导来说明。
3、推广类
推广类引导页除了有一些产品功能的介绍外，更多是想传达产品的态度，让用户更明白这个产品的情怀，并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。而制作精良、有趣的引导页，用户会驻足观赏。
4、问题解决类
问题解决类通过描述在实际生活中会遇到的问题，直击痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。
二、表现方式
1、文字与界面组合
这是最常见的引导页面，简短的文字+该功能的界面，主要是运用在功能介绍类与使用说明类引导页。这种方式能较为直接地传达产品的主要功能，缺点在与过于模式化，显得千篇一律。
2、文字与插图组合
文字与插图的组合方式也是目前常见的形式之一。插图多具象，以使用场景、照片为主，来表现文字内容。
3、动态效果与音乐
除了静态页面外，开始流行具有动态效果的页面。在单个页面采用动画的形式，考虑好各个组件的先后快慢，打破原有的沉寂，让页面动起来。同时结合动效可以考虑页面间切换的方式，将默认的左右滑动改为上下滑动或过几秒自动切换到下一页。在浏览引导页的时候，可以试着加入一些与动效节奏相符合的音乐，会是一种更加新颖的方式。
4、视频展示
在打开后通过播放视频的方式来介绍产品或传递一种理念，这种方式多见于偏生活记录类的应用，如拍照、运动类应用，给人传达青春活力、积极乐观的生活态度。优点：直观，动感，生活化。缺点：应用较大，视频播放会出现卡顿的情况。
二、为什么要做引导页？
移动应用在新用户注册以及新版本发布的时候都会使用用户引导，那用户引导的作用是什么呢？
可以从两方面来进行探讨：
一方面从产品的角度出发，产品需要通过用户引导来突出产品的新功能和特性，说明功能结构变化，避免产品的陌生感，满足产品 的需求。
另一方面从用户的角度出发，用户需要通过用户引导了解产品的功能以及如何操作，迅速上手这个产品，降低学习成本，满足用户的需求。
三、用户引导的设计原则
1. 保证用户引导的有效性
保证用户引导发挥自身的作用，突出产品的功能，帮助用户更好的使用产品。这是用户引导设计的第一原则，用户引导是对产品内容以及形式的辅助说明，如果不能保证用户引导发挥作用，那用户引导不但失去了意义，反而会影响了用户体验。
2.根据使用场景触发相应的用户引导
用户在使用产品的时候都是有一定的使用场景的，根据用户的使用场景触发相应的用户引导，保证在用户需要的时候弹出引导是最符合用户体验的，也是用户 最愿意接受的时候。这样引导既不会特别突兀，弄的用户不知所措，又能在相应的场景下帮助用户。
3. 减少对用户体验的干扰，尽可能去提升用户体验
用户引导在用户使用产品过程中的弹出是用户意想不到的，很有可能就打扰了用户使用产品的流畅性，破坏了用户体验。因为这是用户没有预期突然出现的东 西，在一定程度上会有一定的惊慌失措感，但是好的用户引导出现在用户需要的时候，反而会起到雪中送炭，提升用户体验的作用。就好比用户在无助的时候，旁人 对用户一句有益的提醒，反而感动了用户。
简单的说，做APP引导页无外乎三种：
一、功能介绍型 二、情感带入型 三、搞笑耍宝卖萌型
1、功能介绍型 (设计基础期)
这是设计app启动页最最基础的方式，也是app设计新手必须学会的一种方式。
就是有啥说啥。误区是，说话罗嗦，表达不清。
用户需要的一针见血，在这样一个移动网络化、碎片化的时代，人们停留的时间越来越短，浏览你app界面的时间不会超过3秒，在这宝贵的3秒里，你要用简要明白、通俗易懂的文案和界面来呈现，突出重点就可以了。
———————记住这句话：用户需求就是你的文案———————
2、情感带入型(上升期)
走肾还是走心是个问题，得要用户顺着你走。这时候需要抒发你设计师的情感与情怀！
通过文案和配图，引导用于去思考这个App的价值，把用户需求透过某种情感表现出来，更加形象化、生动化、立体化，加强产品的预热，让用户有种惊喜感，我在这套设计主题色为黑色，凸显产品的稳重和安全性，直接用图标来表达我想阐述的情景，用更为纤细的线来体现产品推出的内容的精致性。
3、搞笑耍宝卖萌型
化腐朽为神奇，综合运用拟人化、交互化表达方式，要学会扮角色、讲故事，根据目标用户特点来选择。让用户身临其境，最后使用户心情愉悦，这种类型的阅读量最高，拼的是设计效果(或动画流程效果)，属于app界面设计高级阶段。
总结
1、文案言简意赅，突出核心。
根据爱尔兰哲学家汉密尔顿观察发现的7±2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7±2个。因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。如果表达起来困难，可以辅助一小段文字进行解释或补充。因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。
2、视觉聚焦
在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。视觉聚焦包括两部分，一是文案的处理，要注意层次，主标题与副标题要形成对比；二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律，从上到下，从左到右，从大到小。因此可以根据这个视线流的规律来进行引导页的设计。
3、富于情感化
A、文案具象化
通过具体的元素、场景来表现文案，采用写实、半写实的方式进行表现，有些应用还会配以水彩风格。
B、页面动效、页面间交互方式的差异化
之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。
而页面间的切换方式除了传统的卡片左右滑动的方式外，可以结合线条、箭头等进行引导，通常会配合动效。例如网易新闻客户端、印象笔记·食记，它们在引导页的设计上采用了线条作为主线贯穿整个引导页面，小圆点显示当前的浏览进度，滑动的过程中有滚动视差的效果。
4、与产品、公司基调相一致
引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致，这样在用户还未使用具体产品前就给产品定下一个对应的基调。产品的特性决定了引导页的风格，产品是消费类、娱乐类、工具类还是其他，根据不同的产品特性决定了引导页是走轻松娱乐、小清新，还是规整、趣味性的风格，在最终的表现形式上也就会有完全不同的展现，是插图、界面、动画还是其他。如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等，通过对比就能发现他们在引导页设计上的差异。
这样一方面有利于产品一脉相承，与产品使用体验相一致；另一方面也会进一步强化公司形象。
APP引导页设计小结：
快速提升引导页格调的设计方法总结可参考优设文章：www.uisdc.com/make-guide-pages-elegant
设计方法很重要，灵活很重要。不同的需求不同的玩法，时间紧急一样有办法做出好的东西，水来土掩兵来将挡。
以下是试水图
此款app主要是针对的是搬家公司，启动页主要采用的是功能性介绍，引导页整体分为两部分，上图的图片和底部的功能文字。第二张图的作用是更新迭代的宣传。
试水图2:
分析：总体风格统一 ，整体分为三块，图片手绘为主，色彩以两种色为主，以渐变为辅助。下面采用两行文字描述，大标题采用明亮的字体突出，小标题采用较为暗色的文字。缺点在于光影的处理不够细致，手绘的能力不够，人物表情处理的不够自然。还有一个用户体验的上的问题没有考虑进去，没有给客户选择权，选择看引导页还是跳过。
写在后面的话
你所遇到的问题，以后都会变成你的能力！
加油！
