APP启动页设计详解

改版时需要兼容商业推广，同样也要考虑在没有商业推广的时候，品牌运营也不能受到影响。针对这种需求，要怎么做

首先要分析产品怎样排列布局才能实现兼容品牌运营和商业推广的需求，然后在布局定好的基础上再去想设计方式

可以由3个方面来改版启动页：1、排列方式；2、设计形式；3、规范格式

1 排列方式

分析： 为了强化品牌形象，又兼顾品牌运营和商业推广，就要保证这两者中都要有品牌标识区，而且要做到统一才能强化的品牌形象。可采用上下排列的设计，上面占80%，是可变区域，放商业推广；下面20%空间是不变的品牌展示区域，也是形成页面统一标识的区域。这是很多APP都在采用的一种方式，如支付宝，陌陌。

为什么品牌不能全屏居中，放在靠下的位置，这是为了在这两种形式之间寻求一种统一，启动页加载有先后顺序，有限加载底部品牌信息，然后加载上面变动的商业推广。所以当品牌运营和商业推广之间切换或先后加载时，不贵感觉到页面之间的跳跃。

启动页设计不是直接选用设计形式，而是要考虑达成需求目标的排列方式，才能为接下来设计形式做好铺垫。

2 设计形式

确定好排列方式后，就可以选择设计形式了，首先，看产品的类型和定位。

3 规范格式

确定好排列方式和设计形式之后，为确保后期参与启动页设计师以及商业推广的客户知晓这些，需提供一套统一的规范格式

比如，在80%可变区域内有一些交互空间需要注意（广告标识区域，跳过等待时间的区域等）这些有交互的区域和有标签的地方需要明确出来，一面遮挡一些文字类的重要信息或者影响信息展示。制定好规范末班就能控制可变区域内的不确定设计，从而保证信息的有效展示

最后需要为产品制定不同分辨率下的适配规范。

小结：根据设计需求确定排列方式，接着根据设计需求和产品定位选择合适的设计形式，最后还要考虑设计统一性和设计的完整呈现，从而制定一套完整的设计规范。

第一印象很重要！很多用户会根据App/网站的初始形象来判断是否能信任这家公司或产品。

那么如何解决快速感知的问题呢？ 首先将关注点放在App带给我们的第一印象上。合理的启动页能激发用户的潜意识，有助于吸引和留存合适的用户。

在深入研究设计策略之前，先来了解一下启动画面的基本知识。 

启动画面指一系列连续的使用体验—— 从用户点击应用图标开始到内容加载完成为止。 通常包括以下五种形式：

1、应用图标 (参与启动体验的第一个环节)

2、启动画面 (开屏页)

3、开屏页跳转到内容页

4、骨架屏的启动形式 （待加载状态）

5、动画式开屏 （加载更多内容） 

开屏页是产品体验的门户， 通过模拟更快的加载时间、创建无缝的启动体验来提升用户体验。

设计不只关注外观，更关注解决特定用户问题的方法。 启动页能解决哪些问题呢？

- 在潜意识中与用户交流，并设定对未来的预期；

- 通过隐藏加载过程来减少可感知的等待时间；

- 向用户介绍App的用途和品牌；

- 为用户提供愉快的体验。

通过对问题的梳理，这里总结了开屏页设计的5种方法，有效吸引用户的注意力。

从iOS10开始，开发者可以将预定义的图标进行个性化设置。例Bear允许用户根据主题色调整图标的颜色。

MLB允许用户选择自己喜欢的团队作为启动图标。

启动页像是一种持续的营销活动，因为用户每打开一次App就会加深对品牌的印象。

通过在启动页中添加标志性的slogan或者图像，既能强调App的用途也为用户设定了一定的期望。

例如上图的3个应用将品牌logo放在开屏页中，这样的设计对用户的感官有直接的刺激。

上图的History、DocuSign和Ted三个App，通过在开屏中添加标语来强化价值主张。

从点击图标到内容加载，中间有一段可感知的加载时间， 如果在这段时间内融入合适的动画，用户能对产品状态有提前的了解。

上图的三个App都利用动画在开屏页和内容页之间建立了无缝的桥梁。

Google，TinyFax和Cinamatic这些App利用动画将图标巧妙地转换成内容。

同样上面的三个App虽然使用的动画不算很细腻，也能完成从初始页到内容的过渡。

有些应用的动效则保持简单，如上图只将标志作为突出展示。

Chick-fil-A在开屏页上添加提示动画，成功将用户引导到内容页。

对于大多数应用来说，使用开屏页+骨架屏的形式更有意义，因为轻量级的应用通常加载速度非常快，骨架屏能获得更流畅的体验。

这些应用在启动页面预加载主页的内容，Breathe(中间)使用与主页内容相似的彩色骨架。Transit(右边)使用地图的骨架作为启动页，加载完成后方便用户直接点击。

上图的应用通过预加载和动画来把握时间，给人一种“即将到来”的印象。

和前面的应用相比，Snow 、Dribbble和Launch Pro使用的骨架状态很少。

有些App启动时需要加载大量数据，例如视频、音频，所以需要大量加载时间。

对于这类应用，稍微长一点的动画更有意义。 随着数据的缓存和加载时间的缩短，动画可以变得越来越短。

上图的App使用动画来加载数据，给用户带来反馈的时间。

Clashem，Tumbleweed和Chefsfeed使用有趣的动画在加载数据的同时又加强了品牌体验。

看了这么多案例，启动画面到底要显示多长时间呢？ 这应该考虑应用的配置和加载数据需要的时间。

自定义启动体验以适应不同的使用时间和用户：

· 各个阶段的用户要有不一样的启动体验；

· 先考虑应用的大小再选择合理的启动页；

· 用图像传达信息，动画作为引导；

· 尽可能使用独特的图标来进行品牌推广。

希望文章能够让你有所收获～

精彩推荐：

1、聊聊卡片式设计的运用

2、案例分析：栅格系统的布局设计

3、如何设计深色模式？这3点因素需要考虑

4、深度解析：服务蓝图的应用逻辑 设计

三张随机的启动页面设计方法如下：

第一步:用记事本打开C:\Boot.ini，找到Windows XP启动项所在行，在末尾处加入“/bootlogo /noguiboot”。

第二步:找到自己做好的开关机画面，存放到Windows目录下(C:\Windows)，文件名为boot.bmp。

注意:文件名和扩展名都不能改变，图片要求分辨率为640×480，16色。

重启电脑，看看开机画面是不是已经变了?如果不满意，可以直接用新的图片替换boot.bmp就行了，真是简单极了!

B612把首页首先加载状态图作为启动页面，当在主屏幕上点击B612图标时会立即显示上面这个启动图像。真正启动后界面会把视频及细节显示出来。

优点： 遵循ios建议，尽量让用户不去感知页面的存在，“无缝”进入到应用中去。

缺点： 启动页较为单调，不易变通，少了为品牌宣传及获取更多商业价值的途径。

美柚、顺丰速运、滴滴出行，利用品牌性质，加强用户对品牌的直观印象，拉近应用与用户之间的距离。均包含三大要素：LOGA、品牌名称、Slogan。

启动页简约，品牌展示型也是用的较多的启动页类型，是任何app启动页设计均可采用的方式。上述三个app均为白底，美柚和滴滴出行要素均位于底部，纯白色背景，需要时可流畅无缝变通设计成扩展定制型，为需要的功能或活动做推广宣传。

品牌展示型启动页面对于产品而言，可以提高它们的知名度，很好的起到了宣传的作用。在做这类页面时，要注意风格的搭配，不要太突兀，影响了产品整体的视觉效果。如果没有商业需求，有品牌名称和LOGO就足够了，代入感也强，不会犯错。

这三个较前面几个品牌展示型app，启动页更为丰富。飞猪根据app内容特征，在启动页底部增添了类似地球的元素，表示世界之大，有一定情怀性；百果园app利用新鲜甜美的水果作为背景，也跟自身内容很好结合，让人看了垂涎欲滴，也是利用启动页起到了宣传引人购买的作用；百度地图则将其图标放大置于中心，更清楚明了，也让用户感觉定位精准的含义。

根据app内容增添元素可带用户更好的认识理解品牌，加强用户对品牌的记忆，或增加情怀，同时达到潜在目的，但要与app整体效果搭配，不要喧宾夺主、造成混乱。

推广宣传型的变招，普通启动页和推广宣传启动页的结合。在APP启动界面出现后，再次叠加一张页面，通过对第二张页面的定制达到想要的效果。

此类启动页视觉要衔接、色彩搭配，否则就会像硬广告、突兀。如QQ音乐用了渐变效果，视觉衔接性更强。而智联招聘、婚礼纪的整个色彩也能承上启下，比较搭配，让用户不会过于反感。

品牌页加入了定制语言，让人内心平静，有阅读情怀；同时运用了动画，使画面更衔接流畅，但由于运用动画，启动速度相对较慢。

全面K歌品牌型用的白色，app主页面也是白色背景，而推广宣传则不同。同样，爱奇艺品牌型用的黑色，app主页面也是黑色，而推广宣传是大红色背景。色彩上不能承上启下，给用户就是硬加广告，突兀闪屏的感觉。

启动页面使用意境化启动页，引起情感上的共鸣。音乐本来就要走情怀，酷狗音乐品牌页上用了很多人听演唱的背景，暗含音乐背后的力量，表达音乐能深入人心，亦能凝聚人。

信息强调型更加注重自身APP的宣传，一般为某一功能或特点的认知加强。酷狗音乐利用启动页强调5.1全景音效功能，为app功能做了宣传，依旧用蓝色背景作为过渡，有承上启下作用。

运用了动画，画面较流畅，使得广告植入不那么生硬，用户接受度会相对较高。但缺点是容易拖慢启动速度，等待时间较长。

启动页面，用户打开一个产品第一个看到的页面。它可以作为品牌传播的重要载体，比如淘宝，支付宝的闪屏往往除了传递品牌以为还可以成为一个品牌广告的资源位带来商业价值，今天我们来分享下启动页的一些方向! 什么是启动页? 启动页是用户对于品牌感知的最直观感受，也是对于介绍产品内容给用户的最佳领域，在UI设计中，它是用户打开APP的初始页面，在启动页的标题和副标题Slogan都是融于品牌调性和APP介绍一个很好的地方，这里你可以想象成一个舞台。正如前面所说做这类设计有一个很核心的原则就是体现品牌感，而不是刷设计存在感。 启动页的结构 1.承载注册登录这种类型很巧妙的把功能和品牌很好的结合了在一起，在很多新的APP需要用户注册登录的界面里面，通常会把产品和注册登录结合在一起，常见国内有微信等等。▲ 这个页面的启动页把登录和闪屏画面进行上下结构，上面启动页的品牌画面，采用比较常用的图标平铺风格模式，每个图标和业务明确融合，看似简单但是其实设计细节很多，最早期手淘也是采用类似设计手法来设计。 ▲ 这个页面也是上下结构，在顶部运用的背景图片填充，下面是注册和登录入口，也是一个实用性设计。 ▲ 这个产品背景没有做更多的装饰，看似简单的一个页面，其实设计细节把握很到位，页面结构采用层叠式构图设计，结构上运用斜切的设计手法，很好的突出了差异性在里面，同时核心登录按钮清晰，直接引导用户进行操作。

Adobe的每个版本的升级，新产品的启动画面都会加强版的升级。手机APP同样具有启动界面，手机每次启动一款APP时，T都会出现，不管你看没看到。启动界面的存在原因很简单，就是让程序有一个“优雅的出场”。不管是电脑软件还是手机应用，程序的启动都需要有一定的时间，或长或短。应用在加载，要给用户以暗示和反馈：1，我的启动操作是有效的；2，软件在启动过程中。

这个问题在这里首先要说说清楚，启动页面和引导页面是不同的。发现有很多人会把引导页面叫做启动页面，这可能是因为启动页面的“昙花一现”，用户更多的注意到引导页面。其实区分他们并不难：

1，启动页面可以是无意义的，哪怕是一张白色图片。而引导页面势必要起到引导的作用，可能是产品特色的展示，或者关键功能的引导，也或者是新功能迭代的展示等。

2，启动界面是自动消失的，而且一般是越快越好。（在启动界面添加广告的链接会有倒计时，还要我们点跳过，有木有！好吧，待会再聊这个...）。而引导页面一般要“逼”用户一一拜读完毕，才不情愿的离开。

3，这个是最明显的：启动页面会伴随每一次APP启动时都会出现。而启动页面一般只在新版本打开的第一次才会出现。

4，启动页面一般只有一张。（好吧，有时候不是一张，这个也待会再说...）,而引导页面往往是一组，一组，一组。

来，先看看苹果怎么说：

在即合理，小哈把现有启动界面归为如图示的五大类：假装没有型，随便搞搞型，气氛营造型，信息强调型，以及扩展定制型。下面即分别对这五类进行一一介绍，以及对应的要注意的一些设计细节。

正如iOS9中建议那样，尽量让用户不去感知启动页面的存在，“无缝”进入到应用中去。由于智能手机性能的不断提升，当APP本身体量很小的时候，基本可以瞬间启动完成。但是启动页面是仍然存在的，至少对于iOS系统来说是这样的，实现这种“没有感知”的效果，一般是把用APP首页背景作为图作为启动页面，或者是首页中首先加载的部分状态图作为启动页面。从启动页面到首页的转换实现无缝转接。下图分别为：Safari,天气，APP Store的启动页面。

采用此类启动页面的APP要注意两个细节：a，评估好APP自身的体量，保证启动的流畅、快速。b，启动界面的选取上，要配合首页的加载机制，选取合适的加载状态截图，以保证与启动后首页页面的衔接。

LOGO+背景图+Slogan（+版本号），这种最常见的启动界面的设计模式。当然，很多页面的设计可谓简约而不简单，小哈之所以称这种为随便搞搞型，是因为这样的启动页面显然是最省心的，不用太多的考虑，话说可以达到增强品牌认知的效果。然而，启动界面一闪而过，既没有对用户进行品牌教育，也没有达到让用户有“无缝启动”的感觉。

采用这种模式的，其实务必要好好搞搞。个人建议：1，最背景主题的选取一要承上启下：及要与APP图标颜色，等风格等保持协调，也要与应用主页保持一致。（ 如何设计App桌面图标？：http://www.jianshu.com/p/5c3958a8fd87 ）2，要注意页面的大小，图片质量保证的前提下，越小越好。3，背景图或者底纹一定要与APP主题想匹配，且不可只顾好看，随便搞搞。

当我们在各种假期，各种节日，当然也可能是某应用的生日的时候，我们会看到手机中APP的节日氛围，比现实生活中要浓厚几百倍。不多解释，直接看实例：

此类启动界面热闹就好，不过要是能把节日与自家APP特点结合下，那就更好啦。

信息强调型页面与上面两种有点类似，不同的是信息强调型不是单纯的放上自己的LOGO，Slogan等，会更加有“氛围”。与气氛营造型比起来，会更加注重APP自身的宣传，一般为某一功能或特点的认知加强。PS：请忽略下图中被玩坏的微信启动页面~

此类启动界面个人认为要注意的一点就是把握好尺度，不能因为信息的展示而影响启动页面停留时间，短时间内信息量不能太多。

人类在进步，科技在发展。各大厂商在简单的启动界面上玩出了新花招。通过对启动界面的定制扩展，作出新的功能点。一般常规的做法就是在APP启动界面出现之后，再次叠上一张页面，而第二张页面是比较容易被控制的，通过对第二张页面的定制达到想要的效果。而用户有时很容易误会是一个页面。

两个例子对比（如下图）：左侧新浪微博的启动页面中加入广告时，会顺畅的过度。相反网易云音乐则会给人"闪屏"，广告页很突兀的跳出来。支付宝，同花顺等同样采用微博的做法。

该种模式玩出的新花样举例：

1，钉钉为企业定制属于企业自己的启动页面。2，豆瓣：“每天一次遇见你”。

合适的才是最好的，根据自己APP实际情况，选择合适的启动界面，给她一个优雅的开场吧。

点我！点我！这里有海量启动页面图！