APP启动页的前世今生——现状及潮流趋势分析

4,460 阅读6分钟
原文链接: zhuanlan.zhihu.com
今天和大家分享的是前些时间做的未能面世,也特别容易被忽略的一个页面——启动页的现状和趋势分析,在整理资料时翻出来了,丢上来供交流~~~~

一 什么是启动页

苹果官方对于iOS启动页的设计说明:1、为了增强应用程序启动时的用户体验,您应该提供一个启动图像。2、当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。3、一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。

当用户打开一款应用程序,进入产品首页前的loading页面(或视频动画),都被我们称为启动页。目前还没有官方的定义,只是对大家共识的总结。

二 为什么会有启动页

1、启动页的基础作用

APP启动时需要请求网络、加载资源等,会有一定的等待时间。若在等待过程中没有及时给用户展现画面或反馈,用户会误以为程序出错或因等待时间过长而心情急躁,最终直接退出应用,启动页的基础作用就是降低用户等待焦虑。

2、重要性及附加功能

心理学上有“7秒钟理论”:陌生人见面,第一印象产生的喜恶取决于头7秒。第一印象的影响力和重要性不用多说。用户在打开一款APP时,3-7秒进入APP首页的这段过程,是用户对该APP的第一印象,但是由于它时间短,特别容易被忽视,虽然大家都知道好的启动页可以为产品加分。聪明的本土APP商家的做法是:不放过任何可以品牌营销的入口。所以,启动页还具有一些附加功能:1、品牌形象植入和强化;2、倒计时广告位;3、晒情怀,讲故事。

三 现状和趋势

1、 启动页界面布局

2、 启动页内容及交互

(1) 图为主,文为辅:图片约占3/4,文字约占1/4

(2) Logo在页面中的占比不减,样式更灵活化

(3) 页面数量一般不超过2个,第一页多为品宣画面,第二页多为营销广告,且每次打开的第二页会切换不同广告画面

(4) 在交互上,用手机截屏后,部分APP出现了分享浮窗,便于用户分享到其他平台

(5) 页面上添加了“跳过广告” 的按钮,同时显示剩余秒数,提高用户选择自主性

3、 常用的表现手法

(1) 扁平风格的静态图片

简单的纯色/渐变色/几何立体图形/插画+logo+slogan例如:纯色/渐变色+logo+slogan: 携程、去哪儿 蝉游记(P1) 优点:直接明了的品牌宣传,让用户潜意识中快速熟记插画+logo+slogan :同程、春秋(P1)、途牛、驴妈妈 优点:简洁清爽,营造轻松愉悦的氛围,肌理感插画也正是当下流行风格

(2) 模拟首页图片

模拟与首页相似布局或界面的图片 例如:Airbnb、Facebook用的是与页面相似布局

faceU是与首页相似的相机打开界面 优点:给用户一种已经进入APP的假象,感觉应用启动快速

(3) 情景化场景

使用意境化和场景感强的大图,让用户直观的感知,引起情感上的共鸣 例如:最典型案例是我们时时关注的微信(此处不展开细说,感兴趣的同学一搜就知)、蝉游记(P2)都是使用此手法

(4) 直接展示广告宣传画面

目的很单纯:赚钱、活动营销、合作伙伴等 如:艺龙(P2) 、黄包车(P2) 、喜马拉雅(P2)

优点:可点击跳转到专题页面,功能上的突破

新玩法:加了“跳过广告” 的按钮,同时显示剩余秒数,提高用户自主性

(5) 动态效果

除了传统的放大、缩小、平移、滚动、弹跳、渐现、溅隐等转场动效,新颖一些的玩法可以结合线条、箭头等进行引导 如:渐隐动效:如lofter Logo动效 如:agoda 引导动效:如Uber 优点:形式灵活,交互更流畅、友好、有趣,让用户注意力更为集中

(6) 视频播放

通过播放视频的方式来介绍产品或传递一种理念,如:抖音短视频

优点:直观,动感,生活化。给人传达青春活力、有趣好玩的生活态度。缺点:应用较大时,视频播放会出现卡顿的情况。

4、 一些新互动启发案例分享

(1) Uber,logo-启动页-首页,柔和转场

(2) Owly,Logo+吉祥物+loading进度条

(3) Bg,Logo+产品相关图标动效与loading和首页的柔和衔接

(4) VIVASTER,logo与主题插画的动效

(5) 未知,线条+单车运动+场景引导

(6) BQ,Logo与启动页-引导页-登录注册页的转场

启发:好的动效可以Logo-启动页-引导页/首页/登录注册页柔和转场,令主题\品牌特性更突出,减少用户等待的心理负担

四 启动页的建议

1、文案:文案言简意赅,突出核心

7±2效应(爱尔兰哲学家汉密尔顿发现,人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个)展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。文字尽可能地进行删减,若实在无法删减,则可以对文字进行分层,通过空格或逗号或换行的方式进行视觉优化。

2、设计上:不限于单页面静态设计,侧重页面动效&页面间交互的柔性连贯化

多考虑“Logo-启动页-引导页/首页/登录注册页”柔和转场,注重细节优化,给用户更友好的流程体验。

3、技术上:预加载

WiFi情况下,打开APP时预加载到手机。无网络服务情况下,打开APP时显示预加载的启动页并提示用户此为预加载内容,在首页提示:a、目前处于无网络状态b、还可以进行哪些操作。让用户的知晓当前状态和可操作事项,感受服务的用心。

4、时间:珍惜第一印象的“7秒”

珍惜第一印象的“7秒”,而不是每次打开app都来7秒。可以考虑在用户前5次使用app的时候显示下Splash,然后进入首页;如果用户频繁使用该app,就不要再出现了。

5、慎用启动页的倒计时广告位

试想:如果在频繁使用某款app时,每次开启都来个7秒的广告,我会毫不犹豫的删除它。在用户体验和市场营销两个维度上取得平衡。