2014年最佳iOS UI动画

657 查看

在 The Highlight 2014 的第三天,我们为您带来这一系列从 app 和互联网中精心挑选出的最佳 UI 动画。App 向来是 UI 的实验田,能在 app 里看到令人愉悦、体验良好的动画一向是件很棒的事。设计师和开发者们一直努力为 app 提供最好的用户体验。我们发布的 2013 精选集是 2014 年 Beautiful Pixel 上访问量最大的文章,这对 app 开发者是最好的鼓励。以下是我们今年的精选集:

Design Shots

App Store 上有一大堆 Dribbble 客户端的 app。前段时间,Dribbble app 大量涌现,我们在 Beautiful Pixel 上也有所报道。但是其中的绝大部分发布之后就再也不更新了。而 Design Shots 则不然,首次发布就很亮眼,而且后面也在持续更新新特性。它的动画效果尤其出色。动画效果之间契合得很好,完全没有胡乱堆砌动画库的感觉。点击头像切换到个人资料页面的动画很精彩。Design Shots 里的动画会跟随你手指的划动而动,正是这些细节的设计使它出众。iPhone 版的 Design Shots 可以在 App Store 上免费下载到,不试用一下都对不起自己啦。

Lush

Lush 在设计上面面俱到。从精美极简的 app 图标到 app 里五彩缤纷的标志符,Lush 无疑在众多混合饮料 app 中鹤立鸡群。Lush 的动画效果也是顶级的。饮料滑过屏幕,就像老式西部电影的酒吧里饮料滑过桌面。像 tab bar 这类的细节,都经过了充分的设计,带有可爱的颜色变幻动画和高光,让人感觉像在家里一样。app 里的每款鸡尾酒都有单独的设计,可圈可点。而 Lush 的动画无疑让 app 给人留下深刻印象。遗憾的是,这个 app 至今都没适配 iPhone 6 和 6 Plus 的大屏幕。但它仍然值得拥有。Lush 在 App Store 上架,价格 $1.99。

Clima

Clima 是 iPhone 上最好的天气 app 之一。它就是一个简单的 app,充满让人愉快的动画效果。切换不同界面的过渡效果很棒,还伴随着俏皮的跳动。只需轻轻几点,Clima 就能展示出详细的天气情况。当它获取温度信息时,还有一个可爱的彩色条纹波动动画。在 App Store 里泛滥的极简天气 app 中,Clima 与众不同。Clima 在 App Store 上架,价格 $0.99。希望它很快会适配新 iPhone 的大屏幕吧。

Storehouse

Storehouse 是最近在 App Store 登场的最佳 app 之一,荣获了今年的 App 设计大奖。Storehouse 在 iPad 上非常风靡,在 iPhone 的小屏幕上表现同样出色。app 上手几分钟即可清晰感受到,开发团队在同时适配这两种设备上做足了功夫。无论是浏览社区里发表的文章还是自己发表文章,app 的动画设计无微不至。我们尤其喜欢下拉刷新的微妙动画,以及滚动页面时照片落入的方式。Storehouse 可以在 App Store 免费下载,支持 iPhone 和 iPad。

ReadMe

在 ReadMe.io 网站上注册或登录时,它的吉祥物猫头鹰会让你眼前一亮。在注册页面,猫头鹰会用右边的羽毛指着当前获得焦点的输入框。随着焦点切换到下一个输入框,它的羽毛也跟着移动。在登录页面,当焦点移动到密码输入框时,猫头鹰会捂住眼睛,不看你的密码。这些动画效果都是用细节打动用户的典型例子。

Unread

Unread 是一款出色的 RSS 阅读器,支持 iPhone 和 iPad,我们前段时间就推荐过它。它的动画效果和手势好得出奇,我们尤其喜欢的是下拉刷新的动画。这个 app 最早是由 Jared Sinclair 制作,现在是由 Supertop 继续开发。整个 app 里充满了精巧而微妙的细节,让使用体验非常愉快。Unread 可以在 App Store 上免费下载,支持 iPhone 和 iPad。

TodoMovies

我们很喜欢 TodoMovies,之前向电影迷们推荐过这款 app,它能很好地帮你发现和管理“想看”和“看过”的电影。在这个app 里,当你点击某个电影的分享按钮时,会出现一个巧妙的小动画。电影的海报缩小成一个圆圈,而四面飞出 4 种渠道的分享按钮。你要亲眼看到这个动态过程,才能领略它的好处。TodoMovies 可以在 App Store 免费下载。

Special Mention: Google Play Arrow

特别推荐:Google Play 箭头

Google 新的 Material Design 原则和实现,有很多方面令人赞叹;而我们尤其喜欢的是 Google Play 之类的 app 里,汉堡三线按钮变成黑色箭头的方式。变化的动画效果很巧妙。看到过一个类似的例子,是 starwars.com 上汉堡三线按钮变成两道激光剑的动画;但那是在 web 页面上,动画卡得比较厉害,结果给人的感觉不是很好。

Special Mention Two

特别推荐之二

Gmail iOS版客户端收件夹为空的动画

Google 的运动图形设计师 John Schlemmer 向我们介绍了这个他参与制作的漂亮动画效果,是在 Gmail 的 iOS 客户端上,当你的收件夹为空时显示的。我们之前完全错过了它。

GIF Via Dribbble

Dribbble 上用 GIF 模仿的效果

2014 年在 UI 动画方面最令人失望的是,Pocket Casts 在下拉刷新时去掉了它标志性的收音机调频的动画。我们不确定原因为何,只能为它的消失而伤心不已。

本周我们有一系列令人期待的新文章,所以快来订阅我们的 RSS、Twitter 和 Facebook 吧。是 Beautiful Pixels 忠实读者的爱和反馈,让本次 The Highlight 2014 成为可能。感谢您的支持。