专栏名称: 网易UEDC
网易UEDC,全称网易用户体验设计中心(User Experience Design Center),是网易设计的核心部门。负责网易旗下众多产品的用户体验设计,如网易云、网易云音乐、网易云课堂、严选、易信、邮箱大师、LOFTER、考拉海购等
目录
相关文章推荐
字体设计  ·  这写字的手真够稳的 ·  17 小时前  
ZaomeDesign  ·  新作 | ... ·  2 天前  
庞门正道  ·  只用一张脸,画出无数女孩~ ·  3 天前  
庞门正道  ·  光看包装,想立刻去撸铁! ·  4 天前  
庞门正道  ·  出入平安。 ·  3 天前  
51好读  ›  专栏  ›  网易UEDC

网易邮箱易喵动态表情包上线——浅谈迪士尼动画十二原则

网易UEDC  · 公众号  · 设计  · 2022-10-25 09:00

正文

前端”的高还原度下快速落地,在D2C环节下实现“低代码平台->自有产品”的灵活调整下快速复制。","marks":[{"type":"backgroundColor","value":"#FFF2CC"}]}]}]},{"type":"block","id":"dneS-1659683647969","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"X6Yo-1659683647968","leaves":[{"text":"结论:随着社会的发展,标准化和智能化的产品线都将会被人工智能取代,互联网行业也正在向这个方向发展,所以设计的标准化和开发的工业化就像手工业向工业化的转型,这是一个大的趋势,未来可能一天的时间就可以生产数套后台产品,这样的生产效率才能跟上中国的数字化转型浪潮。","marks":[]}]}]},{"type":"block","id":"Syre-1659683653448","name":"heading","data":{"level":"h3","style":{}},"nodes":[{"type":"text","id":"gh4Q-1659683653447","leaves":[{"text":"C2D2C 的市场化","marks":[]}]}]},{"type":"block","id":"gG37-1659683685280","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"lUBG-1659683685279","leaves":[{"text":"低代码平台","marks":[{"type":"color","value":"#F33232"}]},{"text":"是 C2D2C 模式得以实现的核心平台,从2018 年开始海外投资开始关注低代码平台,OutSystem 平台获得 KKR 和高盛的 3.6 亿美元的融资,成为了低代码赛道的独角兽,另一家低代码创业公司 Mendix 被西门子以 7 亿美元的价格收购,资本市场的关注让低代码赛道开始火热起。","marks":[]}]}]},{"type":"block","id":"oPhF-1659683687666","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"1Goj-1659683687664","leaves":[{"text":"而国内的低代码平台是从 2020 年疫情肆掠开始,疫情助推了在线办公的发展,国家也在大力支持数字化经济,更多的企业开始数字化转型,这也让低代码在国内有了飞速发展的土壤,目前海外比较成熟的平台主要是 OutSystem 和 Mendix,而国内也有很多已经商业化的低代码产品,","marks":[]},{"text":"像网易轻舟等,已经开始投入商业化的使用,可以从","marks":[{"type":"color","value":"#F33232"}]},{"text":"网易轻舟的低代码产品架构,清晰完整的看到C2D2C模式的所需要具备的能力。","marks":[]}]}]},{"type":"block","id":"7HoQ-1660112054608","name":"image","data":{"url":"https://office.netease.com/api/admin/file/download?path=cowork/2022/08/10/67d2994d10d047de8234a18d65cde5e2.jpeg","version":1,"width":800,"height":450,"cropData":{"width":800,"height":335.3177490234375,"left":0,"top":72.36688232421875,"scale":1}},"nodes":[]},{"type":"block","id":"HL0M-1660112692180","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"Tin7-1660112692179","leaves":[{"text":"网易轻舟从业务角度出发,具备持续迭代能力、组件具备可扩展性,并且可以为企业进行私有化部署,部署完成后可以和存量系统进行集成,交付后具备非常好的可运维性,是一个成熟的商业化平台,网易轻舟目前已经服务了包括工商银行、吉利汽车、申万宏源证券、泰康人寿、台州银行等包括政府产业平台30家,从服务的客户我们也可以看的出来,低代码产品在大型企业中落地更有优势。","marks":[]}]}]},{"type":"block","id":"cUcc-1660112023901","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"ykLz-1660112023898","leaves":[{"text":"结论:C2D2C 的模式已经得到市场的验证,研发工业化可以更加高效的提升中后台产品的研发效率,设计标准化也可以减少中后台设计师大量的重复性劳动,对于中后台的业务产品,可以大胆地选择一个富有实力低代码产品。","marks":[]},{"text":"搭建 C2D2C 的模式是需要具备一定的设计资产的沉淀,这个对于从头搭建 C2D2C 模式的企业来说会耗费大量的人力,不过目前互联网的设计资产很多,可以直接使用目前开源的设计资产进行使用,来搭建低代码平台,达到提升产研协同效率提升的目的。","marks":[{"type":"backgroundColor","value":"#FFF2CC"},{"type":"delete"}]}]}]},{"type":"block","id":"SMJF-1659683701617","name":"heading","data":{"level":"h3","style":{}},"nodes":[{"type":"text","id":"WmDV-1659683701616","leaves":[{"text":"写在最后","marks":[]}]}]},{"type":"block","id":"QPYM-1659683712401","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"yUJV-1659683712400","leaves":[{"text":"低代码平台的使用需要同时具备一定的代码能力和设计能力,这不管是对开发还是设计师都具备一定的门槛,目前的低代码平台使用角色应该是前端工程师,复杂的后台交互平台还是需要设计师的深度介入,低代码平台的诞生减少了中后台设计师大量的重复性工作,可以让中后台设计师将更多的精力投入到用户研究和提升用户体验上,拖拽式的 UI 和智能化的布局以及良好的用户体验和以前的开发相比较,在中后台的开发上更加的高效也更加的智能。","marks":[]}]}]},{"type":"block","id":"LkLv-1659683717311","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"UwDs-1659683717310","leaves":[{"text":"在最初调研到低代码平台的时候,行业的快速发展和成熟,我下意识的反应是中后台的设计师可能要失业了,但是在调研了平台的使用和深入的思考后,我觉得这是中后台设计师的机会,C2D2C 模式的最优解应该是 0 代码方案,而使用 0 代码平台最好的角色就是设计师,设计师专业的审美和对于用户体验理解的深度都是其他职业所不具备的,未来的中后台设计师更应该将自己的精力投入到平台流程的优化和用户体验的研究中去,这也在未来 0 代码平台到来后,我们才能更快更好的投入到新的生产中。","marks":[]}]}]},{"type":"block","id":"0Fz2-1661914180298","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"WM49-1661914180297","leaves":[{"text":"","marks":[]}]}]},{"type":"block","id":"Ox4v-1661914399316","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"LVnt-1661914399315","leaves":[{"text":"如果对网易低代码感兴趣,可进入如下传送门:","marks":[]}]}]},{"type":"block","id":"iqW8-1659684530397","name":"paragraph","data":{"version":1,"style":{}},"nodes":[{"type":"text","id":"qnrX-1659684530396","leaves":[{"text":"","marks":[]}]},{"type":"inline","id":"gNyO-1661914395307","name":"link","data":{"href":"https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg2MjcwNTM3NQ==&action=getalbum&album_id=2329419283803668482&scene=173&from_msgid=2247496690&from_itemidx=1&count=3&nolastread=1#wechat_redirect"},"nodes":[{"type":"text","id":"2y8w-1661914395306","leaves":[{"text":"https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg2MjcwNTM3NQ==&action=getalbum&album_id=2329419283803668482&scene=173&from_msgid=2247496690&from_itemidx=1&count=3&nolastread=1#wechat_redirect","marks":[]}]}]},{"type":"text","id":"RaUs-1661914395310","leaves":[{"text":"","marks":[]}]}]},{"type":"block","id":"NTQS-1659684571794","name":"paragraph","data":{"version":1},"nodes":[{"type":"text","id":"pXqd-1659684571792","leaves":[{"text":"","marks":[]}]}]}]" style="font-weight: normal; color: rgb(102, 102, 102); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif; font-size: 16px; letter-spacing: normal; margin: 16px 0px; padding: 0px; clear: both; min-height: 1em; max-width: 100%; overflow-wrap: break-word; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; orphans: 2; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; line-height: 1.75em; box-sizing: border-box !important;">


前言

易喵作为网易邮箱团队的一员,想要让用户记住,需要我们尽可能多得丰富其应用场景。 表情包作为人们网络沟通中不可或缺的工具,将其与之结合,可以有效地融入到用户的生活场景中。 借此我们设计了一 套以易喵形象为基础的微信表情包,并根据其情绪表现增加了相关动效表达。

易喵动态表情一览

Part 1

提升动效表现力的关键——动画12律

1978年,迪士尼动画艺术家弗兰克·托马斯和奥利·约翰斯顿退休后,开始写一本叫做《The Illusion of Life》(生命的幻象-迪斯尼动画造型设计)的书。这本书中就总结出了动画的12条原则。

1. 善用挤压和变形

借用挤压来强调动作的物理变化,强化物体的拉伸或者压扁的效果,其目的是给予对象以重量和弹性的感觉。当一个物体落在地上会产生拉伸和压扁的变化,这样才会有Q弹的效果。

  • 双手挤压脸部,为了让脸部有被挤压的感觉需要产生一定程度的缩放变化

2. 缓入缓出

现实世界中的大多数物体都遵循缓和的运动,极少会有匀速运行的状态,所以在动效的表现上也应该遵循次原则

一般来讲,所有动作开始是缓慢的方式-逐渐加速-缓慢完成,没有这个过程是接近于机械运动的方式。

3. 预备动作

物体开始正式动作前展示其准备动作,让用户能预知下个动作,使得整个流程更加生动合理。

  • 在正式运动开始前,先完成一段相反方向的蓄力动作,正式动作结束后因为惯性会产生轻微回弹

4. 次要动作

利用次要动作突出主要动作,来帮助主要动作传达其意义,丰富细节,使其不那么生硬呆板。

  • 主要动作是通过脸上的红晕从无到有表现出害羞情绪,在此之前增加手的揉搓,使红晕的出现变得合理。

  • 手完成摸鱼动作后,通过位置控点工具固定鱼身,给鱼尾增加轻微的弯曲摆动,完成整个摸鱼的动作

5. 跟随动作、重叠动作

物体的运动是一个部分接着一个部分的。如人身体的动作,会带动身体其他部位跟着运动,这里其他部分的运动即为跟随动作。另外物体与物体的运动也会有重叠的部分,这些跟随和重叠动作可以增加动作的真实性和趣味性。

  • 手甩动荧光棒的同时让五官跟随脸部向上移动

  • 眼睛跟随脑袋摇晃的同时也在做360度旋转

  • 鼻孔的大小和位置会跟随旁边鼻孔的变化发生相应的变化

通过提升表情细节,来强化表情对情绪的表达能力,让情感传递更加生动。

6. 弧线运动

生活中的大多数动作轨迹并不是直来直去的,而是呈现出弧形轨迹,很多运动轨迹肉眼看不到,但也的确存在,所以制作弧形轨迹动作时会显得更加灵活真实。

  • 幽灵以弧形轨迹飞入与飞出

7. 构图布局

在画面中,要突出呈现我们需要呈现的对象,通过位置、大小、光影等手段来引导视觉中心,吸引用户的注意力,这也是12项原则中最定义最广泛的原则。好的构图布局就是能清楚明确地传达画面里的信息。

8. 关键动作与连续动作

即逐帧动画与关键帧动画。详细来说,逐帧动画就是从头开始一张接着一张画下去,而关键帧动画则是先绘出表演中的关键动作,再用中割的方式把关键动作串联起来。两种方式各有其优缺点,最理想的是两种方式的综合。

9. 夸张感

所有动作效果并非一定要接近现实,这样反而会无趣死板,适当添加一些夸张成分,可以获得用户更多的注意。

10. 时间节奏

动作的节奏就是速度的快慢,不同的速度会表现不同的情绪,过快或者过慢都会让该动作看起来不自然,好的节奏控制就会看起来生动自然。

此外,所有的物体都是有质量的,节奏可以表现出物体的质量

11. 立体造型

对于二维动画来说,要用平面来展现一个3D的空间或物体,需要画出物体的体积、重量、阴影等,3D会比扁平的物体更加生动有趣。

12. 吸引力

吸引力原则是最难界定的,它没有固定的模式,而是前面一系列原则的综合体,任何画面,任何动作,你都需要问“这个对用户有吸引力吗?”这个原则对于动画来说是非常高,甚至高到难以企及的境界。

我们的动画是否会让用户留下深刻的印象,取决于在设计上是否有独特之处,表现上是否富于变化,是否有活力以及一切可以抓住用户目光的元素。







请到「今天看啥」查看全文