作為一個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圖到本地。
你可以已建立@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，而翻譯是我親自翻譯的，對原貼有什麼版權問題，請聯系本人。而轉發這翻譯貼的，請标出原貼和本貼的出處，謝謝！）
轉載于:https://www.cnblogs.com/martInyyh/p/7099479.html