網上大神分享的設計套件到底該怎么用？今天這篇好文，作者不僅自己繪制了一整套完整的iOS 10設計套件（附Sketch 版源文件免費下載），還寫了一份超詳細的使用指南。文章適合有UI設計經驗的同學閱讀。

iOS 從零發展至今，風格發生了哪些變化：《超贊！每個設計師都應該了解的 iOS 編年史》

作者介紹

Taylor 從 13 歲起便開始自學網頁設計，iPhone 問世后開始接觸UI設計，因此是前端及設計雙棲的產品設計師。學生時期曾在 Yahoo 實習，其后分別在外商及中國臺灣新創公司帶領 Web、iOS、Android 設計團隊，及擔任UI、用戶體驗講師。

他的Facebook：https://fb.com/chihyueh.hu

前言

Apple 早先于 WWDC 2016 發表了 iOS 10，而 Sketch 也推出了第 39 版，其中包含了一系列令人興奮的新功能；我認為這對很多有意踏入 UI 設計的朋友來說是一個開始的機會，因為 iOS 10 引入了一系列新的設計語言（這部分后續會再寫文章分享看法），而 Sketch 的更新可以讓設計流程更加快速、順暢，結合這兩者，我覺得應該有機會做點什么事，來好好利用這個時機，幫助自己或是其他設計師進行設計。

經過了連續兩三周的熬夜苦干，終于做出第一版的 iOS UI 設計套件，本篇文章會大概介紹一下其中的特色，但請注意：這篇文有點進階，比較適合已經熟悉 Sketch 操作、對 UI 設計有經驗的同學。

下載設計套件：iOS 10 UI Kit for Sketch?

由于當老師當習慣了，改不了啰唆的本性：請不要使用盜版軟件，本套件都一直是用最新版本的 Sketch 制作，也就是說你用盜版（或舊版）有可能打不開；如果你不付費尊重程序的開發者，那么你也完全沒有資格要求別人尊重你做出來 der 設計。

另外提醒：iOS UI 的標準字體是蘋果親自設計的「SF」打開本檔案前先確保你已經裝好字體在計算機里了，沒有字體文件的話到這里下載：https://developer.apple.com/fonts/（需要蘋果開發者賬號）。

套件架構介紹

好了，啰唆完畢。下載打開套件以后，你會看到這些東西：

我一定要講的是，那堆鍵盤我他媽刻超久的，所以 iPad 版本的鍵盤請再等等，我還在努力制作中 ><

Anyway，你可以看到左邊有三個 Page：

1. Symbols 放的是套件的內部結構，沒事不建議你去動它
2. Component Usage 列出了套件的內容，使用時可從此處復制
3. Examples 放的是一些范例畫面，可以參考作圖技巧

頭兩頁前面加「-」減號是避免你上傳到 InVision 時它匯出多余的素材。

你也可以先到 Symbols 頁更新你的 App Icon 和你偏好的桌布背景，套件有用到它們的地方會自動換圖：

回到 Component Usage 頁面，你可以看到一些常用的 Tool Bar、Tab Bar icon 供你使用：

文字樣式也集合在一起了，從這里改的話可以方便地一次改變整份設計的文字樣式，最左邊那欄是 Apple 建議設計師使用的文字樣式表單（了解更多）：

Smart Resizing

Sketch 39 版最重要的功能可說是智能型縮放（sketchapp.coml）了，雖然 Sketch 自己內建的 iOS UI Design Template 也有利用這項功能，但實際使用上可能仍稍嫌不足（有些外掛也能夠達成一樣的縮放功能，但用外掛做圖就代表別人開了有可能壞掉，這部分看個人考慮）。

本套件很徹底地利用了這個新功能，大部分的 UI 零件都能夠自由縮放，例如 Navigation Bar 及 Tab Bar 使用在三種大小的 iPhone 上：

甚至是 iPad UI：

這邊另外提個進階知識，Tab Bar 我準備了「Compact」及「Regular」兩種版本，什么時候要用哪個請參考 Apple 官方對于 Size Class （https://developer.apple.com）的文件。但一般來說，iPhone 用 Compact、iPad 用 Regular（還是有例外，請自行研究啰！）。

iOS Split View

接著是最精彩的地方了，你可能有注意到，Navigation Bar 除了下方有做陰影分隔線以外，右邊也有：

這是因為有時候我們做 iPad UI 時，會請工程師使用 UISplitViewController 來實作左右分割畫面，如同內建的 Mail：

而 UI 設計套件里 Navigation Bar 右邊的線是為了讓你不用煩惱分隔線要怎么畫而事先準備的。右邊線是使用陰影制作，因此 Sketch 不會將之計算在零件的長寬里；也就是說，你把它用在 iPhone 的稿子里，只要 Navigation Bar等于畫板寬度，右邊線自然會被排出在畫板外，不必擔心你稿子右邊出現這條線。

好了，所以我們開始制作 Split View。首先我們在右邊再放上一條 Navigation Bar，圖層順序左在上、右在下，這樣左邊 Navigation Bar 的陰影會很自然迭在右邊那條的上面（見下圖）——由于 Sketch 不將陰影的寬度計算在物體內，因此貼邊接合時，是對齊物體本身邊界，而不是對齊陰影，真的很聰明呢！（我是說 Sketch，不是說我自己）

接著，Component Usage 頁面最左側，Popover 的上面有個圖層叫「View BG?—?Cool Grey」，我們把它復制過來，放在左邊 Navigation Bar 的下方做背景：

紅圈數字代表圖層順序，數字越小越頂層，這時候你可以放大看看三個組件的交界處：

線條完美呈現。

這時候我們已經完成 Split View 啦～

如果說到這邊你看不懂的話，有可能是你 UI 設計的基本功需要加強，或是對于 iOS UI 的細節觀察不夠。不過這也算是其實 UI 設計界的常態——職業進入門坎很低，但如果沒有開始了解工程實作原理、極端注重細節的話，會很難再往上爬；當然，本套件就算你完全忽略這些細節，還是可以用得很方便，我希望達成的是對一般設計師友善、但也能滿足較進階的設計需求。

當然，其他零件也大多可伸縮使用，例如 Alert 的位置不夠你打字上去時，拉長到足夠的長度再打字就可以了：

「本月最值得閱讀收藏的完美像素使用手冊」

1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
2. 《中文版來了！值得每個設計師收藏的《完美像素使用手冊》之細節篇》
3. 《第三集！值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
4. 《第四集！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》
5. 《最終版！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

原文地址：medium

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com