动效-APP设计的肢体语言

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

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

肢体语言(body language)又称身体语言,是指通过头、眼、颈、手、肘、臂、身、胯、足等人体部位的协调活动来传达人物的思想,形象地借以表情达意的一种沟通方式。一个人要向外界传达完整的信息,单纯的语言成分只占7/100,声调占38/100,另外的55/100信息都需要由非语言的体态来传达。肢体语言的重要性可见一斑。

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

基本动效让用户舒服

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

1.指向性动效(滑动,弹出等)

2.提示性动效(滑动删除,下拉刷新等)

3.空间扩展(翻动,放大等)

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

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

1.系统兼容和资源占用

2.动态速度的节奏

3.仿生性or现实重现

举例:

图片1.3X3动效控件

2.加载动画

3.翻页动画

招牌动效加深用户印象

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

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

这类动效设计需要注意的是:

1.操作前的提示引导

2.夸张化和个性化的表现

3.对动态趋势的预测

举例:

图片1.手势提示的动画

2.特型动画

3.前瞻性动效演示

3.高难度动效让用户『WOW』

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

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

图片:仪表盘动画

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

时间: 2024-10-16 07:13:01

动效-APP设计的肢体语言的相关文章

8个最佳动效网页设计,告别枯燥体验!

作为2018年网页设计的趋势之一,网页动效设计已经成为现代网页用户体验的重要组成部分.不管是微妙的转场动效,还是覆盖整个页面,动画效果无处不在.融入动效的交互细节让现代网页同以往的设计在根本上区别开来. 对设计师来说,CSS和HTML的成熟使设计师变得越来越富有创意,CSS动画使他们的网站更加个性,可以快速,轻松地解释复杂的想法,并指导用户的行动.对于用户而言,动画效果让网页中元素的逻辑变化更加清晰,个性化的视觉效果为用户带来的愉悦感受更有助于用户留存.增加转化. 什么是CSS动画?   通过

分享app动效设计

移动互联网时代已经到来,app已如天空的繁星,数也数不清.随着手机硬件的不断升级,实现炫酷且流畅的动效不再是遥远的梦想.如果你是app达人,喜欢试用各种app,你肯定会发现越来越多的app开始动效化. 一个真正的美女一定是同时兼具外在美和内在美,评价一段动效也是如此.一段真正"美"的动效需要同时具备两个条件,首先它需要是生动且有趣的,既好看又流畅:再次它不是可有可无的,需要具备优化交互和提升体验的作用. 1. app动效的外在美 一段动效首先需要是生动且有趣的,不仅要有好看的外观还要有

如何快速保存APP动效? 转

经验分享:如何快速保存APP动效? @AzTamic(百度MUX 交互设计师):很多小伙伴平时喜欢收集手机软件上的各种动效,但是又苦于不知道如何保存,今天讲一下利用itools+Ps保存动效的实例,如果你有更快捷的方法请联系我更正. 动效设计好文推荐:<帅呆了!一组令人愉悦的APP动效设计><高手之路!设计漂亮有趣的转场动效><还等什么!是时候来了解动态设计啦> 首先,请小伙伴们看看成果: 需要知道的: 1.iOS设备大多通过AirPlay来实现屏幕的投射和录像.我用的

我们为什么需要动效设计

随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域. 但是说到底,我们到底为什么需要动效设计?或者说我们到底需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计. (文中部分案例为设计师个人作品,部分为线上产品,都是我非常非常欣赏的作品.如不慎冒犯请戳我替换掉) 一.加强体验舒适度 嗯,就是让用户更加爽更加爽的用你的产品. 具体表现在

iOS 停止不必要的UI动效设计

http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. UI动效设计的反面案例(线上Demo) 注:这个反面案例并非假设,而是来自近期的真实客户案例. 概述 自从 70.80 年代首个光栅图像在CRT屏幕出现以来,人们对于(数字)视觉设计的态度一直在不断进化.与其他艺术领域不同

动效设计原理:从卡通动画到UI动效

概要 UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题. 尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具.但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合. Keywords UI.动画效果

百度MUX:APP动效之美需内外兼修

移动互联网时代已经到来,APP已如天空的繁星,数也数不清.随着手机硬件的不断升级,实现炫酷且流畅的动效不再是遥远的梦想.如果你是APP达人,喜欢试用各种APP,你肯定会发现越来越多的APP开始动效化. 一个真正的美女一定是同时兼具外在美和内在美,评价一段动效也是如此.一段真正"美"的动效需要同时具备两个条件,首先它需要是生动且有趣的,既好看又流畅;再次它不是可有可无的,需要具备优化交互和提升体验的作用. 1.APP动效的外在美 一段动效首先需要是生动且有趣的,不仅要有好看的外观还要有流

动效设计必备:元素周期运动表(Periodic Table Motion)

今天分享一个元素周期运动表,这个并不是化学元素,你可以理解为「元素运动规律」,因为这个元素表是由一些常用动效组成,并且每个动效的实现都有一个理论依据,而不是凭空想象出来.动效有弯曲.偏移.流动线.噪波.回旋路径.极坐标.音频波浪.对称旋转.连接.遮罩消除等效果.对到交互设计师,想了解动态设计原理,建议收藏此表. 网站名称:Periodic Table Motion 网站地址:http://foxcodex.html.xdomain.jp/ 进入网站后,我们点击每个动画都有尽介绍! 下面来看看这些

动效设计的物理法则

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过: 动画制作和动效设计是本质相通的,我们需要为用户建立一种"视觉的真实",即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是"可信度",要让用户感知到这个动作是成立的.这里,就要搬出高大上的物理学了! 物理学四大基本力--万有