当前位置: 首页 > 设计资讯 > 理论文摘 > 正文

遵循这4步设计应用启动页面,让用户爱上你的APP

2015-10-20 19993 0

设计 启动页面 用户 APP App-Store

  从App Store诞生伊始,苹果就一直在强调他们的一个观念,那就是应用的启动图像(也就是桌面上所有应用在打开时应该短暂显示的一个图像),必须是一个处于中心位置的图像,而且不能有其他的东西。如果你仔细阅读了苹果的人机界面指南,那么你一定注意到了这一点。

  应用的图像应该在iOS屏幕上尽可能的简洁。这样的图像能够为用户提供良好的感觉,让他们觉得你的应用响应迅速、准确。在打开你的应用之后,应用的第一屏要立刻代替启动图像出现在屏幕上。—苹果人机界面设计指南对于应用启动图像的要求。

  然而现在的问题是,几乎每一个人,包括我自己,都没有注意到这个指南对于应用启动图像设计的要求。如果你很好奇这个问题究竟有多普遍,你可以看看上图的例子,或者是关掉后台中的所有应用进程,并且重新打开这些应用。我相信,你会发现有许多应用其实并没有遵循苹果的这个要求。

  更糟糕的是,有许多开发人员其实同意苹果的这个看法(谁不希望给用户留下一个响应快速、准确的印象呢?),但是在实际的应用开发过程当中,我们很多人都会忽略这个要求,或者只是为第一次使用应用的用户提供了启动图像。在我日常的咨询工作中,我也会发现许多公司忽略了这个东西,当他们了解到启动图像的作用之后,他们都会爱上这个东西。

  一些应用开发人员则了解到了启动图像的重要性,他们甚至更进一步,用一些动画和视频来代替启动图像。2010年的时候,我就用这种方式打造了我的日历应用Free Time。对此,我和我的团队都感到非常自豪。

Free Time启动动画,2011年

  如果你看了视频,你就会发现,在打开这个应用之后,你会看到一个非常好看的动画,很多人在第一次看到这个动画之后,都表示他们非常喜欢它。但是并不是当你每一次打开应用的时候,你都会看到那些云彩和那张图片,然后再过渡到应用的主体界面中。虽然这个动画很可爱,但是用户看多了马上就会对它失去兴趣。

  商标启动图像只会浪费时间,并且阻碍用户的使用体验。

  苹果说的没错,我们不应该忽略他们的指导,因为那些类似广告的启动图像只有当用户第一次看到的时候才会让他们感到有意思。如果每一次启动应用都会看到他们,用户只会感到厌烦,在最极端的情况下,用户甚至会放弃继续使用这个应用。

  这个错误,不仅仅是2010年出现的应用犯过,甚至是今天出现的应用也在犯。例如,Food Network的最新一次应用升级(这个应用几周前刚刚被苹果推荐过,因此挑挑他们的毛病也不算过分)。

  每一次当你启动应用的时候,都会看到这个视频(要知道它足足有5秒那么长)!

  在一段时间的使用之后,我甚至开始感觉这个应用变慢了,但是我心里其实知道这仅仅是一个错觉,它其实是一个制作精良的应用。而造成这种错觉的罪魁祸首,就是那段视频。看看App Store里的用户评论,你就知道有这种感觉的不仅仅是我一个人而已。上一次我查看的时候,这个应用的评分为4.5星,但是评论中有很多人都在抱怨那段视频是在浪费用户的时间。

  我们算一个有趣的数字,这个应用平均5.5秒被启动一次,它的用户数量达到了100万人。就算这些人每周启动3次这个应用,这意味着,在接下来的一年中,这个应用将会浪费人类820,000,000秒的时间。换句话说,在未来12个月中,Food Network的应用将会浪费我们总共26年的时间。

为品牌冠名启动屏幕找到解决方式

  很多年来,我自己也并不是十分在意苹果的启动图像设计指南,但是如今我已经认识到了它的重要性,因为在这份指南中我找到了最好的设计方式,甚至可以说我进入到了一个全新的世界中。在这个世界里,开发人员可以展示自己的品牌,而苹果也能维持良好的应用体验。

  如果你觉得按照以下指南,你只能设计出无聊的应用启动图像,你一点错都没有。记住,启动图像其实无法为你创造更多的机遇,它的作用只是提升用户的使用体验,让他们感觉应用的响应迅速而准确。—苹果人机界面设计指南对于应用启动图像的要求。

  我们开发的应用启动动画, 目的非常明确:

1 获得我们需要的用户授权(使用设备日历和通知功能)

2 立刻消失(一些应用的登录体验简直慢的让人难以接受)

3 让第一次使用应用的用户感到高兴,但是严格遵守苹果UX的规定

如今的扁平化UI的趋势,能够让应用开发人眼在设计应用启动图像和动画的时候更好的遵守苹果的人机设计指南。

  在以前的iOS版本中,拟物化的设计让遵守设计指南变得非常困难。但是如今的扁平化导航栏能够轻松的通过铺平整个屏幕,变身为过渡动画的画布。而且更好的是,这种过渡一点都不突兀,而且非常自然。

  下图展示了用户在打开Free Time之后所看到启动动画的过渡:

设计 启动页面 用户 APP App-Store

  制作应用启动图像或是动画其实很简单,只需要遵从以下4步:

1 如果你的应用中有顶部导航栏或是分页条,你要用纯色,然后按照苹果的规定创建一个简洁的启动图像。

2 在第一次启动的时候,通过动画效果从上到下扩展导航栏,让它成为应用启动图像的“背景画布”。

3 在这个界面上展示你的商标,并且向用户索取授权,欢迎用户,然后立刻消失。

4 通过动画让“画布”变小,重新变成导航栏,然后让界面过渡到应用第一屏。

  如果采取了这样的设计,你的用户将会非常高兴,他们根本不会有被打扰到的感觉。同时,他们还会觉得你的应用响应迅速、准确,然后不断的使用你的应用。

  对你,对用户,这都是一个双赢的结果。


224
评论区(0)
正在加载评论...
相关推荐