N多应用都忽略了的苹果人机界面指南细节

移动开发 iOS
从App Store创建伊始,苹果就一直在推广一个观念:应用的启动图片(你打开应用第一眼看到的)应该仅仅是一个中间屏幕,仅此而已。

今天我们想分享一些在创建FreeTime时的发现,FreeTime是一款日历应用,在随后的正文中我们会多次提到它。

为什么苹果不喜欢你应用的启动图片
从App Store创建伊始,苹果就一直在推广一个观念:应用的启动图片(你打开应用***眼看到的)应该仅仅是一个中间屏幕,仅此而已。引用苹果的人机界面指南如下: 

“一个启动文件或启动图片的作用是,当应用启动时提供给iOS系统的一个简单的图片占位符。这个图片占位符给用户一个印象:你的应用是快速的、有反应的,因为一点开应用它会立即展现,且很快被应用的***屏替换。”

问题是,相当多的人(包括我自己)忽略了这条准则。如果你对此感到好奇,可以看看上面的封面图,或者把所有运行在后台的应用关了再启动看看。我敢打赌你会发现有一大部分没有遵循苹果的准则。

更糟的是,大多数应用开发者也许同意苹果的建议(毕竟谁不希望“给用户留下应用是快速有反应的这样的印象”呢),但在开发中太容易为了取悦初次使用的用户,去展现一个高大上启动图片以及有趣的初始动画,结果忽略了这个准测。甚至在我的咨询工作中,启动图片是一个品牌推广***的输出机会,我们的客户很喜欢这个。

有些应用开发者(又包括了我自己)在应用的登场体验上更进一步,用到了动画和视频。回想2010年,我给我的日历应用FreeTime的***版做了这个启动动画序列,当时我们为此还相当得意。

32.gif

在这个视频中,你会看到一段优美的引导动画,很多人***眼看的时候就被深深迷住了。但你没看到的是,今后你每次打开应用时,它都要先秀一段白云飘飘,然后才转入到应用的主界面----一开始很有趣,但很快它的吸引力就消失殆尽。

品牌植入型的启动图片和动画只会挡道,浪费时间。

苹果是对的,我们不应该忽略他们的准则,因为这些品牌植入的启动图片说好听点是***眼很可爱很有趣,多看几眼就腻了,说难听点它消耗了使用我们软件的人的大量时间。

这不仅是2010年时的应用所为,这仍然发生在2015年的今天。比如说,Food Network最近一次的应用更新就是如此(他们几周前刚上苹果的精品推荐,所以对他们挑剔一点也是公平的)。

33.gif

这段视频每次每次启动应用时都要出现(而且大约有5秒钟那么长)。

随便用了一会之后,我甚至开始觉得这个应用真是极其的慢,但其实我心里知道这是一个制作精良的应用(实际是由Bottle Rocket的大牛们做的)。App Store评分也反映了这一点(上次我看时大约4.5星),但是使用过程中浪费掉的时间实在是太多了。

不如我们做个趣味思维练习:每次启动花5.5秒,每周约启动3次,然后有100万活跃用户,接下来一年里人类就要损失超过8亿2千万秒。

Food Network的应用在接下来12个月里会干掉整整26年的人生。

给品牌植入型启动屏幕找条出路

这些年来我不怎么关注苹果的启动图片准则,但现在我注意到了,因为我发现一个简单有趣的方法实现双赢。一方面是品牌推广还是能够做,另一方面苹果也能保有乏味的启动图片(是的他们知道这是乏味的):

“要是你觉得遵循这些准则会导致一个平凡、乏味的启动图片,你是对的。请记住,启动图片不是给你提供做艺术展现的机会的。它仅仅用来加强用户一些感知,感知你的应用启动很快且马上就能使用。”

这是我们开发的一个启动动画。我们的目标相当明确:

获取应用所需权限(日历访问权限和通知)

退场(有的登场体验堪称拖拉)

取悦初次使用的用户,但还是得让着“苹果用户体验”爸爸,遵守规矩。

经过许多迭代之后最终我们做成了这样:

34.gif

UI设计的扁平化趋势使得应用更容易用启动界面做初始品牌推广,即使在遵循了人机界面指南的前提下。

在早先版本的iOS中,大量的渐变使得这样做很困难,但现在扁平化的导航栏能很容易地扩展成两倍大小,变成用作应用登场效果的画布。使用动画导航栏和分页栏能很容易的向外扩展,占据整个屏幕,随后给应用实际用途让路。

更赞的是,这还不会让人感觉到笨拙或别扭,完全自然而然。

下面这张图展示了用户***次启动FreeTime时所看到的,以及后续每次启动时看到的。

于是解决办法来了----只需做以下四步:

如果你的应用有顶部导航栏或者tab bar(下面以顶部导航栏为例),使用单一颜色,与此同时创建一张遵循苹果规则的普通启动图片.

在***次启动时,动画扩展导航栏,向下扩展到视图中成为“登场效果画布”。

插入有趣的品牌推广(关键要有趣),询问权限许可,欢迎一下,然后马上退场。

动画使画布回到导航栏,渐隐现出你的应用主界面。

你的用户初次看到动画会很高兴,然后在后续启动中,他们不会再看到有关登场动画的任何东西,但是他们也许会细微的觉察到你的应用启动真是快,即开即用。

双赢。

责任编辑:陈琳 来源: CocoaChina
相关推荐

2014-09-18 10:53:38

Apple Pay开发人机界面

2015-11-04 09:54:34

ios9人机界面ui

2011-08-01 14:20:43

iPhone 界面 屏幕

2020-10-04 13:11:38

物联网工业4.0技术

2020-08-04 10:40:18

边缘AI人机界面HMI

2011-08-01 14:26:41

iPhone 应用程序 事件

2011-08-01 14:34:06

iPhone 声音 音频

2011-08-01 14:42:47

iPhone 应用程序 声音

2017-04-07 14:42:27

人机界面语音触觉

2021-10-28 11:16:26

AI 数据人工智能

2020-08-05 11:35:11

UI设计师iOS苹果

2021-10-26 15:15:00

苹果 iOS 15 iPadOS 15

2023-06-25 10:10:00

2011-03-02 08:35:19

人机交互界面iOS

2021-10-29 10:50:41

技术资讯

2013-03-22 14:27:52

iOSWin8UI设计

2012-08-17 09:47:01

施耐德电气人机界面

2011-06-10 13:57:00

SEO

2010-01-26 13:28:11

Android开发要点

2019-04-02 09:00:00

机器人人工智能HMI设计
点赞
收藏

51CTO技术栈公众号