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

身为一名UI设计师，我得凭借看上去特别逼真的图表去构建仪表板，我常常没办法为自身设计获取到真实的数据，因而我常常会偏好于，去运用钢笔工具以及组合区域折线图，它通常呈现出好似这么一堆的模样：

谁集合了这些女巫帽子？

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

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

要做到这样，你需要：

创建一些并非真实存在的数据，使用这样的数据去创建一个区域折线图sketch软件介绍，把图形形态设计成你以前所目睹的模样，这当中，首先要创建一些假的数据。

进行随机数的制作，把drive的电子表格予以打开，将此函数輸入到空单元格里：

=RAND*100

将会输出类似83.20这般的数字，在我们于设计邮件指标可视化之际。我的同事Popov帮我演示了此函数，假如要制造更多随机数，你能够点击这个单元格，并且拖动它，直至你拥有了充足的随机数字用以作为图表数据点。

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

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

此刻，你已然拥有了一份数量充足的随机数清单，我们将其打开，接着创建一个画板，把它设置为 1200 乘以 600 像素的规格。

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

大概把它拖成画板大小的约90%，你会得到一个能用来插入数据的窗口。从先前创建的表格那儿复制你的数据粘贴进去，接着单击check mark，瞧瞧会出现啥结果。

咱们把图表清理妥当，把底部多余的刻度线给删除掉。在图表那儿单击右键，从右键菜单里点击Type…：

单击右键，点击“Type…”

跳转到 Axis页面：

选择“ Axis”

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

Tick Marks -> : none

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

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

采用直接选取工具sketch软件介绍，点击一下并自外面朝着图表拖动，向上直至涵盖完整山峰高度之地，这个地方处于图表中部，再向下到图表的山谷深处，注意不要选取图表的底部。一旦你挑选出了恰当的图表范围，便能够运用缩放工具，将图像部分朝上或者朝下挤压，注意是垂直方向压缩。

我提出建议，最后那一步要进行多数几次，借此你能够展现出某些数据的趋向，呈现的样子是这样：

在将这个放置到之前，先把图形的描边予以删除，挑选出我们所要处理的图形，进而删除描边。

采用 tool，挑选图形而非轴线，接着对其进行复制。随后，我们需开启来给图形设计予以润色。

3. 在设计图形的形状

开启，去构建一个全新的文档，接着插入一块画板，把它设置成大概1220乘以530像素的规格。从把你的图形粘贴过来开始，你便能够瞧见这个图：

哦，我们来设计吧

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

制作一个矩形

我给上面那个矩形添加了略微不那么透明的填充，如此一来你便能清晰地瞧见我们打算剪除的边以及底部区域。把矩形图层移至图形的后边：

将矩形后移

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

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

此刻，咱们来增添些许设计，选取图像（并非遮罩），接着施加 2 像素的绿色描边，再赋予 40%不透明度的绿色填充。

添加你想要的填充和描边

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

最后，增添一些网格线，使第一条线处在图像底部，大概 40 px，接着点击 +D 直至漂亮的水平线抵达图像顶部，集合所有线条，把它们放置在图像背面，且让线条颜色能被看到却又不显眼，我原先设定第一条线为 1 px 描边 #颜色，当我组合所有线条时，将它的不透明度设为 20%：

最小轴线

对于基于你所期望呈现的数据或者时间关系的轴线，你能够放置你所希望的任何数字，就这样，请开开心心地制作图表吧！

慧都科技，具有十三年行业经验，专门专注于提供软件技术整体解决方案，并且致力于打造全球最大的软件技术一站式服务平台。

慧都控件｜帮助企业打造成功软件

慧都给出全球质量优良的控件产品，给出控件培训，进行项目定制开发，开展方案咨询，实施现场作业，承接项目外包，实施专业测试。

微信ID：

如有侵权请联系删除！