【颜值已爆表】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客户端。

截图:

2015-01-14_132736

 

不过,既然是为设计师准备的应用,即使走的是主流设计的简约路线,但是整体的感觉依旧是逼格满满。尤其是动画,绝对是了不起的。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中的动画也是不输任何应用的,隔着屏幕对鸡尾酒的浏览就像在看一部西部老电影一样,代表不同鸡尾酒的混合染色出现在各种类型的酒杯中,还伴随着来回的晃动,脱俗的界面设计,让挑选和认识鸡尾酒的过程变成一种乐趣和时尚。

截图:

2015-01-14_132854

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能够立足其中,充满活力的动画效果是不可或缺的存在。如果你在做一款比较大众的应用的话,通过动画效果将应用变得更有意思会是你胜过其他对手的一个不错的方式。

截图:

2015-01-14_132948

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

截图:

2015-01-14_133038

 

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

截图:

2015-01-14_133221

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变得更有质感。

截图:

2015-01-14_133348

 

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会将电影海报缩小并进行圆形化处理,几种分享方式会出现在缩略图上下左右,相较原生分享方式要更炫酷一点。小小的一个改变,却大大的提升了用户体验。

截图:

2015-01-14_133440

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的这次大整容,我们是无福消受了。

截图:

00io.com2014APPUIsundribbblenew2_thumb.gif

 

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

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/2875/

(0)
Smiler李想Smiler李想
上一篇 2015-01-14 02:25
下一篇 2015-01-14

相关推荐

  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • 关于假设和极致

    作者:杨蓉(资深用研专家,现任极客网运营总监)   假设的意义 今天看到一本质性研究的书,在讨论定量定性的研究方法的时候,会说定性通常被质疑的是“不够客观”,所以作者开始一大篇幅,在讨论“客观性”是什么,就…

    交互专题 2017-08-07
  • 牛X的交互设计稿应该具备的特点

    转自:UIUX设计工作坊(ID:UIUX-HUANG)作者:弘毅道还没有跨入交互设计的门槛时,总是想明确的知道一些客观、确定的事情。比如,想知道交互设计的具体流程是什么,交互稿到底长什么样子,Axure中的Case用例怎么用…

    2017-08-01
  • Sketch从入门到精通 第一章 初识Sketch 免费版

    第一章 初识Sketch 1. Sketch 是什么? Sketch 是一款非常适合UI界面设计师们使用的矢量绘图应用。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要…

    2015-07-03
  • 网易新闻安卓客户端Material design实战

    编者按:光说不练假把式,聊了这么多的Material design技巧,是时候来看看国内APP怎么跟上这股潮流了。今天网易的同学分享了新闻客户端的Material design改版过程。 项目背景 网易新闻安卓版一直以来照搬IOS版的交…

    2015-07-20
  • 声明:关于微信号"交互设计学堂 ID: jhsjxt"中的收费课程与本网站没有关系

    现在赚钱真容易,随便抄点内容可以开班授课了。

    2016-11-03
  • 抽屉式导航怎么用?这4种场景教你正确的设计姿势

    …上图的 APP 将选项卡(tab row)变成抽屉式导航菜单(drawer menu),用户在相应功能间的切换率急剧下降。…很多用户还没有建立起相应的心理模型(尤其是抽屉式或者汉堡包菜单)尽量将 APP 的核心功能放在用户可以看得到地方。
    ——能露出来, 就别藏着触摸操作中,手势永远要比点击优先级低。现代触摸操作习惯毕竟只流行了几年,然而传统PC上的操作习惯已经实行了将近20年。所以通过滑动来切换Tab不会比点击切换来的直观。
    ——石头们

    2017-05-30
  • 版权大战后,用户体验将成音乐平台的制胜关键

    自2015年起,国家版权局叫停“独家”版权到今年腾讯、阿里和网易云三家主流音乐APP达成史上最深度版权互授,这场版权之争终于尘埃落定,期间还穿插发生了运营8年的多米音乐停运事件,版权大战背后确实有很多难言之痛,而面向未来,已经叫实了的“后版权时代”,各家APP用什么get到我的点?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Get Over ItEagles - Hell Freezes Over (Live)一、用户体验...

    2018-03-24
  • 搞定老板第一步!如何准确描述自己的设计?

    @姑娘贩子 (手机淘宝设计师):如何准确描述自己的设计,这个问题困扰了我很久。这篇文章希望通过回溯淘小铺2.1项目的整个设计过程,从另一个角度,尝试解答这个问题。 这篇文章原本的标题是“小铺2.1用户分层引导…

    2015-11-24
  • 设计师应该了解的“用户记忆理论”

    记忆是人类储存信息的“硬盘”,它可以收集信息,处理信息,并且可以对外界的刺激做出反应。人类可以在需要的时候可以去“硬盘”中调取信息。但是这个“硬盘”有着一些瑕疵,因为它会受到人类机体和情感因素所影响。了解记忆的运行机制,会帮助设计师创建出人性化的界面,节省工作量,提升产品的易用性。

    2017-04-30