提到开屏，相信小伙伴们都很熟悉，当我们打开一个APP时首先看到的就是开屏页的内容，这是因为启动程序需要一定的时间，开屏页的存在也是为了让这段时间能过渡地更自然平顺，降低用户的等待焦虑。
如果选择一种事物来比喻的话，我觉得这其实有点像“屏风”，利用屏风的遮挡好让产品在后面准备，准备完毕后“屏风”撤走正式进入首页。
而现在“屏风”也有了不少种类，有“半透明”直接让用户窥见幕后的，也有努力推广导流挣钱的，还有开始做自我介绍的，比如这样↓↓↓
启动页在APP启动时立即出现，其主要用于减少用户打开APP时的等待焦虑，它的显示时长是根据程序启动时长而定的，当程序准备完毕则启动页消失，马上进入APP首页。所以启动页的信息传达要尽量简练，以此保证在不可控的时长内也不会对用户的浏览使用产生影响，如果使用长字符内容的话可能会出现用户没看完就已经自动进入首页的情况。
交互逻辑：图片展示，不可交互且显示时长不可控，不支持点击、跳过等操作。
主要类型：
· 页面框架型
页面框架型是遵从HIG（Human Interface Guidelines）中对启动页的建议而设计的，如下图：
启动页的内容采用的是APP首页的框架结构，这样启动页和APP首页间就自然形成了承接关系，营造出一种点击后APP马上就响应启动，且运行速度非常快速的感觉，过渡也自然流畅。iOS的自带应用多采用这种形式，也是不少国外产品的选择。
这种形式顾名思义是以展示品牌信息为主，通常搭配品牌色，由logo+名称、slogan、copyright等组成以强化品牌记忆，作为品牌的宣传和推广的通道，它也是国内产品最常使用的一种形式。
注意这种形式的页面设计一旦使用就不能随意更换，即使需要更换迭代，也应该要克制，与原有设计保持关联，这样才能让品牌在用户心中有稳固深刻的印象。
这种形式是选择与产品调性匹配的设计，以图表意渲染情怀，目标是与用户产生情感共鸣，比如我们都熟悉的微信就选择的这种形式。不过这相对来说也比较考验设计师的功力，都说一张好图胜千言，图片确实能很好的渲染情怀，但这张好图的诞生可能经历了无数次的选择与修改，才能与产品的情怀完美匹配，是我们需要谨慎选择的形式。
这种类型则与前三种不一样，前面三种都属于可常驻型选手，而这个更像是一个特约嘉宾、客串角色，只出现于出现于特定的时间。常见主题如节日节气、周年回馈、成绩展示等，经常以精美的插画形式展现，让人驻足观看。成为一种调和剂，在原有常驻启动页的基础上偶尔为用户带来新鲜与惊喜，同时也体现产品的人文关怀，拉近产品与用户的距离。
设计规范：由于启动页不涉及交互一般为一张整图，所以只需要提供图片切图即可。关于图片尺寸则有两种做法，一种是提供一张大尺寸图片，由程序进行裁剪缩放等适配不同机型；另一种则是提供主流机型的多尺寸图片。
前者的裁剪缩放，显示效果或多或少会有影响，我们在设计的时候，应该规定好有效信息的范围，以保证关键信息不被裁剪。当然在时间允许的情况下，推荐还是尽量选择提供多尺寸图片。
闪屏是国内APP较为常用的形式，启动页追求的让打开APP的过程更加快速且过渡自然，减少用户的等待焦虑，过程并无交互。而闪屏则是带交互的，伴随吸引用户点击的按钮、倒计时与跳过等，显示时长可控。
闪屏通常作为营销活动、商业广告的载体，在启动页后展示，虽然可能延长产品的启动时间，对保持良好的用户体验造成了一定影响，但由于运营或商业的需求，多数产品还是选择使用这种形式。
交互逻辑：有交互可点击，点击按钮进入活动页面，点击跳过或计时结束后，进入APP首页。tips：为了平衡商业需求与用户体验，有些产品在短时间内重新进入APP时，不会重复出现广告而是直接进入。
主要类型：
·商业广告型
商业广告型是产品的商业需求，在闪屏中展示商品广告从而获利，也是用户容易反感的一种，所以显示时长不能过长，且应有跳过按钮。3-5秒是闪屏的常用数值，大于5秒用户很大几率会直接跳过。
展示区以大图展示为主，为了与启动页更好的衔接，体现品牌性，图片下方会保留产品LOGO等信息。
内容推广型是对产品内活动或内容的外露和推广，为其增加曝光率。用户点击页面或按钮可直接进入活动页面进行浏览。
设计规范：这里需要注意闪屏与启动页的不同，启动页内容单一且更换频次低，通常是一张整图，而闪屏的内容丰富多变，更换频次高，通常分为内容图片与logo两个部分，logo为固定模板，内容图片则随时获取更新。对此我们也需给出相应的规范，以保证在不同屏幕下的显示适配。
引导页是用户在安装或更新后，首次进入产品时展示的页面。展示顺序在启动页与闪屏之后，且只在首次打开时展示，通常为2-5个页面，底部显示页面指示器，内容则是介绍产品的核心功能、变化更新等，让用户对产品有一个初步的了解。
交互逻辑：可交互，滑动或点击切换页面进入下一页，最后一页点击按钮进入APP，过程支持跳过。
主要类型：
· 静态图片型
静态图片是纯图片展示，开发工作量小，图片尺寸与启动页的一致，这里值得注意的引导页的多个页面需要页面指示器显示进度。
有些初期还处于快速迭代的产品为了进一步节约开发成本，会把指示器的进度圆点直接放入图片一起切图，这虽然对于功能没有影响，但始终是不规范、不专业的做法，当产品趋于稳定后，设计师应该逐步排查这类细节问题。
动态展示型是将引导页做成一段动画，细分的话有两种不同类型，一种是由设计师直接提供视频格式，这种方式可以让设计师自由发挥，支持多样复杂的动画的效果，开发成本较低，但不仅需要注意视频文件的大小，也要保证其清晰度。过大的视频，载入速度将成为一个问题，如果为此而让用户等待就得不偿失了。
另一种则是设计师提供切图尺寸与动效Demo，实际动效由开发同事完成。这种方式的动效则比较简单，多以位移、放大缩小等为主，载入速度会更加友好，但开发成本相对较大。
设计规范：静态图片型适合迭代速度快，需要经常变换的产品，图片尺寸与上文启动页一致；动态展示型实现成本高，一般是大版本更新或较为稳定的产品使用。不管选择哪种形式，引导页始终是为了让用户能更好的上手使用产品，应保持内容上、设计上的简明克制，尽可能精简突出重点，不能让引导页成为产品自嗨的舞台。
最后我们来了解一下开屏的流程，三种类型的开屏页，它们既能单独使用，也可以彼此搭配组成套餐。既有官方推荐，也有民间约定俗成的使用方式，接下来就看看它们之间的组合关系与出现流程吧。
官方推荐流程：触发启动图标后，进入空白框架式的启动页并判断是否为首次登录，是则进入引导页，非首次则直接进入产品首页。
国内常见流程：触发启动图标后，进入以品牌展示为主的启动页，启动页过渡到承载商业需求的闪屏，然后再判断用户是否初次登录，选择是否进入引导页。
1、希望注重用户体验且暂时没有接到商业需求的产品，选择启动页为开屏即可，注重速度感受可选择页面框架型，希望品牌外漏可选择品牌展示型，情怀渲染型对设计要求高需谨慎选择，而特殊时间点的特定主体可为用户带来新鲜感。
2、接到商业活动需求的产品，通常在启动页后加入闪屏页，注意需要支持跳过，以及给出活动图片的尺寸规范。
3、引导页无论静态、动态都需要简明克制，动态实现成本高，建议大版本或产品趋于稳定后再使用。
参考引文
http://1t.click/a4JK《UI设计师们还不重视闪屏设计？》
http://1t.click/a4JQ《APP引导页、启动页和闪屏页概念解析》
原文地址：海盐社（公众号）
作者：焱小玖
评论0