【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

原文导读：

On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some time now and it’s always great to see delightful animations in apps that make it a joy to use. Designers and developers are always trying to bring you the best experience in their apps. Our post that highlights our picks from 2013 is one of the most visited posts in 2014 on Beautiful Pixels and there’s no better encouragement for app developers. Here’s what we’ve chosen this year.

译文导读：

一款应用能否吸引更多的用户，并不仅仅只取决于它的功能是否强大。要知道，在这个看脸的世界里，即使你是App，也别想逃脱这个思维圈。拥有良好用户体验的UI，是让用户继续使用应用的潜在推动力。这里，我们挑选了2014年，在UI动画方面做得非常不错的几款应用，从他们的成功之处，捕捉自己所需的设计灵感。

1. Design Shots

原文：The App Store has tons of Dribbble apps. We saw the Dribbble app boom a while back and even wrote about them here on Beautiful Pixels, but most of them didn’t see any updates after release. Design Shotsimpressed us at launch and has been consistently updated with new features. The animations, in particular, are absolutely fantastic. Every animation fits perfectly with the other and at no point does it feel like multiple libraries of animations thrown together. The animation that follows the avatar tap to profile view is stunning. Design Shots’ animations follow your finger as you swipe and the little things like this make all the difference. Design Shots for iPhone is available for Free on the App Store and you owe it to yourself to download the app.

视频：颜值爆表的APPUI设计iamue.com-2014最精彩的移动APP动画

译文：对于Dribbble，相信很多设计师并不陌生，那里汇集了众多国内外的设计者，他们在Dribbble上面发布优秀的设计作品，包括UI、图标、交互等，是获取灵感的不二之选。不过，早期在手机上浏览Dribbble却不是件愉快的体验，不能实现关注、点赞等操作，只能是纯粹的浏览。好在有了采用全新Dribbble API的Design Shots，一个没有过度设计的Dribbble客户端。

截图：

不过，既然是为设计师准备的应用，即使走的是主流设计的简约路线，但是整体的感觉依旧是逼格满满。尤其是动画，绝对是了不起的。Design Shots减少了很多不必要的过场动画，精简下来的 每个动画和其他之间的切换都是那么的浑然天成，根本就不会给人将多个动画库揉在一起的感觉。Design Shots的动画始终在跟随着你的手指，你的每一个触动都会带来细微的不同。

2. Lush

原文：Lush has almost everything going for it. Right from the beautifully minimal app icon to the colourful glyphs used inside, Lush stands apart from every other drink mixing app out there. Lush also has some of the best in app animations we’ve seen. Drinks slide across the screen like they would in a bar in a old western film while browsing. Small things like the tab bars we see in apps have been designed from the ground up to feel right at home with lovely colour changing animations and highlights. The design of each individual cocktail within the app is commendable. Lush absolutely nails animations that make apps memorable. It is a pity the app has still not been optimized for the larger screens on iPhone 6 and 6 Plus. It is still worth owning. Lush is available on the App Store for $1.99.

视频：颜值爆表的APPUI设计/00io.com-2014最精彩的移动APP动画

译文：Lush应用相当于是一部鸡尾酒的词典，里面包括众多鸡尾酒的种类和配方，用各种不同的颜色来代表每一种基础配方，用藏青色来代表普通朗姆酒，用淡绿色代表淡朗姆，用新绿色代表柠檬汽水，用蓝色代表琴酒等。而且，Lush中的动画也是不输任何应用的，隔着屏幕对鸡尾酒的浏览就像在看一部西部老电影一样，代表不同鸡尾酒的混合染色出现在各种类型的酒杯中，还伴随着来回的晃动，脱俗的界面设计，让挑选和认识鸡尾酒的过程变成一种乐趣和时尚。Lush应用相当于是一部鸡尾酒的词典，里面包括众多鸡尾酒的种类和配方，用各种不同的颜色来代表每一种基础配方，用藏青色来代表普通朗姆酒，用淡绿色代表淡朗姆，用新绿色代表柠檬汽水，用蓝色代表琴酒等。而且，Lush中的动画也是不输任何应用的，隔着屏幕对鸡尾酒的浏览就像在看一部西部老电影一样，代表不同鸡尾酒的混合染色出现在各种类型的酒杯中，还伴随着来回的晃动，脱俗的界面设计，让挑选和认识鸡尾酒的过程变成一种乐趣和时尚。

截图：

3. Clima

原文： Clima is one of the best weather apps we have seen for iPhone. It is a simple app that is filled with delightful animations. Transitions between different views are great and accompanied by a playful bounce. Clima shows you detailed weather conditions that are all a few taps away. It even has a lovely ripple animation on the colour bar pattern while it fetches the temperature. Clima manages to be unique in a flood of minimal weather apps on the App Store. Clima is available on the App Store for $0.99. Hopefully it gets updated to support the new iPhone screens soon.

视频：颜值爆表的APPUI设计/00io.com-2014最精彩的移动APP动画

译文：如果说Design Shots走的是简约派，那么Clima的路线绝对是小萝莉，应用里充满了可爱的动画。主界面由上而下是由暖色逐步过渡到冷色，应用内界面切换细节不仅流畅自然还伴随着顽皮的弹性效果。当获取温度时，颜色条框上还会出现萌萌的涟漪动画。任意方向的滑动都会激活一项任务，在App Store众多的天气应用中，轻量级的Clima能够立足其中，充满活力的动画效果是不可或缺的存在。如果你在做一款比较大众的应用的话，通过动画效果将应用变得更有意思会是你胜过其他对手的一个不错的方式。

截图：

4. Storehouse

原文：  Storehouse has been one of the best apps to hit the App Store in recent times, rightly winning the App Design Award this year. Storehouse isabsolutely phenomenal on the iPad and works just as well on the smaller screen of the iPhone. The team has done a stellar job in crafting for both these devices and a few minutes with the app makes it very evident. The app is meticulously crafted with some fantastic animations as you browse through the stories posted by the community or post your own. We especially like the suble pull-to-refresh animation as well as the way the photos fall into place when you scroll. Storehouse is available as a Universal app Free on the App Store.

视频：颜值爆表的APPUI设计/00io.com-2014最精彩的移动APP动画

译文：作为获得2014年苹果设计奖的应用，Storehouse肯定有其过人之处。它是一款通过图片和视频组成的社交软件，最大的亮点就是无边框的界面设计，让你打开应用就像翻阅一本杂志一样，随意而又简洁。当你浏览社区中他人发布的故事或自己发布的故事时，视频可以使用缩略图的形式播放，无需点击进入就可明白大致的内容。当然，作为一个能够讲述故事的应用，它最吸引的地方就是精致的动画和排版，打开或关闭，只需随意滑动或缩放，这些都会让你不自觉的深陷其中，寻找来自世界各地的平凡人的美好事物。

截图：

5. ReadMe

原文：  ReadMe.io’s Owl mascot instantly delights you when you try to Sign Up or Log In on the site. On the Sign Up page, the owl is pointing to the field currently in focus with his right feather. As the focus moves to the next field, so does his pointer. On the Log In page, as your focus moves to the password field, the owl covers his eyes so as to not see your password. Both these animations are perfect examples of little things that delight users.

视频：颜值爆表的APPUI设计/00io.com-2014最精彩的移动APP动画

译文：ReadMe.io以一只呆萌的猫头鹰作为指导员，当你进行注册或登录操作时，它会在边上做个简单的指引。在注册页面，猫头鹰的右翅膀会指向你要填写的字段，当你的完成填写，进入下一个时，小翅膀的方向也会随之转移；而在登录页面时，猫头鹰的眼睛焦点定在填写邮箱地址处，等到填写密码时，它会自动捂住自己的双眼。别以为这只是很简单的动画效果，但却是取悦用户的完美例子。单调的填写信息的页面总会让人不耐烦，不妨加入一些鲜明的动画效果，让它们不再枯燥无味。

截图：

6. Unread

原文：  Unread, the fantastic RSS reader app for iPhone and iPad that we’ve recommended for quite some time now has had some ridiculously good animations and gestures, but we particularly like its pull-to-refresh animation. The whole app, originally crafted by Jared Sinclair but now in development with the folks at Supertop, is filled with some wonderful and subtle little things that make it a joy to use. Unread is available Free on the App Store for iPhone and iPad.

视频：颜值爆表的APPUI设计/00io.com-2014最精彩的移动APP动画

译文：Unread是iOS上的一款RSS阅读器，起初是由独立开发者Jared Sinclair完成，之后被Supertop开发商购买并进行后续开发。相较于其他阅读器，Unread要更纯粹精简一点，UI界面不会有其他干扰元素。它拥有极好的手势和动画效果，整个应用采用的都是手势交互，刚开始可能有点不习惯，不过时间一长你会发现其中的便捷性。此外，最受喜欢的是流畅的下拉刷新动画，让阅读成为一种享受，也让Unread变得更有质感。

截图：

7. TodoMovies

原文：  We’ve loved and recommended TodoMovies to anyone and everyone who is into films and the app does a great job of helping you discover and manage your lists of ’To Watch’ and ‘Watched’ films. The app has a wonderful little animation that plays out when you tap the share button in a particular film’s view. The poster for the film compresses into a circle and the four share options fly out at each side. You have to see it in action to appreciate it. TodoMovies is available Free on the App Store.

视频：颜值爆表的APPUI设计/00io.iamue.com-2014最精彩的移动APP动画

译文：TodoMovies是一款用来发现和管理新电影的应用，对于那些电影爱好者来说，它的出现让你对影片的信息手到擒来。TodoMovies应用制作精良，里面涵盖各种你所需要的电影信息，无论是上映时间、电影简介还是预告片。不过，说到UI动画，值得一提的是点击分享后，TodoMovies会将电影海报缩小并进行圆形化处理，几种分享方式会出现在缩略图上下左右，相较原生分享方式要更炫酷一点。小小的一个改变，却大大的提升了用户体验。

截图：

Google Inbox

原文：  There’s a lot to like about Google’s new Material Design principles and implementation, but we really like how the hamburger button turns into a back arrow in apps like Google Play on Android devices. The animation that plays is also quite delightful. A similar attempt is seen onstarwars.com where the hamburger button turns into two light sabers, but it being a website, the animation stutters a lot and the result just doesn’t feel right.

Special Mention: Google Play Arrow

There’s a lot to like about Google’s new Material Design principles and implementation, but we really like how the hamburger button turns into a back arrow in apps like Google Play on Android devices. The animation that plays is also quite delightful. A similar attempt is seen onstarwars.com where the hamburger button turns into two light sabers, but it being a website, the animation stutters a lot and the result just doesn’t feel right.

Special Mention Two

Inbox Zero Animation in the Inbox by Gmail iOS App

John Schlemmer, a Motion Designer at Google, pointed us towards this lovely animation that he worked on in the Inbox by Gmail iOS app when you’re at Inbox Zero. We totally missed this one.

GIF Via Dribbble

One of the most disappointing things about animations in 2014 is Pocket Casts losing its signature radio tuner animation when you pull to refresh. We’re not sure why, but we’re sure as hell sad to see it go.

译文：Inbox是Google发布的一款全新的邮箱应用，与Gmail同步后，会根据功能和来源对邮件进行细致的分类，让收件箱不再杂乱不堪。此外，还兼顾设置待办事项和设定邮件的处理日期等功能。当然，最令人眼前一亮的还是它的界面设计，使用全新设计语言Material Design打造的Inbox，有着很强的动画感，图标的滑出和板块的划分无不在昭示着Inbox的现代化。不过，Gmail的这次大整容，我们是无福消受了。

截图：

本篇文章为我是UE网独家原翻首发：原文来自Beautiful Pixels