会说话又好看的图表，学会这条经验，你也能做到！

【图表插件】会说话又好看的图表，学会这条经验，你也能做到！

日常生活与工作之中，我们难免会碰到各种各样的数据。比如说，工作上的一些数据汇报、销售业绩的成果展示啦，生活娱乐中也会或多或少的碰到这些和数据有关的东西。数据，简单来说就是一系列数字、文字的组合。这些纯文本，我们看起来不仅比较枯燥乏味，大脑对纯文本的处理速度也是相对较慢。于是，图表出现了。

图表的出现极大地提高了数据的可读性，因为，相较于纯文本而言，我们大脑处理图形信息的速度要快上很多。那你会制作图表么，还是说，做出来的图表让自己都不忍直视呢？又是不是特别羡慕别人制作出来的图表又好看又仿佛会说话一样呢？看了今天这篇经验分享，你也一样能够轻松设计出来会说话又好看的图表！

工具介绍篇：3分钟轻松上手的图表制作工具

人人秀H5页面制作工具——图表插件

产品功能介绍-图表插件

图表是数据的直观展现形式，图表功能似乎并不起眼，但实则是各种会议中必不可少的功能之一。

企业年会中的报表、新品发布时的数据、销售总结中的成果，这些统统都需要图表功能的支持。

服务优势：

1、多种图表类型

人人秀图表插件内置多种图表类型，可以绘制柱状图、条形图、曲线图、饼图和面积图五种类型的图表，涵盖绝大多数使用场景，无须担心找不到合适的图表类型。

2、多维度数据

在人人秀图表中，可以制作多个维度的数据，使用堆叠、标签或者普通方式进行排列，表现更直观、功能更多样。

H5页面——图表制作流程：

1、打开人人秀H5页面制作工具官网

2、进入模板商店——功能类目选择“图表”，选择您喜欢的图表模板，点击并使用。或者进入产品中心——H5活动营销找到“图表插件”，点击进入，然后立即制作。

3、在弹出页面，点击使用，便能进入H5页面-图表插件的制作页面之中。

4、在图表制作编辑页面的左侧可以选择图表各部分页面进行添加各式内容。

5、在图表制作编辑页面的右侧还可以对图表进行背景、图片、文字、互动等个人性化编辑。

6、如果您觉得这些自己设计起来比较费事，可以找一款自己满意的图表模板直接替换其中的内容，又或者找人人秀客服提出您的需求哟。

7、在一系列个性化设置操作完毕之后，您便可以将你制作出来的H5页面-图表发送给您身边的小伙伴展示自己的超一流的图表制作功底！

图表设计篇：如何让你的图表会说话？

折线图，曲线图，饼图，环状图，条状图，雷达图，地图等可以说是我们目前最常见的图表样式了。具体到每种图表适用于表现什么类型的数据我这里就不多说了，数学老师应该都说过，今天主要来说图表设计。

我们可以从以下四个维度来剖析图表设计：可读性，一致性，视觉层级和美观性。

一、可读性

图表设计的初衷就是为了让用户浩如烟海的数据中解脱出来，图表需要帮助用户更好的”读取”数据，所以在这里我将可读性放在图表设计的首要位置。

图表的可读性主要注意以下三点。配色，文字和群组。

1、配色

图表的配色这里主要来说背景色，一般来说，图表的背景色我们可以分为深色和浅色。浅色背景的图表更有利于用户阅读，可以有效的提高数据的可读性。

可能有人会问了，既然浅色背景更有利于阅读，那么我们就可以直接下结论了“图表背景一律使用浅色”，为什么还要考虑深色呢？

那是因为有的界面内容过少，为了使界面看起来不那么单调，我们会使用深色背景。因为界面内容本身就少，用户一眼就能看完，所以深色背景对可读性影响不大。但是我们要记住，当数据过多的时候，必须使用浅色背景。

2、文字

对于信息的读取，图表可以快速但是无法做到准确，这就是图表要辅以文字说明的意义所在。

文字的可读性主要体现在字体(衬线字体和非衬线字体)，字号，配色和排版。以排版为例，用户的阅读习惯是从左往右，从上往下，也是我们常说的Z型阅读模式。这种模式下，左对齐的文字排布就非常有利，用户可以无意识的回到段落左端，开始新一行的阅读。而居中和左对齐使得段落每一行左端的位置都不一样，用户每次都要有意识的寻找开始位置，阅读起来会很累。

上面说到了用户浏览习惯，接下来再给大家分享另一个容易被我们忽视用户浏览习惯。我们在设计饼状图的时候，份额最大的部分应该放置在12点钟方向，因为用户都习惯从12点钟的位置开始浏览。其余的部分按从大到小依次排，顺时针逆时针都可以。

3、群组

群组的设计理念跟卡片式设计相类似，都是对信息进行分割让用户更容易消化。以转账功能为例，对于收款人信息，我们可以使用左边的列表样式逐条展示，其实这样做问题也不大，而且还省事。但是这种展示方式属于毫无主次的陈铺出所有信息，用户无法明确优先级。那么我们可以对信息进行分组整合，将收款人姓名，账号，开户行整合到一起，还通过使用icon来帮助用户快速定位重点信息，提升阅读速度。

二、一致性

一款产品中所出现的图表肯定不止一种，为了消除不同类型图表给用户带来的认知负担，我们可以通过给图表添加相同的设计元素来建立图表的一致性原则。这些相同的设计元素可以是背景色，排版，标题样式等。

三、视觉层级

不同的数据有不同的重要程度，我们可以通过配色，群组，字体，间距等手法来使图表的视觉层次分开，有助于用户对于数据的轻重缓急有一个直观的判断。比于浅色，深色背景更能吸引用户的注意力。

四、美观性

其实如果一个图表可以满足以上的三个条件已经可以说是相当不错了，但是我们要更进一步，从美观性的角度再对图表进行提升。好的图表应该是具有美感的，最好具备有趣，独特等要素。这样才可以吸引用户的注意力，让他们想看个究竟。看到特别出彩的图表样式，用户甚至会去分享。虎扑做的“数读NBA”就是一个非常好的例子。

掌握了以上这条关于图表制作与设计的经验分享，相信您一定能够信手拈来般轻松制作出会说话又好看的图表。快来使用人人秀H5页面制作工具制作高端大气上档次的图表试试您新学到的技术吧！

人人秀原创文章，如若转载请注明出处：https://rrx.cn/content-tubiaozzgh