AI中适合做矢量图,也完全可以使用AI进行移动UI界面设计完全没有问题,但是现在移动开发中矢量文件的使用
还没有得到普及,使用矢量图形的一些问题还没有一套非常成熟简单的方法,因此现在大多移动应用还是使用位
图格式的图片,那么这就需要我们学会在AI中进行切图和标注尺寸
尺寸标注
对于移动UI界面的设计,用AI也非常的简单,首先再创建画板的时候单位使用像素,如果我们的目标机型是2倍率
的机型,那我们就将画布新建为 720 x 1280 px 大小 ,之后就正常作图即可
UI界面绘制完成之后,我们需要进行切图和尺寸标注,直接在AI中进行尺寸标注的话好像还没有更简单的方法,得
需要自己进行 pt 和 px 之间的换算,这也不是难事,也可以导入PS中或者使用一些专门的标注工具进行标注
切图
除了标注,就是切图,AI中切图比PS要方便的多,比如我们有如下的源文件
首先,要把背景隐藏掉,因为要确保背景是透明的。然后,选中一个按钮,执行菜单命令:
「对象」-›「切片」-›「用所选对象切片」 这个按钮就被切好了,同理也将第二个切出来


可以看到,我们根本没有做拉线、画框、对齐这些繁琐的步骤,仅仅花不到十秒,点击几下鼠标,AI 就基于
按钮的外观自动为我们切好了。这种方法特别适合于每个 UI 元素没有堆叠这样的情形
导出时,依然要使用「存储为 Web 所用格式」这个命令,然后按 Shift 选中两个按钮切片,导出选项选择
「选中的切片」

导出不同倍率的图片
由于在AI中做的图表都是矢量的,那么我们的切片也就能够进行倍率的缩放而不会有任何的问题,如何导出
不同倍率的图片也非常简单,只需要调节上图中的 百分比 ,我们的原始稿是720的,如果导出360的,就
将 百分比 设为 50% 导出就行了,非常的简单