半岛权威十大直营(官方)网站

Pete Holmes的蝙蝠侠可不是本文的一部分

作为一个UI设计师，我需要用看起来很真实的图表创建仪表板。我经常无法为我的设计获得真实数据，所以我往往倾向于Illustrator，使用钢笔工具和组合区域折线图。它通常看起来就像这么一堆：

谁集合了这些女巫帽子？

我想向你展示如何使用、和做出下面这样的图表：

哇，这看起来才像真实的数据。

要做到这样，你需要：

1. 在Google Sheets创建一些假的数据
2. 使用该数据在Illustrator创建一个区域折线图
3. 将图形的形状设计成你在Sketch上所看到的样子

1. 在Google Sheets创建一些假的数据

制作随机数，打开google drive的电子表格，将这个函数输入空单元格中：

=RAND()*100

将会输出像83.20这样的数字。当我们在设计邮件指标可视化时，我的同事Kirill Popov帮忙给我演示了这个函数。若要制造更多随机数，你可以点击此单元格并拖动它，直到你有了足够的随机数字来作为你的图表数据点：

使用= RAND()* 100来创建你的随机数

2. 使用该数据在Illustrator创建一个区域折线图

现在你已经有了一个足够的随机数列表，我们打开Illustrator并创建一个画板，设置成1200 x 600像素：

接下来，使用area graph tool这个：

将其拖成画板大小的大约90%左右，你将获得一个窗口来插入数据。从前面创建的表格中复制你的数据粘贴在illustrator中并单击check mark看看会有什么结果。

让我们删除底部多余的刻度线将图表清理一下。在图表上单击右键并从右键菜单中点击Type…：

单击右键，点击“Type…”

跳转到Category Axis页面：

选择“Category Axis”

设置类别轴刻度线的长度为None并点击OK：

Tick Marks -> Length: none

现在让我们添加一些数据趋势。使用direct selection tool：

用它来选择图表，而非轴：

使用直接选取工具，单击并从外面拖动图表，上到包括完整山峰高度的图表中部下到图表的山谷深处。不要选择图表的底部。一旦你选中了合适的图表范围就可以使用缩放工具垂直压缩图像的部分。

我建议最后一步多做几次，这样你就可以显示一些数据的趋势。像这样：

在我们把这个放到Sketch之前，让我们把图形的描边删除。选择我们要处理的图形并且删除描边：

使用direct selection tool，选择图形而不是轴线，并将其复制。我们要打开Sketch给图形设计润色。

3. 在Sketch设计图形的形状

打开Sketch，创建一个新文档并插入一个画板，设置成大约1220 x 530像素。从Illustrator将你的图形粘贴过来你就可以看到这个图：

哦，我们来设计吧

设计这个图，要通过制作一个比此图小大概5像素的矩形。这将在后面成为切断了侧面和底部描边的遮罩：

制作一个矩形

我把上面的矩形加上稍微不透明填充，这样你就可以清楚看见我们要剪除的边和底部区域。移动矩形图层到图形背后：

将矩形后移

同时选择图像和矩形并单击mask按钮:

使用矩形来掩盖图像的边缘

现在让我们添加一些设计。选择图像（不是遮罩）并应用2 px绿色描边和40%不透明的绿色填充：

添加你想要的填充和描边

你会注意到侧面和底部的描边被剪除了。这样图像看起来很现代。

最后，添加一些网格线。让第一条线位于图像的底部，约40 px。然后点击command+D直到漂亮的水平线到达你的图像顶部。集合所有的线，将它们置于图像的背面并让线条的颜色能够让人看到又并不显眼。我原本设置我的第一条线是1 px描边#CCCCCC颜色。当我组合所有线条时，我将它的不透明度设置为20%：

最小轴线

你可以在基于你想显示的数据/时间关系的轴线上放置你想要的任何数字。就酱，请快乐地制作图表吧！

本文翻译自：

推荐阅读：超实用！四个方法帮你搞定数据可视化界面设计（附神器）