查询了一下,网络上的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。