給設計師的iOS Guideline筆記

Source: https://www.apple.com/

隨著iPhoneX更新，iOS Guideline也一併更新了，如雨後春筍般冒出很多分析(大神們太強大啦!)，趁這個機會把自己常用的表格更新，以後就能方便找到了:P

iOS Guideline spec

這裡的單位除了標示(px)外的皆使用pt，需乘以Resolution才是真正的px。

2017/9 Fan整理更新

iPhone6+系列

因為像素壓縮的關係，所以這邊列的是UI設計師實際上要開的畫板尺寸。

iPhone4, 5系列

螢幕比較小，直立/橫放時會微調Navigation bar的高度。

iPhoneX系列

(1) Tab bar跟Tool都加長(直接沿用背景色彩)，畫面切圖還是四方形，系統會自己切圓角。

(2) Safe area距離上方44pt，距離下方34pt，Margin在官方UIKit裡則大約是8pt，所以在安排內容時要盡量保持在最佳範圍內。

(3) 往上滑動的手勢用於Home indicator返回主畫面，不過如果真的需要，也是可以設定成先讀取應用自訂的功能，滑第二次才是返回。

(4) iPhone X 鍵盤高度增高為291pt，再加上預期字元區域為42pt。

Height of iPhoneX keyboard

Tab bar icon 直接引用官方的圖

Source: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/custom-icons/

Dynamic Type Sizes

下圖是預設的字體大小，以第一個為例 LargeTitle=Regular /字體大小 34pt / 行距(Leading)41pt /字寬(Tracking)11pt，Title3就是Button上的字體大小。

Source: https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

Source: http://www.designcabin.ca/design-101/

隨著Dynamic Type Sizes調整，字體大小也會更著變動。

Source: iOS 11 HIG

這裡可以直接下載官方的樣本

如果你用Sketch

直接Insert>Artboard，就可以找到你要的模板，非常方便

Sketch 的 Artboard 有內建常用的規格

如果你用Photoshop

文件類型>行動應用程式設計也可以找到常見的模板。可以看到內建的規格直接設72dpi，這是因為在PS裡面設解析度只會影響拉進去的圖(解析度高圖就會變得很小)，但不會影響切圖，所以用正確的px就可以了！

這篇文章拜讀的大神有這些

[design+code] https://designcode.io/iosdesign-guidelines

[UXabc] https://medium.com/uxabc

[iOS HIG] https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

[Ivo Mynttinen Design] https://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet

這篇就這樣！