Ipad UI Design Specifications

What is the corner radius of an OS  app  icon?

(Note: Now the IOS icon does not need to draw rounded corners, just square is OK)

Inside the brackets is the corresponding radius size

App store (Retina screen) ──────────────1024px (160px)

iTunes Artwork icon ─────────────512px (90px)

App icon(iPhone4s) ──────────────────114px (20px)

App icon(iPhone5s) ──────────────────120px(22px)

App icon(iPad) ────────────────────72px (12px)

App icon(iPhone 3G/3GS) ───────────────57px(10px)

Spotlight/Settings icon icon(iPhone4) ──────────58px (10px)

Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ──── 29px (9px)

 

iPhone, iPad, Android  UI common design size

 

iPhone:

—————————————————————–

APPLE APP STORE ICON: 512 x 512 px (80px rounded corners)

iPhone 5 App Icon: 120 x 120 px (22px rounded corners)

iPhone 4 App Icon: 114 x 114 px (20px rounded corners)

iPhone 3GS App Icon:57 x 57 PX  (圆角弧度22px)

iPhone 5 326ppi 4英寸1136*640PX

iPhone 4 App UI:960 x 640PX (设计时,高度还需要减去状态栏40PX)

iPhone 3GS App UI:480x 320PX

 

iPhone的设计尺寸(ios尺寸)

iPhone界面尺寸:

设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度
iPhone6 plus设计版 1242 × 2208 60px 132px 146px
iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
iPhone6 plus物理版 1080 × 1920 54px 132px 146px
iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程
iPhone6 750 × 1334 40px 88px 98px(88px)
iPhone5s 640 × 1136 40px 88px 98px(88px)
iPhone5c 640 × 1136 40px 88px 98px(88px)
iPhone5 640 × 1136 40px 88px 98px(88px)
iPhone4s 640 × 960 40px 88px 98px(88px)
iPhone4 640 × 960 40px 88px 98px(88px)

iph

 

iPhone图标尺寸:

系统 分辨率 圆角大小
iOS 6- 90px – 1024px 约为图标宽度 × 0.175
iOS 7+ 90px – 1024px 约为图标宽度 × 0.225

 

Asset iPhone 6 Plus (@3x) iPhone 6 and iPhone 5 (@2x) iPhone 4s (@2x) iPad and iPad mini (@2x) iPad 2 and iPad mini (@1x)
App icon
(required for all apps)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76
App icon for the App Store
(required for all apps)
1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024
Launch file or image
(required for all apps)
Use a launch file
(see Launch Images)
For iPhone 6, use a launch file
(see Launch Images)
For iPhone 5, 640 × 1136
640 × 960 1536 × 2048 (portrait)
2048 × 1536 (landscape)
768 × 1024 (portrait)
1024 × 768 (landscape)
Spotlight search results icon
(recommended)
120 × 120 80 × 80 80 × 80 80 × 80 40 × 40
Settings icon
(recommended)
87 × 87 58 × 58 58 × 58 58 × 58 29 × 29
Toolbar and navigation bar icon
(optional)
About 66 × 66 About 44 × 44 About 44 × 44 About 44 × 44 About 22 × 22
Tab bar icon
(optional)
About 75 × 75
(maximum: 144 × 96)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 25 × 25
(maximum: 48 × 32)
Default Newsstand cover icon for the App Store
(required for Newsstand apps)
At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 512 pixels on the longest edge
Web clip icon
(recommended for web apps and websites)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76

 

iph-ico

 

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

ipavv

 

iPad图标尺寸:

系统 分辨率 圆角大小
iOS 6- 90px – 1024px 约为图标宽度 × 0.175
iOS 7+ 90px – 1024px 约为图标宽度 × 0.225
Asset iPhone 6 Plus (@3x) iPhone 6 and iPhone 5 (@2x) iPhone 4s (@2x) iPad and iPad mini (@2x) iPad 2 and iPad mini (@1x)
App icon
(required for all apps)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76
App icon for the App Store
(required for all apps)
1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024 1024 × 1024
Launch file or image
(required for all apps)
Use a launch file
(see Launch Images)
For iPhone 6, use a launch file
(see Launch Images)
For iPhone 5, 640 × 1136
640 × 960 1536 × 2048 (portrait)
2048 × 1536 (landscape)
768 × 1024 (portrait)
1024 × 768 (landscape)
Spotlight search results icon
(recommended)
120 × 120 80 × 80 80 × 80 80 × 80 40 × 40
Settings icon
(recommended)
87 × 87 58 × 58 58 × 58 58 × 58 29 × 29
Toolbar and navigation bar icon
(optional)
About 66 × 66 About 44 × 44 About 44 × 44 About 44 × 44 About 22 × 22
Tab bar icon
(optional)
About 75 × 75
(maximum: 144 × 96)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 50 × 50
(maximum: 96 × 64)
About 25 × 25
(maximum: 48 × 32)
Default Newsstand cover icon for the App Store
(required for Newsstand apps)
At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 1024 pixels on the longest edge At least 512 pixels on the longest edge
Web clip icon
(recommended for web apps and websites)
180 × 180 120 × 120 120 × 120 152 × 152 76 × 76

ipa-ico

 

ios—icon

 

Android的设计尺寸:

屏幕尺寸

指实际的物理尺寸,为屏幕对角线的测量。
为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。

像素(PX)

代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。

屏幕密度

为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。 为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素= DP * ( DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。
于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。

典型的设计尺寸

• 320dp:一个普通的手机屏幕(240X320,320×480,480X800)
• 480dp:一个中间平板电脑像(480×800)
• 600dp:7寸平板电脑(600×1024)
• 720dp:10寸平板电脑(720×1280,800×1280)

 

对于分辨率繁多的android设备,为了方便原生应用的界面适配,Google按照dpi大小将它们分成了4中模式(MDPIHDPIXHDPIXXHDPI,现在 Android 4.3 已经有了XXXHDPI):

屏幕DIP类型:      xxhdpi         xhdpi        hdpi          mdpi           ldpi

ICON尺寸:     144*144         96*96         72*72      48*48       36*36

 

随便说一下现在安卓设计稿尺寸设定:

一般PS新建 1080 x 1920的尺寸,也就是对应该安卓的xxhdpi ,所以切图也是放入程序中的xxhdpi文件夹 下。所以基本上一套图就可以了,如果时间充足,做多套尺寸的图自然没什么坏处。虽然只出大尺寸的图,但设计时一定好考虑好小屏幕适配问题,还要对部分切图进行调整重切,因为有些图等比缩小时会出现糊,或不好看的现象。
 
 
 
Android's dot 9 map dot 9 cut method Check out this article: http://www.miued.com/2074/
 

Android Android system dp/sp/px conversion table

name Resolution ratio rate (for 320px) ratio rate (for 640px) ratio rate (for 750px)
idpi 240 × 320 0.75 0.375 0.32
mdpi 320 × 480 1 0.5 0.4267
hdpi 480 × 800 1.5 0.75 0.64
xhdpi 720 × 1280 2.25 1.125 1.042
xxhdpi 1080 × 1920 3.375 1.6875 1.5

Mainstream Android phone resolutions and sizes

equipment Resolution size equipment Resolution size
Samsung Galaxy S3 4.8 inches 720 × 1280 Samsung Galaxy S4 5 inches 1080 × 1920
Samsung Galaxy S5 5.1 inches 1080 × 1920 Samsung Galaxy S6 4.5 inches 1200 × 1920
Xiaomi 1 4 inches 480 × 854 Xiaomi 1s 4 inches 480 × 854
Xiaomi 2 4.3 inches 720 × 1280 Xiaomi 2s 4.3 inches 720 × 1280
XiaoMi3 5 inches 1080 × 1920 Xiaomi 3s (concept) 5 inches 1080 × 1920
Xiaomi 4 5 inches 1080 × 1920 Red rice 4.7 inches 720 × 1280
Redmi Note 5.5 inches 720 × 1280      
OPPO Find 7 5.5 inches 1440 × 2560 OPPO Find 7 Lite 5.5 inches 1080 × 1920
OPPO N1 mini 5 inches 720 × 1280 OPPO R3 5 inches 720 × 1280
OPPO R1S 5 inches 720 × 1280      
Hammer Smartisan T1 4.95 inches 1080 × 1920      
Huawei Ascend P7 5 inches 1080 × 1920 Huawei Ascend Mate7 6 inches 1080 × 1920
Huawei Honor 6 5 inches 1080 × 1920 Huawei Ascend Mate2 6.1 inches 720 × 1280
Huawei C199 5.5 inches 720 × 1280      
HTC One (M8) 5 inches 1080 × 1920 HTC Desire 820 5.5 inches 720 × 1280
Meizu MEIZU MX4 5.36 inches 1152 × 1920 Meizu MEIZU MX3 5.1 inches 1080 × 1800

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326981027&siteId=291194637