当前位置:首页>资讯中心>APP专区>App启动页浅析:启动页分类与设计逻辑

App启动页浅析:启动页分类与设计逻辑

发布时间:2017-08-11 点击数:163

首先简要的概括一下什么是启动页:每次唤起一个app的时候,在进入app首页之前的等待页面。

文章目录如下:

  1. 启动页设计目的
  2. 启动页分类及样式
  3. 启动页逻辑及细节

一、启动页设计目的

当用户点开app时,需要对于app内的素材进行加载,比如说加载图片信息等等,为了给用户呈现一个完整友好的app界面,这个加载素材的过程需要一定的时间,为了让用户在等待这一小段时间的时候减少一些困惑,启动页这个模块就应然而生了。

刚才提到的困惑会有很多种,比如说用户在知道app启动需要等待时间的情况下,启动页可以减少用户因为等待启动时间而产生的无聊的情绪;用户也极有可能不知道app启动需要等待时间,如果没有启动页这样一个模块,会让用户产生很大的困惑,我的手机卡死了吗?还是这个app有问题?等等…

二、启动页分类及样式

启动页大致可以分为以下四类:

第一类:品牌展示

这类是最常见的,在启动页展示的信息包括app名称、icon及slogan,界面简单清晰,加深用户对于品牌的认知,整体的颜色风格也遵从app界面的设计风格,让用户提前熟悉app的样式风格。

第二类:广告展示、活动展示

这一类中包含广告展示和活动展示两个小类,广告展示对外,app与广告商家谈好合作,在app的启动页展示广告商家的广告信息,当此app积累下来的流量已经形成一定的规模,足够进行分发的时候,可以用这种广告展示的方法进行流量的变现,通常使用这类启动页方式的app为通过广告作为变现的一种方式的app。常见的如网易系列的产品。活动展示对内,如app内一些运营的活动需要进行推广,app启动页就承担了这个职责,在用户第一时间进入这个app的时候就能看见app的活动有哪些。

第三类:内容展示

这一类较前两种来说比较少见,启动页的内容与app的内容相关联,不仅仅展示出app的活动,同时也会掺杂进app自身的设计元素在里面。如图虫网app,一个摄影朋友圈,在启动页的展示内容就是用户上传的优质摄影,这样不仅仅符合自身的摄影元素,同时保持了启动页的格调美感,还向用户提前展示了优质的原创内容。

第四类:背景底色

这一类也是比较少见,启动页主体颜色样式采用和app首页相同的颜色样式,目的是在于让用户提前熟悉一下app的页面风格,这种启动页符合启动页设计的初衷,既然最初启动页的目的是为了让用户不那么无聊,那么就在这一小段时间里,提前让用户从视觉上熟悉了解一下app的框架。

在AppStore上排名前一百名的app里面,我人工的统计了一下每个app的启动页样式及分类,如上图展示。

由此可以看出,品牌展示占了绝大多数,现在主流的app都是以输出自己的品牌文化为主,更加注重自己的风格调性;其次是活动广告类,主要是以网易的产品为主,都是用的同样的框架。

值得注意的一点,有3款app没有自己的启动页,这三款都是美化拍摄类的app,faceu、美颜相机等,这类APP的用户打开应用的主要目的是美妆自拍,更急迫的想直接使用app提供的功能,外加上首页进来就是自拍,都是本地的参数,不需要去服务器调取参数,所以就免去了启动页的功能。

三、启动页逻辑及细节

这里就列举最常用的两类启动页类型:品牌展示、活动广告展示,这两种。

品牌展示

在启动页展示的信息包括app名称、icon及slogan,属于静态的启动页,在一次版本迭代中,app的名称、icon、slogan都是不会变的,若是上述三点有所改变,那一定会是一个新的版本迭代,所以品牌展示类型的启动页,就会是一张长宽定好的图片。在展示启动页的过程中,app向服务器请求的是app的内容,而与启动页的内容无关。

品牌展示类型的启动页需要注重的细节,就是视觉上的样式问题。UI设计的事情暂且不做太多讨论。在产品上需要注重的细节问题不多,这里想到的一点就是“跳过”按钮。我们在启动页,都会看到有一个跳过的按钮,这个按钮的意义在于,对于用户可以跳过自己不想看的启动页内容,对于app来说,首页需要的参数信息已经向服务器请求完毕,可以让用户自己选择他们停留在启动页的时长。

活动广告展示

将广告商家和自己活动的信息展示在启动页中,属于动态的启动页。每天每时每刻,启动页上展示的内容都可能不一样。在app启动的时候,不仅仅需要向服务器请求app首页的参数,同时需要向服务器请求启动页的参数。现在的活动广告展示,只占了一整个屏幕的一部分,我们举个例子进行说明。

网易云音乐的启动页样式如上图,下方的是本地默认模板,在用户下载apk包的时候自带的。上方的组件是线上读取广告,从线上读取广告之后,缓存在本地中,每次启动app的时候展示出来,下次再次启动app的时候,先向服务器调取参数,看看线上有没有更新广告,如果有更新,则需要下载最新一版的,如果没有更新,则展示本地缓存的广告。

活动广告类型的启动页,需要注意的细节问题就要比品牌展示类多得多。主要有两块细节问题,弱网环境下的下载问题、广告CMS管理。

如果处于弱网或者断网的情况下,app不能一直请求启动页或者app的参数,那样会一直停留在启动页上没有其他的交互,用户会认为app卡死了或者手机出了什么问题。所以会需要一个下载启动页素材的时间,超过这段时间,就要默认的播放本地的缓存,以免影响用户体验。这样一来,启动页的时间就被分成两块:一是下载素材、回调参数的时间,二是播放启动页的时间。每段时间都要设置一个阈值上限。若超过这个阈值上限,就要自动的跳过这个流程,这样才能保证启动页的流畅及友好的用户体验。

第二块需要注意的细节就是广告CMS管理,我们都遇见过这个功能点,在启动页观看广告的时候,都会有一个“跳过”按钮,点击跳过,进入app首页。浅显的剖析一下“跳过”按钮功能点,我们可以快速的找到它的设计原因,用户觉得广告太过于枯燥,或者更想快速的使用app,就会点击跳过。如果能对广告商家提供的广告搭建一个CMS管理中心,对广告进行打标签处理,再根据用户画像的分类,对不同的用户进行精准投递,通过这样的方法延长用户观看广告的平均时长,使广告的价值最大化,对KPI也有很大的提升。