请点击此处输入图片描述
designer:Awesomed
为什么APP会有启动页？
打开某个App，不出意外的话，映入眼帘的是各类启动页，现在App的启动页已经五花八门，甚至还会出现把启动页作为广告的产品设计。既然今天要介绍启动页，先来解决为什么会有启动页？
App启动时，应用程序需要初始化，这个初始化的过程和手机的性能、应用程序的代码质量以及大小有关；还有一些App需要在启动的时候就从服务器拉取最新的数据，这个会和网络环境(environment)有关。
App启动页的几种类型
①快速启动页；
iOS设计规范，其实并不推荐开发者用品牌或者slogan来作为App启动页，其设计规范中指出“As much as possible, avoid displaying a splash screen or other startup experience”。
国外的APP大多遵循了设计(Design)方案(plan)，它的最大好处是，启动页和网站首页很相似，过度自然，用户感觉不到有启动这个过程，用户体验很棒，站在交互设计师的角度，我是比较推崇这种做法。
请点击此处输入图片描述
请点击此处输入图片描述
path
请点击此处输入图片描述
如果首页的框架和内容是变化的，不固定的，那怎么办？
不要慌，还是有办法的：采用和网站首页颜色接近的图来作为启动页。如“VSCO”就用了纯白色作为App的启动页。
请点击此处输入图片描述
VSCO
综上，记住一条方法(method)论就行：“设计一张和首屏相似的页面作为启动页，如果首屏网站内容是动态的，则采用和首屏整体最接近的颜色(Color)作为启动页”。
但是国内的APP决定要走出一条自己的路，所以有了下面的五花八门的启动页。
②品牌类
尽管苹果明确提出，启动页不是你品牌展示的窗口，但将启动页做成“品牌logo+名称+slogan”成了国内最主流的启动页设计。
请点击此处输入图片描述
有道云笔记&UC浏览器
上图的两个例子是目前国内APP最主流的方式，这种形式一是没有设计感，二是启动页和首屏有明显的割裂感，真的不如直接用一张和首屏相似的图片作为启动页。
那如果真的要在启动这么短的时间内来强调公司或品牌，可以有更好的方案，Uber启动页利用品牌元素进行动态变化的设计，品牌元素从出现，到变化，再到消失一气呵成，而且和首屏的衔接过渡的也很自然，在确保体验的前提下，也起到了强化品牌的作用。
再来举其他几个例子：
请点击此处输入图片描述
XY&开眼
请点击此处输入图片描述
轻芒阅读&一个
开眼和轻芒阅读等APP，也将启动页作为强调品牌的载体。通过体现场景感来充分体现了品牌的调性，而且兼顾了设计(Design)的美感。值得大家借鉴。
③ 情感共鸣类
情感共鸣类的启动页其实很难，所以这么做得产品很少。但是一旦成功，会在用户心智上打下很深的烙印。
请点击此处输入图片描述
微信&陌陌
不需要在启动页写上名称、log
O、slogan，用户在看到图片的时候就知道这是什么产品。微信的这张启动页可以说是相当成功，充分的体现了一个熟人社交软件的调性。
用这种形式的启动页要注意两点，一是图片要符合产品调性，具有故事性，像微信和陌陌，都是一个孤单的背影，暗示着人们是社交动物，需要和人交流；二是尽量不要更换，像微信的这张图上线以来七年只在今年换过一次（只是局部（part)更换），陌陌的启动图片也一直是背影+风景的风格，这样容易在用户心中形成统一的认知。
④广告展示类
还有一类APP，会将启动页作为变现的渠道(channel)，将启动页做成广告页。而且一般是先显示品牌页，再显示广告页，如下：
请点击此处输入图片描述
有道翻译官
请点击此处输入图片描述
微博(MicroBlog)
广告类的启动页，其实已经完全违背了iOS对Launch Screen的定位，而且广告页的显示时长三秒到五秒不等，反而延长了用户启动APP的等待时间。UI视觉设计一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。
但是这种形式会给公司（Company）带来直接利益，尤其对于一些盈利模式不清晰产品，这种形式无疑是一种很好的变现手段。在牺牲用户体验的基础上换取一定的利益，这没有对错，只有适不适合。
如果接到需求，要将品牌页做成广告页面，至少可以做到这几点，来适当的提升用户体验。
一是让品牌页和广告页之间在设计(Design)上统一，避免割裂感，例如上方的微博和有道翻译官，都采用保持底部logo元素不变，只变化页面的一部分，从而保持两张界面的统一性；二是在广告页的右下角放置跳过的button，最好在button上显示倒计时，还能在跳过的button上加上loading的效果；第三，可以考虑每天只在第一次启动APP时才出现广告，减少广告出现的次数等等。
加上倒计时以及loading效果，都是为了让用户在心理上感觉时间过得快一点，从而提高体验；提供跳过的button是让用户能够主动选择跳过广告；将跳过放在界面的右下角，是为了方便用户单手操作；广告页只在每天第一次启动APP时显示，是为了避免多次出现可能会对用户带来厌烦的情绪，反而适得其反。
⑤节日类
情人节、五一劳动节、六一儿童节等等，都成了APP启动页展示自我的地方，在重要节日将启动页设计成节日海报类，不仅可以做到情感化的表达，有趣的节日启动页还能成为用户间的谈资，增加产品的口碑。
请点击此处输入图片描述
饿了么&UC浏览器
⑥探索其他可能性(Possibility)
除了上述五种常见的启动页，其实启动页还有更多的可能（maybe)性。UI设计教程UI表面上看是用户与界面两个组成部分，但实际上还包括用户与界面之间的交互关系。在生日的当天，给你送上生日祝福；成为一次暖心的活动H5的入口页面等等。
请点击此处输入图片描述
支付宝&QQ
请点击此处输入图片描述
UC浏览器&未知App
不同的设计形式
①和首页相似的背景图片
请点击此处输入图片描述
这种设计(Design)形式多见于国外，优劣在上文已经有所描述。
②纯色+logo+slogan
常见于国内App，优点是性价比高，强调了品牌，缺点是缺少设计感和场景感，如果没有时间或者没有好的设计点，可以用该方案(plan)。
请点击此处输入图片描述
Klook App
③ 品牌元素（或相关场景元素）+logo+slogan
上文提到的XY，开眼，轻芒阅读，一个等App都采用了这种形式，这种形式其实属于第二种形式的进化版本，会更有设计感，重点是启动页面的设计元素一定要是品牌或者使用场景相关的图。
这种形式的优点是设计(Design)感强，强调了品牌，有品牌或者场景的代入感；缺点是找到一个适合的品牌元素很难，而且会定期不定期更换。
请点击此处输入图片描述
XY&开眼
④纯照片
我们最熟悉的自然就是微信了，上线7年来，没有更改过，今年10月的一次迭代也只是更换里细节，把NASA拍摄的西半球的照片换成了北斗卫星拍摄的东半球的照片。移动端UI设计设计从工作内容上来说分为3大类别，即研究工具，研究人与界面的关系，研究人。 与之相应， UI设计师的职能大体包括三方面：一是图形设计，即传统意义上的“美工”。
这种方式的优点是，叙事性强，具有故事性，好的纯照片内容能很好的打动人心，形成传播点和记忆点；缺点是对照片要求极高，通常都有版权限制。
请点击此处输入图片描述
微信&陌陌
⑤ 动画（和首页无关联）
Ube
R、Zeale
R、Skyp
E、哔哩哔哩、日课等等市场上较少的App采取了动画的形式，这种动画多为Logo的变化，和App网站首页割裂较大。
这种形式的启动页，优点是有趣、减少用户等待时的焦虑，缺点是设计难度较大、和网站首页无关联的动画和首页界面割裂感过强、对性能不好的设备可能会出现卡顿等现象。
⑥ 动画（和首页关联）
夸克浏览器、星巴克等App虽然也是动画形式，但是启动页动画最终会和首页的某个元素（按钮或logo）产生关联。
优点是有趣、减少用户等待时的焦虑、和首页关联性强、让用户心理上感觉不到启动等待的过程(process)，没有割裂感；缺点是设计难度较大，对性能(xìng néng)不好的设备(shèbèi)可能会出现卡顿等现象。
⑦插画
插画的形式在国内越来越流行，插画能表达出相应的情感和氛围，能很好的传达出产品的意图，这种形式一般多用于活动宣传和节日氛围的渲染。
⑧ 小视频
小视频多用于用户第一次打开App的场景，是承载信息最多的设计(Design)形式。代入感和叙事性强，让用户能够提前进入相关场景，能够很好感染用户的情绪。
缺点是时间过长，不能频繁（容易腻歪），固多用于用户第一次打开App的场景，或者是重大版本更新后用户第一次打开App的场景。
总结一下
从“为什么APP要有启动页”、“App启动页的几种类型”、“不同的设计(Design)形式”三个方面阐述了App的启动页设计。
“为什么要有启动页”介绍了启动页存在的原因；“App启动页的几种类型”从业务层面介绍了启动页的集中类型（产品(Product)角度）；“不同的设计形式”则从设计形式的维度介绍了启动页（设计角度）。
做启动页设计(Design)时，可以根据业务和产品目标(cause)、用户体验、设计成本等几个角度（angle)，先确认要采用的启动页类型，确认了启动页类型之后，再选择相应的设计形式。
—
评论(0)