IOS iphone 苹果设计规范
关于设计我都快忘得差不多了,但是偶然看到这篇文章,对于ios设计规范介绍的还是非常详细明了的。有需要的小伙伴请收藏起来哦!
iPhone、iPad分辨率和显示屏规格
设备 | 分辨率 | 状态栏高度 | 导航栏高度 | 标签栏(工具栏)高度 |
---|---|---|---|---|
iPhone6 plus设计版 | 1242 × 2208 | 60px | 132px | 147px |
iPhone6 plus物理版 | 1080 × 1920 | 54px | 132px | 147px |
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) |
iPad | 1024 × 768 | 20px | 44px | 49px(44px) |
iPad(@2x) | 2048 × 1536 | 40px | 88px | 98px(88px) |
iPhone分辨率和显示屏规格
iPad分辨率和显示屏规格
iPhone6+缩减像素取样
在iOS上渲染像素和物理像素(physical pixels)是等同的,只有一个例外:iPhone 6 Plus的Retina HD显示屏。
由于它屏幕的像素分辨率要低于一个常规的@3x分辨率,所以被渲染内容会自动调整为原始尺寸的87%(从2208*1242像素来适应为1920*1082像素的显示屏分辨率)
ICON规格
描述 | iPhone 6 Plus (@3x) | iPhone 6 and iPhone 5 (@2x) | iPhone 4s /4/iPod touch(@2x) | iPad and iPad mini(@2x) | iPad 2 and iPad mini (@1x) |
---|---|---|---|---|---|
应用程序图标(应用程序所需的所有) | 180 x 180 | 120 x 120 | 120 x 120 | 152 x 152 | 76 x 76 |
为App Store(应用程序所需的所有应用程序图标) | 1024 x 1024 | 1024 x 1024 | 1024 x 1024 | 1024 x 1024 | 1024 x 1024 |
启动影像(所有的应用程序所需的) | 设计版:1242 × 2208
物理版:1080 × 1920 |
iPhone 6: 750 × 1334
iPhone 5: 640 x 1136 |
640 x 960 | 1536 x 2048 (纵向)
2048 x 1536 (横向) |
768 x 1024 (纵向)
1024 x 768 (横向) |
Spotlight搜索结果图标(推荐) | 120 x 120 | 80 x 80 | 80 x 80 | 80 x 80 | 40 x 40 |
设置图标(推荐) | 87 x 87 | 58 x 58 | 58 x 58 | 58 x 58 | 29 x 29 |
工具栏和导航栏图标(可选) | 约 66 x 66 | 约 44 x 44 | 约 44 x 44 | 约 44 x 44 | 约 22 x 22 |
标签栏图标(可选) | About 75 x 75 (maximum: 144 x 96) | 约 50 x 50 (最大: 96 x 64) | 约 50 x 50 (最大: 96 x 64) | 约 50 x 50 (maxi最大mum: 96 x 64) | 约 25 x 25 (最大: 48 x 32) |
默认报刊亭盖为App Store图标(书报亭应用程序所需) | 至少为 1024 像素的最长边 | 至少为 1024 像素的最长边 | 至少为 1024 像素的最长边 | 至少为 1024 像素的最长边 | 至少为 512 像素的最长边 |
网页剪辑图标(推荐的Web应用程序和网站) | 180 x 180 | 120 x 120 | 120 x 120 | 152 x 152 | 76 x 76 |
iPhone ICON规格
iPad ICON规格
附录:
1:iPhone 5S, 6 以及6+显示屏区别的详细信息可参:The Ultimate Guide To iPhone Resolutions
2:圆角ICON:非官方的模板
3:iOS版本中默认字体:完整的预置字体列表
参考引文:
iOS Human Interface Guidelines – Apple
iOS Accessibility Guidelines – Apple
Why Control Center in iOS 10 makes sense – Darin Dimitroff
Apple’s new design style in iOS 10 is a statement on accessibility – Connor Mason
Complexion Reduction: A New Trend In Mobile Design – Michael Horton
「后扁平化时代」的 i18n 和 L10n – JJYing
The new Music app in iOS 10: a big bold confusing mess – Sébastien Page
Big, bold, and beautiful: Apple’s design language is changing in iOS 10 – Serenity Caldwell
Designing a New Look for Instagram, Inspired by the Community – Ian