如果使用Illustrator的一个方面我真的不喜欢它将线条艺术转换为移动或网络的svg图像。使用“导出”>“导出为”菜单，并且说实话，“保存为Web”功能 - “导出”>“存储为Web” - 并不是很容易使用。
将绘图转换为.svg格式打开了一个相当令人生畏的对话框，对于刚接触此工作流程的人来说，提供了一系列令人困惑的选项，更不用说有一些.svg格式的事实，其中只有一个是正确的格式。一旦你习惯了这个工作流程，这没什么大不了的，但学习曲线很陡峭。
这一切都随着新的导出屏幕功能 - 导出>屏幕导出 - 以及2016年6月引入Illustrator CC 2015的资产导出面板而改变。在此“如何”中我将向您展示如何使用这两者特征。让我们开始吧。
04年01月
如何在Adobe Illustrator CC 2015中访问屏幕导出
自Illustrator 88以来一直是Illustrator用户我认为您可以理解我不愿将Illustrator视为Web和移动界面和项目的重要设计工具。
当在CS4版本2008中引入画板时，我认为这是该应用程序的一个有趣的补充。当我第一次看到Illustrator中现已弃用的Save For Web功能时，我发现它很有趣，但我发现Adobe Fireworks中的相同功能与网页图形比Illustrator更加一致。
随着移动优先设计方法的出现以及对移动项目越来越依赖SVG图像，Illustrator是我的“转向”SVG工具，并成为UI设计工作流程中的重要一站。
不过，如果我需要为移动设备导出资产，Sketch 3和Photoshop CC 2015是我的首选工具。 Illustrator在2016年6月进入了列表，其中包含非常漂亮的Export for Screens菜单。
在上面的示例中，我有两个用于iPhone的屏幕，它们位于名为“Home”和“Places”的单独画板上。为了输出它们，我选择了文件>导出>导出屏幕。将打开“导出屏幕”对话框。
04年02月如何使用“导出屏幕”对话框
出现对话框时，单击要选择的每个画板。然后它将带有复选标记。您也可以双击画板名称将其选中并进行更改。如果您的画板被命名为“画板1”和“画板2”，这是一件好事，坦率地说，它没有告诉你什么。
选择区域有三个选项：
- 所有： 此选项将文档中的每个画板导出为单独的文件。
- 范围： 输入要导出的画板范围。这对于拥有几十个画板的项目尤其有用。
- 完整文件： 选择此选项，所有画板将展平为一个文档。
“导出到”区域允许您选择输出的目标文件夹。默认文件夹将是Illustrator文档的当前位置。
格式是“魔术发生的地方。您会注意到有三个图标 - iOS。 Android和一个Gear。前两个是不言自明的。 “齿轮”图标将打开“格式设置”，允许您控制列表中每种文件格式的优化方式。这些设置是“特定格式的”，一旦您进行了更改，请单击“保存设置”按钮，这些更改将应用于要输出的格式。
选择iOS或Android后，列表将更改为包含该平台上可用的所有分辨率。 iOS列表将显示Retina显示屏的缩放因子，Android选择将具有从.75x到4x的范围，几乎适用于所有Android设备。
如果显示要删除的格式，请单击“x”。如果您要添加一个，请单击+添加比例按钮。
完成后，单击“导出画板”按钮，进度条将显示该过程何时完成。
03年3月使用Adobe Illustrator CC 2015中的屏幕文件导出。
当您查看“导出为屏幕”的结果时，您会发现Illustrator已输出每个屏幕的展平版本。从表面上看，这可能看起来有点弱，特别是如果您期望Illustrator将所有的碎片导出为图像。
如果你退一步考虑一下，这实际上就是你需要的，因为你可以在原型应用程序中使用这个输出，例如Adobe Experience Design，Principleformac，Atomic.io，UXPin或其他原型设计应用程序
在此示例中，我使用Adobe Experience Design（XD）创建一个简单的click-thru。该过程的第一步是选择与Illustrator界面尺寸相匹配的iPhone 6尺寸
界面打开后，我选择了画板工具并在粘贴板上单击一次以添加另一个画板。然后我将它们命名为“Home”和“Places”，选择每个画板并将Illustrator中的png图像导入画板。
要为click-thru创建“热点”，我在主屏幕上的“浏览”按钮上绘制了一个矩形，并通过在“属性”面板中取消选择这些属性将其填充和边框值设置为无。我在“地点”页面上的“后退”按钮上做了同样的事情。
为了添加Interactivity，我选择了Prototype模式，然后点击了“hotspot”。然后我将箭头（称为导线）拖到“位置”页面，并将“过渡”目标设置为“位置”，将“向左推”的动作设置为“缓和”，将过渡的持续时间设置为.6秒。
我在“地点”页面上使用热点重复了此步骤。唯一的区别是Transition被设置为Push Right。当我点击“播放”按钮时，我测试了我的原型。
04年04月如何在Adobe Illustrator CC 2015中使用导出资产面板
除了“保存屏幕”菜单，Adobe还添加了一个新面板 - 资产导出 - 消除了UI设计工作流程中的巨大痛点。
痛点是图标。 Illustrator是一个伟大的矢量绘图应用程序，但要输出，比如10个图标，在需要40或50个页面的页面上，每个图标都保存为SVG图像。由于连续前往SVG面板，这不可避免地需要比平时更多的时间。这个痛点现在已成为过去。
可在Window> Asset Export中找到此新面板。面板打开后，选择要转换为SVG或其他格式的资产并拖动到面板中。释放鼠标时，会将资产的缩略图添加到面板中。命名资产。继续将对象拖动到面板中，直到完成为止。
选择每个项目在“导出设置”区域中，或者通过按住Shift键并单击每个项目来全选。选择您的格式 - 在本例中，我选择了SVG-并单击“导出”按钮。所选项目将作为SVG文件输出到与Illustrator文件相同的位置。
如果整个过程变得更整洁，您就不必使用“资产导出”面板。如果单击面板底部的“保存屏幕”按钮，则会打开对话框。
相反，您可以单击“保存为屏幕”面板中的“资源”选项卡以访问“资产导出”面板。例如，如果在画板上有自定义图标，则可以在“保存为屏幕”对话框中打开“资源导出”面板，然后将该项目拖动到“资源导出”面板中。
