首页 > 交互 > 关键词 > 移动端动画设计最新资讯 > 正文

移动端动画设计的12个原则

2013-01-21 09:22 · 稿源:jupeterlee.com

在移动设备用户体验设计领域,微妙精致的动画已成为非常重要的设计元素。为任何对象添加动画并不简单,需要观察研究在真实世界中物体是如何在时空中运动的,需要设计者关注细节,并且具有耐心。适当的动画能够提供清晰的信息和直观有趣的体验,而过多的动画则容易造成糟糕的用户体验。那么移动设备上的动画应该如何来设计呢?Johnston 和Thomas在他们1981年出版的《The Illusion of Life: Disney Animation》一书中总结了12个动画设计原则,虽然当初主要是针对电影和电视领域而提出的,但是这些原则同样也适用于小屏移动设备上的动画设计。

由迪士尼公司Frank Thomas 和 Ollie Johnston写的《生命的幻觉》                                           

1. 挤压变形

挤压装满水的气球后形变,这能展示其具有较强的弹性 

物体都存在质量,物体运动时的变形状态能反映其自身的刚性和弹性程度。例如书架椅子这类物体就具有较强的刚性,而衣服、树叶则具有更好的弹性。

在移动体验中,利用挤压变形原则能够唤起用户的主观记忆。如果你想表达应用刚毅的效果,你就可以使用刚性的界面和图形,以及更加精准的动画,如果想要唤起用户对有机物的记忆,则可以使用柔软易变的界面,以及更加优雅柔和的动画。

Flipboard刚毅效果的动画来切换界面

Ibook使用更复杂、更柔和的翻页效果来模仿真实阅读的体验

2. 预备动作

投掷保龄球前的甩臂就是一个预备动作

设计物体的运动都需要考虑这三个阶段:动作发生前的预备动作,动作本身,动作的结果。预备动作可以为即将发生什么动作提供线索和信息,例如棒球运动员扔球前的甩臂运动,弹簧的反冲动作等等。在移动设备的用户体验设计中,预备动作还可以暗示用户应用内元素的使用方法。现在很多移动应用的打开动画都是很好的预备动作案例。

打开照相应用时的动画运用了预备原则

WP系统主界面底部展示的少量色块图标暗示了向上滑动的手势操作

3. 状态

右侧图片具有很好的状态释义性,清楚的表现了两个角色的对话状态;左侧的图片并没有很好的解释这两个角色的心理状态 

描述状态能更清晰的表达动画的中心思想。在移动体验设计中,状态原则主要涉及到屏幕的切换,和用户界面的交互过程。通过界面中的颜色、亮度、组成元素和动画来引导用户合理分配注意力,可以创造非常流畅的移动体验,并且可以增强应用的易用性。

Keynote运用状态原则使得用户能很好的理解正在处理的文件 

4. 连贯与关键帧

上面那幅图片采用了连贯技术,即使用了每一帧画面来表现动作,而下面那幅则使用了三个关键帧来展示动画 

为了捕捉快速而特殊的动作,经常需要从头至尾的绘制每一帧画面,这就是连贯原则。而关键帧技术则是绘制动作中关键点的画面,并采用补间来展示动画。移动端的动画设计大多采用关键帧技术来实现,这种技术比较简单,适用于展现简单的动作,而对于复杂特殊的动作,则可能需要使用绘制每一帧的连贯技术了。

由于游戏动作更复杂,水果忍者ipad版则采用了从头至尾的技术来渲染动作

植物大战僵尸Ipad版就采用了关键帧技术

5. 顺势和叠加

顺势可以描述物体运动时,不同部分以各异的速度运动(如小狗摇头时耳朵、下巴的摆动速度不一致)

想像一只小狗左右摇头,它脸上松弛的肉也会随着头一起晃动。这就是动作的顺势和叠加。很少有动作是突然发生又突然停止的,一般都是逐渐停止,在物体的其他部分已经停止运动时,某些部分还在继续运动。而且物体的不同部分运动时的速度、动作都可能是不一样的,只有考虑到这些细微的差异动画看起来才会更真实形象。移动端的界面元素可以协同形成一个整体、叠加的动画效果,这些动画可以帮助用户理解界面元素和操作方法。

WP上的色块Icon的运动使用了动作叠加的设计原则。色块并不是单独运动,而是色块组以不同的速度重叠运动。

  • 相关推荐
  • 大家在看
  • Roblox移动端总收入突破15亿美元

    Sensor Tower 商店情报数据显示,沙盒游戏平台Roblox在移动端的总收入突破 15 亿美元。过去 7 个月,该游戏移动端总收入从 10 亿美元激增至 15 亿。由于COVID- 19 全球爆发及多国封锁,过去几个月人们通过网络进行娱乐和社交,Roblox在此期间迎来爆发式增长。今年 3 月,该游戏在移动端的收入为 6980 万美元,环比增长28%; 4 月收入进一步增长34%。 5 月收入再创新高,达到1. 03 亿美元。

  • 全网独家直播电商数据分析App移动端——蝉妈妈正式上线

    蝉妈妈是国内知名的抖音直播和短视频电商数据与服务的提供商。基于强大的数据分析、品牌营销及服务能力,致力于帮助国内众多的达人、机构和商家提升效率,实现精准营销。为了提供更好的用户体验,蝉妈妈推出全网独家iOS App, Android App移动端,以便最大程度满足不同场景的用户需求。经过数月的不断研发与酝酿,蝉妈妈APP在 6 月 3 号正式上线! ★这个App适用对象有哪些呢? 无论你是短视频淘客、直播达人,还是MCN机构甚至乃是?

  • WWDC 2020开幕前夕苹果改版App Store Connect 优化移动端支持

    ​距离 WWDC 2020 大会开幕还有几天时间,本周二苹果对 App Store Connect 用户界面进行了改版,采用了全新的设计,并对移动端提供了更好的支持。App Store Connect 于 2018 年首次亮相,是开发者提交、监控和管理 App Store 应用的中心,取代了之前的 iTunes Connect 管理套件。

  • 网友举报动画人物染发,已进行停播整改

    动画片中的人物大多数都是虚构的,因而给画师和编剧带来了很多的想象空间,也可以给观众带来不少丰富的剧情内容。但就在近日,有观众举报金鹰卡通的动画片《菲梦少女2》里有染发、穿得花里胡哨在舞台上表演换装等问题,批评其价值导向有问题。

  • 日本动画电影《无限》宣布今天上映:头条系同步首播

    日本动画电影《无限》(又名 《想哭的我戴上了猫的面具》)将于今日18:00上线抖音、西瓜视频等字节跳动旗下平台,与Netflix全球同步播出。本片主要讲述了绰号叫“无限”的女生笹木

  • 网友举报动画人物染发 附湖南广电回应全文

    ​网友举报动画人物染发是怎么回事?日前在湖南省广播电视局官网咨询投诉一栏显示,湖南卫视金鹰卡通频道 18 时左右播放的一款动画片《菲梦少女2》「价值导向有问题」。据金鹰卡通官网显示,金鹰卡通卫视作为中国首个获批卫星传送的卡通频道、首家高清卡通卫视,是同类频道中覆盖范围最广(高清标清同播, 30 个省份全覆盖)、收视率最高的全国性亲子电视媒体。

  • 法国年度最诡异的动画电影《我失去了身体》葫芦视频免费看

    说到动画电影,大家想到的是什么?日本还是宫崎骏的电影。通通都不是,今天跟大家聊一部具有独特风格的法国动画。这部影片不仅获得了今年戛纳电影节的影评人周单元大奖,还横扫了安妮奖最佳独立动画长片、最佳导演、最佳编剧、最佳分镜和最佳配乐的提名。安妮奖是动画领域的最高荣誉之一,包揽这个奖项的多项重量级提名,已经意味着影片的水准无需质疑。不过,真正吸引到我的还不是这些,而是它别出心裁的故事和高能诡异的风格。这?

  • 日本第一动画大师宫崎骏企划新作:《阿雅与魔女》今年冬天播出

    有着日本第一动画大师之称的宫崎骏,几乎每一部都会受到粉丝的追捧,比如说《千与千寻》、《龙猫》、《天空之城》等。近日,吉卜力工作室宣布,由宫崎骏企划,宫崎吾朗大人导演的动画《阿雅与

  • Zoom拟向所有用户提供端对端加密服务 7月份推出试用版

    6月18日消息,据国外媒体报道,当地时间周三,视频会议软件公司Zoom宣布,将为所有用户提供端到端加密服务,包括免费用户。本月初的时候,该公司表示,将只向付费用户提供这项服务,这意味着免费用户无法享受这一新服务。Zoom的这一计划遭到了批评,因此决定为所有用户提供端到端加密服务。目前还不清楚该服务何时面向所有用户推出,但试用版将于今年7月份推出。据报道,在每一个视频通话中添加完整的端到端加密,将会

  • 网友举报动画人物染发 湖南广电:责令核查整改 将加强把关

    近日,有一位粟姓网友在湖南省广播电视局官网反映称:“金鹰卡通频道晚上18: 00 左右播放的一款动画片-菲梦少女 2 价值导向有问题,不应该提倡把头发染成五颜六色,穿得花里胡哨的还在舞台上表演换装。”

  • 特必Toon Boom Harmony 20 助力动画艺术家大胆创作

    特必Toon Boom Animation 推出了 Toon Boom Harmony 这一屡获殊荣的动画制作软件的最新版。特必Toon Boom邀请了来自世界各地的七位艺术家及其团队,运用Harmony 20软件演示了一系列能激发创作者灵感、并表达自我的动画,详尽的展示了 Harmony 20 增强后的绘图和着色工具以及拥有无限可能性的一系列新功能。特必Toon Boom Animation 市场总监 Stephanie Quinn 认为:“娱乐产业正逐渐认识到动画的真正价值——它既能生产内容,也是?

  • 设计实战 赞扬设计服务带你探究LOGO设计

    我们都知道,每个公司都有着它自己的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师们才能基于它们来为这些公司企业进行LOGO设计。LOGO绝对是最能够直观的体现一个公司属性和风格的东西之一。专门设计一个独立的、与众不同的LOGO是一件很艰难的事,因为就目前市场上存在的公司企业和五花八门品牌LOGO实在是太多太多了。LOGO设计的独一无二,对公众而言,能够看一眼就能快速的想起某一?

  • 小米手机相册全量升级:14项更新 界面、动画大变

    今天下午,小米相机总监@Queena_小米,在个人微博提到,MIUI相册V2.2.16.4已全量发放,大家可以试用各种新功能。据了解,新版相册有14项更新内容,包括相册页支持切换列表样式、人物相册支持编

  • 正式回归!索尼首席动画师:《蜘蛛侠:平行宇宙2》已开始制作

    对于那些期待《蜘蛛侠》续集的影迷来说,新作正在来的路上了。索尼首席动画师Nick Kondo今日(6月9日)发推,表示自己已经投身于《蜘蛛侠:平行宇宙2》的制作之中。在今年4月底的时候,官方

  • 新海城动画电影《你的名字》口碑票房双丰收,葫芦视频免费看

    世间所有的相遇,都是久别重逢。日本导演新海诚的动画电影《你的名字》用画面诠释了这样令人动容的一幕。该影片在刚引进中国的时候也是刷爆了众人的朋友圈,也没有料想到这部电影能成为口碑神作。即使你不知道新海诚,但也一定听说过宫崎骏这个名字。在电影的开端,男女主角惊讶发现,他们彼此互换了身体。女主角三叶,一名生活在日本小乡镇系守县的高中女生,在一个阳光明媚的早晨醒来。她感觉自己做了一个很奇怪的梦,梦到自己和

  • “动画欣赏家”百家号有什么作用?企业品牌必须知道的推广渠道

    备注:本文数据来自站长之家移动传媒平台,文章涉及的数据依托平台大数据计算所得,非百度官方数据,仅供参考。动画欣赏家是当前百家号中的普通号,目前账号百家号权重为1,综合排名位列1009890名,动漫分类排名位列14915名,领先了9.6%的百家号。 动画欣赏家百家号概况 动画欣赏家的简介为最新的动画咨询,动画欣赏,后期制作解密,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超过0篇的游戏内容

  • 日本动画电影《无限》线上首映 西瓜视频与Netflix全球同步播出

    【TechWeb】6月18日消息,今天下午6点,日本动画电影《无限》(又名《想哭的我戴上了猫的面具》)开启全球首映,在中国通过西瓜视频、抖音、今日头条平台上线。这是继BBC剧集《德古拉》后,西瓜视频再度实现与Netflix全球同步播出影视作品。届时,用户可在上述平台中付费观看该片。 公开资料显示,《无限》由日本著名导演佐藤顺一和柴山智隆联合执导,主要讲述女生笹木美代的青春奇幻故事,主打超萌轻甜治愈风格。绰号为“无限”?

  • “CG的动画技术”时尚领域排行榜,百家号分类应该怎么选

    备注:本文数据来自站长之家移动传媒平台,文章涉及的数据依托平台大数据计算所得,非百度官方数据,仅供参考。CG的动画技术是当前百家号中的普通号,目前账号百家号权重为2,综合排名位列569317名,时尚分类排名位列20876名,领先了49.0%的百家号。 CG的动画技术百家号概况 CG的动画技术的简介为CG电脑技术的一些资料的分享,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超过19篇的游戏内容,最?

  • 湖南广电回应网友举报动画人物染发:高度重视,已责令其核查整改

    据澎湃新闻报道,近日湖南长沙有网友向湖南省广播电视局举报,称湖南卫视金鹰卡通频道 18 时左右播放的一款动画片《菲梦少女2》“价值导向有问题”,不应该提倡把头发染成五颜六色,穿得花里胡哨的还在舞台上表演换装。

  • B站11周年 CEO陈睿:未来要让中国原创动画游戏受世界欢迎

    今日是哔哩哔哩十一周年生日,在B站 11 周年演讲活动中,B站董事长兼CEO陈睿指出了B站三个方面的变化。首先,B站的用户变多了。第二个是UP主变多了。第三,内容品类也变多了。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议