如何优雅的设计App启动页

好久不见,由于换了城市换了工作,两个月零五天没有发布文章,自责加愧疚加难为情,真心的,不要笑。我会反省,之后会定期将自己的所学所思通过文字写出来,和大家一起交流心得。

关于启动页,之前写过一篇文章,这篇文章相当于之前的扩展版本,从启动页的原因,启动页的类型,启动页不同的设计形式三个方面去全面了解App的启动页。


1.为什么APP会有启动页?

打开某个App,不出意外的话,映入眼帘的是各类启动页,现在App的启动页已经五花八门,甚至还会出现把启动页作为广告的产品设计。既然今天要介绍启动页,先来解决为什么会有启动页?

App启动时,应用程序需要初始化,这个初始化的过程和手机的性能、应用程序的代码质量以及大小有关;还有一些App需要在启动的时候就从服务器拉取最新的数据,这个会和网络环境有关。


2.App启动页的几种类型

①快速启动页;

iOS设计规范,其实并不推荐开发者用品牌或者slogan来作为App启动页,其设计规范中指出“As much as possible, avoid displaying a splash screen or other startup experience”。

国外的APP大多遵循了设计方案,它的最大好处是,启动页和首页很相似,过度自然,用户感觉不到有启动这个过程,用户体验很棒,站在交互设计师的角度,我是比较推崇这种做法。

Instagram
path
Facebook

如果首页的框架和内容是变化的,不固定的,那怎么办?

不要慌,还是有办法的:采用和首页颜色接近的图来作为启动页。如“VSCO”就用了纯白色作为App的启动页。

VSCO

综上,记住一条方法论就行:“设计一张和首屏相似的页面作为启动页,如果首屏内容是动态的,则采用和首屏整体最接近的颜色作为启动页”。

但是国内的APP决定要走出一条自己的路,所以有了下面的五花八门的启动页。


②品牌类

尽管苹果明确提出,启动页不是你品牌展示的窗口,但将启动页做成“品牌logo+名称+slogan”成了国内最主流的启动页设计。

有道云笔记&UC浏览器


上图的两个例子是目前国内APP最主流的方式,这种形式一是没有设计感,二是启动页和首屏有明显的割裂感,真的不如直接用一张和首屏相似的图片作为启动页。

那如果真的要在启动这么短的时间内来强调公司或品牌,可以有更好的方案,Uber启动页利用品牌元素进行动态变化的设计,品牌元素从出现,到变化,再到消失一气呵成,而且和首屏的衔接过渡的也很自然,在确保体验的前提下,也起到了强化品牌的作用。


再来举其他几个例子:

XY&开眼
轻芒阅读&一个


开眼和轻芒阅读等APP,也将启动页作为强调品牌的载体。通过体现场景感来充分体现了品牌的调性,而且兼顾了设计的美感。值得大家借鉴。


③ 情感共鸣类

情感共鸣类的启动页其实很难,所以这么做得产品很少。但是一旦成功,会在用户心智上打下很深的烙印。

微信&陌陌


不需要在启动页写上名称、logo、slogan,用户在看到图片的时候就知道这是什么产品。微信的这张启动页可以说是相当成功,充分的体现了一个熟人社交软件的调性。

用这种形式的启动页要注意两点,一是图片要符合产品调性,具有故事性,像微信和陌陌,都是一个孤单的背影,暗示着人们是社交动物,需要和人交流;二是尽量不要更换,像微信的这张图上线以来七年只在今年换过一次(只是局部更换),陌陌的启动图片也一直是背影+风景的风格,这样容易在用户心中形成统一的认知。


④广告展示类

还有一类APP,会将启动页作为变现的渠道,将启动页做成广告页。而且一般是先显示品牌页,再显示广告页,如下:

有道翻译官
微博

广告类的启动页,其实已经完全违背了iOS对Launch Screen的定位,而且广告页的显示时长三秒到五秒不等,反而延长了用户启动APP的等待时间。

但是这种形式会给公司带来直接利益,尤其对于一些盈利模式不清晰产品,这种形式无疑是一种很好的变现手段。在牺牲用户体验的基础上换取一定的利益,这没有对错,只有适不适合。

如果接到需求,要将品牌页做成广告页面,至少可以做到这几点,来适当的提升用户体验。

一是让品牌页和广告页之间在设计上统一,避免割裂感,例如上方的微博和有道翻译官,都采用保持底部logo元素不变,只变化页面的一部分,从而保持两张界面的统一性;二是在广告页的右下角放置跳过的button,最好在button上显示倒计时,还能在跳过的button上加上loading的效果;第三,可以考虑每天只在第一次启动APP时才出现广告,减少广告出现的次数等等。

加上倒计时以及loading效果,都是为了让用户在心理上感觉时间过得快一点,从而提高体验;提供跳过的button是让用户能够主动选择跳过广告;将跳过放在界面的右下角,是为了方便用户单手操作;广告页只在每天第一次启动APP时显示,是为了避免多次出现可能会对用户带来厌烦的情绪,反而适得其反。


⑤节日类

情人节、五一劳动节、六一儿童节等等,都成了APP启动页展示自我的地方,在重要节日将启动页设计成节日海报类,不仅可以做到情感化的表达,有趣的节日启动页还能成为用户间的谈资,增加产品的口碑。

饿了么&UC浏览器


⑥探索其他可能性

除了上述五种常见的启动页,其实启动页还有更多的可能性。在生日的当天,给你送上生日祝福;成为一次暖心的活动H5的入口页面等等。

支付宝&QQ
UC浏览器&未知App



3.不同的设计形式

①和首页相似的背景图片

Facebook

这种设计形式多见于国外,优劣在上文已经有所描述。


②纯色+logo+slogan

常见于国内App,优点是性价比高,强调了品牌,缺点是缺少设计感和场景感,如果没有时间或者没有好的设计点,可以用该方案。

Klook App


③ 品牌元素(或相关场景元素)+logo+slogan

上文提到的XY,开眼,轻芒阅读,一个等App都采用了这种形式,这种形式其实属于第二种形式的进化版本,会更有设计感,重点是启动页面的设计元素一定要是品牌或者使用场景相关的图。

这种形式的优点是设计感强,强调了品牌,有品牌或者场景的代入感;缺点是找到一个适合的品牌元素很难,而且会定期不定期更换。

XY&开眼


④纯照片

我们最熟悉的自然就是微信了,上线7年来,没有更改过,今年10月的一次迭代也只是更换里细节,把NASA拍摄的西半球的照片换成了北斗卫星拍摄的东半球的照片。

这种方式的优点是,叙事性强,具有故事性,好的纯照片内容能很好的打动人心,形成传播点和记忆点;缺点是对照片要求极高,通常都有版权限制。

微信&陌陌


⑤ 动画(和首页无关联)

Uber、Zealer、Skype、哔哩哔哩、日课等等市场上较少的App采取了动画的形式,这种动画多为Logo的变化,和App首页割裂较大。

这种形式的启动页,优点是有趣、减少用户等待时的焦虑,缺点是设计难度较大、和首页无关联的动画和首页界面割裂感过强、对性能不好的设备可能会出现卡顿等现象。


⑥ 动画(和首页关联)

夸克浏览器、星巴克等App虽然也是动画形式,但是启动页动画最终会和首页的某个元素(按钮或logo)产生关联。

优点是有趣、减少用户等待时的焦虑、和首页关联性强、让用户心理上感觉不到启动等待的过程,没有割裂感;缺点是设计难度较大,对性能不好的设备可能会出现卡顿等现象。


⑦插画

插画的形式在国内越来越流行,插画能表达出相应的情感和氛围,能很好的传达出产品的意图,这种形式一般多用于活动宣传和节日氛围的渲染。


⑧ 小视频

小视频多用于用户第一次打开App的场景,是承载信息最多的设计形式。代入感和叙事性强,让用户能够提前进入相关场景,能够很好感染用户的情绪。

缺点是时间过长,不能频繁(容易腻歪),固多用于用户第一次打开App的场景,或者是重大版本更新后用户第一次打开App的场景。



4.总结:

从“为什么APP要有启动页”、“App启动页的几种类型”、“不同的设计形式”三个方面阐述了App的启动页设计。

“为什么要有启动页”介绍了启动页存在的原因;“App启动页的几种类型”从业务层面介绍了启动页的集中类型(产品角度);“不同的设计形式”则从设计形式的维度介绍了启动页(设计角度)。

做启动页设计时,可以根据业务和产品目标、用户体验、设计成本等几个角度,先确认要采用的启动页类型,确认了启动页类型之后,再选择相应的设计形式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容