iOS開發的Sketch之旅

做爲一個iOS開發人員，我（原做者，下同）在沒有設計師的狀況下已作了幾個項目，不過我要告訴你---這可能很不容易！

 

不過從這些項目裏我學到了：就算你沒有設計師，不表明設計不重要---尤爲是在迭代的過程當中！

 

得認可，客戶不會總知道他們實際上想要什麼，若是無論三七二十一打開XCode直接敲碼，最後只會失望的發現有大量的「好代碼」要刪掉！那什麼纔是較理想一點的步驟呢？答案就是先迭代着把原型作出來！

 

問題又來了：沒有設計師，怎麼作設計呢？那，答案就 是Sketch啦！

 

Sketch是一個建logo和圖標的強大工具。它是以矢量圖爲基礎的，因此理論上你怎麼縮放你的圖都不會失真。由於它帶有iOS設備的Artboard（這裏統一叫「藝術板」，網上也不少這樣叫)並內置了UIKit的樣版，你能夠在迭代裏用Sketch來建模型。另外，它也是開發者很容易上手的一個工具。

 

在這個教程裏，你將學會：

 

1。用它的UIKIT樣版來建模型。

2。用它的矢量工具來建圖標。

3。經過組合基本的形狀來建圖標。

4。導出圖片到XCode的項目裏的assets裏。

 

這上面最讓人難已抗拒的是，做爲一個開發人員的你將依然很容易跟上這些內容，提升你的設計水平!

 

 

開始，

首先你要有Sketch,你能夠到官網www.sketchapp.com下載一個試用版，或者花99刀買個許可證。

而當你安裝好Sketch，在下面的各部分，我將爲你展開一個各類UI原素之旅，並讓你試作各類組件。固然你作的這些只是用於練習，事後你能夠把它們都刪掉！

讓咱們開始吧！

 

模版

這些iOS UI設計的模版是那些UIKit組件作成矢量格式後集中在一塊兒的，它裏面有Tab bar,Nav Bar,Table View等等。。。你能夠用這些作爲跳板來作模型。

試打開File\New From Tamplate\iOS UI Design，你將看到下面這樣的圖（依版本大同小異）：

 

能夠看到上面還有爲android開發UI的菜單項。

選了iOS UI Design後，你將看到一 個有各類iOS組件組成的大模版庫。你能夠在畫布上選定位置或點擊再拖放，或按着command再控制鼠標的轉輪來縮放。

 

藝術板

你能夠在Sketch的畫布的任何地方畫東西，但若是你要爲有多個頁面的應用作模型，你將會使用藝術板來畫。藝術板管理着各固定框裏的全部層。當你導出藝術板時，這些層將組合成一個單一的文件。這對應着View Controller場景裏的一個Storyboard.

試一下下面這些步驟來創建一個藝術板：

1。按下空格鍵，把上面打開的模板庫拖到一邊，在畫布上空出一些地方來。

2。點Insert按鈕而後在下拉菜單裏選Artboard。

3。在空白的地方畫上一個框，而後點選iPhone 6（版本不同，可選的不同，在4.0是iPhone7）。

 

如上圖，你將看到一個空的藝術板在上面，須要注意的是它默認會把它位置範圍內的元素都包進去。因此你要在空白的地方添加藝術板，你能夠在這畫布上加上你想要的多個或多種藝術板，包括iPhone,iPad或其餘任意大小的。。。

 

拷貝和粘貼

如今你建好藝術板後，能夠拖放一些樣板上去，開始加上Nav bar,Tab bar和Table View Cell等。

而後，你能夠⌘C 和 ⌘V來建新的元素，但這樣新建的元素的位置比較可貴到想要的效果，這時你能夠用Option鍵加拖放來作這個拷貝工做，這樣出來的新組件會放在你鬆開鼠標的位置。

 

 

 

基本的型狀

首先，Insert\Artboard並在畫布空白處畫四方形來建一個新的藝術板。

再點Insert\Shape，能夠看到一個可選的基本圖形列表。

 

在實踐中能夠用快捷鍵操做起來更方便。按O能夠用鼠標在屏幕上拖出一個圓，一樣用R能夠拖出一個四方形。。。如上面

L：線

O：圓

T：文本

R：四方形

看你可不能夠償試作出下面的機器人（提示，能夠經過改變字體設置來達到相同效果）。

 

 

創建圖形的樣式

這些基本圖形能夠作出不錯的效果，但達不到客戶的要求。你能夠經過在右邊的觀察窗口改變這些圖層的屬性，好比顏色和邊界半徑。這和XCode裏的Attributes Inspector很類似。

 

 

 

這裏有些選項將會用到：

Position/Size：當用鼠標拖放組件時，很難準肯定位，這時能夠經過輸入準確數字來達到目的。經過LOCK圖標來確保比例不變。

Radius：這用來調整四邊形的圓角的半徑。

Opacity：設置透明度。用來跟蹤圖片時頗有用。

Fills：用顏色拾取器來改變圖層的填充色，或者是去掉Fill上的多選框來用透明填充。

Borders：設置邊界的厚度和顏色，或者是取消邊界。

這裏有個小技巧：按下Control+C來爲當前的對象設置顏色。

 

這教程裏的兩個圖標用丸狀來當築建區，請你試試自已用四方形來作一個：

1。用R鍵作一個四方形。

2。設置它的邊角半徑爲100。

 

你也能夠試着改一些上面提到的屬性。

 

圖層列表

這左面板裏的圖層列表包含這文件裏全部的圖層。列表裏的圖層高層的可摺疊打開低層的，這有點象Storyboard裏的View層結構。

 

分組從邏輯上來管理層，你能夠把同一組的多個圖層看成一個組件來移動，也能夠把它們一塊兒導出到一個單一圖片文件裏。在圖層列表裏，分組至關於一個目錄圖標。

 

下面是一個管理圖層列表的經常使用快捷方式列表：

1。⌘G：將多個形狀合到一組，用⌘-Shift-G來取消分組。

2。⌘R：重命名當前組件，命名在整個過程當中都是很重要的，因此讓每一個名字有意義可區分。

3。⌘-Option-Up/Down：在列表裏把當前組件位置移上或下。

4。⌘-Shift-L:給一個圖層加鎖，從而不可再點擊。這在下面部份內容裏頗有用。

儘可能對你的模型裏的圖層分好組，並給好有意義可描述區分的名字。

 

矢量工具

畫圓，方形和線很過癮，但頗有限。不過用了矢量工具後，你能夠作出你想要的形狀。

 

直線組成的形狀

你能夠經過點擊來創建多邊形：你點擊的點將成這個形狀的拐角。

讓咱們來作一個多邊形：

1。按V來激活矢量工具。

2。開始點擊不規則四邊形的四個角。

3。以最後點擊開始的角所在點來結束。

4。點Edit按鈕，並拖動各個矢量點（角）來重定位這個形狀。

5。點選右邊的屬性欄裏Fills下的多選項，加填充色。

6。去掉邊界.

感恩的是，由於Sketch容許改變各個矢量點的位置，因此不須要很高的畫畫水平來使用它。鼠標在拖動時會瞬變成紅色來表示拖動。

 

旋轉拷貝

一個不規則四邊形可能不怎麼好看，不過你能夠用它旋轉拷貝來衍生出其餘圖形。這樣能夠產生多個沿圓圈放的拷貝，象是花瓣同樣。咱們試操做一下：

1。選Layer\Paths\Rotate Copies.

2。輸入要增長的拷貝數，好比3，這樣加上本體就有四份了。

3。拖動圓中心的白點，能夠產生好幾種圖形：銀行LOGO，手裏劍，轉輪。

 

Sketch自動將你的多個圖組合成一個，教程後面部分有說到。

 

剪刀

在Rotate Copies的上面有另外一菜單Scissors（剪刀），這有一個用它來建一個表活動環的小技巧：

1。建一個圓（記得用O鍵和按着SHIFT來拖出一個圓）。

2。去掉屬性裏的Fill。

3。所邊界的厚度改到25。

4。選Layer\Paths\Scissors。

5。在圓的左上方點擊，剪開這個圓。

6。在Borders這個屬性裏，點那設置圖標。

7。點選圓尾的選項。

 

 

注意這個圓只是一個由四個點的矢量路徑作出來的，而這矢量路徑能夠打開象一圓的弧線。

還有一小技巧就是你能夠在剪開以前先加一些點，來獲得不一樣長度或弧度的結果。

 

風格和手柄

你畫一個圓後再點選工具欄裏的修改按鈕能夠看出：Sketch用四個矢量點來表示一個圓。

不過等一下：一個四邊形也有四個點，那這有什麼不一樣呢？答案就是Bezier曲線。這是一種能夠經過調整控制點來使線彎曲而生成的線。Sketch叫這種控制點爲手柄(handles)。每一個矢量點有兩個手柄在兩邊。這表示曲線由它自己兩端的手柄決定它的彎曲狀況。這聽起來也許有點複雜，但你簡單的在它兩端拖動一下那些手柄後就發現操做很簡單。

Sketch根椐矢量點上兩個手柄的相對位置定義了四種風格（或樣式---MODE).

 

1。Straight：直線，手柄縮回到點裏面去了，就象沒有手柄同樣。這裏就是不彎曲，是直線。

2。Mirrored：對稱，這時手柄在同一條線上，長度同樣，但反方向。這時點兩邊的曲線也是對稱的。

3。Asymmetric：不對稱，這時和2不同的就是兩手柄長度不同。

4。Disconnnected：斷開，其實這時不要誤會兩手柄離得很遠，它們仍是在同一個矢量點上，只是二者沒更多的共性或關聯，主要是方向和長度沒什麼相關。

這你們實際操做體會一下。

 

Bezier曲線原理

你不用真的懂得Bezier曲線的原理，才能用這些矢量工具。不過用非數學知識的類比一下它是怎麼在屏幕上畫出來的，可能也有一些幫助。

想象在一個大滿慣的棒球賽裏，裁判不在看着，而衝壘的人快切入邊角位。把眼光放在紅路徑上。

 

左上：綠色的人奔向本壘。

右上：藍色的人追着綠色的。

左下：紅色的人追着藍色的。

右下：這樣，就是一條Bezier曲線。

一壘和本壘都是矢量點，第二和第三表示手柄，從一壘到本壘的路徑就是一Bezier曲線。

 

再說一下，你不用明白Bezier曲線是怎麼工做的，若是你真有興趣，你還能夠看一下Visualization tool(https://www.jasondavies.com/animated-bezier/)這個站點。

 

矢量手柄實戰

說夠了數學，咱們來一點實戰。用學的技巧建一個地圖標記：

1。建一個圓。

2。把圓的邊界寬度改成15。

3。點Edit按鈕，再選底部的矢量點。

4。改變手柄的風格：同對稱改成直線。

5。把下面這點再往下拖離。

6。把風格里的Corners滑動條拖到35，讓它看起來圓滑一點。

 

 

這圖就是一個改變一矢量點的拐角的圓，是否是很容易？

 

建一個用戶圖標

有了一個LOGO的想法時，很容易先用紙筆或網上圖片來起來原型，而後，你能夠用矢量工具沿圖（畫下的或網上的）描出圖標。

在這例子裏，你將重作出Ray Wenderlich的logo.

1。在網上拿一個低分版的logo,地址是：http://i1.wp.com/www.raywenderlich.com/wp-content/themes/raywenderlich/images/global/rw-logo_250.png

2。把這logo拖進Sketch。

3。選了這圖後，在右邊的屬性欄裏把Opacity改到20%，這樣好臨摹一些。

4。用Command-Shift-L把它鎖定了。（你會看到這圖層會有一把鎖）

5。輸入V來激活矢量工具。

6。在這圖上的全部轉角上點擊。你不用在R的曲線上點，只需在最後點擊開始時的那點，閉合這生成的矢量路徑。

7。雙擊這路徑上任何地方進入「修改」狀態。

8。把沒點對的標記點修正，必要時能夠放大來修改。

 

 

下面來生成R的曲線部分，這將讓你更好的理解矢量點的風格的用法。

1。雙擊左上方的拐角點，直線風格將改成對稱。

2。把它再改成斷開（Disconnected）。

3。把左邊的手柄收到矢量點裏去。（這裏的3，4點按動畫來講明，原做者文字的順序和動畫第3和4點是反過來的）。

4。把右邊的手柄往右調，把曲面撐大一些。

5。找到R曲線的另外一個矢量點，並雙擊。

6。象上面那樣，也是改成「斷開」風格，把朝下的手柄收到點裏，調另外一手柄讓線更似「R」，這時可能要在兩個矢量點之間來回調整，才達到你想要的效果。

 

比效好運的是，這圖只有一條曲線，你能夠用同樣的工具和方法，試作Swift的logo。以下面：

 

小技巧：能夠用TAB鍵來變更當前選的點。

 

複合形狀

不知你有沒有玩過一個Tangoes的遊戲，那裏可用塑料三角形組成一個免子的形狀。而上面，咱們學了用矢量工具作圖標，下面將進入將基本圖形複合成想要的圖形的階段。

在編程的時候，你會用到與，或，與或這些邏輯操做。Sketch也有相同的布爾操做，不過用了不用的術語：Union(聯合),Subtract(裁減),Intersect(交叉)和Difference(相異)。

 

聯合

聯合將形狀合在一塊兒。讓咱們聯合一個丸狀和圓成爲一個雲的圖標。

1。建一個四邊形，改變四邊形的直徑設置變成一個丸狀。

2。建一個圓。

3。移動這個圓蓋到丸狀上。

4。選了兩個圖再點「Union」按鈕。

 

注意兩個形狀是怎麼融在一塊兒的。

 

裁減

裁減用一個形狀剪去別一個來生成新的圖形。

咱們上面的地圖標看起來還不錯，不過如今潮人都放一個圓洞在裏面。你用了裁減後，也能夠作到一個同樣的。

1。建一個地圖標，不過此次確保Border沒有選上。

2。在旁邊建一個小圓，並拖到地圖標上。

3。在圖層列表，拖這個小圓的層到地圖標的層裏去。

4。展開新生成的合成層。

5。確保小圓的層在地圖標層的上面。

6。點擊小圓圖層的名字右邊的布爾操做的小圖標，出現了一個彈出菜單。

7。點選Subtract(裁減)。

8。選上這個新的小圓洞的子圖層，並用上下左右鍵來移它到最終的們置。

 

 

裁減是有點複雜，不過這例子仍是有一些概念可拙出來：

1。你能夠在圖層列表裏拖圖層來合併圖層，新生新圖層。

2。當你組合形狀時，Sketch學習着猜測你要用的操做。若是你選了None選項，它將自動選一個來操做，好比裁減，或者聯合。

3。對於裁減來講，順序是很重要的，若是你的圖在裁減中不見了，試着重排他們的順序。

 

填充 對比  輪廓

在教程的這部分，你將須要一個初學者例子文件（https://koenig-media.raywenderlich.com/uploads/2015/10/RWDevConArtboards.zip），請下載後打開。你將看到：

 

 

這初學者文件包括一頁模型和一些個性化的矢量圖---請隨意複習它們是怎麼作出來的。而後還有一些以前以後的藝術板，其中有幾個TAB BAR的圖標是在這部分用到的。

Tab Bar圖標會因選中的狀態不一樣顏色會有不一樣，而後有些圖標有好大的空白空間，因此顏色的改變只是很細微。在這狀況下，AHIG建議用分隔有填的圖標來作選中的圖標。這RWDevCon應用的模型既有填允版的也有輪廓版來作Tab bar圖標的。

 

在上面這個下載的Sketch項目文件裏，有一個藝術板叫Calendar Starter的，它包含有幾個積木塊用來組合到calendar圖標裏。這些積木塊只是一些你已知道怎麼作出來的四邊形或丸形等。

 

下面步驟搭建日曆圖標：

1。打開這個項目文件，展開圖層列表裏的Calendar Starter藝術板。

2。選上Calendar Body和Separator這兩個圖層。

3。按「裁減」操做。

4。按SHIFT點選Right Hole圖層，再把它從上面的圖形中裁減去。

5。一樣的操做Left Hole圖層。

6。按SHIFT點選Right Ring圖層並作「聯合」操做。

7。再用「聯合」把Left Ring圖層合併進來。

 

 

你最終獲得一個包含全部這些了圖層的一個日曆圖形。除了被裁減部分，其它部分都應該是綠色。若是你有什麼問題，能夠打我下載的版本，對比一下。

如今你有了一個填充版的圖標，下面咱們來一塊兒經過改變子圖層的大小作一個輪廓版的：

1。在畫布上找到Calendar Fill這個藝術板。

2。展開圖層列表裏的Calendar Fill這個藝術板。

3。展開Calendar Body這個圖層並選上Separator這圖層。

4。把Separator圖層的高度改到35。

 

這個輪廓版的日曆主要就是把分隔線改爲一個四方形。若是不能用拖拉達到你想要的高度，你能夠在屬性欄裏直接輸入數字來達到效果。

 

圓框住的頭像

這個RWDevCon應用模型有每一個演講者的圓形頭像。要想達到這種效果，你要Mask特性，這有點象「裁減」。不過和作一個洞不同的是，Mask（矇蔽）是把圈外面的內容去掉了。下面作這種頭像：

1。在圖層列表裏展開Greg Before藝術板。

2。在藝術板裏建一個足於蓋住他的臉那麼大的圓。

3。選上greg圖層和這個oval圖層。

4。確保這oval圖層在下面（這是做爲一個mask 圖層）。

5。點「Mask」按鈕。

6。展開第5步新建成的greg圖層，裏面有一個Mask圖層，點選它。

7。加上邊框，而後調整它的位置，使它剛纔框着頭像。

 

 

操做中請確保朦版(masking layer)圖層在下面，這是和以前部分的「裁減「相反的。

 

 

 

導出圖片

你能夠點南右下方的「Make Exportable」來讓單一個圖層變得能夠導出。

若是你想導出多個圖層，那就有多種方法來達到這結果：

1。分組：當各個圖層放到同一個分組裏，你能夠導出這個分組成爲一張圖片。

2。藝術板：全部在同一個藝術板裏的圖層能夠導出爲一張圖片。而圖片的大小爲藝術板決定。

 

在你導出前，檢查一下在屬性欄裏的寬和高。這些設置決定了你導出的1倍大的圖的大小。

 

小技巧：在改變圖層等大小時，不用右下角拖動，而用Scale按鈕。這樣作出來的縮放會讓邊界寬度和拐角半徑等保等不變的比例。

 

 

PNG

Sketch讓導出不一樣密度的圖片變得容易：

1。在右下放點」Make Exportable」。

2。點+按鈕加@2x的拷貝。

3。點+按鈕再加@3x的拷貝。

4。點Export按鈕而後保存PNG圖到本地。

 

 

PDF

你能夠已建立@2x和@3x的各版圖片，但Sketch是基於矢量的，因此能夠充分利用它。XCode接受pdf格式的矢量圖，它是包含有大小信息的SVG文件。

1。點「Make Exportable」。

2。保持只有@1x。

3。選PDF格式，而後導出。

 

你能夠把這個PDF文件導出Asset類別。

1。在XCode裏打開Images.xcassets。

2。建新的Image Set。

3。在屬性欄裏改Scale Factors的值Multiple爲Single Vector。

4。把你的PDF圖標拖進All這個圖標位裏。

 

XCode將在編譯生成的時候生成你須要的@2x和@3x文件。結果是同樣的，也是有相應的PNG文件，但這有個好處就是你要管理的文件就比較少。

 

學到這裏以後咱們還能夠怎麼樣？

這上面就是咱們這教程的所有，你能夠從下面這連接下載這個項目文件：

https://koenig-media.raywenderlich.com/uploads/2015/10/RWDevConArtboards.zip

 

Sketch很強大，除了這裏介紹到的功能，還有其餘不少功能。若是想學多一些能夠看官方文檔：

http://static-download.s3-website-us-east-1.amazonaws.com/manual.pdf

 

也能夠到網上看多一些博客或視頻。

 

最後，你也能夠下載下面這些圖標集或矢量圖，用到iOS設備上：

http://www.sketchappsources.com/category/icon.html

 

我但願你喜歡這個教程，歡迎你登入進來提問題，在下面一塊兒來討論。

 

（原貼出自https://www.raywenderlich.com/117609/sketch-indie-developers，而翻譯是我親自翻譯的，對原貼有什麼版權問題，請聯繫本人。而轉發這翻譯貼的，請標出原貼和本貼的出處，謝謝！）