产品运营相关iOS/安卓/Web设计规范Web前端之路

iOS 设备界面设计规范

2017-07-02  本文已影响244人  Monica勉強中

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

上一篇下一篇

猜你喜欢

热点阅读