本文对于从业1年以上的移动端产品经理营养接近于0,但是对于0-1岁之间的产品新人,营养价值较高。所以,请适合人群阅读。 前面,我用两篇文章分别介绍了App界面设计和注册登录的基础知识。按照之前的约定,这次我会再向大家介绍一下App的启动页相关知识,帮助大家知道启动页的前世今生和设计基本方法或原则。闲言碎语不多讲,直入主题: 一、什么是启动页 打开喜马拉雅,看到的logo界面,打开京东看到的广告界面,打开"赢+"看到的slogan界面都是启动页。如果非要下个定义的话,启动页就是"打开App后,在进入App首页之前的界面,都属于启动页"。 喜马拉雅启动页 二、为什么有启动页 任何一款应用,都需要关注用户体验问题,所有设计的出发点都无法脱离用户体验(当然有些设计最后被证明并不利于用户体验,但是出发点肯定是提升用户体验)。所以,启动页的存在最开始也同样是为了提升用户体验,只不过后来被运营方赋予了商业价值,将之价值进行了放大。 一款应用中的数据(比如视频、文字、图片等)都存储在运营方的服务器中,当打开应用时,应用需要从服务器请求获取数据,然后加载展示出来(具体什么机器语言转为二进制语言吧啦吧啦之类不深讲,既非我擅长,也没有太大必要)。大家应该明白,这是一个过程,既然是过程就需要时间。这个时间是多久呢?不固定,受手机性能、网络性能等因素影响,正常情况是在毫秒级,慢一点也就一两秒。总之,用户是能够感知这个过程的存在。为了降低用户在等待期间的不良体验,不知从何时起开始出现了启动页。 所以,就一句话:启动页是为了降低用户等待期间不良体验而存在的。 三、启动页有哪些类型 通过上面的介绍,大家已经知道什么是启动页了,那么在讲第三个问题之前,大家先回想一下你看到的启动页都有哪些类型,或者现在就打开手机中的App,多看几款应用的启动页,有什么区别。(等待30秒) 看完了,再讲启动页类型,相信会更易于接受。 1. 品牌型 这是当前用的比较多的类型,即打开App,首先看到的是代表着机构品牌或者应用品牌的界面,类似微信的"地球人","赢+"的slogan界面,VIPKID的logo界面等。 微信启动页 赢+启动页 一般品牌型的启动页由"品牌名称+logo+slogan"三者的任意组合构成,或者类似微信由深入人心的图片(虽然并没有显示名称、logo等信息)代替。这样的好处是,用户一打开首先看到的是运营方的信息,不知不觉中就会形成品牌效应。 2. 广告型 前面提到,启动页一开始并没有广告,单纯就是为了降低用户在等待进入首页这个过程中的不良体验。但是,随着运营方对App商业化价值的深入研究,发现启动页是一款App中曝光率最高的位置,不管是谁,只要打开App都能够看到它,这比banner的曝光度还要高的多,这不正好是一个广告宣传的好地方吗?剩下的大家都知道了。 广告型又分为两种小类型: (1)先品牌界面,后广告界面 即打开App,先看到App的品牌界面,然后品牌界面消失,紧接着出现一个广告界面。也有人把品牌界面叫做启动页,将广告界面叫做广告页。 (2)品牌+广告同界面 这种启动页一般是上下结构,界面上方是广告,底部是品牌。 智联招聘上下结构广告型启动业 并不是所有应用的启动页都适合加广告,尤其是商业广告。我个人认为至少需要有两个前提:一个前提是App用户量,尤其是活跃用户量够大,这才能保证看到广告的用户基数;另一个前提是App的忠实用户够多,即你的App上有用户不得不用的功能或内容,那么用户才能容忍你的广告,如果不是忠实用户,本身就很反感广告,那还不立刻卸载。 3. 个性化 这类启动页我们也常常看到,但是它不像前两种类型,能够持续性展示。比如,一款幼教类应用,会在六一儿童节的时候,将启动页设计成"节日祝福"的风格,天气预报类应用,会在重要节日或节气的时候,将启动页设计为对应节日或节气的风格等。 就是根据某些时间点,专门设计用于临时展示的启动页,当过了这个时间点(段),又会恢复为原来默认的样式。 四、启动页设计原则 1. 启动页格式多样化,可以是静态图、动态图、短视频、H5页面,可添加链接,具体采用何种格式,根据产品需求,并不是格式越丰富越好,设计何种样式、风格,建议在设计时也可以多听听UI和开发人员的建议。 2. 启动页需要设定显示时间,对于非广告启动页,一般显示1秒左右即可。广告型启动页,也不要超过5秒,为什么是5秒上限呢?因为时间太短,对广告感兴趣的用户无法获取有效信息,太长则会导致用户反感。 3. 广告型启动页要添加"跳过"控制按钮,即让用户可以自行控制何时跳过广告界面,这样相当于做了个中和,运营方即实现了商业目的,也不至于太让用户反感。比如,现在广告型启动页上都显示倒计时和"跳过"按钮,让用户知道我最多需要等多久,同时也掌握有广告的"生杀大权"。 知乎启动页广告倒计时+跳过 4. 需要注意启动页尺寸匹配机型,用图片格式的启动页举个栗子,如果只设计了一种尺寸的图片作为启动页,那么在不同的手机屏幕上,该启动页可能会出现变形的情况,比如拉伸或者变宽,如果条件允许(比如UI时间宽裕),最好是针对目前市场上常见不同比例的屏幕尺寸,设计一整套启动页,建议和开发人员、UI设计多沟通。 按照习惯,我最后都喜欢帮大家总结一下,本文介绍了如下内容: (1)启动页的概念,其实就是打开应用到进入首页之间的页面; (2)启动页的价值,其实就是为了降低用户在进入首页前等待的不良体验; (3)启动页的类型,品牌型、广告型(分两种)、个性化; (4)启动页的原则,支持多样化但要慎选,启动页需要设定显示时间,广告界面要有"跳过"控制按钮,启动页尺寸要和不同机型匹配。 用户都习惯掌控,而不是被掌控,喜欢提前预知,而不是不知所措,所以,按照惯例,我提前透露一下,下一篇我们一起看《产品经理入门:快速掌握App设计基本方法之提示框》,需要的同学记得及时关注。 致谢: 一直有一颗写写产品心得的想法,但因为觉得自己很多知识掌握的还不够系统,或想的不够清楚,迟迟未敢下笔。直至自认为对App基础知识想的还算系统,同时结合自己当初转行的痛楚,遂下决心写一些东西,以期能够对0-1岁产品新人有所帮助。语言私以为不够精炼,措辞不够专业,校对不够仔细,不求宽容,但求多提建议。 前两篇文章,得到了大家的肯定,也收到了细心朋友的建议(《产品经理入门:快速掌握App设计基本方法之界面》中,细心同仁发现我错将京东首页用作淘宝首页展示),在此,我特向大家表示发自内心的感谢,既然都是同路人,愿一起进步,一起探索,祝好。 相关阅读 产品经理入门:快速掌握App设计基本方法之界面 产品经理入门:快速掌握App设计基本方法之注册登录