recycleviewitem 列表加载动画_初始屏幕:启动动画设计指南

cc48c291-c012-eb11-8da9-e4434bdf6706.png

初始屏幕:启动动画设计指南​mp.weixin.qq.com
cd48c291-c012-eb11-8da9-e4434bdf6706.png

ce48c291-c012-eb11-8da9-e4434bdf6706.png
Animated Flat Camera Icon by Kushagra Agarwal

假如我们正在完成一项重要的任务,这时突然有一个好的idea浮现在了你的脑海中。那么,这时我们可能就需要对其进行记录了,所以我们决定使用一个笔记应用程序。大多数的应用程序都遵循3秒加载时间规则。但是不管这个应用程序让你多快进入,你肯定会觉得它要花很长时间。

根据Localytics的一项研究,大约有24%的用户在首次使用后就放弃了应用程序。那么,怎样去解决这个问题呢?

在本文中,我们将学习如何通过启动画面来创造一个精彩的初次体验。我将介绍它的基本概念、用途、iOS和Android的指导方针、最佳实践以及大量示例。让我们开始吧!

什么是启动动画?

启动画面是用户在启动应用程序时看到的第一个可视化界面。有人可能想知道“启动画面”的“启动”是什么。坦白说,很少!其主要目的是在应用加载时吸引用户。

以下是启动画面的两个示例:

d048c291-c012-eb11-8da9-e4434bdf6706.png
Uber 黑白配色

Uber的启动画面是简单和时尚的经典示例。该应用程序在San Serif中使用了新的wordmark标识,其后有两条平行的线,给它带来了一个戏剧性的开头。在不到3秒的时间内,Uber就直接开始营业了。

d248c291-c012-eb11-8da9-e4434bdf6706.png

相反,我们让亚马逊选择使用带有其徽标的静态启动画面,该徽标代表他们销售从A到Z的各种产品的意识形态。

当然,我们也有例外:

d448c291-c012-eb11-8da9-e4434bdf6706.png

Facebook是少数几个选择放弃其初始屏幕并将用户直接带到其提要的应用程序之一。

开机动画的目的

首先,如果你想知道在应用程序启动时出现空白屏幕有什么问题,答案是:绝对没有!

但是问题是:根据Thermopylae的研究,人类大脑处理图像的速度比处理文本的速度快6万倍,而且传递给大脑的90%的信息是视觉信息。

话虽如此,在你的应用程序中添加初始屏幕是吸引用户注意的绝佳机会。此外,我们也希望我们的应用程序能够激发兴奋和好奇心,而创意应用程序启动画面恰好可以做到这一点。

我收集了一些经典示例,这些示例显示了初始屏幕设计的多样性。

d548c291-c012-eb11-8da9-e4434bdf6706.png
LinkedIn通过其蓝色和白色调色板来彰显其签名

d648c291-c012-eb11-8da9-e4434bdf6706.png
Twitter的Signature Mountain Bluebird是世界上最受认可的之一

d748c291-c012-eb11-8da9-e4434bdf6706.png
Reddit的启动画面中的Snoo带着微笑欢迎用户

d848c291-c012-eb11-8da9-e4434bdf6706.png
麦当劳使用其标志性的Golden Arches使其加载时间变得有趣

d948c291-c012-eb11-8da9-e4434bdf6706.png
Booking.com的启动画面会使用其自定义的字体Booking Sans进行拼写

da48c291-c012-eb11-8da9-e4434bdf6706.png
Evernote将其标志性的大象符号应用于其启动画面

如何创建启动画面?

在设计我们的移动应用程序时,我们都以这样或那样的方式从流行的应用程序中汲取了灵感。但你想知道他们是怎么做到的吗?

许多人可能会附和“反复试验”,但在仔细分析了1000多个应用程序之后,我得出结论,这些移动应用程序设计的成功纯粹是即兴创作。

下面我们来看一下要涵盖的一些关键方面:

1.大小事项

鉴于“一种尺寸适合所有人”在当今世界已经很老套了,因此启动屏幕的设计必须能够适应各种设备的多种尺寸。

每年都会发布各种形状和大小不同的智能手机和平板电脑,因此了解这些设备的尺寸变得至关重要。

db48c291-c012-eb11-8da9-e4434bdf6706.png
苹果| 人机界面准则

dc48c291-c012-eb11-8da9-e4434bdf6706.png
查看材料设计的完整列表

2.从启动画面中甩开销售点

醒目的屏幕常常被误认为是品牌存在的宣告,但是,智能手机用户如今已经变得和他们的手机一样智能了。

只需一种简单的技术即可制作出精美的启动画面:选择与你的品牌产生共鸣的元素。

除了使用指定的调色板外,还向背景添加可识别品牌的小细节,例如徽标,印刷消息(如果有的话)。

dd48c291-c012-eb11-8da9-e4434bdf6706.png
在这个简单的启动画面中,GoodReads会拼写其品牌和消息

de48c291-c012-eb11-8da9-e4434bdf6706.png
Microsoft OneNote | 数字笔记应用程序坚持其品牌标识

3.创建启动屏幕,消除加载时间

可以从两个角度查看启动画面:

一种是你可以选择以最酷的图形动画展示品牌,另一种是在用户之间建立好奇心。

在这两种情况下,你都不想忘记创建启动屏幕的真正目的。分散用户注意力的动画必须设计成减少加载时间,而不是其他。

e048c291-c012-eb11-8da9-e4434bdf6706.png

4.让他们进入启动准备

在我们讲到这一点之前,先来看看:

e148c291-c012-eb11-8da9-e4434bdf6706.png
Candy Crush Saga通过启动画面和“正在加载...”吸引用户

King Digital Entertainment的《Candy Crush Saga》拥有超过2.93亿月度活跃用户,是有史以来最受欢迎的游戏之一。

下载一个应用程序需要更长的时间可能有几个原因,比如连接问题、大量的图形数据、未安装的应用程序更新、后台运行的多个应用程序等等。

让用户知道加载进度的百分比或一个动画throbber可以让你从急躁中解脱出来。

e248c291-c012-eb11-8da9-e4434bdf6706.png
新的YouTube音乐使用了这个简单的动画Throbber

e348c291-c012-eb11-8da9-e4434bdf6706.png
Audiobooks.com的启动画面使传统的Throbber现代化

e448c291-c012-eb11-8da9-e4434bdf6706.png
Storytel的新启动画面创造性地利用其徽标来缩短加载时间

e548c291-c012-eb11-8da9-e4434bdf6706.png
TicTok使用两个点来显示主题颜色的加载时间

启动画面准则(Android + iOS)

由于Splash Screen并不是商业或创意的演示,因此Android和iOS为设计师设置了特定的准则,以确保用户对应用的初体验感到满意。

iOS开机画面指南

苹果公司的人机界面指南遵循四个简单的诫命。他们的操作方法如下(带有示例):

1. 启动画面必须类似于第一个画面

e748c291-c012-eb11-8da9-e4434bdf6706.png
TedTalks —启动屏幕和第一个屏幕

Ted Talks以白色和红色为标志主题,它的启动画面代表其徽标以及其标语“值得传播的想法”。

用户进入主屏幕后,他们会看到最新的上传内容,此外还有热门话题。用户还可以在“发现”部分中浏览自己感兴趣的视频。

第一个屏幕在左上方还体现了TedTalks徽标,从闪屏中获得了类似的感觉。

2. 从启动屏幕中剪切出文本

如果你打算在多个地区推出你的应用程序,Apple建议避免在启动屏幕上显示文本,因为静态启动屏幕文本无法本地化。

不过,如果你的徽标拼写了你的品牌名称,那么这里有一些很棒的启动屏幕,它们的灵感来自于:

e848c291-c012-eb11-8da9-e4434bdf6706.png
带有Wordlogo的启动画面示例— IMDb和Wikipedia

e948c291-c012-eb11-8da9-e4434bdf6706.png
带有Wordlogo的启动画面示例— H&M&顶空

3.极简主义是良好的启动屏幕设计的关键

ea48c291-c012-eb11-8da9-e4434bdf6706.png
纽约时报-开机画面

在纽约时报的应用程序是极简主义的一个缩影。带有书法标志的闪屏让用户在不到3秒的时间内回到70年代,并迅速让他们回到最新的新闻。

4. 广告是大忌

根据http://SEOExpertBrad.com的数据,超过88%的企业在营销产品和服务上花费了巨大。考虑到你是他们中的一员,你的用户在进入AppStore或PlayStore之前就已经知道你的应用了。

话虽如此,设计一个看起来像“关于应用程序”或“关于我们”的闪屏可能会让你看起来比你想象的更有吸引力。

eb48c291-c012-eb11-8da9-e4434bdf6706.png
GIF:gfycat

Android的启动画面准则

尽管苹果和安卓有不同的商标,但它们都有相同的指导方针来吸引用户通过完美的体验。

Android初始画面分为两类-品牌启动画面-类似于:

ed48c291-c012-eb11-8da9-e4434bdf6706.png
亚马逊Kindle —品牌闪屏

和占位符启动屏幕:

ef48c291-c012-eb11-8da9-e4434bdf6706.png
通过谷歌

由于应用程序启动画面不是强制性的,因此某些应用程序通过设置占位符的动画来解决加载时间。

无需花费时间来显示其内容的应用程序就可以进入占位符启动屏幕,而无需感觉到需要营销其品牌。通常,在将新内容加载到屏幕之前,你会发现Instagram,Facebook,YouTube等应用程序在将新内容加载到屏幕之前就采用了离线缓存。

结论“第一印象就是最后的印象”,我们现在知道了如何创建无缝的移动应用程序发布体验。根据Statista的数据,到2022年,app下载量将达到2582亿次,而2017年的下载量为1781亿次。

随着这种增长,开机动画是一大关键点,当你在手机应用程序设计中加入一些虽小但很重要的元素时,同意一个与你的品牌产生共鸣的形象就变得更加重要了。

今天就说到这里了,如果您想了解更多的前瞻信息和权威专家普修的专业性建议,就留言联系我们吧!

来源:Maitrik Kataria:Splash Screen: Designing a Successful Launch Experience for Your Mobile App

f048c291-c012-eb11-8da9-e4434bdf6706.png
用户调研 丨 HMI设计 丨 UE/UI设计 丨 HMI培训 丨 HMI评测 丨 体验咨询
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值