23张令人惊叹的动画和交互式信息图(以及你能从它们中学到什么)

23张令人惊叹的动画和交互式信息图(以及你能从它们中学到什么)

写的:
Orana Velarde

2020年6月11日
动画交互式信息图-标题宽

视觉交流一直是人类互动的一个重要因素。视觉图像可以帮助传达任何信息,即使是很少的文字或根本没有。

我们不会包括关于一张图片值多少钱的陈词滥调,你已经知道了。但视觉效果对任何类型的内容都是很好的补充,无论是博客文章、社交媒体更新还是电子邮件通讯。

特别是,信息图是一种非常实用的工具,可以将难以浏览的数据和信息可视化。

它们也是超级可分享的!

但很多人通常不会考虑信息图表设计你能让他们活过来吗动画和互动的剂量

为了让你的创造力流动起来,我们把这23张令人震撼的动画和互动信息图放在一起,以激发你自己的视觉内容。

但首先,看看Visme的YouTube教程系列中的这段视频。它解释了如何将弹出式图形添加到内容中——这是交互式信息图形的重要组成部分。

视频教程:如何用Visme创建弹出窗口

上面的视频将引导你在Visme中创建弹出式图形和悬停效果,以创建比静态图像更吸引人的交互式信息图。

下面是23幅动画和交互式信息图,你可以收藏它们以获得灵感。

1《绝命毒师》时间轴动画信息图

Netflix的电影《埃尔卡米诺》作为《绝命毒师》系列的续集在大结局播出数年后上映。Storygraph的人在观看《绝命毒师》之前,制作了一条《绝命毒师》的时间线,作为快速复习。

时间线为每个角色设置了一条白线,他们沿着自己的线移动,会见其他角色,并与不同的地点互动。

似乎整个时间轴被设计成一个长长的水平图形,然后角色在上面动画。最后的视频很有趣,很容易跟上,也很有趣。

2斯巴达克斯的生命动画信息图

这张动画信息图是为了模仿古罗马帝国陶瓷上的画而设计的。它讲述了斯巴达克斯的一生,以及他如何组建军队并创建了斯巴达。

《斯巴达克斯的生活》的创意在于所有内容都是2D的,就好像是模仿那个时代的陶瓷上的人物。使用历史的视觉吸引力是将生活注入信息图的一个好方法。

3.美国同性恋权利互动信息图

动画互动信息图——美国的同性恋权利

创建您自己的交互式信息图今天! 免费试用

这张来自《卫报》的互动甜甜圈图是关于每个州根据类型有不同的法律和权利。交互性在于你的鼠标如何在每个状态上停留并突出显示每种颜色的含义。

这种风格的交互式信息图是最容易制作的,因为没有动画。传奇弹出被触发在悬停,以创造一个简单的体验。

不幸的是,这张图表最近一次更新是在2015年——如果能看到这张互动信息图根据最新法规进行更新就太好了。

4Dude Map交互式信息图

动画交互式信息图-哥们儿地图

创建您自己的交互式信息图今天! 免费试用

不是所有的信息图,无论是交互式的还是其他的,都需要是关于严肃的信息。它们也可以是有趣的和娱乐的。比如这个例子,美国不同地区的男人是如何称呼他们的朋友的。

当你点击顶部菜单中的一个单词时,相应的美国区域会高亮显示。有一个5色累进的代码是如何使用的常见。这个例子非常简单,但也非常有趣。

5Top Dog Names by Breed Interactive Infographic

动画互动信息图-顶级狗的名字

创建您自己的交互式信息图今天! 免费试用

另一个有趣的交互式信息图的例子是,这是一个可视化的顶级狗的名字按品种。点击一个标有品种名称的圆圈弹出展示了一个例子的品种,加上最常用的名称为它。

交互式信息图是用Visme创建的.您可以按照相同的弹出式风格为自己的内容创建类似的内容。

6交互式海啸海报

动画互动信息图-海啸海报

创建您自己的交互式信息图今天! 免费试用

虽然我们不能在网上试用这张交互式信息图,但它是关于海底地质展览的一部分。它被教授用作演示工具,也被学生用作发现工具。

交互式海啸海报是一个触摸屏,可以直观地显示海啸的形式,它们对地球的影响,以及它们在太空中的样子。

从技术上讲,这个交互式信息图可以更多的被认为是信息设计比任何其他。这是一个很好的例子,说明教学工具可以通过一些创造力和计算机编程提升到下一个水平。

7COVID-19呼吸机动画信息图

动画互动信息图——解释COVID-19呼吸机

创建您自己的动画信息图今天! 免费试用

桌面鲸是一个著名的科学插图和交互式信息图表博客。不出所料,我们在这个列表中列出了他们的三个工作示例。

这是解释新冠肺炎患者使用的呼吸机功能的动画信息图。信息图有三个部分来可视化通风是如何工作的,然后是使用的两种不同类型的通风器。

这种类型的动画信息图是一个很好的例子,说明了如何简单地解释一个看似复杂的设备的内部工作。向你的追随者提供这种类型的信息是非常有价值的。

8如何制作人类动画信息图

动画交互式信息图-如何使一个人

创建您自己的交互式信息图今天! 免费试用

第二张来自Tabletop Whale的互动信息图是他们最臭名昭著的内容之一。“如何成为一个人”是一个关于人类胎儿生命周期的动画信息图。设计是一个由外向内的螺旋形视觉效果。

从技术上讲,移动是一种视觉错觉——动画应用于每个单独的项目,但时间轴是如此完美,它看起来像在移动。

9家庭工作交互式信息图

动画互动信息图-家庭工作和保持健康

创建您自己的交互式信息图今天! 免费试用

像上面这样的交互式信息图每天都变得越来越普遍。让它们脱颖而出的诀窍是凭直觉设计它们。在这张由人类工程学和人类因素特许研究所提供的信息图表中,很容易看到交互触发因素。

不仅如此,还有一个标签解释了它是如何工作的。创建这种样式的信息图很容易Visme,只需使用弹出功能和一些明显的图标作为视觉触发。

10着陆页高速公路交互式信息图表

动画交互式信息图-登陆页面高速公路

创建你自己的信息图表今天! 免费试用

滚动信息图在几年前是一件大事。这些不是你想要的普通类型的信息图,因为它们需要花费大量的时间和精力来创建。更不用说如何在网站上快速加载的知识了。

上面的例子是这个类别的获胜者之一。它是一个滚动的、交互式的信息图表,可视化地展示了如何创建最佳的登录页面。他们将其命名为“着陆页高速公路”,设计完全符合要求。

11包豪斯的动画图

当你学习艺术和设计时,你不能跳过包豪斯运动。上面的视频是一个关于包豪斯运动历史的教育动画信息图表。

与主题保持一致,设计简单、简约,非常包豪斯风格。这张由99designs设计的简洁的交互式信息图是一个很好的例子,说明了一个简短的视频如何取代一个静态的图像,从而产生不同的效果。

12纽约城市天际线互动信息图

动画互动信息图-纽约天际线

创建你自己的信息图表今天! 免费试用

国家地理在线出版物分享了一份交互式信息图表,显示了到2020年底曼哈顿将建造的所有新摩天大楼。

信息图在网页上水平滚动,并被分割成可以在3D中看到的部分。这些建筑根据它们建造的年份进行了颜色编码,它们甚至会在中央公园投下阴影!

这个例子不是一个易于操作的交互式信息图。要创建这种类型的设计,你需要聘请专业人士。但这是值得的!

13物种碎片互动信息图

动画互动信息图-物种的碎片

创建您自己的交互式信息图今天! 免费试用

我们现在在网络上看到的许多视觉内容都是模拟电子游戏,为用户提供沉浸式体验,将一流的故事叙述与交互性结合起来。

例如,这部动画和互动作品从一开始就以惊人的动态图形效果和明亮、生动的色彩吸引着读者。然后,观众可以通过使用右边的箭头来引导互动作品的节奏。

这一创新作品的一个值得注意的特点是使用主要的平面颜色来创建3D设计,并使用交互式图形,你可以通过点击物种名称旁边的图标来访问这些图形。

14北美蝴蝶动画信息图

动画交互式信息图-北美的蝴蝶

创建您自己的动画信息图今天! 免费试用

这张来自Tabletop Whale的GIF动画信息图同时教育和娱乐。

他们的想法是利用微动画在社交媒体上吸引观众的注意力,并模拟观看一群活生生的、会呼吸的美丽蝴蝶的真实体验。

15最佳设计工具比较交互式信息图

动画交互式信息图-顶级设计工具

创建您自己的交互式信息图今天! 免费试用

我们Visme团队制作了这张交互式信息图,比较了目前七种不同的设计工具。它是我们写的一篇博客文章比较了设计工具。

这是一个交互式饼图,其中调整了大小的切片表示信息的特定方面。当你点击一个切片时,图例就会弹出显示该设计工具的细节。

16插入交互式信息图

动画交互式信息图-插入

创建您自己的交互式信息图今天! 免费试用

如果说有什么是现代读者和观众喜欢的,那就是选择的自由。

这个交互式的信息图为观众提供了完全的自由来探索每一个不同层次的信息,并根据他们的喜好进行深入或浅显的探索。

17Ustream公司报告动画信息图

动画交互式信息图- ustream公司报告

创建你自己的信息图表今天! 免费试用

这张全幅交互式信息图之所以吸引人们的注意,不仅因为它的大小,还因为它熟练地使用了生动和明亮的颜色,微妙但有效的动画和大的,粗体字体。

18Warby Parker 2014年度互动报告

动画互动信息图-沃比帕克测验

创建你自己的信息图表今天! 免费试用

Warby Parker是一家以打破常规而闻名的公司。

例如,这份年度报告扭转了读者的局面。它不提供公司去年业绩的常规数据,而是要求听众自己编写报告。

19联合国儿童基金会的动画图

创建您自己的动画信息图今天! 免费试用

这个动画信息图使用了美丽的背景音乐和图形有效地向它的观众发送了一个强有力的信息。

它采用了恰当的基调,并利用了适量的动画、图形元素和文本来创建强大而有影响力的信息显示。

20.Ale像素运动图形动画信息图

创建您自己的动画信息图今天! 免费试用

这些令人惊叹的运动信息图是难以置信的美丽和信息的同时。它们将圆滑、专业的静态设计与其他动画元素相结合,产生了独特、引人注目的数据可视化。

21互联网动画信息图的历史

创建您自己的动画信息图今天! 免费试用

使用黑白图形元素,这个简单但巧妙创建的动画信息图让观众眼花缭乱,它使用了深思熟虑的过渡,无缝连接一个概念或想法到下一个。

22Eckert Caine Bridge动画信息图

创建您自己的动画信息图今天! 免费试用

就像之前的动画信息图一样,这张图因其创造性的过渡和文本、动画和叙事的和谐组合而脱颖而出。

如果你研究每一个转变,你会发现没有突然停止;从一个想法到另一个想法,没有不稳定的转变。

23惠普让它重要的动画信息图

创建您自己的交互式信息图今天! 免费试用

这个运动图形蒙太奇结合了现实生活的图像和动画信息图,给它一个特殊的三维质量和创造性的触摸。这表明,如果以正确的方式组合在一起,将看似不相干的元素组合在一起,实际上可以生成一个有吸引力的信息图表。

在Visme中制作动画和交互式信息图

启发了吗?

在看过23幅令人惊叹的动画和互动信息图之后,你现在可能想制作自己的。Visme,您可以创建交互式内容通过使用模板或从头开始设计弹出窗口和动画。

一旦完成了动画或交互式信息图,就可以将其嵌入到站点中,供用户进行交互。要在社交媒体上分享,请下载JPG文件,并将其指向一个实时链接。

你会惊讶地发现你从读者和追随者那里得到的积极反应。

别忘了向我们展示你创造了什么!

创造惊人的内容!

设计视觉品牌体验为你的业务无论你是经验丰富的设计师或者一个完全的新手。

免费试用Visme

    我们很吝啬,不与任何人分享电子邮件。

    关于作者

    Orana是一个多方面的创意家。她是一名内容作家、艺术家和设计师。她和家人环游世界,目前在伊斯坦布尔。了解更多关于她在oranavelarde.com

    对“23张令人惊叹的动画和交互式信息图(以及你能从它们中学到什么)”的19条回复

    1. 丽贝卡·希尔 说:

      你好,

      我只是想提醒你们一下,我创作了一篇关于82位奥运选手的互动文章,他们证明了年龄并不是成为世界上最好运动员的障碍。它包含以下细节:

      1)活动年
      2)国籍,
      3)运动员年龄;
      直观地显示。

      如果你对此感兴趣,请告诉我,我会发给你的。

      不管怎样,继续努力吧

      干杯

    2. 汽车引擎如何工作的信息图表是所有这些图表中最好的,它简单明了

    3. 在第二个信息图表“汽车引擎是如何工作的”,我必须说它的讨论很有知识性和逻辑性。
      谢谢分享

    4. 作为一名教师,我必须说互联网历史的信息图真的很棒。你的努力是显而易见的。

    5. 非常鼓舞人心的…谢谢你!

    6. 说:

      嗨Nayomi,

      非常喜欢你关于动画信息图的文章。
      我在视觉内容vs文本方面的经验是,视觉内容胜过任何内容。因此有句话说,一幅画胜过千言万语。
      然而对于搜索引擎优化来说,文本是至关重要的。

      期待您的更新文章。做得很好。

    7. anahyta 说:

      谢谢你分享这篇文章

    8. 雅各 说:

      谁是制作这些作品的最佳在线平台?请问是自助服务吗?

      • 其中大多数都是由代理商制作的,但如果你想创建简单的交互式和动画信息图,你也可以尝试Visme,价格非常合理,或者其他更昂贵的工具,如Ceros

    9. 凯瑟琳哈代 说:

      嗨。
      这些是Visme做的吗?或其他项目。我想做一些类似于联合国儿童基金会或互联网视频历史的东西,Visme上可以吗?

    10. 玛丽亚获得 说:

      好吧,这就是我在找的一篇很好的文章,有一个很好的例子。

    留下一个回复

    您的电子邮件地址将不会被公布。必填字段已标记

    现在可用:成为一名认证的演讲专家免费 把这门课