ILLUSTRATOR做UI设计

ILLUSTRATOR做UI设计

一、AI非常适合用于 UI 设计,主要原因：

1、AI 的强项在于对矢量图的处理。计算机里从无到有『生成』一张图像，通常矢量图创作软件更适合一些。特别是在 UI 设计、Web 设计领域，绝大多数时候并不需要结构和色彩非常复杂的图形。大多就是需要矩形、椭圆、圆角矩形这些很简单的几何形状。

2、很多设计师用 PS 做设计时要开着一个 AI，先用 AI 画基本形，然后把 AI 里的图形作为智能对象复制到 PS 里，然后用 PS 继续创作。在 AI 里，可以较为方便地完成从排版布局、绘制图形、上色、切图导出这样的全部一套流程，不必要中途换软件环境。

3、AI 提供的一系列功能极其适用于排版布局。在 PS 里，参考线只是横着竖着的直线；而在 AI 里，参考线可以是任何形状。

4、由于 AI 的创作主要是是基于矢量对象，所以在 AI 里，大多数操作都是可逆、可以在后期修改的。比如画一个按钮，可以很容易在后期调整按钮圆角的半径大小，同时保持按钮的图形样式不变。画一个六边形同样也可以加圆角，并在后期修改圆角大小。

5、AI 里基于矢量对象的吸附、对齐功能相当好用，且在 UI 设计中相当常用。 6、AI 做出来的东西可以导出到任意大尺寸，而不会有「虚边」情况。这一点特别适合用于设计不同分辨率的图标。

7、AI 在 CS5 就可以做到将矢量图形对齐到像素了，因此不用担心导出出来的切

1 / 27

图里，直线没有准确对上像素，因此带来发虚的情况。

8、AI 基于矢量对象的导出功能很好用，很适合用在 Web和UI 上。

由于 AI 有丰富的矢量效果（类似 PS 的滤镜和图层样式），因此 AI 退可做扁平，进可做拟物。

二、多重填充与多重描边

计算机图形（注意：非图像）的一些基本知识。计算机图形的最基本要素有两个：填充和描边。填充和描边可以是纯色，也可以是纹理，还可以是渐变。总之，一个形状确定了填充和描边后，这个图形的样式就确定下来了。

自然，作为矢量图绘制软件，AI 也可以处理图形的填充和描边。不过，AI 有一个很强大的地方是——在 AI 里，一个图形是可以有好几个填充和好几个描边的。实际上，这是一个相当实用且强大的功能。我们通过完成一个实例来看一下：使用 AI 绘制这样一个知乎样式的按钮：

首先，在新建文档之前，要确保 AI 使用的单位是像素，而不是英寸、点、厘米或别的。这一点很重要，关系到导出的切图是否为 pixel-perfect。在首选项里可以设置 AI

2 / 27

使用的单位是什么：

确保 AI 使用的单位是像素后，新建一个文档，文档的大小为 320 x 480 像素，颜色模式选为 RGB，并确认「使新建对象与像素网格对齐」没有被勾选上。如图：

3 / 27

在这里要说明一下，AI 在 CS5 开始，支持将对象对齐到像素网格，这一点在 UI 设计中很重要。不过为什么在新建文档时不把「使新建对象与像素网格对齐」选项勾上呢？

4 / 27

我在多次创作过程中发现，将对象一开始就对齐到像素网格，带来的麻烦远比带来的便利要多。并且，对齐到像素网格可以在后期时来做。因此，在这里先不要勾上。

一般来说，做 UI 设计、海报设计什么的，如果不是特殊的需要，最好不要使用纯黑、纯白、纯红（#FF0000)这样的颜色。一是因为纯黑与纯白这样的颜色之间造成的对比让人感觉很不舒服，二是自然界几乎没有看上去纯黑和纯白的物体，不符合人们的生活经验。因此，我们给背景加上一个浅灰的颜色。即看上去和白色差不多，但又不是纯白，而是稍微偏暗一些的颜色。在默认图层里新建一个矩形，覆盖整个画板，填充颜色设置为 #E6E6E6，去掉描边，将默认图层名称改为 Backgound，并锁定这个图层，防止以后误操作。做好之后，看上去应该是这样:

5 / 27

然后，开始画按钮了。我们希望在画面的正中位置附近画一个大小为 72×32 像素的圆角按钮。所以，新建一个图层，命名为”Button”。再新建一个矩形，然后把矩形的大小设置为 72x31。之所以将矩形的宽度设置为 31 而非 32，是因为接下来要给矩形画一个凹陷效果，这个要额外占用一个像素的高度，故设置为 31 而非 32 像素高。

由于人眼有视错觉，如果把按钮画在画板的正中心的话，人眼看上去感觉是在正中心偏下一些。因此，为平衡人眼的视错觉，按钮的位置要稍微高出正中心一些。把矩形按钮的正中心设置为 （160，209.5 ）处。将纵座标设置为一个小数的原因是，这样可以做到像素对齐。当然，如果用对齐到像素网格功能也可以做到。这两步完成后，矩形应该是这个位置（为方便查看位置，我把矩形换了一个填充颜色）：

6 / 27

7 / 27

接着，给矩形做圆角效果。选中矩形，然后使用「效果」-›「风格化」-›「圆角…」这个命令，给矩形加上一个 5 像素大小的圆角效果。加上后效果如图：

8 / 27

现在在「外观」面板里，可以看到「圆角」这个效果已经添加进去了。在接下来的步骤中，要始终保持「圆角」在最上方：

再给按钮换一个底色，颜色是 #8CE01E。接下来，要进入重头戏了。点击「外观」面板下的「添加新填色」按钮（即 “fx” 按钮左边的那个），再新建一个填色层，颜色为纯白到纯黑的渐变，方向是从上到下，透明度为 20%，混合模式为「明度」。完成后画板和外观面板看起来应该类似这样：

9 / 27

10 / 27

这样，可以看到，通过一个底色填色层，和一个明暗渐变填色层，我们成功地做出了色彩明暗渐变效果。这，就是多重填充的应用之一。另外再解释一下，混合模式选择「明度」的意思是，取下层对象的色相和饱和度，取上层对象的明度（亮度）作为最终颜色输出。因此，这样可以做出一个颜色只在明度上的渐变，而不会影响色相和饱和度。

给矩形的描边设置为一个像素，颜色为 #7F7F7F 描边。这样，按钮的基本描边就做出来了。不过却有一个问题：打开像素预览，会发现描边是虚的：

11 / 27

出现这个情况的原因是描边没有对齐到像素网格，而是被夹在两条像素的正中。并且，这个图形加上描边后，大小超出了预定的 72×32 大小。解决这个问题的办法是，将描边对齐方式设置为「使描边内侧对齐」。设置好后，描边就清晰了。现在的图形和外观面板看上去应该是这样：

12 / 27

接下来，再新建一个描边，颜色设置为纯白，依然是内侧对齐，透明度为 50%。并在外观面板里，把这个描边置于灰色描边的下方，如图：

13 / 27

到这一步时，按钮看上去没有什么变化。不过接下来，就是见证奇迹的时刻了。给半透明白色描边加上一个「变换」效果，「移动」参数设置为 1 像素：

14 / 27

这一步后，按钮就画好了，有高光，且模拟了下凹效果：

此时的外观面板应如图所示：

15 / 27

按钮画好了，接下来，说说这样做有什么好处。

首先，这个按钮本身只用了一个图层，并且只是一个矢量对象，保持了文件的整洁。不信，可以看看「图层」面板，只有按钮和背景两个图层。

到此为止，按钮的大小正好是预定的 72×32 像素大小，且是像素精确的：

然后，如果我不满意按钮的大小的话，我可以随意调整，而不用担心渐变和圆角大小什么的也跟着变动。如图，虽然按钮大小变大了，但边缘依旧是 1 像素粗细，且圆角依然是 5 像素大小，渐变也没变：

16 / 27

要是不满意圆角的大小的话，也可以随意调整，不必担心其他的也跟着变：

把按钮换个颜色？简单，把最下面的填色层换一个颜色就可以了，其他的都不用改，渐变什么的依然在：

17 / 27

三、图片输出

现在，这个界面设计好了，问题出来了，如何导出成 iOS 或 Web 前端工程师可以用的界面？在这一节教程里，就说说 AI 基于矢量对象强大的切图、导出功能。

18 / 27

1. 导出界面设计图

如果要是想导出整个界面设计图的话，那很好说。AI 有两个关于导出的命令，一个就叫「导出」，另一个叫「存储为 Web 所用格式」。在这里要使用后者。因为只有「存储为 Web 所用格式」才能保证导出的文件是像素精确的。在执行这个命令之前，确保设计图上所希望显示的东西都没有被隐藏掉。然后执行命令，格式选择 PNG，点击「存储」按钮就可以导出整个设计图了。

一般来说，做 UI 设计导出成品，格式除了 PNG 以外基本没有其他的选择。BMP 太大了，微软自己都基本不用了。用 JPG 图片的锐边、线条等部分（学名称之为图像的高频分量）会因为有损压缩而须掉。只有 PNG 在保证文件大小不会太大的同时，仍然为无损格式，这一点对 pixel-perfect 要求较高的 UI 设计是至关重要的。并且 PNG 还有一个好处：PNG 支持半透明。所以说，如果没有特殊要求的话，导出应一律为 PNG 格式。为 iOS 做设计的话，UI 资源，包括切图、主屏幕图标、启动画面等等应全部使用 PNG 格式。

导出后查看图像，可以看到图像的大小就是我们预定的 320×480 像素大小，且按钮做到了像素精确，边缘没有糊掉：

19 / 27

2. 导出每一个 UI 元素

在正式聊这个话题之前，为方便说明，我们再放上去一个按钮。选中按钮，复制一下，新建一个新图层，把这个按钮粘贴到新图层里去。再根据上一节课所学的办法，把按钮的底色改成灰色。改好后差不多应该是这个样子：

20 / 27

现在的任务是，分别导出两个按钮的切图，供前端工程师使用。 对此，主要有以下几种方法: 1．方法一，不必动用切图工具。

这样做：首先，隐藏掉欲导出按钮之外其他的任何图层或矢量对象，确保画板上只有欲导出按钮是可见的。然后，依然使用「存储为 Web 所用格式」，但是在弹出的选项对话框里，去掉「剪切到画板」这个勾选。可以看到，「奇迹发生了」，AI 自动把导出文件的尺寸设置为了按钮大小，一点不多也一点不少：

点击「存储」导出，查看之，可以看到导出的大小确实就是我们想要的，圆角边缘是半透明的，凹陷什么的也在，并且是像素精确的：

21 / 27

导出灰色的按钮也同理，隐藏掉除灰色按钮之外的所有东西，然后使用「存储为 Web 所用格式」命令就可以了。

不过，显而易见的是，这种方法有一个缺点。如果要是做一个类似登录界面那样比较简单的界面还好，但如果要是做一个复杂的界面，那么要一直反复隐藏显示图层、对象什么的，特别麻烦。

22 / 27

2．方法二，也是 AI 切图导出的终极大招。

首先，还是要把背景隐藏掉，因为要确保背景是透明的。然后，选中一个按钮，执行菜单命令：「对象」-›「切片」-›「用所选对象切片」。这个按钮就被切好了：

23 / 27

可以看到，我们根本没有做拉线、画框、对齐这些繁琐的步骤，仅仅花不到十秒，点击几下鼠标，AI 就基于按钮的外观自动为我们切好了。这种方法特别适合于每个 UI 元素没有堆叠这样的情形。对于灰色的按钮同理，再点击几下鼠标，又切好了一个：

24 / 27

导出时，依然要使用「存储为 Web 所用格式」这个命令，然后按 Shift 选中两个按钮切片，导出选项选择「选中的切片」，如图：

这样，就可以干干净净地导出所有图稿中的 UI 切片了：

25 / 27

可以看到，这种方法导出效率极高。不过，如果要是矢量对象很多的话，可能每次要点击几下还是有些繁琐。

其实，还可以有更偷懒的办法。有人会想，直接用快捷键不就省掉几下点鼠标了吗？可惜的是，AI 并没有给这个极其实用的命令分配一个快捷键。但我们可以让它有快捷键。方法是使用 AI 的动作功能，把这个命令单独保存为一个动作，以后每次只要按下快捷键即可执行了，进一步增加工作效率，减少痛苦：

如何创建和使用动作呢？方法同PS。

3. 适配 Retina 屏幕

做 iOS UI 设计的人都知道，一般来说，要为 UI 准备两套切图资源。一套为普通分辨率的，适配于 iPhone 3GS，iPad 2 等老机子。另一套是 Retina 版，即切图大小长宽分别为原来两倍，使在同样面积下的 UI 元素显示更加精致，适配于 iPhone 4、iPad 3 等较新的机器。在 AI 里，如果为 Retina 屏幕做适配的话，也挺简单的。导出时缩放设置为 200% 即可：

26 / 27

4. 导出为 SVG 格式文件

SVG 格式不同于 PNG 和 JPG 等格式。SVG 是基于 XML 的矢量图形。优势是可以随意缩放。因此，比较适合以此做 Retina Web 适配。AI 自然可以导出基于 SVG 的矢量格式。不过，我没有找到比较简单的切图方法。所以，最好是将设计稿的每个图形元素分别复制到新的文稿里保存。保存时，把按钮移动到左上角，然后选择「保存」/「另存为」/「存储副本」，格式选择 SVG 或 SVGZ （SVG 的压缩版），即可。

27 / 27