PaintCode是由來自斯洛伐克首都伯拉第斯拉瓦的PixelCut軟件公司推出的，一款面向iOS和Mac應(yīng)用開發(fā)者及設(shè)計師的矢量圖形可視化開發(fā)工具。通過PaintCode，即使是沒有編程經(jīng)驗的設(shè)計師也能繪制出精美的控件、圖標(biāo)及其他UI元素。而PaintCode最為顯著的一點就是能夠直接生成適用于iOS的Objective-C或Swift的代碼，節(jié)省了大量的編程時間，也正因如此，許多開發(fā)者將其稱為設(shè)計與開發(fā)通吃的代碼神器。

從解決“依賴”中釋放自己是一個巨大的進步，在一個生態(tài)系統(tǒng)之上，有效節(jié)省了團隊開發(fā)iOS應(yīng)用的時間，還解決了現(xiàn)在頭痛的事情。

概述（Overview）

PaintCode是一款矢量圖設(shè)計工具，能夠?qū)崟r將設(shè)計的圖轉(zhuǎn)化成Objective-C, Swift 或者 C# 語言圖像代碼。PaintCode界面分為工具欄（Toolbar）、選項卡（Tabs）、庫（Library）、畫布（Canvases）、代碼視圖（Code View）、瀏覽（Browser）、檢查器（Inspector）等幾個部分，能夠提供設(shè)計師想要的東西。

工具欄（Toolbar）

工具欄在界面的頂部，包含常用的設(shè)計工具。

選項卡和樣式表（Tabs & StyleKit）

選項卡欄在界面中間部分、工具欄的下方。設(shè)計師可以適用選項卡來管理設(shè)計師設(shè)計的 PaintCode 文檔。每一個選項卡可以包含多個繪制的畫布。

第一個選項卡（名字是“StyleKit”）非常特別，設(shè)計師能夠在這里看到設(shè)計師設(shè)計內(nèi)容的樣式目錄——設(shè)計師的設(shè)計列表、顏色、漸變以及其他設(shè)計元素。并且，設(shè)計師能夠很容易的將他們輸出為Objective-C、Swif t或者 C# 類。StyleKit 把集成設(shè)計代碼到設(shè)計師的項目中，變得十分簡單。

庫（Library）

庫（在界面的左邊）集中展示顏色、漸變、陰影、圖片以及變量。在設(shè)計師的文檔中，這些庫項目能被簡單地重復(fù)利用。庫項目都是與 PaintCode 關(guān)聯(lián)地實體，當(dāng)設(shè)計師改變庫項目，所有使用庫項目的設(shè)計都將立即發(fā)生變化。

畫布（Canvases）

在工具界面中間包含最近選中選項卡中的內(nèi)容。在這個區(qū)域中，設(shè)計師將看到一個或者多個畫布。

代碼視圖和中間工具欄（Code View & Middle Toolbar）

使用中間工具欄，可以切換代碼選中設(shè)置（例如目標(biāo)生成語言以及操作系統(tǒng)）。還可以改變畫布大小以及分辨率的設(shè)置（Retina，non-Retina 或者無限模式）。

代碼視圖在中間工具欄的下面，包含生成的代碼。設(shè)計師可以拖動中間工具欄來隱藏代碼視圖。這樣就能夠留出來更大的空間來繪制圖形，當(dāng)然，這樣也能夠在處理復(fù)雜的文檔的時候，改進界面展現(xiàn)。

圖形和組瀏覽（Shapes & Groups Browser）

圖形和組瀏覽在界面的右側(cè)，工具欄下方。在這里能夠看到當(dāng)前選擇畫布中的所有圖形。設(shè)計師可以看到所選擇的畫布在列表的底部。當(dāng)設(shè)計師選擇畫布的時候，設(shè)置就在下面的檢查其中顯示出來。

檢查器（Inspector）

檢查器在界面的右側(cè)，設(shè)計師可以通過檢查器，改變在畫布中設(shè)計師選擇的圖形或者選項的屬性。

PaintCode 用戶操作指南系列文章

PaintCode 用戶操作指南（概述篇）

PaintCode 用戶操作指南（庫篇）

PaintCode 用戶操作指南（繪制篇）

PaintCode 用戶操作指南（畫布和選項卡）

PaintCode 用戶操作指南（樣式表和代碼生成）

PaintCode 用戶操作指南（變量篇）

PaintCode 用戶操作指南（動態(tài)圖形篇）

PaintCode 用戶操作指南（符號篇）

文章已經(jīng)完結(jié)，敬請期待下一部《Sketch 3用戶操作指南及實戰(zhàn)案例全解》

本作品由人人都是產(chǎn)品經(jīng)理特邀專欄作家@鄭幾塊 翻譯并獨家授權(quán)發(fā)布，未經(jīng)許可禁止轉(zhuǎn)載