iPad界面設計尺寸規范詳解【完整的平板設計規范】

iPad設計目前也非常多啦,之前25學堂也分享過蘋果iPad界面設計規范、尺寸等指導性設計知識。不知道大家還有印象沒?如果沒有,也沒關系,今天這節課25學堂跟大家一起回顧下iPad界面設計的一些設計規范和常識。

 

第一部分:iPad用戶體驗設計指導性原則

ipad 設計規范

首先,在iPad上側重的是內容和交互,而不是UI。

作為設計師,幾乎我們本能的就會醉心于一些華麗的UI界面而忘了用戶本身是來干什么的。為了讓用戶關注內容本身并在交互的過程中盡量少受干擾,所以我們需要淡化程序UI,弱化界面控件、讓信息更扁平化(讓上下層級可以在同一界面中自如切換),限制一個視圖內的任務復雜度、淡化文件管理、使用最少的模態對話框、只有在需要時才提醒用戶??

然后,是內容形式上富有真實感。

iPad上自帶的iBooks、Note以及Google Map都是很好的例子。蘋果給出的解釋是:程序顯示和現實生活越相似,用戶就越容易理解、操作并喜歡。可以使用動畫進一步增強真實感覺,東縱的真實感比外觀更為重要,要符合物理規律。

最后,是充分利用設備性能和特性。

iPad是由蘋果公司于2010年開始發布的平板電腦系列產品,除了具有普通數碼設備的硬件指標和性能參數之外,還具有很多諸如重力和加速度感應、多點觸控、手勢識別等人機交互新特性。如何把這些交互手段通過設計結合到你的作品中,會是個有趣的挑戰。

包括現在小米、華為、TCL等都推出了自己的平板電腦產品。所以,讓我們設計的平板UI和產品還是有很多的。

iphone ipad mockups

 

第二部分:iPad界面設計尺寸規范

下面我們先以ios系列的ipad產品為例來說下:所有的ipad設計尺寸如下

設備 分辨率 狀態欄高度 導航欄高度 標簽欄高度
iPad6/iPad Air2 2048 × 1536 40px 88px 98px
iPad5/iPad Air/ipad mini 2 2048 × 1536 40px 88px 98px
iPad4/ipad mini 2048 × 1536 40px 88px 98px
iPad3/the new iPad 2048 × 1536 40px 88px 98px
iPad2 1024 × 768 20px 44px 49px
iPad1 1024 × 768 20px 44px 49px
iPad Mini 1024 × 768 20px 44px 49px

下面是詳細的設計尺寸信息圖紙:

ipad設計尺寸信息圖

 

不太清楚的可以去看下 尺寸大全:最新最全的APP設計尺寸

當然還有全套的iOS 9 GUI iPad Sketch素材以及下載

ipad設計規范詳解

看到這里,肯定很多小伙伴也會說,這是ios的平板設計規范,那么安卓的平板設計規范呢?

25學堂的小編只想說,你會了安卓上的APP設計,其實安卓的平板上的設計規范是差不多的。唯一區別就是尺寸大了些。無非就是解決適配的問題。

小米平板電腦設計

例如:小米平板電腦的尺寸和分辨率:

屏幕尺寸:7.9英寸

屏幕分辨率:2048×1536 ?剛好跟最新的ipad的尺寸相等。所以,我們偷懶的可以按照ios ipad的尺寸設計。

iPad界面設計尺寸:2048×1536 px ??

下面我們再來分享一份關于安卓平板適配的圖片:

安卓平板設計適配的原則

注1:分辨率限定符的匹配是向下匹配,如果沒有values-land-mdpi-1024x552,比如,分辨率values-land-mdpi-1024x600的屏幕,當rom不把虛擬鍵計算到屏幕尺寸時,實際顯示的屏幕應該是values-land-mdpi-1024x552,無法適配到values-land-mdpi-1024x600,那這樣就可能適配到下一級,比如values-land-mdpi-800x480,但是現在的平板已經沒有這么低的分辨率了,所以是配到無限定符的values-mdpi里,造成界面顯示上的瑕疵。

注2:由于分辨率限定符的匹配是向下匹配,所以如果有非主流mdpi屏幕不能精確適配到上述指定值時,values-mdpi至少可以保證app運行時不至于崩潰,同理values可以保證ldpi屏幕的平板不會因生成view而又取不到相應值而崩潰。

當然,最近很多ipad設計同學在問字體設計大小,25學堂的老譚說其實跟ios和android等平臺上的字體設計大小一樣的。

下面25學堂提供參考:

ipad-字體設計大小參考

 

APP設計新手可以入讀:APP設計常識解讀:android界面適配的機制

如果大家有不明白,可以下面評論或者給我們留言。

每天更新,
全站高品質素材免費下載!