如何创建一个易于遵循的信息图表布局

如何创建一个易于遵循的信息图表布局
Masooma Memon

写的:
Masooma Memon

2020年10月22日
一个女孩通过信息图布局导航的宽插图。

信息图的布局(或信息图的设计风格)可以决定信息图设计的好坏。

一个设计糟糕的信息图表,其布局不能很好地传达你的故事,会让你的观众感到困惑,也不会正确地传达你的信息。

在本文中,您将了解信息图布局的类型,以及如何为您的故事创建完美的布局。

在此过程中,我们还将提供一个信息图布局小抄,您可以在任何时候坐下来设计一个令人难以置信的信息图。

什么是信息图布局?

信息图布局是视觉元素在信息图中的布局方式。

它有时间线吗?或者你的信息图表将会被图表和图表所填充?会有图像还是图标?你将如何安排所有的内容-在节或行?

这些都是你在规划信息图表时应该问自己的问题。

你使用的布局很大程度上取决于你的内容。如果你需要展示的是历史数据,最好做一个时间轴信息比如这个:

Visme中的时间轴信息图模板示例,显示COVID-19时间轴。

自定义这个信息图表模板,使它成为你自己的! 编辑及下载

如果你计划比较两个或两个以上的项目或概念,使用一个比较信息图,例如下面的例子来可视化相似点和不同点:

Visme中的一个比较信息图模板示例,显示了外向者和内向者之间的差异。

自定义这个信息图表模板,使它成为你自己的! 编辑及下载

现在让我们向您展示信息图布局思想的类型,您可以探索以有效的方式呈现您的故事。

信息图布局类型可供选择

你现在应该已经知道了:有很多信息图表类型在那里。

在Visme的信息图模板库中可用的有:

  1. 统计图表
  2. 时间轴信息图
  3. 流程图表
  4. 列表信息图
  5. 信息图表
  6. 比较图表
  7. 解剖信息图
  8. 可视化简历信息图
  9. 层次信息图
  10. 基于位置的信息图
  11. 路线图的布局
  12. 多图表信息图布局

记住:使用信息图表布局设计,不仅在视觉上吸引人,而且在视觉上交流。这意味着,你的设计不仅要吸引眼球,还要有效地传达你的信息。

如何规划完美的信息图布局

你可能希望避免所有设计计划的前期工作(我们每个人都有拖延症,我感觉到了!),但我保证:所有的前期设计工作都是值得的。

首先,花时间在你的信息图中列出细节,这将有助于最大限度地减少最终设计中的编辑。

第二,你会发现自己在设计时不会那么困惑,因为你会充分意识到每个部分需要什么工作。你甚至不会错过一两个细节。

准备好处理信息图的布局了吗?请系好安全带,我将带您完成您需要采取的步骤,首先:

1.注意你需要做的部分。

信息图主要分为三个部分:

  • 身体
  • 页脚

这些都是不言自明的。

标题是信息图标题的位置。正文是内容的核心所在。至于页脚,最后一部分用于添加引用和版权信息。

要知道设计每个部分都有一定的礼仪。让我们一个一个地谈谈:

设计页眉

用一个吸引人的标题和一个吸引人的格式来让这个部分有价值。使用粗体使标题突出。

确保字体大于信息图的其余字体大小。这样可以区分标题和标题。这样,标题就能最好地吸引读者。

在信息图的主体上工作

决定这个部分需要什么。您需要以节的形式呈现内容,还是需要向主体添加图表以可视化数据?

接下来,练习身体的排列。

例如,如果你使用分段,决定你将如何安排它们。如果这是一个时间轴,它将是你信息图主体的焦点,跟踪时间轴将遵循的模式。

看看这个示例信息图模板中的时间轴是如何从左到右流动的:

自定义这个信息图表模板,使它成为你自己的! 编辑及下载

章节的安排对你的信息图是很重要的视觉层次结构

层次结构或排列信息图的方式决定了您希望查看者阅读信息图的方式。

可以这样想:从最突出的元素(比如标题)开始浏览设计,然后是其他元素——每个元素都像引向高潮的线索一样引导用户的注意力。

通常,两种突出的层次模式是流行的:Z或F查看路径。你需要熟悉这两种方法创建图表

快速速成课程:Z观看模式是当你引导观看者从左上角开始,向下走,最后到左边——就像Z的设计一样。

类似地,F模式是当观众从水平移动(从左到右)开始看到设计,然后是下一行,然后向下,就像字母的形状一样。

您可以借助字体大小、数据小部件、箭头或数字来导航您的查看器。

用visme把无聊的数字变成漂亮的数据

在信息图主体中需要处理的最后一件事是:视觉元素,例如,您将在这里添加的图标和图像。

这些视觉元素有一个简单但非常重要的目的:它们使本节易于消化。如果身体较长,这尤其有用。

结束页脚

这部分的版权和参考资料不需要突出。它只需要是可读的,所以你必须计算出字体大小。

信息模板Visme提供的,页脚字体大小是16 -如果你正在从头开始设计你的信息图,这是一个很好的参考。

2.开始制作线框。

你在第一步中所做的所有计划都将在线框中实现,或者是你的信息图的大致草图。

你的线框可以像铅笔草图一样简单。这个想法是要确切地知道你的信息图布局将如何展开。

这里有一些你可以参考的线框。事实上,你可以使用它们作为你的信息图布局小抄:

用这个拖放工具创建您自己的信息图表! 签约。这是免费的。


在你的网站上嵌入这个动画信息图:


有了线框,你就会知道你的信息图会是什么样子。因此,如果您需要进行任何剧烈的更改,您可以很容易地在这一点上这样做,而不必弄乱其余的设计。

要记住的一个重要步骤是:除了决定布局之外,还要在主体部分安排视觉元素(时间轴、多图表、比较等等)。

最后,检查你的线框的视觉层次结构——看看内容如何,然后,故事如何流动。是否清晰且平衡?它是否给人留下了清晰的印象,还是数据小部件或其他元素使主体杂乱?

3.确定颜色方案和排版。

在设计信息图表时,不要为了看哪个颜色搭配最好而改变颜色,而是事先挑选好配色方案。

你要使用的字体也是一样。因为,这两个因素在让你的信息图大受欢迎的过程中都起着至关重要的作用。

首先:

选择你的颜色

虽然多种颜色通常很有趣,但它们很难处理。更安全的选择是使用2-3种颜色。

这些将是你在整个信息图中使用的颜色:字体、页眉和页脚部分以及主体中的设计元素。

如果你代表一个品牌,你将使用的颜色是显而易见的:从你的品牌包

不属于某个品牌?选择对比色。

一个很好的方法是输入你喜欢的颜色,看看你是否使用了很棒的颜色对比冷却器,这个工具可以立即为你生成良好的颜色组合。您还可以探索他们的趋势调色板,并从那里选择您的信息图的颜色。

专家提示:不要选择全深的颜色,因为它会让你的观众很难把注意力集中在内容和视觉元素上。

使用浅色背景和大胆的颜色可以让你更容易组织信息,帮助你鼓励观众专注于大胆的颜色形状和字体。

下面是一个很好的信息图颜色对比的例子:

自定义这个信息图表模板,使它成为你自己的! 编辑及下载

移动:

选择合适的字体

不要玩弄少量的字体。这是一个大禁忌。

选择最大3个字体类型而不是一个。一个好主意是使用两种字体来创建无缝的层次结构。

至于字体大小,你会发现以下大小基准很有用:

  • 大头球24-36分
  • 中等标题的字体大小为20-24
  • 14-18字体为文本内容大小

4.准备信息图中要用到的元素。

我们已经讨论过在信息图的主体部分引入视觉元素,以使其易于消化。现在是你解决这些问题的时候了。

首先,决定将哪些元素添加到主体中。你会依赖库存照片、动画还是图标?

无论你最终完成什么,请记住,你需要在元素的使用上保持一致。

例如,如果您正在使用薄边框的图标,请坚持使用它们。不要在中间添加粗边框的图标,这会破坏设计的一致性。

用可定制的图标将您的设计带入生活

接下来,开始设计。

或者,从Visme提供的大量元素中选择您的设计元素。你可以从:

  • 图标
  • 动画
  • 图形和文字
  • 标题和文本
  • 数据小部件,如计数器、表、进度条等

你可以在Visme的仪表盘左侧找到所有这些:

5.写出信息图的内容。

信息图布局设计的一个重要方面是把所有东西都放在手边,并提前计划好。这样做会告诉你你的布局最终会是什么样子。

这就是为什么重要的一步是写内容这将进入你的信息图表。

这里有一些建议可以指导你完成这一步:

  • 写任何东西都要开门见山
  • 不要拼写数字,因为那会占地方。不是“3”而是“3”
  • 写短句。长条形图会让人困惑,让你的设计看起来杂乱无章

这里有更多关于如何设计无杂乱的信息图

准备好进入实际的设计内容了吗?继续往下读,学习如何设计一个出色的信息图表。

6.创建信息图布局设计。

现在是时候发挥你的设计才能了。

你有两个选择:从头开始设计,或者选择Visme中可用的信息图表模板。让我们分别为您介绍每个选项:

在空白的信息图画布上设计

首先,你需要小心你的对齐。

为什么?

因为它可以帮助你创建一个平衡的设计,在各种视觉元素和边缘之间有足够的空间。这可以让你的设计呼吸,并保持信息图无杂乱。

因此,要指导您在画布上的操作,请使用网格线。

首先,点击Visme仪表板左侧名为“创建”的蓝色大按钮。从顶部选项栏中选择信息图,并在空白模板上按“开始”键。

要启用网格,请选择屏幕最左侧的三条水平线。接下来,选择设置图标旁边的“查看选项”并打开网格。

当您想在元素之间添加空格时,请参考此网格。

如果你想调整画布的大小,你可以在同一部分中这样做。不确定哪种尺寸最适合你的布局?书签上的本指南右侧信息图维度

另一件可以简化Visme中设计完美信息图布局的事情是:内容块

注意到画布右侧浮动边栏上的+了吗?点击它可以得到两个选项:添加空块和从模板添加。

当你选择第二种选择时,奇迹就发生了。你可以从各种标题、图标、图表、地图等中进行选择,而不用浪费时间自己设计东西。

这里只是一些基于模板的标题选项,当我选择标题从模板选项下添加。

Visme中内容块库的截图。

注意,每个块都是可定制的。意思是:您可以调整它的字体、颜色,甚至向基于模板的内容块添加另一个元素。

你的布局标题完成了吗?移动到下一节,在第一个块下面使用+符号添加一个空块。

通过简单地选择它,你将为你的信息图布局设计得到另一个空块。同样的,你也可以在你悬停在+号上时从模板中选择添加。

根据你自己的布局蓝图,在信息图的主体和页脚部分进行工作。

好消息是,只要坚持使用内容块,你就可以做到在不到一个小时的时间内设计你的信息图表

想要移动部分或块?

使用浮动边栏用向上和向下箭头改变部分位置。您还可以复制或删除一个块与双复制和垃圾箱标志在右侧栏。

自定义信息图模板

Visme使设计信息图变得小菜一碟,无论您是使用模板还是从零开始。多亏了内容块。

如果你想节省更多时间,请浏览我们的信息图表库然后选择你认为最适合你的模板。

注意,如果你喜欢一个模板,但它没有足够的部分或有更多的部分,你可以根据自己的需要定制它。

让我们选择一个模板,并向您展示如何:

自定义这个信息图表模板,使它成为你自己的! 编辑及下载

模板右侧的边栏将是你调整它的控制面板。

与上面的方法相同,使用+号可以从基于模板的内容块池中添加空白部分或空白部分。方向箭头可以让你重新排列部分,你也可以奢侈地复制和删除块,以同样的方式如上所述。

这里的另一个选项是条形图末端的三个点。按下这些,你会得到改变背景和改变块的高度的选项。

想要将背景更改为您的品牌颜色?点击三个按钮并选择该选项。你会在模板的顶部得到以下选项:

这是一个很大的灵活性,不是吗?

每个选项下都有多个选项。例如,在Background下面,你可以从下面的选项中选择:

  • 照片
  • 模式
  • 梯度
  • 动画

在这个例子中,我选择了Animated,并将背景改为这样:

因为这是一张截图,所以你无法看到背景中的线条在移动。但它们确实如此!有一个动画背景选项,动画心向上移动——这是我目前为止最喜欢的一个(尽管很难选择最喜欢的)。

想要一些灵感来创建一个动画信息图布局设计?看看这些23个惊人的互动信息图.下面是一个创建动画信息图的视频指南:

享受一个辉煌的信息图表布局

看到了吗?这不是很容易吗?

尽管最初绘制信息图布局可能会让人不知所措,但适当的规划和线框图可以节省宝贵的时间和编辑。

最重要的是,Visme可以使整个设计过程成为一个有趣的活动。首先,注册Visme马上开始制作引人注目的信息图表布局设计。

创造令人惊叹的内容!

设计视觉品牌体验为了你的生意不管你是经验丰富的设计师或者一个完全的新手。

免费试用Visme

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

    作者简介

    Masooma Memon白天是个爱吃披萨的自由撰稿人晚上是个小说呆子。她为SaaS和营销品牌制作了有研究支持的、可操作的博客文章,这些品牌的目标是使用高质量的内容来教育和吸引他们的受众。