2023年9月20日

2022-2023设计趋势ISUX报告·NFT虚拟形象(上)

作者 admin

动态品牌设计该如何理解_动态品牌标志该如何理解_品牌动态/

运动设计有助于创建令人愉悦且直观的用户界面。 好的动态设计不仅可以引导用户对数字产品的体验,还可以传达产品的品牌信息。 本文将介绍最近最流行的动态设计趋势。 这些令人惊叹的动态表现技术必将在不久的将来引起大家的关注。

1.1 动态在 UI/UX 中的作用

动态可以激发用户的情感,为静态的视觉设计注入生机和活力。 有趣、精彩、有吸引力的动态可以使您的产品独特而迷人。 另一方面,动态有助于支持可用性。 通过自然流畅的肢体动作,凸显过渡过程中元素的关联性和状态变化,增强用户对产品功能的感知。

因此,动态设计必须是有意义的,并且兼具实用性和美感。 用户体验行业也将动态设计视为多个学科的交叉点,并将其细分为专业设计类别。 动态设计作为UI和UX设计的重要组成部分,从三个层面发挥影响力:

1. 增加连续性

让界面元素在用户流程中平滑变换和过渡,引导用户操作达到想要的任务结果。

2. 连接场景

在场景变换过程中起到润滑剂的作用,明确场景之间的位置、层次和空间关系。

3. 视觉吸引力

将用户的视线集中在重要的事情上,从而传达信息,提高识别度。

品牌动态_动态品牌设计该如何理解_动态品牌标志该如何理解/

1.2 动态设计趋势

植根于基于UI和UX设计而发展起来的三维,动态设计的趋势自然与两者密不可分。 纵观近几年,大多数作品都巧妙地运用了华丽的动态图形和动效设计,让新的视觉手法表达得更加出彩。 此外,随着移动芯片性能的提升,实现脱离二维平面的表达不再困难,让设计者能够解开束缚,释放无限的想象力。 2021年的动态设计可以概括为三个趋势:

1. 增强表达能力

使用引人注目的演示技术向用户传达信息,包括转换、动态文本和背景动画。

2. 创建层次结构

为了在视觉平面上创建空间层次结构,遮蔽和视差是常见的表达技术。

3. 扩展维度

通过将3D动态图形、摄像机运动等界面元素进行多维化,突破二维限制,营造空间感。

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

动态品牌设计该如何理解_动态品牌标志该如何理解_品牌动态/

2.1 变形

转换创建了连续的叙述状态,并告知用户元素状态或功能的变化。 它是最引人注目的表现手法之一,可以无缝地融合和过渡形状、图像和颜色。

动画插图

2021年出现了许多有趣且有吸引力的插画,更多的设计师开始在静态图像中添加动画,使得GIF和动画插画越来越受欢迎。

动画插图看起来更加生动并且具有叙事性。 在示例中,用动画插图展示了这杯果汁是由哪些水果制成的,这比文字描述更能吸引观众的注意力。

动态品牌标志该如何理解_动态品牌设计该如何理解_品牌动态/

通过龙虾

通过动画插画呈现同一系列的变换,有利于延续造型的特点,让不同的物体产生联系。 例如,从桌子、衣柜到灯具,同一风格的系列家具都用动画来表现一致性。

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

作者:优雅的插图™

液体运动液体运动

动态有机形状,包括流体、烟雾和火焰等粒子效果,可以极大地增强视觉效果。 流体动力学不是清晰的过渡和场景变化,而是颜色在流动液体中的扩散,创造出抽象或真实的视觉形状。 这种风格可以实现无缝过渡,并为设计增添有机感,使其成为 2021 年最引人注目的动画趋势之一。

利用流体动力学来展示抽象的生物,不仅容易吸引观众的注意力,而且会让人不自觉地站在画面上,感受到流体变化的节奏和美感。 这种动态设计既可以作为背景动画来凸显主题,也可以作为吸引注意力焦点的主角。

品牌动态_动态品牌设计该如何理解_动态品牌标志该如何理解/

作者:✞安东·米辛✞

流体动力学在网站设计中的应用所产生的视觉冲击力更是令人惊叹,能够给用户带来独特、新鲜的视觉体验,使得流体动力学深受风格前卫的设计师的喜爱。 网站还可以使用鼠标悬停来与流体交互,因此您会在许多特效网站中看到流体动力学的痕迹。

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

作者:吉尔·托索佩

动态渐变Dynamic Gradient

扁平化设计缺乏真实质感的元素。 组合渐变色可以有效缓解缺点,为设计创造深度和层次感。 不断变化的渐变色既动感又舒缓,充满活力又不失沉稳。 使用动态渐变可以让设计师展示一系列不断变化的情绪,许多内容创作者和品牌已经注意到并开始在广告活动、身份设计和数字内容中使用动态渐变。

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

由 Pixelz 工作室

微交互Micro Interactions

微交互在用户体验设计中变得越来越重要,而动态设计是微交互的灵魂。 即使是很小的视觉提示或反馈也是易于使用的人机交互的关键。 从经典案例来看,微交互的动画细节必须有明确的目的,让用户得到实时反馈,引导用户采取下一步行动。 从近年来的设计趋势来看,微交互已经成为不可或缺的一部分。

动态品牌标志该如何理解_动态品牌设计该如何理解_品牌动态/

作者:Илья Бабушкин

动态品牌标志该如何理解_品牌动态_动态品牌设计该如何理解/

通过谷歌

动画标志

动画标志是过去几年最流行的动画趋势之一。 通过各种视觉效果,设计师可以创建不同类型的动画标志。 许多公司已经开始使用动画徽标作为吸引注意力的手段。 在大多数情况下,您的徽标是您进入网站时首先看到的东西,因此它应该令人难忘、引人入胜,并使用符号或版式来揭示您的品牌个性。 结合动画的优势,设计师可以利用一些动作或效果来讲述小故事,以强调品牌特征,为静态版式和标志注入活力。

动态品牌设计该如何理解_动态品牌标志该如何理解_品牌动态/

作者:尤利娅·K.

品牌动态_动态品牌设计该如何理解_动态品牌标志该如何理解/

通过元

2.2 动态版式

动态文本是一种利用移动文本来吸引注意力的动画技术。 许多优秀的品牌在网页设计中使用动态文本,为网站的外观增添动感和视觉冲击力。 是近年来UI动画的趋势之一。

设计师利用动态文本为单词或句子添加生动的元素,从而设定情绪和设计基调,吸引用户的注意力。 几种常见的表达手法,挤压、拉伸某个词可以唤起俏皮感,而不断重复这个词则可以催眠、毛躁。 另外,使用大而粗的字体来增加粗细,强调某些信息也是动态文本的特点之一。

无论是在电子商务网站、电视广告还是音乐视频中,动态文字都起着至关重要的作用,有助于加深用户对品牌的关注和印象。

动态品牌标志该如何理解_品牌动态_动态品牌设计该如何理解/

通过 HOLOGRAPHIK®

动态品牌标志该如何理解_动态品牌设计该如何理解_品牌动态/

作者:赫尔沃耶·格鲁比西奇

2.3 背景动画Background Animation

通过背景动画强化叙事性已成为许多行业常见的品牌传播方式。 您可以创建动态的品牌故事,展示有趣的制造流程和产品使用场景。 背景动画很受欢迎,因为它们可以让用户在进入登录页面或网站主页时轻松了解有关公司或产品的更多信息。 研究表明,不同细分市场和行业的网站,从银行、医疗保健公司、电子商务零售商、餐馆到 B2B 供应商,都开始使用背景动画。

品牌动态_动态品牌设计该如何理解_动态品牌标志该如何理解/

卡洛·索莱里

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

作者:基里尔·茹科夫斯基

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

3.1 掩蔽

蒙版过渡使用几何或有机形状作为覆盖物来连接下一个场景。 相当于舞台幕布设计,可以在界面元素进入或退出时产生连续性效果。 这种表达手法简单高效,是最常见的过渡动画之一。

场景切换

其中一个蒙版转场就是完全取代当前的场景,就像剥掉上面的一层布,逐渐显露出下面堆叠的风景,利用风景的相似性和动作的连续性,让两个场景连接起来顺利。 差异不会太大而给用户造成心理负担。

动态品牌标志该如何理解_动态品牌设计该如何理解_品牌动态/

按意图

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

范明 (Minh Pham) ✪

状态转换State Transformation

另一种形式的蒙版表达没有明显的场景过渡,而是使用蒙版来表达场景的状态变化。 界面元素和布局基本一致,营造无缝过渡的视觉效果。 该技术应用广泛,如气候变化、性格变化、产品组合等。

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

通过丹尼尔·谭

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

通过Outcrowd

3.2 视差视差

视差利用不同的界面元素以不同的速度移动,产生前后景深的分离效果,从而塑造平面内的空间层次。 它已成为网站首页最常见的表达形式。

视差之所以能够形成趋势并被各行业广泛接受,一方面是因为信息层次更加清晰,各个元素之间的关系明确,让用户专注于主要操作和内容,并且背景或非交互元素被推迟。 同时保持设计的完整性。 另一方面,变化层次也丰富。 当用户滚动或滑动时,可以在平面界面中打通空间关系,并利用不同的速度和深度来创造多层次的感官体验。

动态品牌设计该如何理解_动态品牌标志该如何理解_品牌动态/

由 VØR 工作室设计

动态品牌标志该如何理解_品牌动态_动态品牌设计该如何理解/

由 VØR 工作室设计

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

4.1 3D 动态图形3D 动态图形

近年来,结合 3D 动态图形的界面设计呈爆炸式增长。 虽然制作3D动画需要更多的时间、技巧和协作,但不可否认的是,3D动画比2D图形更真实,从而提供更具吸引力和互动性的卓越用户体验,有效展现品牌的活力。

生动的表情符号,让表情更生动

动画的吸引力在于能够创建各种角色并为无生命的物体注入生命,表情符号就是一个很好的例子。 表情符号作为一种独特的网络语言,生动地描绘了日常面对面交流中的非语言信息。 随着图形界面逐渐结合2D和3D的设计趋势,利用3D动态图形来创造更加动态和拟人化的表达方式,让这些非语言的人能够表达自己的情感。 言语信息更加丰富,有机会引领下一波潮流。

动态品牌设计该如何理解_动态品牌标志该如何理解_品牌动态/

通过Outcrowd

营造空间感Spatial Awareness

3D动态图形为平面设计构建了空间叙事框架,在平面界面中呈现立体感,从而表达元素在空间中的位置和层次关系。 多维化的发展趋势推动了视觉表现形式的演变。 空间感使得界面设计更符合人类的认知逻辑。 采用各种3D动作特效,包括旋转、翻转、折叠、透视、Z轴位移等,营造出令人惊叹、难忘的感官冲击。

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

通过 UI8

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

作者:布鲁诺·奥托兰

拟人动画

拟人化允许物体、植物、动物等非人类事物表现出具有人类属性的行为和状态。 拟人化技术在漫画中的运用最为常见。 1927年,迪士尼第一部动画系列《幸运兔奥斯瓦尔德》的主角是拟人化的兔子形象。 由于人们很容易被类似人类的事物所吸引,越来越多的设计师在界面中加入拟人化的元素,利用这种效果让画面更加生动有趣,增强用户体验的愉悦感。

动态品牌设计该如何理解_动态品牌标志该如何理解_品牌动态/

作者:格雷戈里·里亚古佐夫

4.2 相机移动

在动态设计中,摄像机运动是最自由、最灵活的表现形式,可以让画面的过渡更有张力,突破2D平面在视角方面的限制,营造出无边界的三维空间。 电影、电视、动画和广告中常见的镜头运动,包括放大、拉远、平移、跟踪等,受到动作设计师的青睐,让用户能够以多种视角探索数字产品。

将移动车推入/推出

推拍是指被拍摄的物体不动,相机由远到近,向物体移动,突出人物或物体的主体。 利用镜头拉近的运动来表现从整体到局部、从分散到集中的变化,带领用户进入故事场景,给人一种身临其境的感觉。

相反,向后拉镜头就是将相机向后移动,使画面逐渐远离被摄体。 它注重从部分到整体、从点到面的转变,强调主体所处的空间环境。 镜子拉出来的景象可以激发人们无限的想象。

动态品牌设计该如何理解_动态品牌标志该如何理解_品牌动态/

作者:迈克尔·克劳福德

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

作者:阿里·扎法尔·伊克巴尔

水平/垂直移动卡车/基座

水平向左或向右、垂直向上或向下移动摄像头,使画面不断变化,让用户随着摄像头角度移动,营造出一种身临其境的感觉。 这种移动相机的方法通常用于特定场景。 它利用人物或景物的连续性来消除场景过渡时的界限,表现出流动感。 无论是手势滑动还是鼠标滚动,都能拥有流畅的操作体验。

动态品牌标志该如何理解_动态品牌设计该如何理解_品牌动态/

通过网络大师

动态品牌标志该如何理解_动态品牌设计该如何理解_品牌动态/

通过范明

组合多个摄像机运动

使用多种摄像机运动是相当常见的,不仅可以扩大视野,空间感也很强,可以更自由、多样化地展示不同的视角和场景。 例如,结合平移、倾斜和跟踪镜头来连续、详细地展示产品。 由于图片总是围绕一个主题,因此有助于突出产品特征并允许用户从不同角度查看产品。 远距离观看产品是增强存在感和参与感的有效方式。

品牌动态_动态品牌设计该如何理解_动态品牌标志该如何理解/

作者:Sang Nguyen

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

作者:保罗·伊尔尼茨基

一枪

电影中,为了不割裂观众的情感和注意力,用一个镜头来完成整部影片的场景描述和叙事。 这种射击技术称为单射或远射。 连续镜头逐渐被用于界面过渡,以增强操作过程的流畅性,例如无缝的购物体验,或者角色贯穿整个场景。 其特点是给用户最身临其境的感官体验,体验整个过程不间断。 。

品牌动态_动态品牌设计该如何理解_动态品牌标志该如何理解/

作者:Orizon:UI/UX 设计机构

品牌动态_动态品牌标志该如何理解_动态品牌设计该如何理解/

范明 (Minh Pham) ✪

动态品牌设计该如何理解_品牌动态_动态品牌标志该如何理解/

动态设计作为近年来流行的创意形式,已广泛应用于各个领域,并逐渐成为设计的主流趋势。 受益于技术的演进和发展,从创意制作到落地实施,动态设计的门槛不再是遥不可及。 设计师可以将想法转化为生动有趣的作品,并有机会创造新的表达手法、玩出许多新花样,这已成为2021年动态设计的特点。

本文总结的设计趋势有助于激发设计师想象动态设计,激发更多创作灵感,赋予静态界面灵魂,创造令人难忘的视觉体验和品牌形象。