恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效-APP设计的肢体语言
0.0°
2015-01-07 原创文章 经验/观点 原作者: 百度MUX 举报 3533 31 9 0

引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。

156-980

引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。

在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感?此时,有限的屏幕空间紧靠文字的提示是不够的,App需要更多的新鲜血液——“动效设计”。动效设计可以拓展空间内容,简化引导流程,降低学习成本,更重要的是给用户带来意想不到——类似于“Cool”的惊喜,它就像人类的肢体语言,通过肢体语言传达更多的抽象信息和性格展现。

肢体语言(body language)又称身体语言,是指通过头、眼、颈、手、肘、臂、身、胯、足等人体部位的协调活动来传达人物的思想,形象地借以表情达意的一种沟通方式。一个人要向外界传达完整的信息,单纯的语言成分只占7/100,声调占38/100,另外的55/100信息都需要由非语言的体态来传达。肢体语言的重要性可见一斑。
肢体语言大致可分为三类动作:基本动作,招牌动作和高难度动作,这三种动作是如何在APP设计中体现呢?

1.基本动效让用户舒服

基本动作也可称为日常动作,如坐立,行走,握手,拥抱等.对应APP中的基本动作分三类:1.指向性动效(滑动,弹出等)
2.提示性动效(滑动删除,下拉刷新等)
3.空间扩展(翻动,放大等)

不要小瞧基本动作,试想当你看到一位美女起身向你走来结果驼背,外八字,是啥感觉!APP亦是如此。流畅,自然映射,重力模拟这些看似简单但却能让用户在操作时轻松自在并有强烈的代入感。这类动效最重要的是让用户感到毫无负担又如沐春风,也就是不要夺人眼球,悄无声息的顺应用户行为,引导用户需求。
这类动效在设计过程中需要主意几点:
1.系统兼容和资源占用
2.动态速度的节奏
3.仿生性or现实重现

举例:
图片1.3X3动效控件

156-001

156-002

156-006

招牌动作是基于基本动作有选择性的差异化展现。例如针对空间扩展而设计的path加号按钮动画。facebook 推出的paper关闭消息的拉伸曲线动画等。
巧妙的设计在满足产品功能需求的基础上更能让用户惊艳。这类动效是APP的专属符号,APP的品牌和逼格展现通过此类动效有较大的发挥空间。。这就像Michael Jackson的亮相pose,他本人or模仿者只要一摆出这个POSE我们就立马想到MJ。同样这类动效的设计更具尝试性和前瞻性,它是动效趋势的实践和探索,甚至能引发跟风潮流。
这类动效设计需要注意的是:
1.操作前的提示引导
2.夸张化和个性化的表现
3.对动态趋势的预测
举例:
图片1.手势提示的动画

156-003

156-004

156-005

基本动效让用户舒服,招牌动效让用户印象深刻,只有这些对于一款“高逼格”标签的App还不够。在这个大家都很拼的世界,不来点让人经验的高难度动作很难让别人对你刮目相看。这类动效很酷,很炫,可让用户作长时间的视线停留享受,让用户『WOW』的同时,不得不为设计动效的同学点赞,大大提升了对APP所属品牌及开发团队实力的认可。当然不要忘了APP的主要功用,高难度动作只是锦上添花抑或画龙点睛。所以在APP设计中高难度动作并不一定都会使用,要根据APP的切实需要进行设计。在不干扰主功能的前提下,进行探索展示。所以这类动效多出现在引导页或者特殊功能展示上例如手机清理APP展示清理进度的仪表动效等。

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

156-007

更新:2015-01-07

收藏

31人已收藏

百度移动用户体验部

百度MUX致力于做行业内最优秀,体验最好的无线产品。

  • 13

    作品

  • 1569

    粉丝

  • 15

    关注

  • 看演出的那些事儿
  • 短视频这么火,你知道网红是怎么炼成的吗?
  • 传递行业声音,携领“体验设计新势力”
  • 百度智能手表OS创新设计(交互篇)

    猜你喜欢

      2015-01-07 原创文章 经验/观点 原作者: 百度MUX 举报 3533 31 9 0

      动效-APP设计的肢体语言

      0.0°

      你确定要举报动效-APP设计的肢体语言

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年01月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      31
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录