iPad界面設(shè)計尺寸規(guī)范詳解【完整的平板設(shè)計規(guī)范】

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

 

第一部分:iPad用戶體驗設(shè)計指導(dǎo)性原則

ipad 設(shè)計規(guī)范

首先,在iPad上側(cè)重的是內(nèi)容和交互,而不是UI。

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

然后,是內(nèi)容形式上富有真實感。

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

最后,是充分利用設(shè)備性能和特性。

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

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

iphone ipad mockups

 

第二部分:iPad界面設(shè)計尺寸規(guī)范

下面我們先以ios系列的ipad產(chǎn)品為例來說下:所有的ipad設(shè)計尺寸如下

設(shè)備 分辨率 狀態(tài)欄高度 導(dǎo)航欄高度 標(biāo)簽欄高度
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

下面是詳細(xì)的設(shè)計尺寸信息圖紙:

ipad設(shè)計尺寸信息圖

 

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

當(dāng)然還有全套的iOS 9 GUI iPad Sketch素材以及下載

ipad設(shè)計規(guī)范詳解

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

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

小米平板電腦設(shè)計

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

屏幕尺寸:7.9英寸

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

iPad界面設(shè)計尺寸:2048×1536 px ??

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

安卓平板設(shè)計適配的原則

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

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

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

下面25學(xué)堂提供參考:

ipad-字體設(shè)計大小參考

 

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

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

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