辑导语：关于启动页和引导页，我们在每个APP都可以看到。做好这两个页面，是用户了解产品的基础一步，也是用户最先了解产品的第一个窗口。因此，该如何设计启动页与引导页，才能够吸引他人？作者总结了一些自己的经验，与你分享。

启动页与引导页设计几乎是每个APP必备的。

在产品上架前期，设计师们通常会集中设计产品启动页与引导页。启动页与引导页是用户了解产品的第一个窗口，能给用户留下初印象~最近刚做完新产品的启动图与引导页设计，分享自己关于做启动图、引导页学到的相关知识与经验总结，希望对大家有所帮助，欢迎一起交流学习呀~

一、启动页、引导页是什么？

启动页：当用户打开APP时，在启动APP的过程中被用户所看到的过渡页面或动画都被称为启动页。

作用：

• 缓解用户启动APP时等待的焦虑情绪。
• 传递品牌或介绍产品服务理念，加强用户对产品的印象。

特点：

• 展示时间短，一般3s内，不可交互。
• 启动图设计的更新速率可以保持1~3年更换一次，不建议频繁更换，启动图设计更新应该是跟随产品整个战略进行更换的。

启动页的形式比较多样化，但UI设计师在产品上架前期主要还是设计以产品内容或品牌为主的品牌启动图，介绍产品核心服务与传递品牌，本文主要介绍的是APP品牌启动图这种形式。

其他的，比如广告页、节日闪屏等运营类的启动页形式，我们知道有这种过渡页面存在就行了，这里就不做过多介绍了。

引导页：当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页，帮助用户更加清晰的了解产品定位与功能服务。

作用：

• 呈现APP核心功能服务与产品特色或对迭代优化的地方做功能说明，让用户快速了解产品。
• 引导页的设计调性能让用户对产品设计留下初印象。引导页已成为每个APP的仪式感设计，每次产品迭代更新，通过引导页形式，让用户感知到产品的迭代更新。

特点：

• 可左右滑动切换页面，最后一页有进入按钮
• 引导页个数一般为3-5个，个数不要超过5个，且尽量提供直接进入或跳过的按钮
• 引导页的设计更新频率可以跟随每次产品升级、新功能特色进行更新，更新频率相对较频繁一些

二、启动页、引导页怎么做？

启动图设计形式启动图常见的设计形式有纯背景+图标/slogan、背景图片、漂浮图标、品牌渗透这4种形式。

纯背景+图标/slogan在纯色背景上，融入产品启动图标或产品slogan。这一种是最简洁也是最经典的启动图设计形式。简单有力的宣传产品品牌、传递产品服务理念、加深用户对产品印象。

设计小tip：设计这种形式的启动图，我们需要注意页面的视觉平衡。上下比例建议采用0.86:1很多设计师在对齐的时候会直接采用工具的垂直居中，我们可以来对比看一下直接垂直居中与微调后的视觉感受~

很明显，直接采用垂直居中，上下比例为1:1的话，视觉中心是有些往下掉的；我们需要往上进行调整，达到视觉平衡。NAVER的改版设计中，专门将启动页的比例由1:1调整为了0.86:1，让视觉达到舒适。

背景图片采用图片或短视频作为背景图。图片或视频的选取需要符合产品调性。这种设计形式更加直观，具有场景感，能带来更大的共鸣，具有沉浸式体验。最具代表的就是微信的启动图了，仅靠一张图片就形成了产品的记忆点。

政务类产品启动图常选用当地的地标建筑或区域特色作为启动背景图。

漂浮图标将与产品相关的功能服务图标飘散浮动在整个页面中。最具代表的就是淘宝的启动图。

品牌渗透品牌渗透设计形式是目前市场上应用得最多的。采用插画、3D等设计手法，结合产品IP形象、品牌符号等与品牌相关的元素进行融合设计，加强品牌推广，形成品牌记忆。

品牌渗透的设计形式有：a.将品牌图形与服务场景进行融合设计利用插图或3d的形式将品牌图形与功能服务场景相结合，这类设计形式也是比较流行的，既能直观的展示服务场景又能很好的宣传品牌。

b.品牌符号因为启动图时间特别短，将产品的品牌符号放大或者重复排版，从而加深用户对产品、品牌的记忆，这也是一个比较讨巧的方法。

c.IP形象启动图展示产品的IP形象，加强用于与产品IP的链接。最经典的就是QQ的企鹅开屏，这么多年都是一直保持这种设计形式。

引导页动图设计形式引导页设计除了帮助用户更加清晰的了解产品定位与功能服务外，现已成为每个app的仪式感设计。

每次下载新的app后，自己也很期待看到产品的引导页，通过引导页来推测整个app的设计调性~引导页设计内容相对来说比较固定，一般为文案（主副标题）、图形部分、轮播器、按钮这四部分。

设计形式也主要为插画、3D、实景图片这3种设计形式。

插画设计形式这是市场上应用得最多的设计形式，分为扁平化插图与2.5D插图形式。

3D元素随着3D设计形式的流行，3D元素在UI设计中越来越常见。3D图形比扁平化的图形更加直观立体、具有场景感，在引导页中的应用也越来越多。

实景图片采用实景图片或视频形式，让画面更具场景感，具有沉浸式体验。这类设计形式更适合旅游类或短视频类产品。

一个产品的启动图与引导页设计（特别是启动图设计）是很具有代表性的。我们可以从启动图与引导页看出产品的设计调性与服务理念，个人觉得这两个模块也是值得设计师花心思做的~

结合产品服务与品牌进行设计方案探索，也是很有趣的。以上就是自己关于启动图与引导页的部分设计见解与解析，欢迎大家多多指教呀~

本文由 @小鱼晴子 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

导页即是用户在首次使用软件时进行产品推介和引导的说明书，使用户在最短的时间内了解这个软件的主要功能、操作方式，以便于迅速上手。

引导页具有指引用户了解和掌握软件应用的功能、特性操作方法等作用，根据软件应用的安装情况，从位置上一般将引导页分为前置引导和中间引导。

①前置引导。所谓前置引导即在用户安装完成软件应用，并第一次打开的时候出现的引导页，该引导页一般由2到6页连续或不连续的相关页面构成，某些应用引导页可达10页。

前置引导是用户使用软件应用前所看到的内容，此时用户对所安装的产品了解并不多，对于产品的功能、布局、具体操作方法等内容还没有相关的认知。所以前置引导担任的作用主要就在于介绍产品的概况内容、核心功能、比同类产品更具竞争力的功能，以及重要的操作步骤等。

②中间引导。对于版本更新的软件应用，采用中间引导是一个常见的选择。中间引导往往是对已有版本更新升级后，新功能的一些说明性操作指导。

在第一次使用有新功能出现的页面或操作中弹出指导性的说明界面，能够让用户快速掌握新功能的使用，而不会因为对新功能的不解造成使用上的困扰。中间引导在设计中常用比较贴近用户的俏皮口语进行引导，而非正式官方的书面用语。

因为在使用过程中，用户往往更倾向于舒适满意的服务性语言，而不使用说教形式的官方用语。设计中多用卡通形象进行引导，以对话的方式逐步提示使用户带入感更强，更利于引导内容的呈现，避免了用户的反感。

①合理化原则。只做必要的内容引导，根据引导页的目的，出发点不同，大致可以将其分为产品说明类、使用说明类、推广类和问题解决类。在设计之初就应该对需要设计的引导页进行充分分析，从而得出合理化的设计方案。

②优化编排原则。引导页最常用设计方式有文字与界面组合、文字与插图组合、动态效果与音乐、视频特效等。常用的编排有逐一展示故事串联、应景节日等，逐一展示是将一个个内容总结成点并顺序排列出来，各点之间没有必要的关联。

③眼球效应原则。有效地吸引用户的眼球才能使引导页面起到事半功倍的效果，需要将焦点聚集在重点阅读的内容上，才能达到突出信息的目的。聚焦可以通过光影突出、虚化背景、放大镜突出内容等方式来实现。

眼球效应还可以通过交互效果、动画和视频来实现。对于泛滥的静态引导页面来说，采用动态内容更能够吸引用户的注意力。所以除了采用静态的表现方式，还可以通过增加合适的动态内容来吸引用户的眼球。

采用不一样的引导页切换方式，也可以吸引用户的眼球。一般引导页的切换都是从右向左滑动切换，对于用户来说没有多余的学习负担，但长久以后就会麻木从而感觉没有创意。可以通过设计出具有新意的切换方式来博取用户的关注，比如类似抽取、刮开、上下等切换形式，在合适的时候能取得与众不同的效果。

引导页在交互设计中应当根据项目需求来制定设计方案，并且需要根据产品的受众及竞品等调研进行合理化设计。引导页的设计对于新用户来说是非常重要的，而功能性的升级版本中的引导页也能让老用户快速掌握新升级功能，能起到很好的辅助作用，提升用户体验。

总之，引导页设计是APP的设计重点之一。

动页作为app的“门面”，每个产品人都不会忽视这个“门面”。本文章就将试着总结市场常见 的app启动页&引导页有哪些形式。

前置位“发言”

狼人杀中，有种效应叫做锚定效应，意思是人对最开始和最后经历的事情印象是最深的，应用在狼人杀里面叫做“末置位发言”和“前置位发言”，代指这轮第一个发言和最后一个发言的人，这两个点发言对玩家的影响最大。所以警长可以利用发言顺序，来改变谁是末置位发言，达到改变战局的效果。

在app中没有“末置位”，只有“前置位”——启动页&引导页，启动页是指每一次启动前加载的页面，而引导页是指的第一次安装之后或者大版本更新之后看到的页面，引导页相对于启动页而言，更加侧重于介绍产品。

无论是哪一种页面，无论哪种呈现方式，目的只有一个，那就是在打开APP的一瞬间，将app想要传递给用户的信息在用户最可以接受的时候给用户。

引导页

有人说，一个app就像是一个笑话，目的只有一个就是让用户当即笑出声，但是如果一个笑话讲出来之后需要人来解释，那么这个笑话就是不及格的。

那么引导页的意义究竟在哪里？？？

你的专属医生

医生在给人看病的时候，第一句话永远是“你有哪儿不舒服”，问出这句话之后，医生正式介入了你的病情。同理，app跟它的新用户没有关系，但是当app一开始询问用户“病情”的时候，服务便开始了。

对于用户而言，会觉得这个app靠谱；对于企业而言，可以拿到用户的第一手资料；如果把这个定制的过程放在用户开始使用之后，拿到的资料往往没有这么真实。

内容过盛的今天，没有看不到的，只有懒得看到的，定制可以在一开始就精准化服务。

图1.0 定制化服务

抢占你思维里面的高地

蓝海的产品通常比较新奇，竞争对手不多，引导页更大的问题是如何让用户理解产品的理念。

红海的产品竞争激烈，产品趋同，引导页要让用户知道自己和产品有哪些区别。

图 1.1 蓝海，蓝海，红海

无论是表现产品的差异，还是传播产品的理念，目的都是一样的：抢占用户的认知市场。先入为主，即使后续有同类产品出来，它的生存空间只会越来越小。

启动页

启动页不同于引导页，启动页每天每次打开app都会出现在用户的面前，所以启动页有着大流量的特征，这点不同于引导页。

建立品牌辨识度

像人类不灭亡，就会一直存在的公司——可口可乐等，对他们而言，自己的产品在市场上的地位已经不是第一就是第二了，那么在启动页“抢占思维高地”无异于大炮打蚊子。

所以这些行业大佬们的启动页的目的往往是从设计&配色角度，巩固品牌地位。logo的配色、摆放，配色比重让你在看到这个蓝色&白色的时候，就知道这是饿了吗，看到绿色&黑色的时候，你也只会联想到爱奇艺。

不仅仅是“大佬”，没有绝对市场地位的产品，没有每日百万的用户流量，所以对他们而言通过这个APP入口来建立品牌辨识度也是不错的选择，比如：“飞猪”等。

图 2.1

广告广告广告

葛优的早期作品《大腕》里面就用用极度夸张的手法诠释了广告所能带来的巨大利益，而一个app要是有100万的用户流量，那么启用页作为必经之地，也有100万的用户流量，有流量为什么不用来打广告呢？

国内大部分厂家将自己的logo+slogen放在启动页的下方，当没有任务时，照常启动，全然不会影响美观，而且通过大量的留白来突出自己品牌。当有任务的时候，就可以利用原本的留白空间来实现广告收益。

图2.2 当有广告的时候

图2.3 当没有广告的时候

用户的启动页

除了以上几种情况，有的启动页也可以是以用户为本的，支付宝app用户生日的时候会改变启动页，祝福用户生日快乐，扇贝app更是将启动页作为英语学习的碎片。

图2.4

无论是哪种app启动页的都不会永远处于以上一种状态，这应该取决于app在企业中的任务以及app在市场中的定位综合各方面来决定。

本文开头将“启动页&引导页”比作APP的门面，既然是门面，那么“门面”决定了一个产品给用户的第一印象，所以无论处于那种形式的“启动页&引导页”，风格必须和产品的理念统一，不能“微信 ”的启动页接了“可口可乐”广告。

本文由 @ 烂笔尾 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议