【颜值已爆表】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

相关推荐

  • MacBook Pro 真机上手:Touch Bar 究竟是不是好设计?

    9 年前,iPhone 的诞生,多点触控开始成为一种全新的人机交互方式。 4 年前,当一票“超极本”不加思索地把触控移植到电脑屏幕上,时任苹果工业设计师的 Jonathan Ive 说: 多点触控放在笔记本的显示屏上……不太适合。…

    交互设计 2023-03-03
  • 订阅渠道

    一些第三方媒体渠道大家需要的可以订阅我是UE网最新文章,订阅阅读交互设计教程文章 微博:http://t.im/iamuewb 微信:http://t.im/nw5y 网易云课堂:http://t.im/iamue 网易云阅读的:http://t.im/iamue1 或者:ht…

    交互设计 2015-06-30
  • 交互小技巧!浅聊四个主流的页面间跳转动效

    最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

    2017-05-29
  • 交互设计的专业性——用户体验认知与落地

    作者:司马西(简书作者)原文地址:http://www.jianshu.com/p/ee34d566766cIXDC获授权转载前言从事设计与交互设计工作已6年有余,一直以来、无论圈内圈外都会谈到交互设计是什么?具体做什么?交互的价值是什么?…

  • 抽丝剥茧做设计:结构化思维初体验

    我们面对熟悉的问题能迎刃而解,陌生的问题却无从下手。原因是什么?其实是大脑对熟悉问题有已存在的解决结构,而对陌生问题,需要抽丝剥茧重新建立。结构化思维带你快刀斩乱麻,只需四步,建立清晰结构,完美解决未知问题。结构化思维是指一个人在面对工作任务或者难题时能从多个侧面进行思考,深刻分析导致问题出现的原因,系统制定行动方案,并采取恰当的手段使工作高效地开展,取得高绩效。(引自百度百科)

    2017-04-28
  • 从「不修边幅」到「衣冠齐楚」,Google是这样一步步变漂亮的

    在很多人眼里,Google的产品一直与优雅设计无关。但现在,搜索巨人比其他互联网巨头都懂得如何打造一款设计优雅的软件(互联网)产品,如果你不相信这个判断,不妨放下你对苹果产品的钟爱,做个深呼吸,好,现在我们来对比一下Google与苹果在移动操作系统的设计:Android vs iOS。

    2017-06-05
  • 用户体验升级|丝滑般享受的执剑人单点登录功能来了!

    各位票据市场上的辛勤工作的票友们,大家在这春回大地的时节是否为了美好的明天在努力耕作呢?“执剑人”为了使用户更方便、更快捷地在互联网平台上进行票据流转交易,已经隆重上线账户单点登录功能,交易时平台切换跳转超便捷!只需要登录一次即可完成交易1过去:用户在执剑人合作平台进行票据流转交易时,需要在平台账号、执剑人账号不停的切换,操作比较不便。未接单点登录的平台时这样的2现在:一家企业账号在执剑人和执剑人合作平台上,登录的时候只要一次登录,退出...

    2018-04-15
  • 聊聊2017年即将流行的UX设计趋势

    2016马上就要过完啦,我们来回顾下今年用户体验都发生了哪些大事,并通过回顾过去来展望2017年的用户体验将会有哪些趋势。“可用性”这个词本身变得不那么重要了。它不那么需要我们了。“聊天机器人”是我们行业中最热门的术语之一,如果你还没有,我们很有信心你将很快建立一个。但对话式界面的未来是什么样子?但后退一步:是不是每一个界面都是用户和机器之间的对话?未来的交互不是由按钮组成的。公司不只需要一个界面,而且设计师也不只通过设计工具来完成他们的工作。苹果手表和Alexa可以让用户不碰手机的情况下使用Uber。虽然这可能听起来很简单,但它为人们对技术的期望设定了基调:完全连接和无处不在的体验。作为设计师,我们如何将所有的拼图连接在一起?我可以向Alexa请求Uber乘车,在我的Apple Watch上接收预估时间,与Messenger上的朋友分享费用,并在我的手机app上评分吗?技术应该尽可能不被注意到。——Amber Case,Calm Tech从《黑客帝国》,到《她》和《黑镜》,人类总是幻想生活在虚拟现实的世界。随着数字世界变得更加真实,我们需要采取的行动来实现这些体验。设计VR不应该意味着将2D实践转移到3D,而是应当寻找一种新的范例。 ——Jonathan Ravaz我们一直在听的问题:设计师应该写代码么?设计师画原型吗?设计师应该写文案吗?至少有几十篇文章试图回答这些问题,所以我们现在可能更接近一个确定的答案:这些都可以。今天,UX设计师可能会身兼数职。当我们开始为我们的自动化生活进行设计时,我们首先需要自动化我们的工作。我们将与机器人一起设计。多样性和伦理是今年用户体验中最重要的两个主题。许多设计师之所以从事UX,是为了更好的改变人们的生活。我们可以找到这么做的关键点么?设计并不是一件附属品。我们的工作影响着人们的生活。设计可能失败,但设计师不能。如果你的公司只是为了赚钱,也许你应该找一个更好的公司。这不是你的错,但这是你的责任。—— Alan Cooper,Ranch Stories talk

    2017-05-14
  • 两个交互设计鸿沟-评估与执行

    译者 / 熊猫小生校对 / 不器作者 /Kathryn Whitenton前言:通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑...

    2018-03-28
  • 从用户体验的视角聊首款《CSR赛车(CSR Racing)》

    原文作者:Om Tandon我最近一直在玩《CSR赛车(CSR Racing)》和《CSR赛车:经典(CSR Classics)》,在近期的游戏中我发现,Natural Motion在该系列的核心玩法、货币体系、社交机制和盈利模式中都引入了许多新的花样和用户体验功能,这些新元素的加入为游戏的某些方面带来了更好、更流畅的玩家体验。CSR-Racing-iPhone(from theiospost.com)CSR系列专为手游玩家设计,会话时...

    2018-03-26