来点惊喜!APP动效设计分为哪几种? - 优设网 - UISDC

来点惊喜!APP动效设计分为哪几种?

2015/01/01 18473评论区

app-animation-classification-1

编者按:什么样的动效让人舒服,什么样的动效让人一下就想到某个产品,什么样的动效让人沉浸其中?今天百度的同学从这三个维度,分别聊聊对应的APP动效设计,想给用户一个惊喜的同学,来涨姿势吧。

14年你错过了哪些精品教程+高人气资源?来这儿搜罗 >>>?《年度颁奖盛典!2014年最受欢迎的设计资源大盘点》

如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感?

此时,有限的屏幕空间紧靠文字的提示是不够的,App需要更多的新鲜血液——“动效设计”。动效设计可以拓展空间内容,简化引导流程,降低学习成本,更重要的是给用户带来意想不到——类似于“Cool”的惊喜,它就像人类的肢体语言,通过肢体语言传达更多的抽象信息和性格展现。肢体语言(body language)又称身体语言,是指通过头、眼、颈、手、肘、臂、身、胯、足等人体部位的协调活动来传达人物的思想,形象地借以表情达意的一种沟通方式。一个人要向外界传达完整的信息,单纯的语言成分只占7/100,声调占38/100,另外的55/100信息都需要由非语言的体态来传达。肢体语言的重要性可见一斑。

肢体语言大致可分为三类动作:基本动作,招牌动作和高难度动作,这三种动作是如何在APP设计中体现呢?

一、基本动效让用户舒服

基本动作也可称为日常动作,如坐立,行走,握手,拥抱等.对应APP中的基本动作分三类:

  1. 指向性动效(滑动,弹出等)
  2. 提示性动效(滑动删除,下拉刷新等)
  3. 空间扩展(翻动,放大等)

不要小瞧基本动作,试想当你看到一位美女起身向你走来结果驼背,外八字,是啥感觉!APP亦是如此。流畅,自然映射,重力模拟这些看似简单但却能让用户在操作时轻松自在并有强烈的代入感。这类动效最重要的是让用户感到毫无负担又如沐春风,也就是不要夺人眼球,悄无声息的顺应用户行为,引导用户需求。

这类动效在设计过程中需要主意几点:

  1. 系统兼容和资源占用
  2. 动态速度的节奏
  3. 仿生性or现实重现

举例:

动效控件

156-001

2.加载动画

156-002

3.翻页动画

156-006

二、招牌动效加深用户印象

招牌动作是基于基本动作有选择性的差异化展现。例如针对空间扩展而设计的path加号按钮动画。facebook 推出的paper关闭消息的拉伸曲线动画等。

巧妙的设计在满足产品功能需求的基础上更能让用户惊艳。这类动效是APP的专属符号,APP的品牌和逼格展现通过此类动效有较大的发挥空间。这就像Michael Jackson的亮相pose,他本人or模仿者只要一摆出这个POSE我们就立马想到MJ。同样这类动效的设计更具尝试性和前瞻性,它是动效趋势的实践和探索,甚至能引发跟风潮流。

  1. 这类动效设计需要注意的是:
  2. 操作前的提示引导
  3. 夸张化和个性化的表现
  4. 对动态趋势的预测

举例:

手势提示的动画

156-003

特型动画

156-004

前瞻性动效演示

156-005

三、高难度动效让用户『WOW』

基本动效让用户舒服,招牌动效让用户印象深刻,只有这些对于一款“高逼格”标签的App还不够。在这个大家都很拼的世界,不来点让人经验的高难度动作很难让别人对你刮目相看。这类动效很酷,很炫,可让用户作长时间的视线停留享受,让用户『WOW』的同时,不得不为设计动效的同学点赞,大大提升了对APP所属品牌及开发团队实力的认可。

当然,不要忘了APP的主要功用,高难度动作只是锦上添花抑或画龙点睛。所以在APP设计中高难度动作并不一定都会使用,要根据APP的切实需要进行设计。在不干扰主功能的前提下,进行探索展示。所以这类动效多出现在引导页或者特殊功能展示上例如手机清理APP展示清理进度的仪表动效等。

这类动效的需要注意的是:在满足系统资源占用的前提下尽可能发挥吧!Just do it!

仪表盘动画

156-007

基本动效,招牌动效和高难度动效的合理运用,可以让App变得更出众,更性感,更有趣。在App设计过程中,这三类动效要遵循以基本动效为主,招牌动效为辅,高难度动效精选使用,切勿过度炫技的准则。在全民扁平化的设计趋势中,相信动效会为设计带来更多的可能和惊喜。设计师们又多了一片可发挥的领域,各位加油吧!

动效设计好文合集!

教你快速保存动效!
《经验分享:如何快速保存APP动效?》

手把手教你设计动态界面!
《PS高手教程!教你打造流畅酷炫的动态演示》

腾讯出品的动效设计指南!
《超赞!高大上的动效设计方法及流程总结》

原文地址:mux.baidu

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网利来w66.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量88万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.gongyeb2b.cn
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.gongyeb2b.cn/app-animation-classification

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里