2014年,那些“颜值”爆表的UI动画
2015-01-14 10:00
423 查看
一款应用能否吸引更多的用户,并不仅仅只取决于它的功能是否强大。要知道,在这个看脸的世界里,即使你是App,也别想逃脱这个思维圈。拥有良好用户体验的UI,是让用户继续使用应用的潜在推动力。这里,我们挑选了2014年,在UI动画方面做得非常不错的几款应用,从他们的成功之处,捕捉自己所需的设计灵感。
1. Design Shots
对于Dribbble,相信很多设计师并不陌生,那里汇集了众多国内外的设计者,他们在Dribbble上面发布优秀的设计作品,包括UI、图标、交互等,是获取灵感的不二之选。不过,早期在手机上浏览Dribbble却不是件愉快的体验,不能实现关注、点赞等操作,只能是纯粹的浏览。好在有了采用全新Dribbble API的Design Shots,一个没有过度设计的Dribbble客户端。
不过,既然是为设计师准备的应用,即使走的是主流设计的简约路线,但是整体的感觉依旧是逼格满满。尤其是动画,绝对是了不起的。Design Shots减少了很多不必要的过场动画,精简下来的 每个动画和其他之间的切换都是那么的浑然天成,根本就不会给人将多个动画库揉在一起的感觉。Design Shots的动画始终在跟随着你的手指,你的每一个触动都会带来细微的不同。
2. Lush
Lush应用相当于是一部鸡尾酒的词典,里面包括众多鸡尾酒的种类和配方,用各种不同的颜色来代表每一种基础配方,用藏青色来代表普通朗姆酒,用淡绿色代表淡朗姆,用新绿色代表柠檬汽水,用蓝色代表琴酒等。而且,Lush中的动画也是不输任何应用的,隔着屏幕对鸡尾酒的浏览就像在看一部西部老电影一样,代表不同鸡尾酒的混合染色出现在各种类型的酒杯中,还伴随着来回的晃动,脱俗的界面设计,让挑选和认识鸡尾酒的过程变成一种乐趣和时尚。
3. Clima
如果说Design Shots走的是简约派,那么Clima的路线绝对是小萝莉,应用里充满了可爱的动画。主界面由上而下是由暖色逐步过渡到冷色,应用内界面切换细节不仅流畅自然还伴随着顽皮的弹性效果。当获取温度时,颜色条框上还会出现萌萌的涟漪动画。任意方向的滑动都会激活一项任务,在App Store众多的天气应用中,轻量级的Clima能够立足其中,充满活力的动画效果是不可或缺的存在。如果你在做一款比较大众的应用的话,通过动画效果将应用变得更有意思会是你胜过其他对手的一个不错的方式。
4. Storehouse
作为获得2014年苹果设计奖的应用,Storehouse肯定有其过人之处。它是一款通过图片和视频组成的社交软件,最大的亮点就是无边框的界面设计,让你打开应用就像翻阅一本杂志一样,随意而又简洁。当你浏览社区中他人发布的故事或自己发布的故事时,视频可以使用缩略图的形式播放,无需点击进入就可明白大致的内容。当然,作为一个能够讲述故事的应用,它最吸引的地方就是精致的动画和排版,打开或关闭,只需随意滑动或缩放,这些都会让你不自觉的深陷其中,寻找来自世界各地的平凡人的美好事物。
5. ReadMe
ReadMe.io以一只呆萌的猫头鹰作为指导员,当你进行注册或登录操作时,它会在边上做个简单的指引。在注册页面,猫头鹰的右翅膀会指向你要填写的字段,当你的完成填写,进入下一个时,小翅膀的方向也会随之转移;而在登录页面时,猫头鹰的眼睛焦点定在填写邮箱地址处,等到填写密码时,它会自动捂住自己的双眼。别以为这只是很简单的动画效果,但却是取悦用户的完美例子。单调的填写信息的页面总会让人不耐烦,不妨加入一些鲜明的动画效果,让它们不再枯燥无味。
6. Unread
Unread是iOS上的一款RSS阅读器,起初是由独立开发者Jared Sinclair完成,之后被Supertop开发商购买并进行后续开发。相较于其他阅读器,Unread要更纯粹精简一点,UI界面不会有其他干扰元素。它拥有极好的手势和动画效果,整个应用采用的都是手势交互,刚开始可能有点不习惯,不过时间一长你会发现其中的便捷性。此外,最受喜欢的是流畅的下拉刷新动画,让阅读成为一种享受,也让Unread变得更有质感。
7. TodoMovies
TodoMovies是一款用来发现和管理新电影的应用,对于那些电影爱好者来说,它的出现让你对影片的信息手到擒来。TodoMovies应用***精良,里面涵盖各种你所需要的电影信息,无论是上映时间、电影简介还是预告片。不过,说到UI动画,值得一提的是点击分享后,TodoMovies会将电影海报缩小并进行圆形化处理,几种分享方式会出现在缩略图上下左右,相较原生分享方式要更炫酷一点。小小的一个改变,却大大的提升了用户体验。
最后值得一提的Google Inbox
Inbox是Google发布的一款全新的邮箱应用,与Gmail同步后,会根据功能和来源对邮件进行细致的分类,让收件箱不再杂乱不堪。此外,还兼顾设置待办事项和设定邮件的处理日期等功能。当然,最令人眼前一亮的还是它的界面设计,使用全新设计语言Material Design打造的Inbox,有着很强的动画感,图标的滑出和板块的划分无不在昭示着Inbox的现代化。不过,Gmail的这次大整容,我们是无福消受了。
文章来源:Beautiful Pixels (可进入查看视频演示)
1. Design Shots
对于Dribbble,相信很多设计师并不陌生,那里汇集了众多国内外的设计者,他们在Dribbble上面发布优秀的设计作品,包括UI、图标、交互等,是获取灵感的不二之选。不过,早期在手机上浏览Dribbble却不是件愉快的体验,不能实现关注、点赞等操作,只能是纯粹的浏览。好在有了采用全新Dribbble API的Design Shots,一个没有过度设计的Dribbble客户端。
不过,既然是为设计师准备的应用,即使走的是主流设计的简约路线,但是整体的感觉依旧是逼格满满。尤其是动画,绝对是了不起的。Design Shots减少了很多不必要的过场动画,精简下来的 每个动画和其他之间的切换都是那么的浑然天成,根本就不会给人将多个动画库揉在一起的感觉。Design Shots的动画始终在跟随着你的手指,你的每一个触动都会带来细微的不同。
2. Lush
Lush应用相当于是一部鸡尾酒的词典,里面包括众多鸡尾酒的种类和配方,用各种不同的颜色来代表每一种基础配方,用藏青色来代表普通朗姆酒,用淡绿色代表淡朗姆,用新绿色代表柠檬汽水,用蓝色代表琴酒等。而且,Lush中的动画也是不输任何应用的,隔着屏幕对鸡尾酒的浏览就像在看一部西部老电影一样,代表不同鸡尾酒的混合染色出现在各种类型的酒杯中,还伴随着来回的晃动,脱俗的界面设计,让挑选和认识鸡尾酒的过程变成一种乐趣和时尚。
3. Clima
如果说Design Shots走的是简约派,那么Clima的路线绝对是小萝莉,应用里充满了可爱的动画。主界面由上而下是由暖色逐步过渡到冷色,应用内界面切换细节不仅流畅自然还伴随着顽皮的弹性效果。当获取温度时,颜色条框上还会出现萌萌的涟漪动画。任意方向的滑动都会激活一项任务,在App Store众多的天气应用中,轻量级的Clima能够立足其中,充满活力的动画效果是不可或缺的存在。如果你在做一款比较大众的应用的话,通过动画效果将应用变得更有意思会是你胜过其他对手的一个不错的方式。
4. Storehouse
作为获得2014年苹果设计奖的应用,Storehouse肯定有其过人之处。它是一款通过图片和视频组成的社交软件,最大的亮点就是无边框的界面设计,让你打开应用就像翻阅一本杂志一样,随意而又简洁。当你浏览社区中他人发布的故事或自己发布的故事时,视频可以使用缩略图的形式播放,无需点击进入就可明白大致的内容。当然,作为一个能够讲述故事的应用,它最吸引的地方就是精致的动画和排版,打开或关闭,只需随意滑动或缩放,这些都会让你不自觉的深陷其中,寻找来自世界各地的平凡人的美好事物。
5. ReadMe
ReadMe.io以一只呆萌的猫头鹰作为指导员,当你进行注册或登录操作时,它会在边上做个简单的指引。在注册页面,猫头鹰的右翅膀会指向你要填写的字段,当你的完成填写,进入下一个时,小翅膀的方向也会随之转移;而在登录页面时,猫头鹰的眼睛焦点定在填写邮箱地址处,等到填写密码时,它会自动捂住自己的双眼。别以为这只是很简单的动画效果,但却是取悦用户的完美例子。单调的填写信息的页面总会让人不耐烦,不妨加入一些鲜明的动画效果,让它们不再枯燥无味。
6. Unread
Unread是iOS上的一款RSS阅读器,起初是由独立开发者Jared Sinclair完成,之后被Supertop开发商购买并进行后续开发。相较于其他阅读器,Unread要更纯粹精简一点,UI界面不会有其他干扰元素。它拥有极好的手势和动画效果,整个应用采用的都是手势交互,刚开始可能有点不习惯,不过时间一长你会发现其中的便捷性。此外,最受喜欢的是流畅的下拉刷新动画,让阅读成为一种享受,也让Unread变得更有质感。
7. TodoMovies
TodoMovies是一款用来发现和管理新电影的应用,对于那些电影爱好者来说,它的出现让你对影片的信息手到擒来。TodoMovies应用***精良,里面涵盖各种你所需要的电影信息,无论是上映时间、电影简介还是预告片。不过,说到UI动画,值得一提的是点击分享后,TodoMovies会将电影海报缩小并进行圆形化处理,几种分享方式会出现在缩略图上下左右,相较原生分享方式要更炫酷一点。小小的一个改变,却大大的提升了用户体验。
最后值得一提的Google Inbox
Inbox是Google发布的一款全新的邮箱应用,与Gmail同步后,会根据功能和来源对邮件进行细致的分类,让收件箱不再杂乱不堪。此外,还兼顾设置待办事项和设定邮件的处理日期等功能。当然,最令人眼前一亮的还是它的界面设计,使用全新设计语言Material Design打造的Inbox,有着很强的动画感,图标的滑出和板块的划分无不在昭示着Inbox的现代化。不过,Gmail的这次大整容,我们是无福消受了。
文章来源:Beautiful Pixels (可进入查看视频演示)
相关文章推荐
- AndroidUI 视图动画-透明动画效果 (AlphaAnimation)
- CSS3 动画的那些事
- AndroidUI 视图动画-混合动画效果 (AnimationSet)/动画效果监听
- 基于cocos2dx的2D手游美术资源制作技术选型(1)--UI、纹理格式、动画制作 - 宏波.王
- UI自动化测试的那些事
- 编程实战——电影管理器之界面UI及动画切换
- cocos2d-x 3.2 中使用cocostudioUI动画 二次加载播放时的bug解决
- 【Android UI】自定义圆形Loading动画
- ui控件之UIImageView(imageView的动画效果)
- 2014年,总局出台的那些影视剧相关政策的利弊
- Android UI- PullToRrefresh自定义下拉刷新动画
- 猫猫学IOS(四十)UI之核心动画_抖动效果_CAKeyframeAnimation
- Android-UI布局---RecyclerView学习(六)item添加删除展现的动画效果
- UI -- 动画
- android 应用的颜值,酷炫 UI 组件汇总
- object-ui之动画雪花降落实现
- iOS开发UI基础—15iOS开发中三种简单的动画设置
- iOS开发UI高级—32核心动画简介
- Android进阶UI之加载数据等待时,小人奔跑进度动画对话框
- 【Android UI设计与开发】第18期:滑动菜单栏(三)SlidingMenu动画效果的实现