如何使用 iOS 10 UI Kit

2017.8 更新:

我們已經將本文提及的 iOS 10 UI 設計套件全面更新,以符合 iOS 11 的新設計,也利用了 Sketch 的一些新功能。因此文內提及的某些細節可能已經與新套件不同,我們會再發表文章來介紹,前往下載:http://guikit.design


前言

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

經過了連續兩三週的熬夜苦幹,終於做出第一版的 iOS UI 設計套件,本篇文章會大概介紹一下其中的特色,但請注意:這篇文有點進階,比較適合已經熟悉 Sketch 操作、對 UI 設計有經驗的同學,如果你是沒有基礎的朋友,我也有開課教學,可以捲到最下方看看相關的資訊。

下載設計套件

iOS 10 UI Kit for Sketch 下載連結:
http://guikit.design

開始使用

本套件都一直是用最新版本的 Sketch 製作,也就是說你用舊版(或盜版)有可能會打不開。

另外提醒:iOS UI 的標準字體是蘋果親自設計的「SF」(我開的課程 FB 有介紹),打開本檔案前先確保你已經裝好字體在電腦裡了,沒有字體檔的話到這裡下載

https://developer.apple.com/fonts/

套件架構介紹

好了,下載打開套件以後,你會看到這些東西:

一定要講的是,那堆鍵盤花了超久的時間製作啊!

總之,你可以看到左邊有三個 Page:

  • Symbols 放的是套件的內部結構,沒事不建議你去動它
  • Component Usage 列出了套件的內容,使用時可從此處複製
  • Examples 放的是一些範例畫面,可以參考作圖技巧

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

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

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

文字樣式也集合在一起了,從這裡改的話可以方便地一次改變整份設計的文字樣式,最左邊那欄是 Apple 建議設計師使用的文字樣式表:


Smart Resizing

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

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

甚至是 iPad UI:

這邊另外提個進階知識,Tab Bar 準備了「Compact」及「Regular」兩種版本,什麼時候要用哪個請參考 Apple 官方對於 Size Class 的文件。但一般來說,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 不將陰影的寬度計算在物體內,因此貼邊接合時,是對齊物體本身邊界,而不是對齊陰影。

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

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

線條完美呈現。

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

當然,本套件就算你完全忽略這些細節,還是可以用得很方便,我希望達成的是對一般設計師友善、但也能滿足較進階的設計需求。


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


好了,一些套件的特色在這邊算是做個簡單介紹,如果閱讀本文的你是 UI 設計的初學者,我們也提供教學課程喔,可以參考看看:

課程網站(課程的詳細介紹)
https://www.uxabc.tw

課程 FB(最新消息到這看)
https://www.facebook.com/UXabcDesign/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.