查询了一下,网络上的iOS设计规范都大多没有及时更新,因此整理一下iOS设计标准规范,方便查找。
界面尺寸
Device | Resolution(px) | PPI | Screen Size | Asset Resolution | Height of Status Bar | Height of Nar Bar | Height of Tab Bar |
---|---|---|---|---|---|---|---|
iPhone 7+ | 1080 x 1920 | 401 | 5.5" | @3x | 60 px | 132 px | 147 px |
iPhone 7 | 750 x 1334 | 326 | 4.7" | @2x | 40 px | 88px | 98 px |
iPhone 6+/6s+ | 1080 x 1920 | 401 | 5.5" | @3x | 60 px | 132 px | 147 px |
iPhone 6/6s | 750 x 1334 | 326 | 4.7" | @2x | 40 px | 88px | 98 px |
iPhone SE/5/5S/5C | 640 x 1136 | 326 | 4.0" | @2x | 40 px | 88px | 98 px |
iPhone 4/4S | 640 x 960 | 326 | 3.5" | @2x | 40 px | 88px | 98 px |
iPhone 1st/2nd/3rd | 320 x 480 | 163 | 3.5" | @1x | 20 px | 44 px | 49 px |
iPad Pro | 2048 x 2732 | 264 | 12.9" | @2x | 40 px | 88px | 98 px |
iPad 3/4/Air/Air2 | 1536 x 2048 | 264 | 9.7" | @2x | 40 px | 88px | 98 px |
iPad Mini2/3 | 1536 x 2048 | 326 | 7.9" | @2x | 40 px | 88px | 98 px |
iPad Mini | 1536 x 2048 | 163 | 7.9" | @1x | 20 px | 44 px | 49 px |
iPad 1/2 | 768 x 1024 | 132 | 9.7" | @1x | 20 px | 44 px | 49 px |
App 图标
Device | App Icon | AppStore Icon | Spotlight | Setting |
---|---|---|---|---|
iPhone 7+/6s+/6+ | 180x180 px | 1024x1024 px | 120x120 px | 87x87 px |
iPhone 7/6s/6/SE/5S/5C/4S/4 | 120x120 px | 1024x1024 px | 80x80 px | 58x58 px |
iPhone 1st/2nd/3rd | 57x57 px | 1024x1024 px | 29x29 px | 29x29 px |
iPad Pro | 167x167 px | 1024x1024 px | 120x120 px | 58x58 px |
iPad 3/4/Air/Air2, iPad Mini2/3 | 152x152 px | 1024x1024 px | 80x80 px | 58x58 px |
iPad 1/2, iPad Mini | 76x76 px | 1024x1024 px | 40x40 px | 29x29 px |
字体
iOS9之前的系统默认字体是Helvetica Neue,iOS 9 发布后,Apple 引入新字体 San Francisco替代了之前的默认字体。
字号
Element | Size(pt) | Weight | Spacing (pt) | Type |
---|---|---|---|---|
Nav Bar Title | 17 | Medium | 0.5 | Display |
Nav Bar Button | 17 | Regular | 0.5 | Display |
Search Bar | 13.5 | Regular | 0 | Text |
Tab Bar Button | 10 | Regular | 0.1 | Text |
Table Header | 12.5 | Regular | 0.25 | Text |
Table Row | 16.5 | Regular | 0 | Text |
Table Row Subline | 12 | Regular | 0 | Text |
Table Footer | 12.5 | Regular | 0.2 | Text |
Action Sheets | 20 | Regular/Medium | 0.5 | Display |
pt和px的区别
在前文中介绍界面、字号等尺寸单位里,使用了pt和px两种不同的单位,下面简单说一下这两个的区别。
Px是pixel,就是像素,是屏幕上显示最小的点。相同大小的屏幕中,pixel越多,PPI(pixels-per-inch)就越高,因此就会更清晰。
Pt就是point,通常应用于印刷媒体,1point等于1/72英寸。根据PPI
不同,1point可以包含多个pixels。比如常规Retina屏幕中(不含iPhone7+/6+/6s+),1pt 包含2 x 2 pixels。