【不定期更新】Android & iOS 设计规范表

设计经验 ·  互联网  · 0 评论  ·  收藏文章

iOS设计规范

字体选择

iOS 9
 
iOS 8及以下
中文:常州华文的黑体-简
英文:Helvetial
 
 
建议设计尺寸
iPhone6及以下:640*960或640*1136 
iPhone6 plus:1242*2208
 

iPhone界面尺寸

设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度
iPhone6 plus设计版 1242 × 2208 60px 132px 146px
 
iPhone6 plus物理版 1080 × 1920 54px 132px 146px
 
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)

 

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

 

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图标尺寸

系统 分辨率 圆角大小
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

 

Android的设计尺寸

字体选择

中文:思源黑体
英文:Roboto
 
建议设计尺寸
480*800或720*1280

 

Android安卓系统dp/sp/px换算表

名称 分辨率 比率 rate (针对320px) 比率 rate (针对640px) 比率 rate (针对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

主流Android手机分辨率和尺寸

设备 分辨率 尺寸 设备 分辨率 尺寸
三星Galaxy S3 4.8英寸 720 × 1280 三星Galaxy S4 5英寸 1080 × 1920
三星Galaxy S5 5.1英寸 1080 × 1920 三星Galaxy S6 4.5英寸 1200 × 1920
小米1 4英寸 480 × 854 小米1s 4英寸 480 × 854
小米2 4.3英寸 720 × 1280 小米2s 4.3英寸 720 × 1280
小米3 5英寸 1080 × 1920 小米3s(概念) 5英寸 1080 × 1920
小米4 5英寸 1080 × 1920 红米 4.7英寸 720 × 1280
红米Note 5.5英寸 720 × 1280      
OPPO Find 7 5.5英寸 1440 × 2560 OPPO Find 7 轻装版 5.5英寸 1080 × 1920
OPPO N1 mini 5英寸 720 × 1280 OPPO R3 5英寸 720 × 1280
OPPO R1S 5英寸 720 × 1280      
锤子 Smartisan T1 4.95英寸 1080 × 1920      
华为 Ascend P7 5英寸 1080 × 1920 华为 Ascend Mate7 6英寸 1080 × 1920
华为 荣耀6 5英寸 1080 × 1920 华为 Ascend Mate2 6.1英寸 720 × 1280
华为 C199 5.5英寸 720 × 1280      
HTC One (M8) 5英寸 1080 × 1920 HTC Desire 820 5.5英寸 720 × 1280
魅族 MEIZU MX4 5.36英寸 1152 × 1920 魅族 MEIZU MX3 5.1英寸 1080 × 1800