动效设计中的隐喻-2

这次我们再看一些别的有关隐喻（或曰明示）的设计。

示意关系

所谓示意关系，就是通过特定的动作来表明界面中控件之间的某些关系，包括包含关系、前后关系和位置关系。其实就是我们以前讨论过的连接的一种。有一些比较常见的连接动作，可以很明确的表明界面变化过程中控件之间的关系。

如下图的游戏《Wonderbox:冒险制造者》中的“级别提升”的动效，就是一个表现控件关系的隐喻：所获得的点数直接飘到经验条上，接着进度条出现增长动画。这就很直接的表现两者之间的从属关系。

如下图所示的游戏《刺客信条：起源》中的“技能升级”界面动效。就通过动态过程解释了技能之间的递进关系：一个技能的解锁动效之后，会有黄色线条出现，将已解锁技能图标与下一个可解锁图标相连接。虽然如果没有这个动态过程，两者之间的关系也可以直观的看到，但这种动态过程其实是对“逐渐升级”的最佳隐喻。所以这段动效其实是不可或缺的。

如下图所示的游戏《羞辱2》中的“黑市”界面动效。这个界面巧妙的利用了场景动画与界面动画结合的方式来解决物品的方位与图标识别性的问题：左侧的画面中，货架上的物品与右侧面板中物品图标的位置一一对应，切换右侧的图标时，左侧的画面镜头就对焦到具体的物体上。这样即便右侧的图标较小，也可以通过左侧的画面物品看清楚物品。而且右侧图标的布局设计一目了然，玩家也不会因为左侧是特写镜头而搞错选择方向。

示意层级

这也属于连接的一种，属于一种逻辑关系连接示意。一般通过平面二维展开，也会结合一些纵深空间关系来明确这一点。

如下图所示的游戏《刺客信条：起源》中的人物装备操作界面。二手手游卖号这里的装备详情控件的出现动效，就是在前一个界面“人物详情”往纵深后退之后出现的。并且装备图标本身还有一个位移动画，为附属控件腾挪控件。整个过程的空间感比较强，两层界面之间的层级关系，在这个动态过程里被解释得一清二楚。

如下图所示的游戏《杀出重围：人类分裂》的“邮件”界面里的切换动效。这是个非常常见的表示界面层级关系的效果：切换第一级，展开第二级。操作第二级，会有第三级内容进行相应。

除上边这些从属逻辑的层级外，另外一些层级是属于递进逻辑的，比如不同等级的情绪。这种蕴含了情绪的层级，需要比较综合的动态设计手段。

如下图所示的游戏《无畏契约》（Valorant）中连续爆头提示动效：

这几个击杀图标的设计本身就有层级关系，连续击杀一个的图标和连续击杀三个的图标显然并不一样。除了静态样式的不同，在图标的动态设计上也需要有所差别，以便增强相关操作发生时的反馈强度，更深入的去表达这一提示所蕴含的情绪。

示意情绪

动效的存在目的之一就是表达情绪。而一些细微的情绪表现，也被附着在动效设计之中。或优雅或急躁，或催促或安抚，都可以通过不同的动作设计来表现。当然，这离不开视觉设计上的一些情绪元素去辅助。

如下图的游戏《Wonderbox:冒险制造者》中的“获得冒险之心”的动效，就是一个表现强烈获得感情绪的隐喻。动态的彩带喷出与诸多光效的结合设计，都在静态图的情绪表现上有了很大提升。

关于更多情绪表达的东西，我们会专门有系列文章来讨论，这里不再展开更多。

还有哪些关于动效的隐喻设计曾经帮助你解决设计上的难题？欢迎评论指出，也期待你的意见和反馈。

以上。

动效设计中的隐喻-2相关推荐

动效设计中的隐喻-1
界面中静态视觉语言有隐喻,这个我们都知道. 这些隐喻有些是常识中的某些共识,有些则是设计师通过长年累月的传达,让用户逐渐培养出的一种习惯.这种习惯看似是理所当然的.设计师们也乐于在各个设计角落布置诸多 ...
仪表特效——AE在UI动效设计中的应用
动效设计是UI设计中不可或缺的一环.随着硬件性能的发展和动效输出方式的优化,大家对动效的认知也从最初的认为动效只是为了美观酷炫,到逐渐认识到动效对于提升用户体验和产品需求的重要作用. 最近几年,除了老 ...
动效设计的物理法则：动画的一切皆在于时间点和空间幅度（转）
动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼 ...
uniapp image图片切换动效_动效设计从概念到落地
一.什么是动效设计聚焦于产品中的动效,我们常说的动效设计可以分为3类: 1.交互动效交互动效承载了产品流程.交互行为的串联,不论可实际操作的交互原型还是纯做 demo 展示的动效过场都可以算作交互 ...
掌握动效设计！让你的设计富有未来科技感（上）
为何有的产品.服务特别受欢迎? 是因为这些产品.服务在内容.外观.设计.可用性.功能等方面具有无可匹敌的优势.其实,所有的这些层面都属于交互设计的细节,其中一个关键点便是动效. 本文将介绍几种常见的动 ...
如何准确的向工程师传达动效设计？
转自:http://www.cocoachina.com/design/20150305/11237.html 如何准确的向工程师传达动效设计? 2015-03-05 09:47编辑:pockry分类 ...
停止不必要的UI动效设计
前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. UI动效设计的反面案例(线上 ...
2020年最值得推荐的10款UI动效设计工具
动效设计在最近几年的各种网页设计和App设计中的表现相当抢眼.各种令人惊叹的创意和流畅自然的动作设计迅速捕获了用户的视线,极大地提升了品质感和转化率.而要制作出效果卓绝的UI动画效果自然也需要优秀的软 ...
iOS开发：停止不必要的UI动效设计
前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. 注:这个反面案例并非假设,而 ...

动效设计中的隐喻-2

动效设计中的隐喻-2相关推荐

最新文章

热门文章