iPad互動設計探索系列:iPad介面設計尺寸規範
久違的iPad互動設計探索系列又迴歸了,這次帶來的是介面設計尺寸規範,動手為iPad繪製原型之前,不知道iPad介面的設計尺寸可不行。
前情提要:
《 ofollow,noindex">iPad互動設計探索系列:iPad適用產品篇 》

1.iPad裝置尺寸及解析度
截止2018年8月為止,iPad在售機型有12.9英寸iPad Pro、10.5英寸iPad Pro、iPad、iPad mini4一共4款,歷史售出的iPad1、iPad2、iPad Air、iPad mini2等機型也集中在9.7和7.9英寸這兩種裝置尺寸,唯一區別是新款iPad都用上了視網膜顯示屏,也就是Retina顯示屏,解析度相比舊款iPad而言會更大。解析度的大小會對介面尺寸、圖示尺寸產生影響,但一般可以通過輸出不同倍數的設計稿來解決適配的問題。

現行4款機型的解析度如下表所示,一般來說,我們可以用pt的尺寸作設計圖,然後輸出倍圖滿足不同裝置解析度的尺寸要求。舉個例子,在Sketch中,可以使用768*1024這個尺寸作圖,然後輸出2倍圖,即可輸出iPad mini和iPad的設計稿。至於iPad Pro的適配,就是另外一個話題了,有時間再另開一篇專門細寫關於適配的說明文。

2.iPad介面設計尺寸
相比iPhone,iPad擁有更大的介面,特別是12.9英寸的iPad,和13.3英寸的電腦對比也不逞多讓,所以,在iPad上進行設計,會更側重內容的呈現,互動次之,視覺最末。另外,在做互動設計時,也需要掌握iPad介面的設計尺寸規範,儘可能往真實的設計尺寸上靠攏,否則輸出的稿子會被視覺毒打,因為可能要展示的內容完全超出了iPad規定的範疇。參考Sketch的畫板預設,我們會建議用一倍圖進行設計,然後根據解析度適配,輸出多倍圖。那麼具體的尺寸如何定呢?請往下看。
iPad介面主要由狀態列、導航欄和標籤欄組成,以iPad的豎屏尺寸為例,其高度為768pt,寬度為1024pt,則狀態列(Status Bar)高度為20pt,導航條(Nav Bar)高度為44pt,標籤欄(Tab Bar)高度為49pt,除此之外就是內容區域。在實際的應用中,如果介面涉及呼叫鍵盤輸入時,要注意鍵盤的高度大約是313pt。

3.iPad常用圖示尺寸
如果不用搗鼓圖示設計的活,掌握iPad介面大體的設計尺寸已經足夠了。如果要為App Store、標籤欄、應用等圖示進行設計的話,還需要了解iPad常用圖示的尺寸。(備註:下表的圖示尺寸為適配解析度的尺寸,如果是按照一倍圖進行設計,導航欄、工具欄、標籤欄圖示為一半大小。)
