如何将生活中的动态运动应用到工作项目中?

当前位置:首页>设计文章>UI>如何将生活中的动态运动应用到工作项目中?
如何将生活中的动态运动应用到工作项目中?
前言
这是两张来自法国东南部肖维岩洞的岩画, 经证实可追溯至3万6千年前,是世界上最早的形象画。其中有53幅「动态」图画描绘了马、狮子和水牛等动物,呈现出慢跑、快跑、摇头晃脑、用头碰尾巴等动作。
如何将生活中的动态运动应用到工作项目中?
如何将生活中的动态运动应用到工作项目中?

在伊朗被焚之城中挖掘出的陶碗,则描绘了五幅山羊的分解动作图画。

如何将生活中的动态运动应用到工作项目中?

考古学家认为这是世界第一个展示动画概念的案例:旋转碗的时候可以看到这个山羊朝一棵梨树上跳去。

如何将生活中的动态运动应用到工作项目中?
下图是在1832年,由比利时人约瑟夫普拉托和奥地利人西蒙冯施坦普费尔发明的费纳奇镜。它可以播放连续动画,是早期无声电影的雏型。
如何将生活中的动态运动应用到工作项目中?

从史前文明诞生时出现的壁画,到18世纪费纳奇镜的发明,再到19世纪末电影技术的兴起,从传统动画以及定格动画的产生,一直到现今遍布世界的二维三维电脑动画,无不展现着人类对动态事物的好奇和感知,并热衷于利用当下技术去模拟真实的动态世界。

如何将生活中的动态运动应用到工作项目中?
生活中的动态

广场上仪仗队整齐划一的动作,让我们感受到纪律井然和庄重严肃。

乡野里风拂过麦田,远方一簇簇的麦秆随风摆动,此起彼伏,给人带来一种沁人心脾的舒适。

如何将生活中的动态运动应用到工作项目中?

巨浪猛击礁石,海鸥被惊飞四散开去,没有整齐划一,而是随机错落,富有自然的韵律感。

城市街道里车水马龙,红绿灯以固定频率控制交通,多样的动态节奏呈现出城市特有的韵律,带来喧闹繁杂、充满活力的感受。

如何将生活中的动态运动应用到工作项目中?

日常生活的片段都蕴含着特定的动态规律,小到谈笑间的抑扬顿挫,大到精心排练的宏大管弦乐演出,从中都能挖掘出不同的动态片段启示。

如何将生活中的动态运动应用到工作项目中?
动态设计的要素分析
动态的过程可以简化为:
元素经过有序的规则A进入画面后,维持一段动作,以有序的规则B消失或离开画面,再次有其他元素进入画面,由此循环。
规则A:风格,节奏和影响
风格即元素的入场形式。形式本身没有严格的对错,但是它需要服务于具体的项目主题风格,比如国风、科技风、现代简洁风或者可爱的风格对应的元素进场是不同的,也可以使用一些通用的现代风格。
如何将生活中的动态运动应用到工作项目中?
确立了主题风格之后,需要对不同元素进行对应的风格处理,比如国风(包括硬朗的笔刷风格,以及相对舒缓的水墨风格)、卡通风格(有合理又夸张的变形扭曲,也有怀旧复古的低帧定格效果)、科技风(有信号失真,跳闪或者是颜色分离等)
如何将生活中的动态运动应用到工作项目中?
元素入场要满足自身特定的逻辑自洽,才能更加令人说服可信。比如数字可以采用计时、倒数等形式,花朵采用飘入或者淡入,很少会采用圆形或者方向遮罩。
总之不管是单个还是多个元素的入场形式,都要与主题风格统一,并满足自身的逻辑自洽。
节奏产生于对比,时间先后,速度快慢,大与小,亮与暗,前与后,一个属性的两个极限值的合理有规则的搭配就会产生节奏。对比较弱节奏就越不明显,对比越强节奏越明显,不同元素之间需要协同搭配才能产生不同的节奏感。
如何将生活中的动态运动应用到工作项目中?
单独以时间先后这个概念来说,它常用于多个元素的画面入场,在无特定情况下,我们会对多元素的动画尽量安排线性或者随机的时间入场,它源自于类似骨牌推倒的舒适感或者自然间无序随机的协调感。整体效果只要做到错落有序,间隔不宜过大即可。
如何将生活中的动态运动应用到工作项目中?
影响也就是元素带来的基于逻辑的二级动画效应,这与动画师生存手册当中Secondary Action 附属(次要)动作类似,比如爆炸会产生烟雾、火星粒子或者轰鸣。
在强节奏下尤其需要强化元素的动态效果,我们可以添加多个由元素带来影响的二级动画,比如闪光、反向或者震动等等。又比如公交车起动和刹车时给乘客带来的惯性反应,这给运动带来连续性和逻辑性,可以让动态更具可信度。
规则B:剪辑和转场
转场首先要服从于主题风格,其次才是选择如何转场。在这里以一个视频为例:
https://www.bilibili.com/video/BV1Hj411N7CC/?spm_id_from=333.337.search-card.all.click&vd_source=a6d36c7a6d9e5912ee4aa3f843502a4e

在以上视频中出现了这些过场手段:

1.the cut硬接

2.fade淡入淡出,渐白,渐黑

3.dissolve叠化

4.match cut匹配剪接,利用前后两个的镜头相似的元素或者逻辑关系
如何将生活中的动态运动应用到工作项目中?

如何将生活中的动态运动应用到工作项目中?

5 iris模拟早期相机光圈打开或者关闭

6.wipe擦除,方向线性擦除,形状遮罩擦除
7.passing遮挡转场,借由镜头或者物体过场,比如墙体、物体的局部遮挡过场,维持动态

8.whip pan镜头的快速摇移

如何将生活中的动态运动应用到工作项目中?
如何将生活中的动态运动应用到工作项目中?

9.smash cut用高对比的元素对比剪接
10 J、Lcut前后镜头元素的提前或者延续交错

整体来说,一切以逻辑合理性、元素相似性、动态连续性等为思考方向。

如何将生活中的动态运动应用到工作项目中?
合理的节奏设计
生活中的节奏设计:
假设要为景区设计策划一个徒步游览活动,最摆烂的方案莫过于直接从起点走到终点,全程不提供餐饮和游乐环节。
但若想满足娱乐和宣传需求,甚至吸引游客付费参加,就要有意识地进行节奏设计。例如可以结合当地特色设计奖励机制,在合适的节点上为游客提供特定资源。具体来说可以在每隔500米设置一处当地调制的水酒服务,在三分之一处提供B等级的餐饮美食和游乐节目,在三分之二处提供A等级服务,终点提供S等级服务。
如何将生活中的动态运动应用到工作项目中?
项目案例分析:
回到项目案例中,确立整体风格后,我们需要对节奏进行有意识的设计。
处理单页面,除了画面中元素本身的节奏变化,也要注重多元素之间的层级关系。若存在多个页面,还要统一考虑多个页面之间的层级关系,主要元素或者主要页面需要更强烈的节奏设计。
以我们实际案例VSBumper的动态节奏设计来说,由于VS Bumper常规是单个页面,所以处理不同的元素层级节奏是重点。
首先我们需要对手上的资源也就是视觉元素进行划分类别。各个元素之间的主次关系,常规分成S,A和B三个等级依次减弱,或者是SAA的等级设计(SA主次,AA平行)。毋庸置疑,S的处理要最醒目,动态效果要最强也要更丰富,而AB或者AA就要相对更弱,由此元素动态之间产生了对比,也就产生了节奏感。
在下面的VSBumper案例中,S元素是VS字样,A元素是战队和成员信息,B元素是周边碎片或者是项目Logo。所以对VS的动态是要突出处理的,其他级别的元素动态做弱化处理,各个层级的元素进场时间也要尽量错开。

如何将生活中的动态运动应用到工作项目中?
如何将生活中的动态运动应用到工作项目中?

如何将生活中的动态运动应用到工作项目中?
如何将生活中的动态运动应用到工作项目中?
在处理单页面维持动态时,以我们的循环为例,同样区分主体和次体元素,整体要尽量避免画面的完全静止。保持次体元素的动画的同时,不能夺取主体动态的吸引力。还是以上面左边的VSBumper为例,在元素完全入场后,在维持大块玻璃的运动同时,周边的碎片玻璃、底图圆环和中间更碎的部分同样也要做相对微弱的动态处理。
在处理多个页面时,以我们带intro的大屏制作为例,它往往包括多个页面的动态制作。同样首先也要将这几个页面进行类别划分,也就是大框架下的SAB细分。着力强调S页面(包含元素S-S,S-A,S-B等元素)的动态效果,强调S-S元素的动态效果。
在下面的冠军大屏动画案例中,涉及到多个页面的动态处理,S级页面是最后的冠军页面,A级页面是冠军Logo的进场页面,B页面是带冠军奖杯的引入画面。
如何将生活中的动态运动应用到工作项目中?
S页面中“冠军”又作为该页面的S元素,其他比如成员信息作为A级元素,可以看到虽然A级页面中战队Logo也有相似的入场,但相比“冠军”的进场会稍微弱化一些,“冠军”在这里加入了亮光、震动、光效素材和飘散粒子,作为重点强调区分开来。
如何将生活中的动态运动应用到工作项目中?
如何将生活中的动态运动应用到工作项目中?

这样就会使得在完整的大屏动画下,页面与页面之间有节奏上的产生,同时在单个页面下又有每个元素间的节奏区分,由此就完成了一次相对合理的节奏设计安排。

如何将生活中的动态运动应用到工作项目中?

总结

最好的灵感和参考是生活本身

动态无时无刻产生于日常生活中的片段,我们只需要仔细多观察生活,感受来自实际生活各个片段带给我们的不同情绪,抓取每一个节奏片段进行总结分析,就可以运用到我们的实际工作项目上去。


历史文章推荐:

如何将生活中的动态运动应用到工作项目中?插图28
如何将生活中的动态运动应用到工作项目中?插图28

ASAK| AIGC组件化设计方法

如何将生活中的动态运动应用到工作项目中?插图30
如何将生活中的动态运动应用到工作项目中?插图30

Midjourney | 敦煌仙女AI绘画创作思路(含咒语)

如何将生活中的动态运动应用到工作项目中?插图31
如何将生活中的动态运动应用到工作项目中?插图31

见微知著 —— PC/移动端交互小差异

如何将生活中的动态运动应用到工作项目中?插图32
如何将生活中的动态运动应用到工作项目中?插图32

如何将生活中的动态运动应用到工作项目中?

如何将生活中的动态运动应用到工作项目中?插图33
如何将生活中的动态运动应用到工作项目中?插图33

Android和iOS差异有哪些,工作中该如何处理?


如何将生活中的动态运动应用到工作项目中?

Hi,我们是ASAK设计团队
AstroxAkira


如何将生活中的动态运动应用到工作项目中?
温馨提示:

文章标题:如何将生活中的动态运动应用到工作项目中?

文章链接:https://www.uied.cn/56642.html

更新时间:2024年03月14日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI效率工具设计干货

在线AI调色板——Aicolors:输入关键词就能配色。

2024-3-12 20:43:49

AIGCUI

AIGC辅助动态启动页

2024-3-15 14:00:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索