超吸睛的动态平面设计，五个章节帮你掌握！

好奇心总在驱使着人类进步，从二维到五维空间，从登陆月球到地球以外 930 亿光年的宇宙空间探索，人类的进步永不止步。如今在互联网技术的高速发展下，用户的审美、诉求都在不断提高，同时反向推动设计的进步。近些年，你会发现，更多的设计“动了起来”。今天就带大家来了解一下「动态平面设计」。

关于动态设计趋势：

一、动态平面设计是什么？

「动态设计是基于一定的静态基本视觉元素，通过动画软件将其再设计成一种特定时间内，会发生运动和变化的图形结果。」

当然在交互设计中，动态平面设计也与界面设计有所交集，被称之为界面动效，这次我们讨论的范围包含了界面之外的应用场景。对于设计师而言，需要去学习及拥抱这一趋势。

二、作用

1. 提高连贯性

让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。

连续性的动作有助于引导用户完成任务

2. 链接场景

在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。

3. 视觉吸引

聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。

三、优势

相较于静态平面，更具有感染力，通过增加「删除线」「眼睛的偏移位置」「伸手动作」来强化海报“不要”的情绪。

增加动态区域后：

设计创意来自@小红书 HE毛蛋

与静态平面不同的是，动态平面可在一定时间内给予用户一定的沉浸体验。

静态平面也能给予用户沉浸体验，但多数为多张图去表达含义，大家最熟悉的莫过于漫画，或是一些影视作品的分镜，从而达到用户置身于故事情节内的体验目的。

动态平面更多的是让用户参与到一种交流活动中，用户可以以自己的选择去导向一种结果，更趋向于一种简单的 RPG（角色扮演）游戏。

动起来后的趣味性，也是吸引用户并且加深记忆点的方式，点击按钮的动作对比与方言的结合，使得海报宣传更加生动且亲切，容易增加用户的代入感。

创意来自@小红书 HE毛蛋

四、类型

1. 混合媒体/动画拼贴

动画拼贴总给人一种复古 vibe，如同像素风格，拉回到旧时光。「We the people」是由 Netflix 网飞推出的动画，以定格、拼贴、字体等多种艺术形式，讲述了美国的立法史。

@Netflix

2. 动态字体

动态字体通过变形与音乐相结合，可表达字体的性格，或灵动活泼，或成熟稳重。如果是作为品牌的宣传，也能起到展示品牌调性的意图。喜茶联合方正字体所推出的专属字体，在字体斜笔和勾画的弯曲幅度上进行了微调，曲率更克制平滑，使得字体更简洁、年轻态并多了一份亲和力。

@喜茶 x 方正字库

3. 故障效果

故障错位感给人一种身临全数字化氛围中，特别是赛博朋克的影响，给人一种未来感，在科技进步的同时，又有一定的失序感。

4. 复古怀旧

复古怀旧把人们拉回到文艺复兴时期，用旧物搭配上现代的梗致敬经典。

5. 变形

变形使动画的转场更有趣且多层次。

6. 液体动态

液体在光线折射下能使物体产生形变，这种动态形式运用到动态平面中，产生一种独特风格。

五、应用范围

1. 海报、自媒体等

厦门磐基名品中心 The Little 的开业动态海报，结合了「儿童好物」这一主题，使用的图形均以简单的几何形态勾勒出可爱童趣的一面。通过箱子拟人、几何形状的变形及音乐配合达到多元、有趣的表现形式。

@地心引力品牌设计

通过对平面的「转场」「叠加」「快速切换」等，让用户大致了解其设计风格，适合运用至品牌宣传、个人风格表现等。

@by Design style

对于突出个性风格越发显著的自媒体时代，每个公众号都想要阅读量 10w+文章，排版设计风格已成重要的辅助。通过采访者相关元素提取到设计排版中，纸板箱印刷字、夜市塑料凳增添了「街头采访」的意味，产生一种轻松随意的交流氛围。

@by「设计便利店」公众号

2. 品牌 logo

① airbnb

「airbnb」由 4 个 icon 结合而成，提取了 4 种含义创造出这个新 logo：

1. 以人为本，所有的功能都应基于用户痛点出发，以用户使用的满意度为情绪素材；
2. 其次由产品所到目的地的 icon 作为创作元素；
3. 整个旅程是愉悦的感受，路途中也充满着惊喜，爱也是人文关怀精神的体现；
4. 取自 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 制作，比较特别的是全动画的视觉效果，樱花、宫廷与龙的元素穿插其中，优雅且有历史底蕴，契合北京城市限定主题。

@diptyque

5. 会展宣传

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」