如果有一個與Illustrator合作的方面，我真的不喜歡它將線條藝術轉換為移動或網絡的svg圖像。 使用“導出”>“導出為”菜單，並且為了保持誠實，“存儲為Web”功能 - “導出”>“另存為網頁”並不完全易於使用。
將圖形轉換為.svg格式打開了一個相當嚇人的對話框，對於新來這個工作流程的人來說，提供了一系列令人困惑的選項，更不用說事實上有很多.svg格式，只有其中一個是適當的格式。 一旦你習慣了這個工作流程，這沒什麼大不了的，但是學習曲線很陡峭。
這一切都隨新的導出屏幕功能 - 導出>導出屏幕 - 以及於2016年6月引入到Illustrator CC 2015的資產導出面板而改變。在本“說明”中，我將向您展示如何使用特徵。 讓我們開始吧。
01之04
如何在Adobe Illustrator CC 2015中訪問屏幕導出
從Illustrator 88開始就成為Illustrator用戶我認為您可以理解我不願意將Illustrator視為Web和移動界面和項目的嚴謹設計工具。
當在CS4版本2008中引入畫板時，我認為這是對應用程序的一個有趣補充。 當我第一次在Illustrator中看到現在已棄用的Save For Web功能時，我發現它很有趣，但是我發現Adobe Fireworks中的相同功能與Web圖形比Illustrator更加一致。
隨著移動優先設計方法的出現和對移動項目日益依賴SVG圖像的速度，Illustrator成為了SVG的“走向”工具，並成為UI Design工作流程中的重要一站。
不過，如果我需要為移動設備導出資產，Sketch 3和Photoshop CC 2015是我的首選工具。 插圖畫家在2016年6月進入了名單，其中包括真正漂亮的導出屏幕菜單。
在上面的例子中，我有兩個屏幕用於iPhone，它們位於名為“Home”和“Places”的單獨的畫板上。 要輸出它們，我選擇了文件>導出>導出為屏幕。 導出屏幕對話框打開。
04年02月
如何使用導出屏幕對話框
出現對話框時，點擊要選擇的每個畫板。 然後它會打出一個複選標記。 您也可以雙擊畫板的名稱來選擇它並進行更改。 如果您的畫板被命名為“畫板1”和“畫板2”，這是一件好事，坦率地說，它不會告訴你。
您在選擇區域有三個選擇：
- 全部：此選項將文檔中的每個畫板導出為單獨的文件。
- 範圍：輸入要導出的畫板範圍。 這對於具有幾十個畫板的項目特別有用。
- 完整文檔：選擇此項，所有畫板將被拼合成單個文檔。
“導出到”區域可讓您選擇輸出的目標文件夾。 默認文件夾將是Illustrator文檔的當前位置。
格式就是“魔法發生的地方”。 你會注意到有三個圖標 - iOS。 Android和Gear。 前兩個是不言自明的。 齒輪圖標打開格式設置，它允許您控制如何優化列表中的每個文件格式。 這些設置是“格式特定的”，一旦您進行了更改，請單擊“保存設置”按鈕，這些更改將應用於要輸出的格式。
一旦您選擇iOS或Android，列表將更改為包含該平台上的所有可用分辨率。 iOS列表將顯示Retina顯示屏的縮放因子 ，Android選擇的尺寸範圍從.75x到4x，幾乎適用於所有Android設備。
如果顯示要刪除的格式，請點擊“x”。 如果您想添加一個，請點擊+添加比例按鈕。
完成後，單擊“導出畫板”按鈕，當進程結束時，進度條會顯示出來。
03之04
使用Adobe Illustrator CC 2015中的屏幕導出文件。
當您查看導出屏幕的結果時，您會發現Illustrator輸出每個屏幕的展平版本。 從表面上看，這可能看起來有點弱，特別是如果你期望Illustrator將所有的零碎件都導出為圖像。
如果您退一步思考一下，這實際上正是您需要的，因為您可以在原型應用程序（如Adobe Experience Design ，Principleformac， Atomic.io ， UXPin或其他原型應用程序）中使用此輸出
在這個例子中，我使用Adobe Experience Design（XD）創建一個簡單的點擊。 該過程的第一步是選擇與Illustrator界面的尺寸相匹配的iPhone 6尺寸
當界面打開時，我選擇了Artboard工具並在粘貼板上單擊一次以添加另一個畫板。 然後我將它們命名為“Home”和“Places”，選擇每個畫板並將Illustrator中的png圖像導入到畫板中。
為了創建click-thru的“熱點”，我在主屏幕上的Explore按鈕上繪製了一個矩形，並通過在“屬性”面板中取消選擇這些屬性，將其填充和邊框值設置為none。 我使用“地點”頁面上的“後退”按鈕做了同樣的事情。
要添加交互性，我選擇了原型模式，然後單擊“熱點”。 然後，我將箭頭 - 稱為電線 - 拖到地點頁面，並將過渡目標設置在地點，向左推動的動作，緩和放鬆的過程以及過渡到.6秒的持續時間。
我在Places頁面上重複了這一步。 唯一的區別是Transition設置為右移。 當我點擊播放按鈕時，我測試了我的原型。
04年4月
如何在Adobe Illustrator CC 2015中使用導出資產面板
除了屏幕保存菜單之外，Adobe還添加了一個新面板 - 資產導出 - 消除了UI設計工作流程中的一個巨大難題。
痛點是圖標。 Illustrator是一個偉大的矢量繪圖應用程序，但輸出，讓我們說10個圖標，在一個頁面上有40或50個需要每個被保存為SVG圖像。 由於連續訪問SVG面板，這無疑需要比平時更多的時間。 這個痛點現在已成為過去。
這個新面板可以在窗口>資產導出中找到。 面板打開後，選擇要轉換為SVG或其他格式的資產並拖入面板。 釋放鼠標時，資產的縮略圖將添加到面板中。 命名資產。 繼續拖動對像到面板中，直到完成。
選擇每個項目在導出設置區域中，或者通過按住Shift鍵並單擊每個項目來全部選擇它們。 選擇你的格式 - 在這個例子中，我選擇了SVG-並點擊導出按鈕。 所選項目將作為SVG文件輸出到與Illustrator文件相同的位置。
在整個過程變得更加整潔的情況下，您不必使用“資產導出”面板。 如果單擊面板底部的保存屏幕按鈕，將打開對話框。
相反，您可以單擊Save for Screens面板中的Assets選項卡訪問Asset Export面板。 例如，如果在美工板上有一個自定義圖標，則可以在保存屏幕對話框中打開“資產導出”面板，然後將該項目拖到“資產導出”面板中。