美文网首页最近需要做的@产品设计
超级优秀手机App动效设计【开发,设计,产品,不看后悔】

超级优秀手机App动效设计【开发,设计,产品,不看后悔】

作者: 隐身人 | 来源:发表于2018-09-15 22:17 被阅读104523次

分享个人到处收割到的好看,创意到极致的App动效UI,交互设计。

下面各位看官,睁大你眼睛吧 ~

Let's go ~

这是一款流行的卡片风格的视图切换,层级分明,逼真的滑动切换效果,朕心甚悦呀~

简约卡片风格

本来是枯燥无趣的表格,数字,数据,加入了飞机航线,和目的地特色风景介绍,让数字不再无聊,各项数值也让用户理解得更加清晰明了。

新颖行程表设计

想必大家一提到网购,加入购物车的功能时,脑海里都是京东呀,淘宝呀.....千篇一律的购物车效果,这个有趣的购物车效果想必能让大家眼前一亮吧反正我是眼睛一亮

新思路加入购物车

有的专业性比较强或者是定制性比较高的App,开始的时候会要用户,设置,编辑,一套又一套的选项,麻烦又枯燥,有时候跟做讨厌的试卷一样恶心,继而直接删除该应用,根本没有App体验。App商痛失用户,用户痛失优质App,如果把麻烦的设置项,调整成这样呢?会不会喜欢~

避免枯燥的切换筛选

相当优质的一个设计了,整体一个小水滴,简单而又不失灵动的变化,优秀优秀优秀。

连贯一体

说到数据~脑海里想到的都是一些 条条框框,一板一眼的严谨,呆板的数据表界面,眼睛看着又多又累又无聊,下面这个就很简单明了,眼睛相当舒服不累。

相当舒服的数据页面

简约,清晰的现状图。

数据曲线图动画

整页的数字界面,我觉得只有这样,我才不会随手就关闭此数据页面。

无聊数据有趣化

新颖的信息浏览页,一般无非是一个横长方形视图,几个图片,切换来切换去的,千篇一律,这个就比较有意思,要突显有突显,要亮点有亮点的,而且能充分勾引起下滑更多的冲动。

信息浏览页

层级分明的卡片视图,仿佛用户在现实世界里面,翻书,打开抽屉一样,开了哪个,关了哪个,层级清晰。

极致卡片视图

设计者花了一些小心思,让千篇一律的引导页,我们不一样,不一样,不一样,而且一个视图接一个视图,相当有趣,有多次来回滑动的欲望。

视图和引导页有趣切换

适当的上下拉伸,左右切换,能在有趣的背景层上进行体现,仿佛在勾引用户,来吧来吧,往左滑,往右滑~

浏览带3D感觉

能带给用户惊喜的一个引导页,能刺激用户眼球的一个设计,开始引导页平淡无奇,突然滑出一个人,惊不惊喜,意不意外?

和谐的渐入动画

合适的时候给用户左右切换一个有趣的反馈,也是一个不错的主意哟。

页面切换微动画

本来是一个平淡的数据展现,加上一点弹簧效果,使数据有点,小傲娇,小可爱了呢。

数据切换动画

一个顺滑的抽屉动画。

cell展开更多动画

有个加载先后顺序,用户习惯读数据,也是从上往下而读,这样加点延迟,顺序展现,显得界面很清晰,简洁,而不是一进来一眼望去密密麻麻整页都是数据的感觉。

展现更多信息

点击按钮,该按钮有个视图移动动画,明显的反馈给用户,眼光跟我来,来到按钮展现的界面,而不是茫然的还要找我点击这个按钮干嘛的,哪里变了。

悬浮按钮点击打开详情效果

较于常见的拓展按钮,它更加优雅,加了波纹,加了延迟,不会有一种粗暴的感觉。

悬浮按钮展开

小细节,优雅的告诉用户,这还有一个按钮呢。

出现新东西动画

导航栏图标,切换很有意思,变化不是死板 生硬。

点开详情动画

这个也是打开新视图的时候更加优雅,不是直接就怼开了,硬邦邦的。

轨道打开新视图

给了用户强烈,明显的按钮点击反馈。

播放按钮响应

优雅的开打新的视图页面,感觉开打新页面都是那么自然,感觉不到是到了新页面了,整个融为一体。

渐变色切换动画

运用视差,和左右物理滑动进行小视图预览,切换。

滚动视差切换动画

这个就是App偷偷送给用户的小礼物,小惊喜啦,用户突然发现还有这个效果,绝对会心生快感的,好感度++。

右拉熊微动画

卡片风 + 抽屉效果 完美结合,小清新,简约的快感。

卡片视图切换

有点小淘气的加载点点~

简约点点切换加载动画

相当酷炫的加载动画,有此动画,加载页面不无聊了~看完一遍,再看一遍......不无聊不枯燥。

动态漏斗加载动画

有点佛性的加载动画,小水滴仿佛在说,静心,不要着急不要着急。

水流加载动画

这个就比较可爱了~

卡通表情图像切换界面

给女神点赞上点心吧,我才不要你的随手一个赞呢,我要大大大大...的赞。

长按点赞加大

点个赞都可以这么俏皮 可爱吗?我点一个,再点一个......

点赞表情

各位看官,看完是不是有有创作欲望了呢~

大家如有新颖,别具一格的UI ,动效,动画,都可以分享给我哟。

笔者最近痴迷于动效UI结构设计......

相关文章

  • 超级优秀手机App动效设计【开发,设计,产品,不看后悔】

    分享个人到处收割到的好看,创意到极致的App动效UI,交互设计。 下面各位看官,睁大你眼睛吧 ~ Let's go...

  • 彩虹手帐033 | UI动效设计

    UI动效是什么?“没有动效的APP,不是好的APP”,优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹...

  • 近日动效设计

    最近的一些动效工作和练习作品 信商产品App动效设计 动效设计练习作品

  • 【译】脑洞大开,移动界面的空间思维

    这几年动效设计大热,很多优秀的APP都运用动效设计提升产品的体验,为用户带来炫酷的惊喜,成为业界经典。我们已经...

  • 动效设计欣赏:13张优秀的APP动效展示

    APP动效设计欣赏是我们app设计师的一项课余作业。可以从这些国外的优秀的APP动效设计效果展示当中,学习一些好的...

  • 手机动效设计分析

    使用动效的目的: 常见的交互动效: 交互动效设计基本原则 创新交互动效设计 优秀手机动效应用 我们的产品可以借鉴地...

  • 关于交互动效2

    移动APP的7种动效设计 你可能听说过:好的设计是显而易见的而优秀的设计是无形的。对于App的动效设计来说也是一样...

  • 超走心!APP 动效设计必备知识

    如今丰富细腻的 App 动效遍布移动端优秀应用界面中,为用户提供了良好的动态沉浸式体验,动效设计在产品研发过程中也...

  • App动效设计案例解析1(Pixate教程)

    移动端的动效与音频设计一直都是被广大交互设计师忽视的,这与国内的大环境有关。像TAB旗下产品,优秀的动效设计也很罕...

  • 移动APP的7种动效设计

    你可能听说过:好的设计是显而易见的而优秀的设计是无形的。对于App的动效设计来说也是一样的。一个优秀的动效能你的A...

网友评论

    本文标题:超级优秀手机App动效设计【开发,设计,产品,不看后悔】

    本文链接:https://www.haomeiwen.com/subject/syotnftx.html