Sketch绘制地铁线路图操作实例

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。用它怎么绘制一张地铁线路图呢？具体操作详情请往下看：

去年底的时候画过一张《深圳轨道交通线路图（2022 年）》，现在有点时间，打算简单讲解一下我的创作过程，使用的工具是 Sketch。这张图长这样：

一些细节：

今年的四期规划公示出来之后进行过一次调整，而在去年刚画的时候，它是这个样子的：

当然，即便是现在，这张图仍然存在着相当多的不完善之处，毕竟是规划路线，调整起来完全不会照顾你的感受。再者精力有限，所以去年画完之后停滞到现在基本没怎么更新。这里不讨论本线路图的具体内容，只说创作过程。

除了需要照顾频繁的规划调整，画成一幅地铁线路图还要有相当好的耐性：

比如画到一半，突然发现论坛里一个大神已经把整个珠三角的轨道交通规划全画在一张图上了，顿时受到 10000 点伤害。又画到一半，看到论坛里一个大神把全地球所有城市的轨道交通路线全画出来了，彻底崩溃。所以所谓好一点的耐性说的是，崩溃完之后，当做什么都没看见。

1. 前期准备

前期基本上是大量资料的收集，包括但不限于：

• 政府公开资料，尤其是规划公示以及《轨道交通建设规划环境影响报告书》
• 专业地铁论坛，荟萃了各路大神、新闻报道、业余制作的线路图
• 新闻检索、维基百科等
• 请你那些在规划部门或轨道交通建筑工地工作的朋友吃饭

对于创作规划线路图，你需要找的资料更多、更专业，需要对规划线路进行长期的关注，才能确保你手头的资料是最新、最准确的。

准备战斗，选择你的工具。

无外乎是需要在 Visio、Illustrator、Sketch 等矢量绘图软件中选择一个你顺手的工具。Visio 的问题在于花样太少，出不了更专业的图，而 Sketch 除了用着非常顺手以外，还有个好处就是可以用 Symbols 功能批量处理相同图层的样式。这里以 Sketch 做说明。

2. 绘制底图

建立一张足够大的画布，并设定一个等距的网格系统（我习惯用的设置是 50px 一格）。

因为觉得官方 VI 配色比较丑，我用 Google Material Design 的色盘取了相近色值。

现在的完成度基本上就是比较成型的底图了。

3. 绘制规划线路

在这两步里花费的时间足够玩好几盘《文明》系列，请做好心理准备。基本上，你需要对照靠谱的规划线路资料，一条一条地绘制规划线路。在绘制过程中，站点位置需要不断调整，才能符合实际的相对位置。有时候会因为一处站点的调整，牵扯到四五条线路的调整，好在只是将一个锚点移动到另一个网格上而已。

在绘制规划线路的时候，你可能需要对照地图、规划图和环评方案等资料比对站点的具体位置，再设定好锚点，以免相对位置出现不合理的偏差。这个过程与第 4 步中绘制站点是同步进行的。

绘制到规划线路的时候会开始出现一些难题，例如两条线路在某个区间内可能出现斜边并线的情况。我比较强迫症，所以在草稿本上用三角函数求了一下另一条线需要平移的像素值，然后在 Sketch 里面直接用 X / Y 值去定位平移锚点。实际效果看上去还是比较好的。

4. 绘制站点

我这张图里站点的颜值比较普通，就是一个圆圈而已。但这一步有一个取巧的过程，为每一条线的站点以及换乘站点设定 Shared Style，如果你不这么批量管理相同的元素，那么你想换个样式的时候会改到吐血。

接下来的站名，也是用类似的方式，Sketch 提供了一个很好的 Symbols 功能，通过设定一个基准文字模块，接下来只需要复用并设定这个文字模块的文案即可。

5. 绘制其他元素

先把铁路画进来，人家好歹也算是轨道交通。这个铁路的样式是这样处理的：先做一个实色描边的路径，复制一层，再虚线描边。