科技感的动态设计方法-1

科技感图形的动态表现手法极其多变和丰富。本文只列举常见的设计手法，并试图抽离一些普遍性的设计规律。希望能为大家在实践中提供帮助。

所谓的科技感的动效设计，就是基于科技感风格界面的动态设计。这类界面设计具备科技感设计的元素，或者拥有科技感设计的内核。比如多以线条，应切割面片等图形组成。而科技感这种风格本身也非常依赖动态层面去表现它的科技感氛围。

常见的科技感动态设计方法往往可以分割成以下两点：

闪烁。组成控件或者图标的部分可以进行拆分后，进行闪烁式的组合重现。这是一种经典用法，模仿的是早期的二极管显示器效果。这种效果在一些返古的科技感设计里也很常见。但基本上所有想要表现高科技的图形动画，都会或多或少的应用这类效果。

闪烁的使用方式有多个变种，最常见的可以划分成三大类：透明闪烁、色彩闪切和杂色闪切。

上图所示的《星际公民》中，面板操作界面的出场动画里，用到的许多透明闪烁效果。

上图所示的《精英：危机》中一个面板的载入动画属于色彩闪切（做了慢放处理）。

上图所示的《狂怒2》中的“新目标提示”动画，就属于杂色闪切，是比较流行的坏信号效果，一种赛博朋克元素。

这三种样式通常会根据界面或者游戏世界观的具体设定去选择性使用。总体上是一种递进的关系。

最简单的情况下可以用透明闪烁的方式。如果这种方式不足以表达想要的效果，就可以尝试用色彩闪切。而色彩闪切有反白闪切和多色闪切两种。在此之上，如果想要更丰富的效果，就用杂色闪切。杂色闪切可以认为就是坏信号效果。用AE的制作思路来看就是一种湍流图形的置换效果。可粗可细、可快可慢，根据具体的风格情况来应用。

如上图，Jeff Cheristy 为游戏《光环》所设计的界面动效演示动画（局部）中，就使用了一些反白闪切效果。

生长。指的是图形的生长。这种图形动画相对闪烁的方式要更复杂一些，在引擎内实现又通常需要运用遮罩相关技术，如果一个组成部件极为复杂的控件应用这种动画，会使制作过程及其繁琐。因而往往会看到比较复杂的生长动画被用于仪式感强一些的界面中，以视频内嵌的方式进行还原。这一方面避免过多的繁琐还原过程，一方面利用视频的高品质效果来凸显该有的操作节点效果。

比如在《云图计划》抽到人物时的展示界面中，就用图形生长动画去表现一些复杂图形元素：

基于这两点，可以制作出丰富多变的科技感动态效果。二手手游卖号平台不过想要设计出观感良好的效果，依然需要考虑参与动画的各个元素之间的动态节奏关系。

当单独动画基于一个组件时，需要考虑组件在界面整体布局中的位置。以及所承担的功能，比如下图所示的一个控件：

它是一个面板的局部，经过了一些处理，一些文字被块状图形替代。方便我们看到最终动画效果。它虽然是面板的局部，但视觉强度上要强于框体内的其他部件，携带了需要强调的信息。因此为它设计了复杂的入场动画。可为它设计整体上从左侧延展生长出现的动画：

也可以为它设计从右至左延展生长的动画，但这种方向除了考虑它在界面整体中的位置外，还要考虑构成它自身的那些图形的结构权重。显然左侧的轮廓图标要显得更重一些，因此以它为头的话就是从左至右生长的动画。

从这个示例可见，多个图形元素组合起来的控件，不仅需要酌情进行分层次渐次入场以控制整体动画的节奏感，还要结合常用的科技感动效设计手段：闪烁与生长。

如果是单独的弹窗或者tip，具备详细的结构化设计时，节奏掌握则更加重要，如下图这样的获得类弹窗：

这样的弹窗需要强烈的仪式感，还要有获得感受。其中仪式感通过拥有层次和节奏的动效来表现，而获得感受则通过动画的“张力释放”获得。

先看最终的效果，来看获得类特有的节奏构成的张力：

整体上，这个提示动画是一种先收后张的效果。这种效果是基于主轴元素的缩放以及特有的曲线设计来达成的。

那么这里就会提出两个问题：

1.同样是缩放动作，为什么有些情况下它并不能够带来张力呢？

这是因为这个动画的节奏构成是有序的三段式：前奏→释放→拖尾。

前奏的大幅度缩小动作构成了整个画面有被菱形压缩的趋势。当它缩至落脚点的最小值时，控件中心的结构承接了这个趋势，积蓄能量进行了释放动作。此时，主体信息构件，即“恭喜获得”那一块图形，开始释放。于此同时，又有菱形图形被迅速放大扩散，并逐渐消失。后续的这些动作就构成了拖尾。

2.主轴元素是什么？

就是构成一个控件的骨架式元素。没有它，整个控件就会散架。

每个合格的动效设计师都需要能够敏锐的观察并提取到静态设计中的主轴元素。

在此例中，这个主轴元素就是中央的菱形轮廓。我们正是利用它的本体与复制件来进行前奏入场动作与拖尾扩散动作。动效设计师不要局限于拿到的静态稿的样式去思考动态设计，而是应该主动构建该“快照”的前后时间状态。在此例中亦然。不要局限于静态中单个的菱形结构，用到多少就可以将它复制多少。目的就是完善形成“获得”张力的动态节奏。

以上只是两个小的示例，它们的动态设计都是基于具体的情况去考虑的。但你会发现想要设计出科技感的风格，依然要先利用我们提到的两个基础元素：闪烁与生长。在此基础之上，功能性越强的界面，越完整的界面，考虑就越是通用性的东西，如节奏次序，体现张力、爆发力等。

科技感的动效设计方式还需要注意哪些问题和有什么具体的设计方法？请关注本系列的下一篇。

以上。

科技感的动态设计方法-1相关推荐

科技感的动态设计方法-2
利用到的方法可以简单的分成两个层次:基本层面上,利用科技感的基本动态形式闪烁和生长:第二个层面上,则要遵守动效设计的普遍规律,即根据控件的具体位置.功能和视觉特点去合理分配它的动态节奏以至于动态曲线设 ...
banner设圆角_illustrator大气、科技感的Banner设计教程
illustrator大气.科技感的Banner设计教程六月 24, 2019 发表于: 视觉设计. 评论 Sponsor 今天和大家分享一个实用的illustrator海报设计教程,主要是实现客户 ...
Teechart动态设计方法
以前搞Qt或者MFC,不明白为何大牛做界面时不用工具箱生成和设计控件,反而要花大量的精力用代码动态生成.经过一段时间的编程体验后,会发现动态生成更好控制,更好的根据开发人员的意愿在代码修改属性,而且不 ...
一款好看，有科技感的动态背景线条动态效果代码
一款好看,有科技感的动态背景线条动态效果代码 Lan 2020-05-11 14:41 308 人阅读 0 条评论背景动态js代码,效果图可见本站代码源于网络,如有问题请联系Vast@ ...
掌握动效设计！让你的设计富有未来科技感（上）
为何有的产品.服务特别受欢迎? 是因为这些产品.服务在内容.外观.设计.可用性.功能等方面具有无可匹敌的优势.其实,所有的这些层面都属于交互设计的细节,其中一个关键点便是动效. 本文将介绍几种常见的动 ...
游戏UI设计干货：怎么让游戏界面更具科技感？
说到科技风,大家都会想到或者感觉到的是未来感,高科技的产物风格.那么大家可以一起想一下,在我们的身边有哪些是让你觉得有未来感.科技感的设计. 星球大战系列.科幻大片.液晶仪表盘.多媒体.VR AR.. ...
手机3D碎屏动态壁纸，随着手机晃动变幻的3D特效！科技感十足！
上次我们分享了视频桌面壁纸.今天,给大家带来更加炫酷的壁纸--3D碎屏动态壁纸,随重力变化呈现3D特效,科技感十足! 适用系统:安卓演示机型:魅族MX6 一.3D碎屏动态壁纸第一步当然是下载安装软 ...
玩转未来科技感！高端电商海报设计素材
多设计师经常会遇到科技场景合成等难题,把控不准科技感的氛围表现.对科技感场景合成思路及风格调性把控,是个难题. 还好优图网,带来玩转未来科技感!高端电商海报设计素材! 虚拟城市未来发展建设革命科技海 ...
如何设计出高端大气、有黑科技感的可视化大屏？
只要一提起可视化,很多人第一个想到的,肯定就是火得一塌糊涂的大屏了. 从我身边很多从事可视化的朋友来看,越来越多的公司都将可视化大屏作为企业数据工作展示的"高级手段"和" ...

科技感的动态设计方法-1

科技感的动态设计方法-1相关推荐

最新文章

热门文章