iOS 设备界面设计规范

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

参考文献
iOS Human Interface Guidelines

你可能感兴趣的:(iOS 设备界面设计规范)