网站 动态 链接 前言3d 动态设计近年在国内非常流行，设计师们都想尽办法提升自己的 3d 设计动态能力。3d 能力的提升离不开两步，第一步 3d 技术习得，第二步眼界提升并灵活运用。提升 3d 动态设计能力重点在于多看多练，多看关键是持续找到优秀的作品进行观看和学习，多练是需要把之前看到过的优秀作品下载下来进行拉片练习。由于动态设计资源先天存在难以搜索、预览、定位等难题，容易出现储存成本高使用效率低的情况，本文会以解决这些痛点为目标，主要分享一些经验让大家学会如何找、如何下载、如何管理等，提升大家对 3d 动态设计素材收集与后续应用能力。更多3D素材：PixelSquid！拥有20W+可旋转3D素材的绘画参考网站大家好，这里是和你们聊设计的花生~ 又是一年开工时，在这里祝大家开工大吉工作顺利~今天为大家推荐一个超棒的绘画参考网站 PixelSquid，里面包含 20 多万个 3D 素材，涉及人物、动植物、武器、汽车、建筑、家具、艺术品等各个方面，且素材可以 360任意旋转，使用它可以帮助我阅读文章 > 一、找内容1. 关注平台社区近年越来越多设计师、工作室选择大型社区发布自己的作品，这些社区有不少优点如免用户维护、用户量大、反馈及时甚至还能发布作品获得影响力和工作机会，所以深受大家喜欢。由于市场上能找到 3d 动态设计片子的平台较多，如有 pinterest、behance、站 cool、花瓣等这些比较知名的“全类平台”，但术业有专攻本文着重介绍动态设计，这个细分市场下的社区平台如 vimeo、Patreon 等。2. vimeo 视频社区网站链接：https://vimeo.com/3d 设计师动画素材聚集地，国内外的动态设计师设计作品基本都会在 vimeo 进行发布，甚至还能看到很多飞机稿、未加工过的毛片等。行业前辈一致认为 vimeo 是动态设计找资源最好的地方，但是自己接触 vimeo 后就发现无从入手，除了编辑推荐外很难找到自己想要的片子资源。这里会给大家介绍一下如何开始使用 vimeo 找到自己想要的资源。3. vimeo 使用方法第一步“建立资源渠道”可以先关注以下内容看看大神关注了那些人，如下图点击主页的 followeing，如果觉得不错就添加 follow 即可，这样资源渠道就能慢慢建立起来第二步“静待收获”当大家建立内容渠道后，过一段时间就能收到大量的作品推送。这样下次打开 vimeo 的时候看到的就不再是空空的首页，而是众多优质内容推送。第三步“重复”当资源渠道建立好后还需要时间维护，比如见到优秀的作品多点一下作者的详情页，如果是自己喜欢的作品类型可以关注一下，甚至还可以从作者主页了解作者关注哪些人，把这些操作成为逛 vimeo 时必做的习惯，周而复始资源库就会越来越丰富，作品推送质量也会越来越高。Stashmedia 动态视频网站网站链接：https://www.stashmedia.tv/老牌动态影像网站，Stashmedia 每天都有编辑推荐，除了片子外还有详细的制作说明和设计心得等。网站还提供订阅服务，订阅服务会把每月精选动态设计视频文件打包，能给不想动手收集的同学节约时间。Art of the Title 片头网站网站链接：https://www.artofthetitle.com/老牌片头网站，深度采访当前比较热门动态设计短片设计师，该网站主打商业短片为主，如电影、电视剧片头片尾，网站主要以赞赏付费进行阅读，最新的文章是免费的。Patreon 付费知识社区网站链接：https://www.patreon.com/ （需要魔法）含金量非常高的知识内容订阅网站，patreon 以会员订阅制度为主，里面能找到很多优秀的 motion 短片，但这些短片更多是知识付费准备，除了短片还有短片的详细制作方式，大部分都需要订阅才能观看。Tumblr 轻博客网站链接：https://www.tumblr.com/dashboard（需要魔法）老牌轻博客，由于平台环境轻松发动图交互友好，所以在上面能看到比较多的动态设计内容，tumblr 以博主为单位，内容积累方法跟 vimeo 比较类似。2. 工作室官网工作室官网主要展示完整项目为主，内容相比社区平台会更完整展示更严谨，部分项目能看到设计理念项目的设计精髓，完整的设计方案更有助于我们学习。ManvsMachine网站链接： https://mvsm.com/老牌动态设计工作室，作品品质非常高，主要代表作品是 nike 系列短片作品，mvsm 由于设计方法大胆新颖，一直是大家模仿学习对象。BUCK网站链接： https://buck.co/老牌创意工作室，相比上面提到的 mvsm，buck 作品重点在叙事题材的动态设计短片为主。Tendril网站链接： https://tendril.ca/Tendril 新锐动态设计工作室，主要服务互联网公司为主，近年作品刷屏率比较高，品质优秀，近年逐步代替 mvsm 成为很多同学的学习对象。4. 待发掘Odd fellow、Ordinary folk、Loop、Animade、Cub Studio 等等都是非常优秀的动态设计工作室，业界还有非常多优秀工作室待大家慢慢发掘。5. 艺术家/设计师上面提到的维度都相对比较全面，我们来看看比较轻量的维度“人”，这个维度相对比较轻量，有时候他们发的是一个视觉效果图、一个小动态或者一个小短片，内容少但是充满想法和灵感。同时由于个人作品集有时间的积累，能看到该设计师风格演变过程。找人方法维度Simon Holmedal （mvsm 技术总监）网站链接：http://www.simonholmedal.com/（需要魔法）Remi Dessinges （mvsm 总监）网站链接：https://www.remidessinges.com/Chris Bahry （Tendril 联合创始人）网站链接：https://www.instagram.com/tendrilchris/（需要魔法）Vitaly Grossmann （Tendril 创意总监）网站链接：https://www.vitalygrossmann.com/Adam Webber （前 BUCK cg lead）网站链接：https://www.adam-webber.com/Wes Cockx （数字艺术家）网站链接：https://cream3d.com/（需要魔法）二、下载内容大部分平台都不提供短片下载，为了解决这些问题大家可以用下面的小软件进行下载视频资源。1. chrome 浏览器插件-vimeo 视频下载器（免费）网站链接：https://chrome.google.com/webstore2. idm 流媒体下载器网站链接：https://www.idmchina.net/能自由下载所有流媒体的软件 windows 平台3. idm 代替品 ndm（mac 平台可以用）网站链接：https://www.neatdownloadmanager.com/index.php/en/能自由下载所有流媒体的软件 os 和 windows 平台三、高效利用内容日常使用中视频不如图片直观，为了能高效预览和定位，这里推荐 Video Thumbnails Maker（ https://www.videohelp.com/software/Video-Thumbnails-Maker ），Video Thumbnails Maker 是一款能帮助你把视频变成视频+截图自动化输出的软件，再配合 eagle 类软件进行使用，加大视频素材的整理和可用性。结语最后通过上文三步，解决如何找、如何下载、如何整理等问题，让长期积累成为习惯，大家一定能打造一个属于自己的高效的动态设计视频库。欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/manage-3d-resource
动态 用户 的是 好奇心总在驱使着人类进步，从二维到五维空间，从登陆月球到地球以外 930 亿光年的宇宙空间探索，人类的进步永不止步。如今在互联网技术的高速发展下，用户的审美、诉求都在不断提高，同时反向推动设计的进步。近些年，你会发现，更多的设计“动了起来”。今天就带大家来了解一下「动态平面设计」。关于动态设计趋势：腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 一、动态平面设计是什么？「动态设计是基于一定的静态基本视觉元素，通过动画软件将其再设计成一种特定时间内，会发生运动和变化的图形结果。」当然在交互设计中，动态平面设计也与界面设计有所交集，被称之为界面动效，这次我们讨论的范围包含了界面之外的应用场景。对于设计师而言，需要去学习及拥抱这一趋势。二、作用1. 提高连贯性让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。连续性的动作有助于引导用户完成任务2. 链接场景在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。3. 视觉吸引聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。三、优势相较于静态平面，更具有感染力，通过增加「删除线」「眼睛的偏移位置」「伸手动作」来强化海报“不要”的情绪。增加动态区域后：设计创意来自@小红书 HE毛蛋与静态平面不同的是，动态平面可在一定时间内给予用户一定的沉浸体验。静态平面也能给予用户沉浸体验，但多数为多张图去表达含义，大家最熟悉的莫过于漫画，或是一些影视作品的分镜，从而达到用户置身于故事情节内的体验目的。动态平面更多的是让用户参与到一种交流活动中，用户可以以自己的选择去导向一种结果，更趋向于一种简单的 RPG（角色扮演）游戏。动起来后的趣味性，也是吸引用户并且加深记忆点的方式，点击按钮的动作对比与方言的结合，使得海报宣传更加生动且亲切，容易增加用户的代入感。创意来自@小红书 HE毛蛋四、类型1. 混合媒体/动画拼贴动画拼贴总给人一种复古 vibe，如同像素风格，拉回到旧时光。「We the people」是由 Netflix 网飞推出的动画，以定格、拼贴、字体等多种艺术形式，讲述了美国的立法史。@Netflix2. 动态字体动态字体通过变形与音乐相结合，可表达字体的性格，或灵动活泼，或成熟稳重。如果是作为品牌的宣传，也能起到展示品牌调性的意图。喜茶联合方正字体所推出的专属字体，在字体斜笔和勾画的弯曲幅度上进行了微调，曲率更克制平滑，使得字体更简洁、年轻态并多了一份亲和力。超实用！设计师必看的5个可变字体资源网站大家好~ 这里是被大暴雨吵得没睡好的花生，当然这并不耽误我和大家继续聊设计。阅读文章 > @喜茶 x 方正字库3. 故障效果故障错位感给人一种身临全数字化氛围中，特别是赛博朋克的影响，给人一种未来感，在科技进步的同时，又有一定的失序感。4. 复古怀旧复古怀旧把人们拉回到文艺复兴时期，用旧物搭配上现代的梗致敬经典。5. 变形变形使动画的转场更有趣且多层次。6. 液体动态液体在光线折射下能使物体产生形变，这种动态形式运用到动态平面中，产生一种独特风格。五、应用范围1. 海报、自媒体等厦门磐基名品中心 The Little 的开业动态海报，结合了「儿童好物」这一主题，使用的图形均以简单的几何形态勾勒出可爱童趣的一面。通过箱子拟人、几何形状的变形及音乐配合达到多元、有趣的表现形式。@地心引力品牌设计通过对平面的「转场」「叠加」「快速切换」等，让用户大致了解其设计风格，适合运用至品牌宣传、个人风格表现等。@by Design style对于突出个性风格越发显著的自媒体时代，每个公众号都想要阅读量 10w+文章，排版设计风格已成重要的辅助。通过采访者相关元素提取到设计排版中，纸板箱印刷字、夜市塑料凳增添了「街头采访」的意味，产生一种轻松随意的交流氛围。@by「设计便利店」公众号2. 品牌 logo① airbnb「airbnb」由 4 个 icon 结合而成，提取了 4 种含义创造出这个新 logo：以人为本，所有的功能都应基于用户痛点出发，以用户使用的满意度为情绪素材；其次由产品所到目的地的 icon 作为创作元素；整个旅程是愉悦的感受，路途中也充满着惊喜，爱也是人文关怀精神的体现；取自 airbnb 首字母「A」。四种图形的融合，成为 airbnb 的 logo。通过动态形式，描述「我们是干什么的」。动态 logo 由小场景到大场景切换，并最终回归到 logo 本身，表达「我们能够定到任何形式的民宿」。弹性圆润的线条给人一种轻松愉悦感，与度假的心情相得益彰。与此同时，品牌表达出能给予用户多种品类选择的含义。@airbnb② Meta（Facebook）品牌 logo 改版也可以通过动态形式表达。去年 Facebook 改名为 Meta。logo 也随之改版，通过一张动态图能清楚知道，扎克伯格希望 Meta 是多种媒体媒介和技术的集成。他表示 Facebook 名字不能包含集团的一切，「元宇宙」概念是以 VR 和 AR 技术构建的超级虚拟世界，在此空间中人们可以开虚拟会议室进行工作、社交和玩游戏，它打破了物理空间的局限性。有很多人将新 logo 解读为「无限」的符号，象征着「元宇宙」中的无限视野。这说对了一半，这里觉得更多的是借鉴了「莫比乌斯带」的概念。「莫比乌斯带」与普通纸带具有两个面（双侧曲面）不同，它只有一个面（单侧曲面），因此它就有了可「无限」运动的意义。莫比乌斯带Meta 的动态 logo 使我们看到了从 2D 转换为 3D 的视角。起先是平面圆环，后来扭曲 180 度，形成 3D 状态，动态的优势是让视觉看见了空间。3. 网页交互网页也是动态效果最常见的地方，特别是品牌类网站。动态交互首先为了提升品牌影响力与调性，再来网站也是用户体验的最直接接触方式，可能产品实物还未见到，网站即变成了初见面的第一印象。@苹果官网对于工具软件型网站来说，动态平面更便于用户去了解产品功能及用途，并给予网站赋予趣味性。@Figma 官网一些纯视觉的动态交互，适合用在个人主页、展会等宣传。上图为鼠标拖动的交互上图为菜单的交互4. 商业广告动态设计商业广告方面也不容小觑。蕉内以圆形、矩形、多边形及圆角矩形为基本元素，象征产品多样性，通过字符的不断变换及延展，让新用户首先了解到其品牌类别（服饰类），再到之后呈现形象人物，并用品牌色点缀身体部位，表示品牌做的是关于内衣的产品。@蕉内diptyque 新产品北京城市限定 PEKIN 宣传片由 PARALLEL STUDIO 制作，比较特别的是全动画的视觉效果，樱花、宫廷与龙的元素穿插其中，优雅且有历史底蕴，契合北京城市限定主题。@diptyque5. 会展宣传2020 台湾设计展主视觉形象由台湾知名设计工作室卵形设计的负责人叶忠宜操刀，以主题「Check in 新竹--人来风」为核心概念，使用「风」「wifi」「竹」「网络」「方向」等概念，提取几何图形符号来诠释「一位客人到达新竹的旅程」生动的动态感。「风」，边界由圆润到尖锐，并以转动的动态形式幻化成新竹兽，网格的拓展让画面更具有延展性，旋起「人来风」。「wifi」，用信号的图标，体现信息的传递与扩散，也是贯穿这一动态主题的媒介之一。「竹」，字体简化成箭头图形，并作为「去往新竹」的方向指引，存在于画面中并可扩大至各种设施应用的指示图形中。2020 台湾设计展 logo 动态第 59 届 2022 金马奖主视觉设计由刘耕名担任视觉统筹，并携手 Bito 设计团队打造。其动态视觉海报在平面状态时，被分为正视图与侧视图，而在 3D 动效海报中，将「59」字型构成金马图腾，通过 90 度翻转时，则变换形态为「金马」两字。「金马」两字以幕后工作人员避免光线反射的黑色服装为底色，呈现喷漆颜料水渍、定位胶带的标记、剧场器材间的磨损刮痕，各种记号形成交错的痕迹。这也体现了他们在幕后兢兢业业地付出，克服无数困难的勇气。“金马 59” 主视觉横版及竖版6. NFT 相关伴随着数字艺术近年来的兴起，很多平面设计大师也开始驻足于此，对于普通数字爱好者来说，也能将自己的创作品发布于 OpenSea（海外）或是国内部分 NFT 平台（NFT 中国等）进行交易。OpenSea 官网《Vogue Taiwan》以「Formosa Love（福尔摩沙之爱）」和「一座岛屿的可能性」为题，邀请平面设计师聂永真打造 2021 年 7 月号的特别版封面。聂永真这幅封面作品以 30 以太币、92,029.20 美金（约人民币 60 万）成交。后续聂永真受台湾地区微风集团的邀请为他们打造了 502 枚 NFT。本系列 NFT 共推出 502 枚，除了 2 枚为特别版，由微风及设计师聂永真分别拥有外，其余 500 枚又以 75%、20%、5%的比例被分为三个等级。以上设计作品版权归品牌和作者所有，更多内容请移步官网 https://www.breezeverse.io/#mint欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/dynamic-graphic-design
用户 感官 动态 动效在 UI 设计场景中的运用强化了感官层面的体验，也使得交互设计更加易于理解，通过动效辅助功能操作的理解度。近期在体验产品的过程中，观察到了一些微动效的优秀案例，分享出来和大家一起探讨。拖拽头像营造趣味性体验头像属于个人中心的标配，通常不会带有互动体验，只会在装饰性设计上面营造氛围。最近在体验即刻 APP 的时候，个人中心头像可以长按拖拽，拖拽过程伴随着震动感，释放后弹出表情符号。带有互动体验感的头像增加了个人中心的互动感，趣味性的设计带给用户更高的亲和力。动态形象提高关注度品牌利用人物形象代言产品或者服务比较常见，在一些局部功能或者服务模块也会结合人物形象，带给用户更强的亲和力。通常的做法是静态展示，动态形象相对较少。开言英语 APP 学习模块中，顶部“立即测评”区域的人物形象采用动态形式，虽然只是简单的手势指引，也比静态图片带来的关注度要高。利用动态形象提高模块的关注度，也使得设计更加生动有趣。动态空状态趣味性更强空状态从文案提示到情感化设计的演变，从细微之处带给用户更好的感官体验。为了提高产品的体验，各种状态提示设计也在不断优化创新，利用动态的形式提高趣味性也是一个可取的方向。COVES APP 在空状态界面利用带有动态的形象进行设计表达，使得原本枯燥无趣的界面变得生动有趣。提高了用户的关注度，也提升了设计的感官度。动态极光风按钮设计极光风效果设计是近些年在 UI 设计中较为流行的趋势，不仅可以丰富视觉表现，也能使得产品设计更加年轻化。被广泛运用于背景装饰、卡片式装饰、弹窗设计、图标设计、按钮设计等场景中。优酷 APP 在会员栏目中，将打卡按钮以动态极光风效果进行设计，提高了按钮的关注度。设计风格显得更加年轻化，动感的表达形式打破了按钮设计的常规表达，带给用户更高的感官体验。动态引导提高关注度针对新功能或者重点功能在设计的时候，都会进行引导式设计，以此提高用户的关注度。除了通过设计的视觉化增强和浮层提示以外，动态的引导设计也是不错的选择。优酷 APP 在用户主页为了提高用户发布视频的参与度，每次新进页面就会以动态形式弹出引导设计。提示用户“抓住你的创作灵感”，青春活泼的视觉风格和动效的双重强化，提高关注度的同时也增强了用户的感官体验。带有互动感的品牌墙设计品牌 LOGO 展示常见的形式都比较中规中矩，横向或者纵向均以排版整齐为主。最近发现一个比较新颖好玩的品牌墙展示，结合互动性营造趣味感的体验。开眼 APP 在品牌墙展示 LOGO 时，使用圆形带有动态的形式，类似于一堆气泡相互碰撞，还能拖拽进行互动。停留时 LOGO 会自动飘起来，漂浮到界面顶部，真实感和互动性较强。该设计形式不仅打破了常规，也带给用户十分有趣的互动体验。弹幕强化内容关注度弹幕出现在视频播放中相信大家已经很熟悉，可以增强观看视频的互动性，也能激发大家的话题参与度。弹幕的运用不局限于视频，还能用于增强内容的关注度。LOFTER APP 首页在话题栏目中，单个内容区域增加了弹幕设计，提高了内容的关注度和氛围感。弹幕设计也可以出现在社区中，营造社区的氛围感。自如 APP 在发现生活栏目顶部视觉区域也运用了弹幕设计，以此来提高自如社区的氛围感，吸引更多用户参与分享和评论。卡片式轮播的色彩变化为了提高用户的关注度和强化信息的对比度，在设计的时候都会在背景层和信息设计层强化，针对卡片式设计在背景层强化是一个不错的方向。MOO 音乐在主题电台栏目，针对横向滑动切换的卡片背景做了色彩变化。利用极光风效果处理的同时，滑动的时候背景也会进行变化，色彩变化过渡自然，表现形式新颖独特。动画引导效果更直观针对功能或者业务进行引导设计，有助于让用户更快的理解，便于操作。提高引导设计的关注度和理解度，降低学习成本是设计的目标。MOO 音乐在引导设计的时候采用动画形式表达，传达意思更加直观清晰。动画的形式更能吸引用户观看，达到更好的信息传达目的，也能提高产品的感官体验。动感的音频波动打造独特记忆点音乐带来的不只是听觉体验，也有视觉享受的一面，让用户沉浸在音乐的氛围中。MOO 音乐在播放界面设计中，底部配合音量的大小弹出音频波动条，带给用户视听双享受。音频波动条采用不同的元素进行设计，体现不同音乐的差异，带给用户独特的感官体验。差异化的设计表达也能打造独特的记忆点，让用户在众多的音乐产品中形成独特的记忆。小结本期感官体验日记主要总结了动效范围的内容，根据特定的主题范围去体验分析，也能提高自己发现设计细节的能力。从细微之处体现设计差异，带给用户更强的品牌记忆和感官体验。本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。超全面！腾讯出品的交互微动效设计指南本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计效率。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/micro-motion-design
动态 动画 格式 本文将从动态的交付文件、成像原理，以及如何高效的与开发团队沟通等角度来分析动态设计交付，旨在帮助与我们遇到类似问题的团队提供合适的解决方案。前言开始阅读之前，我想让大家先思考两个问题：你平时接触的动态设计需求多吗？碰到动态设计，你都是怎么跟开发团队进行沟通的？带着这两个问题，我们开始今天的主题讨论。首先在目前的体验设计中动态交付的方式主要包含文件式交付、参数式交付两种。文件交付主要是指通过提供动态格式文件的方式来达到预期效果，对于开发者来说，只需要针对性的兼容动态文件的格式及库就可以获得该格式的显示效果，根据不同需求还可以简单的控制动态的播放、入场、退场等基础操作；参数交付主要是对动态运动的文字表述，开发可以根据图文化的表述对动态进行代码还原。动态设计的交付方式就起点设计团队来说，在长期的项目迭代中，我们几乎测试了所有的主流动态图片格式。因此针对不同的格式有一些测评和看法，可以跟大家交流，这些格式有 GIF、WebP、APNG、Lottie、VAP、PAG，我们将结合实际情况，对这些格式做些简单的科普和性能比对。1. GIFGIF 对于互联网来说是一个传播率极高的古董级动态格式，它诞生于 1987 年，即使是最后一个版本也是在 1989 年了，在各大网站上浏览的动态广告、以及与生活息息相关的动态表情包几乎都是 GIF 格式。GIF 在我们使用的所有格式中是压缩效果是最差的，还因为是采用了 8 位色压缩，只能处理 256 种颜色，所以也是所有格式中显示效果最差的。即便如此，GIF 还是存在一些优点的，它较为广阔的传播性让其在各种环境下都有比较不错的兼容性，它的使用性能也是相对稳定的，同时兼容 Android、iOS、Web，并且可实现循环以及首尾帧控制。在起点读书中 GIF 的应用主要集中的 UGC 内容上，例如官方表情包、头像挂件展示等场景均有使用过 GIF 作为主要格式。点娘表情包2. WebPWebP 相对上面的 GIF 要年轻很多，它是谷歌在 2010 年发布，支持库是在 2018 年 4 月发布，我们也是在第一时间在产品中试用了该格式，并获得了不错的体验，截止目前，已有 95.77% 的浏览器支持该格式。WebP 目前支持有损和无损压缩以及动画和 alpha 透明度的图像格式（基于 VP8 视频格式）。WebP 通常比 JPEG、PNG 和 GIF 具有更好的压缩率，并且旨在取代它们。WebP 同时兼容 Android、iOS、Web，并且可实现循环以及首尾帧控制。通过千元机实机测试，WebP 也兼具了较高的稳定性，是比较不错的通用动态格式选择。为了让用户获得更好的视觉感官体验，因此在起点读书中例如挂件、动态卡牌的格式选择上，WebP 是绝佳的通用解决方案。起点头像挂件起点动态卡牌3. APNGAPNG 相对于 WebP 要早出生几年，是基于 PNG 格式扩展的一种动画格式，所以它保留了向下兼容 PNG 的特性，因此当解码器不支持 APNG 时，会默认展示第一帧图像；APNG 拥有 24 位图像和 8 位透明性，相比 GIF 拥有更高的显示效果。目前关于 APNG、WebP、GIF 的测评对比较多，GIF 自不必多说，它早已成了各大主流动态格式测评的计量单位，我们这里只谈 APNG、WebP，从压缩率上来说，APNG 优于 WebP；从兼容性上来说 WebP 的兼容性明显高于 APNG，谷歌从 Chrome 59 开始才支持 APNG，而 WebP 是谷歌的亲儿子，兼容性自不必说，目前安卓兼容无压力，iOS 中部分版本存在兼容问题，但考虑到 iOS 的高版本覆盖率，因此起点在动态格式上选择了 WebP。4. LottieLottie 是 Airbnb 开源的一个面向 iOS、Android、RN 的动画库，能分析 AE 导出的动画 json 文件，客户端通过引入 Lottie 的支持库来解析 json 文件，通过此方法原生 App 就可以像使用静态素材一样来实现出动画效果。一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）大家好，我是彩云。阅读文章 > 要使用 Lottie 需要先通过 bodymovin （AE 插件）将 AE 动画工程文件转换为 json 格式的描述文件。Lottie 负责解析动画的数据，包括动画大小，动画时长，帧率，用到的图片，字体，图层等等信息，最终精准地渲染出动画。Lottie 支持矢量（MG）动画，并最终效果通过解析渲染完成，因此具有比较高的兼容性，并且可以在极小的文件大小下，实现极佳的画质效果，同时兼容 Android、iOS、Web，是目前互联网产品中比较通用的解决方案；并且可以通过解析文件实现循环、首尾帧固定、图层颜色修改等操作。虽然 Lottie 很强大，但因为其实时渲染的特点，因此对内存和设备性能在碰到复杂文件消耗巨大，加上其在动态效果上的支持比较局限，所以 Lottie 仅能解决一些简单到中等的动画问题，对于例如直播间特效、打赏类动画来说，Lottie 则会显得力不从心。5. VAPVAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案，它可以播放带有 Alpha 通道的视频。是一种拟 WebP、APNG 的动画解决方案，与之相比具有压缩率高（素材更小）、硬件解码速度快的优点，比 Lottie 能实现更复杂的动画效果（比如粒子特效）；并且 VAP 可以将自定义的属性合并到动画中。VAP 简单点理解就是将 MP4 (H264) 文件的透明通道与原动画一起导出，然后通过解析合成形成透明动画的显示效果。这种方案占用内存小，性能高，文件体积小，支持效果全，是比较理想的特性动画解决方案。起点卡牌6. PAGPAG 是腾讯自主研发的一个开源项目，它同时支持「矢量预合成」导出和「BMP 预合成」导出两种方式。比Lottie还好用！腾讯新晋免费动效设计神器 PAG在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。阅读文章 > 矢量预合成导出无法支持所有的 AE 特性，但相对来说还是比 Lottie 支持的格式要多的多，在理想情况下使用矢量预合成可以获得更好的性能和更小的动画文件。BMP 预合成导出模式支持所有 AE 特效，设计师只需要关注视觉效果本身即可，相应的会对设备性能产生一定消耗。BMP 预合成目前支持视频序列帧和位图序列帧两种导出的存储格式，它对位图做了简单的帧间压缩，可比传统的 PNG 序列文件小 50%。视频存储格式帧基于 H264 帧间压缩并补充了透明通道（类似 VAP 的解决方案），相比位图存储格式只有 10% ~ 25% 左右的文件大小。而且在目前的版本迭代中，PAG 还同时支持了「矢量预合成」和「BMP 预合成」混合导出，可以在文件导出效果、性能、体量上做到更优秀的表现。不过虽然 PAG 在效果和压缩上表现优越，但是在遇到大型动画或复杂特效后对设备性能的压力还是巨大的，而且目前仅支持 iOS、Android，Web 支持正在开发中。此时 VAP 可以作为 PAG 的平替。起点票赏目前在起点读书内的各类打赏投票场景，为了更好的展示效果，动效格式都会优先考虑 PAG。动态文件成像原理1. 透明通道序列帧简单来说就是 PNG 序列，但是也有比较高级的表现方法，就是通过帧间压缩来进行图片压缩，可以做到比普通的 PNG 整列更小的体积。2. 视频+透明通道上面也提到了，是将 mp4 视频与相应的 alpha 通道视频叠加后，就可以将原视频表现得带有透明效果。3. 矢量动画形成动画的物体、动作及时间都是通过代码来完成，也因为是纯代码动画，因此可以做到体量极小，性能也是极佳的。4. 图片「渲染」动画指通过 json 格式的描述文件，将指定图片赋予运动、时长、动作，最终通过解析渲染出描述中的动画效果的形式。5. 视频帧混合矢量指将「视频+透明通道」与「矢量动画」混合导出的动画表现形式，既保证了视频的全特效效果，又保留了矢量动画的最佳显示效果，并且没有增加动画文件体积。通过上面的一系列介绍，可以了解到我们在做动态文件交付时，需要综合考虑的因素就较多了，例如不同平台的特性、低版本兼容问题、动态库的适配性等。格式的选择不是一成不变了，为了让用户可以获得更好的互动体验，可以针对性地对不同端的动态格式进行变换。起点在漫长的迭代周期中，在不同版本时期引入过不同的动态文件格式，综合各项性能，目前选用了 PAG 作为我们的客户端主要使用格式，并且在 PAG 的开发过程中，我们也始终与其研发团队保持一定的沟通，帮助我们解决了不少技术难题，就目前来说 PAG 依然是强有力的动态交付解决方案。关于参数交付参数交付的核心在于沟通，而如何正确有效的与开发人员进行沟通就显得至关重要，我们通过下图可以看到一个典型案例。正确的阐述动态设计的关键信息才是有效交流，才能让开发更精准的还原你所要的效果。但现实往往是我们会碰到大量复杂动画，此时用语言来描述动画会显得特别疲软复杂，而如何将这些复杂语言进行图形化的传达，让表达更清晰，就显得至关重要。因此我们综合日常的一些工作经验，建立了图形分段式动态标注法，让动态一目了然。动态标注的本质就是将时间（时间节点）、地点（位置）、人物（物品）、通过「动作」进行呈现就是标注的基本结构了，当然也可以通过此方法来衍生出一些特需标注法。例如在一个复杂的动态设计需求中，涉及到的动画较多，有位移软转场动画、手势操作响应、操作反馈动画、随机动画等。为了让开发实现的效果达到设计预期，使用了图形化标注法，将时间轴、动作、曲线、运动轨迹等进行呈现。关于标注的详情信息，就不再进行详细文字描述了，感兴趣的可以通过大图进行详细了解。看到这里我想有些朋友会产生一些疑惑，为什么都 2022 年了，你还在做动态标注？目前行业中不是有很多动态输出的解决方案吗？Principle、ProtoPie、Origami、Cocos Creator 等等，这些不乏比较高效的解决方案，同时笔者也在设计中或多或少的使用过相关的软件来作为高效解决方案，但如果你想系统性的学习动态图形和动画设计那么 After Effects 是首选，强大的功能，能尽情实现你的动画创意。至于笔者会倾向为动态设计输出标注，有几点我觉得至关重要，一是强化在设计过程中对动态理论的掌握；二是对动态设计进行整理归档，方便为全局动态做统一形成规范；三是在开发过程中可以精准定位问题，并提高还原率，实际项目证明，有标注的动态还原在第一次交付走查时可达到 60%~80%的还原率。结语遇到动态设计需求时，在符合条件（例如实时反馈、聚焦动画、转场动画等）的情况下参数交付是最优的；而有些场景（例如重视觉效果呈现、复杂交互动画、动态展示等）优先使用文件交付。建议的解决方案排序是 PAG＞VAP＞Lottie＞WebP/APNG…，例如在 iOS 平台，所有的 PAG 文件播放都有比较不错的体验，因此我们更建议使用 PAG 交付，而在 Android 端 WebP 的稳定性更好，因此在 Android 更建议使用 WebP，当然在 Web 端依然可以使用 Lottie、WebP 作为平替。无论多简单的动态在需要开发实现时候，都建议进行标注落地，有效的标注可以减少不必要的沟通以及非必要的后期走查反复。关于制作工具，笔者无特殊偏好，常规的动态设计软件都会去接触，如果需要给到一些建议的有条件或想系统性学习动态的可以优先学习 AE，在 B 站上有很多教程，上手需要一点难度，但一劳永逸；如果只想学习并使用 UI 交互类动态，那么 Principle、ProtoPie 是不二选择，甚至 Figma 本身也是不错的解决方案；如果成为全栈设计师是你的梦想，那么 Origami 或许可以为你打开一扇门；如果你想在特效及 3D 动画上有所建树，那么我优先推荐 Blender 作为你的主力工具。最后送大家一首劝学（内卷）诗：三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。参考资料关于 WebP 格式： https://developers.google.com/speed/webpWebP 引文： https://caniuse.com/webpAPNG 制作： https://ezgif.com/apng-makerAPNG 引用： https://juejin.cn/post/6857678436304388104APNG 对比链接： http://littlesvr.ca/apng/gif_apng_webp3.htmlLottie 参考： https://cloud.tencent.com/developer/article/1005896VAP 地址： https://github.com/Tencent/vap/blob/master/Introduction.mdPAG 相关阅读推荐：https://mp.weixin.qq.com/s/a8-yOp8h5LiFGKSdLE_toAPAG 官网： https://pag.io/docs/pag-export.html用起点读书的实战案例，教你从AE制作到落地开发的方案导语动画可以辅助视觉制作焦点，引导注意力的方向，越来越为广大视觉设计师青睐。阅读文章 > 欢迎关注作者的微信公众号：「阅文体验设计YUX」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design-delivery
张大湿
落霞与孤鹜
飞翔的企鹅
表哥
