2.1 核心概念（Core Concepts）

庫是設(shè)計師創(chuàng)建和管理顏色、漸變、圖形、圖像以及變量的地方。庫項目中的行為能夠用戶界面設(shè)計的需要。

例如，設(shè)計師能夠在不同的圖形中使用相同的顏色。然后，如果設(shè)計師調(diào)整顏色，所有使用該種顏色的圖形將會自動更新顏色。這同樣適用在漸變、陰影、圖像以及變量等方面。

這非常好用，因為設(shè)計師能夠很容易地改變設(shè)計師設(shè)計的用戶界面中的顏色，而且只在一個地方。

另外，一些庫項目能夠形成關(guān)系。例如，一個新的顏色能夠源于一個已經(jīng)存在的單一顏色，用過使用“built-in”運算方式。漸變和陰影也能夠繼承庫中其他項目地顏色。表達變量可以參考其他庫項目。

通過利用這種特點地優(yōu)勢，能夠基于一個或者多個基礎(chǔ)的顏色，定義顏色、漸變以及陰影的整個家族樹。

當設(shè)計師改變基礎(chǔ)顏色的時候，所有的庫項目和圖形都能夠基于基礎(chǔ)顏色，直接或者間接的自動更新。

例如，如果設(shè)計師設(shè)計了一組帶有色彩的用戶界面控制組建，設(shè)計師能夠從基礎(chǔ)的顏色，繼承所有必須的顏色、漸變和陰影。隨后，通過改變基礎(chǔ)的顏色，設(shè)計師能夠很容易改變設(shè)計師整個文檔的全部顏色體系。

命名（Naming）

每一個庫項目都有一個命名。PaintCode 為設(shè)計師自動生成了這些命名，但設(shè)計師能夠根據(jù)設(shè)計師的需要自己命名，為設(shè)計師的庫項目起更有意義的命名。這些名字也會被用于代碼生成。設(shè)計師能夠在設(shè)計師的命名中使用空格——在生成代碼中，PaintCode 會自動將“Button Base Color”轉(zhuǎn)成“buttonBaseColor”。PaintCode 不允許使用已經(jīng)在代碼生成中已經(jīng)使用過的命名，所以設(shè)計師不必擔心在生成源代碼中會有任何潛在的命名沖突。設(shè)計師可以通過在庫項目上雙擊，來為一個庫項目重命名。

庫的使用（Using the Library）

庫有5個部分組成：顏色、漸變、陰影、圖像以及變量。添加一個新的庫（例如，顏色），在相應的庫選項的頂部點擊“＋”按鈕就可以了。

移除庫項目，從庫項目列表中選擇項目并點擊，然后按“Delete”或者“Backspace”鍵就可以了。

調(diào)整已有的庫項目，在庫項目列表中雙擊項目，就可以調(diào)整了。或者，設(shè)計師在檢查器中點擊庫項目，之后在編輯框中調(diào)整。

復制和粘貼（Copy & Paste Behavior）

當設(shè)計師在文檔中復制和粘貼圖形的時候，所有的顏色、漸變、陰影和圖片也都會自動復制到目標文檔。如果目標文檔已經(jīng)包含了必須的庫項目，這些都會被重復使用。

配置庫項目表現(xiàn)為參數(shù)（Configuring Library Items to Behave as Parameters）

在每一個庫項目中“Name”文本域的右邊有一個特殊的彈出按鈕（彈出按鈕上有一個齒輪圖標）。

這里，設(shè)計師能夠配置庫項目表現(xiàn)。這對代碼生成很重要，就和使用符號一樣。

通過把改變行為的按鈕設(shè)置為“參數(shù)”，確保生每個畫布中成圖像方法，在庫項目使用中將有一個形參對應特定的庫項目。這允許設(shè)計師，例如，創(chuàng)建一個繪制方法，使用設(shè)計師制定運行的顏色繪制一個圖標。

如果設(shè)計師選擇“StyleKit”行為，庫項目將被自動添加到 StyleKit 中。

2.2 顏色（Colors）

在 PaintCode 中有三種類型的顏色：

系統(tǒng)顏色 – System colors

基礎(chǔ)顏色 – Basic colors（用戶自定義）

衍生顏色 – Derived colors（用戶自定義）

系統(tǒng)顏色有：黑色、白色、透明、紅色、綠色、藍色以及一些灰色的陰影。設(shè)計師不能自定義系統(tǒng)顏色，它們也不能展示在庫中。但是，設(shè)計師能夠通過把它們添加到庫中，創(chuàng)建設(shè)計師所屬的顏色。這在基礎(chǔ)顏色以及衍生顏色中同樣適用。

基礎(chǔ)顏色（Basic Color）

基礎(chǔ)顏色是一些簡單的顏色，而且不取決與其他任意顏色。設(shè)計師能夠隨時調(diào)整它。直接或者間接受到影響的圖形和庫項目（漸變，陰影……）也能夠相應的更新。

衍生顏色（Derived Color）

衍生顏色是一種能夠自動適應另一種顏色的顏色。它能夠從使用內(nèi)置顏色操作的父級顏色中衍生而來。

– 調(diào)整透明度

– 調(diào)整色調(diào)

– 調(diào)整明暗

– 調(diào)整飽和度

– 應用陰影

– 應用強光

– 復制

當父級顏色有所改變，會直接或者間接地使得其他演變顏色自動更新。這些在庫中展示地顏色以較明顯地等級被排序——延邊顏色是基礎(chǔ)顏色的孩子。

使用顏色（Using a color）

把顏色加進圖形中有三種方式。

第一種方式，在畫布中，設(shè)計師點擊并拖動連接點到圖形上，然后選擇設(shè)計師想要連接的顏色屬性。連接點會出現(xiàn)在庫中的顏色旁邊。如果所要連接的顏色并沒有在設(shè)計師的文檔中使用，就會顯示一個空的圓形。

另外一種方式，是在檢查其中設(shè)置邊框（stroke）或者填充（fill）屬性來完成，當相對應的顯示器是空的，這意味著相對應的屬性（邊框或填充）是未被設(shè)置的。當設(shè)計師點擊邊框或填充相對應的顯示器的時候，會出現(xiàn)一個與上下文相關(guān)的菜單，允許設(shè)計師選擇設(shè)計師想使用的顏色。這個菜單與設(shè)計師的庫相連，在上下文菜單的頂部包含一組系統(tǒng)默認顏色。

另外，想要在設(shè)計師的圖形中停止使用這個顏色，只需要在相對應的屬性顯示器中，點擊顯示器左邊的紫色帶“X”的圓形。（上圖Fill中所示）

第三種方式，通過從顏色彈出按鈕中選擇顏色使用。

所有的方式，設(shè)置的顏色是相同的，設(shè)計師應該選擇設(shè)計師覺得最方便的一種。

添加一個新顏色（Adding a new color）

有幾種方式添加一個新顏色：

• 在庫中的顏色列表的頂部，點擊“+”按鈕。
• 在顏色彈出菜單中，點擊“添加新顏色（Adding new color…）”菜單選項。在彈出按鈕中，用這種方式也能夠創(chuàng)建新顏色。
• 在檢查器的顯示器中通過“Command + Click”的方式也能夠添加新顏色。通過這種方式，一個顏色的副本將被添加到庫中。

當設(shè)計師在庫中添加顏色之后，顏色編輯菜單就會顯示。（注意，設(shè)計師也可以從另一個文檔中，通過復制和粘貼帶顏色圖形的方式添加顏色，也可以雙擊一個漸變控制。）

編輯顏色（Editing a color）

設(shè)計師可以在庫中雙擊來編輯顏色，也可以點擊檢查器的顯示器，彈出編輯顏色窗口。

文本域中顯示了顏色的名字。PaintCode 為設(shè)計師生成了這些名字，但設(shè)計師也可以給這些顏色重命名。

這里有“基礎(chǔ)”以及“衍生”兩種顏色類型。

基礎(chǔ)顏色的設(shè)置為“無”。對于基礎(chǔ)顏色，設(shè)計師只需要使用顏色選擇器選擇一個特定的顏色。設(shè)計師可以在不同的格式中中設(shè)置精確值，調(diào)整旋鈕，或者在右下角彈出框中使用放大鏡從屏幕上選擇任何顏色。

當設(shè)計師選定了基礎(chǔ)顏色，設(shè)計師也就得到了“衍生”顏色。對于衍生顏色，設(shè)計師必須制定所需的操作和數(shù)值。例如，設(shè)計師可以設(shè)置一個顏色和庫中已有的其他顏色相同，但透明度為50%。這是一個非常有用的功能。

當父級顏色變化的時候，衍生顏色也會隨之變化。

刪除顏色（Deleting a color）

當設(shè)計師想刪除在設(shè)計中使用的顏色時，刪除列表就出現(xiàn)了。刪除列表包含設(shè)計師所有的圖形以及其他庫項目，當設(shè)計師刪除顏色的時候，它們都將受到影響。

當刪除掉顏色后，所有相對應的圖形、漸變、陰影以及變量都將會被替換為默認顏色（紅色）。所有的刪除后的顏色都將直接變?yōu)榛A(chǔ)顏色，但在視覺上會保持一致。

使色彩表現(xiàn)變成生成代碼和符號中的參數(shù)（Making color behave as a parameter in generated code and in symbol）

要了解更多如何設(shè)置顏色和其他庫項目為參數(shù)，請閱讀庫項目行為（Library Item Behavior）章節(jié)。

2.3 漸變（Gradients）

漸變可用于填充矩形、橢圓、貝塞爾曲線、星星以及多邊形。PaintCode 支持多步漸變。設(shè)計師也可以選擇線性漸變（定義一個角度兩個點）或者環(huán)形漸變。漸變?nèi)Q于使用的顏色，當顏色有調(diào)整的時候，漸變也會隨之更新。

使用漸變（Using a gradient）

使用漸變，單擊并拖動漸變的連接點到一個畫布的圖形上：

或者，設(shè)計師可以簡單的在檢查器的顯示器中點擊一個空的瞄邊或者填充， 從上下文菜單中選擇一個漸變：

還可以通過，從填充彈出菜單來選擇漸變：

這個菜單會在庫的顏色以及漸變中自動彈出。

添加漸變（Adding a new gradient）

有兩種方式添加漸變：

• 點擊庫中漸變列表的頂部中的“+”按鈕
• 在填充彈出菜單中點擊“添加漸變（Add new gradient…）”按鈕

（注意，設(shè)計師也可以通過復制、粘貼其他文檔中已經(jīng)使用漸變的圖形，來添加漸變。）

編輯漸變（Editing a gradient）

設(shè)計師可以在庫中雙擊列表項來編輯漸變。

還有，設(shè)計師可以點擊檢查器中的漸變顯示器，它會彈出編輯框，來編輯漸變。

文本域中含有漸變的命名。PaintCode 為設(shè)計師生成了漸變命名，但是設(shè)計師可以重命名這些漸變命名。

彈窗中有一個特殊的漸變控制器，使用它，設(shè)計師能夠精確定位漸變中使用的任意顏色。

改變漸變的值（Changing gradient color value）

改變漸變中的顏色，點擊漸變控制器底部的彩色旋鈕。然后，從漸變控制器下面彈出的按鈕中選擇設(shè)計師想要的顏色。

從漸變設(shè)置中調(diào)整顏色（Adjusting color value conveniently from gradient popover）

有時，設(shè)計師需要調(diào)整漸變中陰影的顏色，設(shè)計師可以關(guān)閉漸變控制器，打開顏色控制器調(diào)整顏色，但這不是很方便。設(shè)計師可以通過顏色彈出按鈕右側(cè)、從漸變控制器的右側(cè)的顯示器，來調(diào)整基礎(chǔ)顏色。

通過漸變控制器添加新顏色（Adding a new color directly from gradient popover）

如果在漸變控制器中，設(shè)計師通過顏色顯示器視圖調(diào)整的顏色不是基礎(chǔ)顏色（例如，系統(tǒng)顏色或者衍生顏色），一個新的基礎(chǔ)顏色會自動替代原有的顏色。

調(diào)整漸變顏色位置（Adjusting gradient color position）

調(diào)整漸變顏色的位置，只需要拖動顏色旋鈕到所需的位置。移動旋鈕到預定的位置，在拖動的時候按住“Shift”鍵，預定義的位置就會被標記。

或者，設(shè)計師可以通過鍵盤上的“左”和“右”來調(diào)整顏色位置。

調(diào)整顏色之間的線性（Adjusting linearity between colors）

在漸變控制器中，通過拖動旋鈕的位置，它可以改變兩個相鄰顏色之間的漸變情況。

給漸變添加更多的顏色（Adding more colors to a gradient）

在漸變控制器中，設(shè)計師可以通過雙擊設(shè)計師想選取的位置，來給漸變添加更多的顏色。把黑色添加到漸變中，它很容易倍替換（在彈出按鈕中選擇其他顏色）或者調(diào)整。

從漸變中移除顏色（Removing color from a gradient）

在漸變控制器中選擇目標顏色旋鈕并按下“Delete”鍵，就能夠移除在漸變中的顏色。注意，這只適用于從漸變中移除顏色，而不是從庫中移除顏色。

線性漸變（Drawing linear gradients）

在檢查其中選擇填充的彈出菜單選擇漸變后，設(shè)計師可以選擇“角度（Angle）”漸變選項。

調(diào)整漸變的角度，設(shè)計師可以在文本域匯總直接輸入角度數(shù)值，或者使用角度滑桿控制。角度控制滑桿的默認值是45度。設(shè)計師可以按下并拖動控制點來調(diào)整角度。

如果設(shè)計師想指定開始和結(jié)束的漸變點，設(shè)計師可以通過選擇“2點（2 Points）”漸變選項。然后，一個兩點漸變編輯器就會在畫布中顯示出來。這個界面只有在設(shè)計師選擇兩點漸變填充的時候才會顯示，并且填充指示器也是打開的。

原型漸變（Drawing circular gradients）

選擇“圓形（Circular）”漸變，來繪制環(huán)形漸變。

當選擇之后，在畫布中環(huán)形漸變編輯界面也會自動顯示出來。這個界面只有在設(shè)計師選擇環(huán)形漸變的時候才會顯示。它包含兩個環(huán)，每一個代表一個環(huán)形漸變的“起始點”。

設(shè)計師可以拖動任意環(huán)形的中心到一個新的位置。此外，設(shè)計師還可以通過點擊環(huán)形直徑的任意地方并且拖動，來調(diào)整環(huán)形的大小。

默認情況下，兩個環(huán)形邊緣的直徑和中心點與編輯圖形的邊緣對齊。應對這種情況，按住“Control”鍵。

2.4 圖形（Shadows）

PaintCode 支持為填充、描邊以及文本設(shè)置陰影。對于填充和文本來說，還支持內(nèi)陰影。這些都是很有用的。陰影取決于它使用的顏色。如果這種顏色調(diào)整了，陰影也會相應的做出更新調(diào)整。

使用陰影（Using a shadow）

使用陰影，點擊并拖動陰影連點到畫布中的圖形上。

或者，設(shè)計師可以從檢查器中的陰影彈出按鈕中選擇陰影。

這些菜單會帶著陰影從庫中彈出。注意，填充和描邊的陰影是單獨設(shè)置的。填充和文本還支持內(nèi)陰影。

添加陰影（Adding a new shadow）

有兩種方式添加陰影：

• 在庫中的陰影列表頂部點擊“+”按鈕添加
• 在陰影彈出按鈕菜單中選擇“添加陰影（Adding new shadow…）”。也可以在彈出按鈕菜單中設(shè)置新建陰影。

在添加陰影后，一個陰影編輯器就會出來。有關(guān)編輯陰影的章節(jié)會在后面講述。

（注意，設(shè)計師可以通過從其他文檔中復制和粘貼已經(jīng)創(chuàng)建的帶有陰影的圖形，來添加陰影。）

編輯陰影（Editing a shadow）

設(shè)計師可以在庫中雙擊陰影來編輯，設(shè)計師還可以在檢查器彈出按鈕中的顏色編輯器來調(diào)整。

文本域中含有陰影的命名。PaintCode 生成了這些命名，當然設(shè)計師也可以為這些陰影重命名。

從彈出菜單中選擇顏色，來調(diào)整陰影的顏色。這里有幾條小竅門：

外陰影可以用來模擬光暈：

明亮的外陰影，加低模糊半徑以及負偏置用于模擬嵌入式用戶界面：

明亮的內(nèi)陰影，加低模糊半徑以及正偏置用于模擬毛玻璃感覺的用戶界面：

黑色內(nèi)陰影適合切口形的用戶界面：

2.5 圖像（Images）

當設(shè)計師要是用圖像的時候，有幾種情況。設(shè)計師可能想在設(shè)計師的設(shè)計中使用真實的照片，因此我們添加了圖像支持，能夠讓設(shè)計師在 PaintCode 中使用：

圖片庫選擇能夠讓設(shè)計師創(chuàng)建并管理圖片。設(shè)計師能夠提供 Retina 和 非Retina 兩種圖片。

導入圖片到文檔中最方便的方式是，在 Finder 中選擇圖片并拖動他們到庫選項中。PaintCode 會在導入過程中，自動適配Retina 和 非Retina 圖片。如果設(shè)計師不適用 @2x 的命名約定，PaintCode 甚至分析適配圖片中的內(nèi)容。

另外，設(shè)計師還可以通過以下方式導入圖片：

使用 文件／導入 按鈕

在圖片編輯器中選擇并拖動圖片到圖片顯示器

在圖片編輯器中雙擊圖片顯示器

使用圖片（Using an image）

圖形能夠被圖像填充，方法是單擊并拖動圖像連接點到畫布中的圖形上：

或者，當檢查器中的填充顯示器為空的時候，設(shè)計師可以點擊顯示器，彈出所有可用的填充的文本按鈕選項：

最后，可以在檢查器中選擇右側(cè)的填充，使用填充彈出按鈕：

?

圖片填充行為（Image Fill Behavior）

有 3 中圖形填充行為：

• 單獨
• 平鋪形狀
• 平鋪背景

此外，設(shè)計師還可以設(shè)置圖像 X 和 Y 的偏移值。

通常，非Retina 圖像能夠替代畫布中正在使用的圖像。然而，當設(shè)計師在 PaintCode 中打開 Retina 模式，Retina 就會被使用。生成代碼在這方面也非常普遍，在 Retina 和 非Retina的顯示器中（當然，除非設(shè)計師提供必要的圖像在設(shè)計師的項目中）。

所有倒入到 PaintCode 的圖像被存儲在 PaintCode 文件中，所以在設(shè)計師把 PaintCode 文件傳給其他設(shè)計師或開發(fā)人員的時候，設(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)載