使用選項(xiàng)卡（Working with Tabs）

設(shè)計(jì)師能夠使用選項(xiàng)卡管理正在設(shè)計(jì)的 PaintCode 文檔。每個(gè)選項(xiàng)卡包含多個(gè)正在設(shè)計(jì)的畫布。

第一個(gè)選項(xiàng)卡——稱為樣式表，它非常特別并且提供給設(shè)計(jì)師通向樣式表的目錄——一個(gè)集繪制、顏色、漸變以及其他設(shè)計(jì)資源的庫，設(shè)計(jì)師能夠輕易的導(dǎo)出單獨(dú)的 Objective-C，Swift 以及C# 的類。樣式表使設(shè)計(jì)師在項(xiàng)目中，集中生成代碼變得十分簡單。

管理選項(xiàng)卡（Managing Tabs）

單擊前一選項(xiàng)卡后面的 + 圖標(biāo)，就能夠添加一個(gè)新的選項(xiàng)卡。

把鼠標(biāo)懸停在選項(xiàng)卡上，就會(huì)出現(xiàn) X 圖標(biāo)，點(diǎn)擊它，就能夠移除一個(gè)選項(xiàng)卡。

設(shè)計(jì)師通過拖拽，能夠輕易的重新排列選項(xiàng)卡。

注意，樣式表選項(xiàng)卡總是在第一個(gè)，并且不能被移除或者重新排列。當(dāng)設(shè)計(jì)師的文檔中有許多選項(xiàng)卡，不能在選項(xiàng)卡類表中顯示的時(shí)候，這時(shí)候后面的選項(xiàng)卡就會(huì)顯示為 …。一個(gè)上下文菜單就會(huì)顯示出來，并把隱藏的選項(xiàng)卡列出來。

重命名選項(xiàng)卡（Renaming Tabs）

設(shè)計(jì)師可以通過雙擊選項(xiàng)卡來重命名。或者，設(shè)計(jì)師可以徐小所有畫布上的工作，在這種情況下，檢查器中會(huì)出示給設(shè)計(jì)師一個(gè)文本框，顯示正在編輯的選項(xiàng)卡的名字。

使用畫布（Working with Canvases?）

畫布是設(shè)計(jì)師用來創(chuàng)建設(shè)計(jì)的區(qū)域，每個(gè)畫布生成一個(gè)獨(dú)立的繪制方法。

移動(dòng)畫布（Moving Canvases）

單擊并拖動(dòng)畫布的標(biāo)題，就能夠在涉及區(qū)域中移動(dòng)畫布。每一個(gè)畫布的標(biāo)題先是在畫布的頂部，在中間位置。

調(diào)整畫布大小（Resizing Canvases）

首先，點(diǎn)擊畫布的標(biāo)題來選擇畫布。然后，設(shè)計(jì)師使用光標(biāo)拖拽畫布的邊緣來調(diào)整畫布大小。

或者，設(shè)計(jì)師可以在檢查器中設(shè)置畫布大小的數(shù)值。

添加畫布（Adding Canvases）

在 PaintCode 中，設(shè)計(jì)師在同一個(gè)選項(xiàng)卡中能夠擁有多個(gè)畫布。設(shè)計(jì)師通過菜單中的 畫布 ? 新建 ? 默認(rèn)，或者按 Shift + Command + N，新建畫布。

又或者，設(shè)計(jì)師能夠在選項(xiàng)卡空白區(qū)域，激活上下文菜單，然后選擇新建畫布：

移除畫布（Removing Canvases）

在工作區(qū)中單擊畫布的標(biāo)題，然后點(diǎn)擊 Delete 或者 Backspace，來移除畫布。

縮放畫布（Zooming the Canvas）

• 點(diǎn)擊 Command + +，放大畫布
• 點(diǎn)擊 Command + -，縮小畫布

或者，設(shè)計(jì)師能夠使用 Mac 的手觸板來縮放畫布?；蛘甙醋?Option 鍵不放，使用兩個(gè)手指滑動(dòng) Mac 的手觸板（或者是滾動(dòng)鼠標(biāo)滾軸）來縮放畫布。這種方法取決于鼠標(biāo)位置，因此設(shè)計(jì)師能夠?qū)Ξ嫴嫉娜我馕恢眠M(jìn)行縮放。

當(dāng)然，設(shè)計(jì)師還能夠使用中間工具欄中的縮放控制：

在畫布上移動(dòng)（Moving around the Canvas）

設(shè)計(jì)師能夠使用滾動(dòng)條或兩個(gè)手指滑動(dòng)，移動(dòng)畫布。還可以按住空格鍵并單擊和拖動(dòng)鼠標(biāo)來移動(dòng)畫布。

此外，還可以在畫布上使用預(yù)覽。如果點(diǎn)擊預(yù)覽圖上的一些點(diǎn)，畫布會(huì)自動(dòng)選擇以此為中心。此外，設(shè)計(jì)師能夠單擊并拖動(dòng)預(yù)覽來平滑的移動(dòng)畫布。

畫布顯示模式（Canvas Display Modes）

PaintCode 提供了三種不同的模式：

• 非視網(wǎng)膜模式（non-Retina mode）
• 視網(wǎng)膜模式（Retina mode）
• 無限模式（Infinite mode）

設(shè)計(jì)師可以在中間的工具欄中選擇這些模式。也可以使用 Option + D 快捷鍵，在這三種模式中進(jìn)行切換。

非視網(wǎng)膜模式顯示設(shè)計(jì)師的設(shè)計(jì)開起來和非視網(wǎng)膜模式顯示器（大多數(shù) Mac 下）很像。視網(wǎng)膜模式是雙倍密度。設(shè)計(jì)師的設(shè)計(jì)將在視網(wǎng)膜模式顯示器下展示（大多數(shù) iOS 設(shè)備下）。最后，無限精度模式下，預(yù)覽設(shè)計(jì)師的設(shè)計(jì)，不管放大多少，設(shè)計(jì)都不會(huì)失真。

畫布上顯示模式的重要性（On the importance of Canvas Display Modes）

在畫布上顯示模式，不會(huì)以任何方式影響生成的代碼。生成的代碼都是獨(dú)立的，在任何顯示器上都是完美的。PaintCode 設(shè)計(jì)這些模式主要是為了幫助設(shè)計(jì)師在設(shè)計(jì)過程中使用。

當(dāng)設(shè)計(jì)師調(diào)整設(shè)計(jì)為非視網(wǎng)膜模式像素網(wǎng)格，設(shè)計(jì)師能夠 100% 肯定，即便是在高像素密度的顯示器下，設(shè)計(jì)也會(huì)保持鋒利（對(duì)齊到像素網(wǎng)格）。另一方面，如果設(shè)計(jì)師使用視網(wǎng)膜模式或者無限模式，可能會(huì)出在視網(wǎng)膜顯示器下也比較清晰的設(shè)計(jì)，但在非視網(wǎng)膜設(shè)備上會(huì)是模糊的。

因此，設(shè)計(jì)師應(yīng)該使用非視網(wǎng)膜模式為默認(rèn)模式，只是偶爾切換到視網(wǎng)膜模式或者無限模式上，來檢查設(shè)計(jì)在高像素密度情況下的顯示情況就可以了。

畫布設(shè)置（Canvas Settings）

畫布設(shè)置（Canvas Setting）

點(diǎn)擊工作區(qū)中畫布的標(biāo)題，來設(shè)置畫布?；蛘?，在圖形和組瀏覽器中點(diǎn)擊畫布，也能夠開啟畫布設(shè)置。

在檢查器中將現(xiàn)實(shí)畫布設(shè)置各項(xiàng)：

命名畫布（Naming Canvas）

使用頂部的文本域，設(shè)計(jì)師能夠修改畫布的命名。新的命名作為生成繪圖方法的名稱，也能夠用在輸出畫布的圖像上。

調(diào)整畫布大小（Changing Canvas Size）

在相應(yīng)的文本域輸入所需要的尺寸，來調(diào)整畫布的大小?；蛘撸O(shè)計(jì)師也能夠通過拖動(dòng)工作區(qū)中的畫布邊緣調(diào)整畫布大小。注意，這在沒有選定畫布中的圖形情況下，此能適用。

調(diào)整樣式表設(shè)置（Changing StyleKit Setting）

適用樣式表彈出按鈕，設(shè)計(jì)師能夠調(diào)整畫布的樣式表代碼生成設(shè)置。最重要的事，設(shè)計(jì)師能夠選擇畫布，是否要生成代碼：

• 沒有任何方法
• 一個(gè)簡單（無效）的繪制方法
• 一個(gè)生成圖像的方法（UIImage 或者 NSImage）
• 以上兩者

當(dāng)設(shè)計(jì)師選擇畫布，并生成一個(gè)返回圖像的方法，當(dāng)設(shè)計(jì)師的目標(biāo)是 iOS 的時(shí)候，將出現(xiàn)更多的設(shè)置。這些設(shè)置允許設(shè)計(jì)師定義生成圖像的內(nèi)部設(shè)置以及（如果需要的話）圖像的渲染模式。

設(shè)計(jì)師也可以設(shè)置選擇器，這個(gè)選擇器是添加的 IBOutletCollection，并由圖像方法生成的。

調(diào)整畫布背景色（Changing Canvas background color）

單擊顏色窗口，來調(diào)整畫布背景色。注意畫布背景色并不和生成的源代碼相關(guān)聯(lián)。

還有，當(dāng)設(shè)計(jì)師導(dǎo)出圖像為 TIFF，PDF 或者 PNG 格式的時(shí)候，顏色才會(huì)被使用。想要把導(dǎo)出的圖像設(shè)置為透明背景，將畫布背景設(shè)置為無，或者在導(dǎo)出的時(shí)候關(guān)閉 導(dǎo)出背景 檢查項(xiàng)。

調(diào)整畫布背景圖像（Changing canvas background image）

首先，確保選中圖像顯示器復(fù)選框。然后，拖放所需要的圖像到圖像顯示器。還可以使用下方的空間來設(shè)置畫布的必經(jīng)圖像。

顯示／隱藏網(wǎng)格并調(diào)整網(wǎng)格顏色（Showing／Hiding the grid and changing its color）

在畫布設(shè)置中，使用 網(wǎng)格 復(fù)選框來控制 顯示／隱藏 畫布網(wǎng)格。或者使用 Option + G 快捷鍵組合。

PaintCode 自動(dòng)調(diào)整網(wǎng)格的顏色來適應(yīng)畫布背景色。設(shè)計(jì)師可以設(shè)置網(wǎng)格的顏色，單擊顏色編輯器就可以了。

畫布引導(dǎo)（Canvas Guides）

最后一項(xiàng)畫布設(shè)置允許設(shè)計(jì)師開啟一個(gè)正在建設(shè)的圖像的引導(dǎo)：

• iOS 7 圖標(biāo)網(wǎng)格布局引導(dǎo)
• 列布局引導(dǎo)
• 行布局引導(dǎo)
• 列和行的布局引導(dǎo)

圖標(biāo)網(wǎng)格（在 iOS 7 中介紹）在設(shè)計(jì) iOS 應(yīng)用程序圖標(biāo)的時(shí)候是非常有用的。

行和列布局引導(dǎo)，能夠讓設(shè)計(jì)師按照指定的列／行大小設(shè)計(jì)，并且能夠根據(jù)布局網(wǎng)格來方便的進(jìn)行復(fù)雜的設(shè)計(jì)。例如，這個(gè)網(wǎng)站就是使用 PaintCode 布局網(wǎng)格進(jìn)行設(shè)計(jì)的。

PaintCode 用戶操作指南系列文章

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

PaintCode 用戶操作指南（庫篇）

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

PaintCode 用戶操作指南（畫布和選項(xiàng)卡）

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

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

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

PaintCode 用戶操作指南（符號(hào)篇）

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

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