超详细iOS设计尺寸规范指南，UI新手必看！

更新时间：2023-10-19 19:48:13

今天和大家分享一些 UI 新手必看的 iOS 系统在进行 UI 设计时的尺寸规范，熟悉了解 UI 设计尺寸规范对设计师而言是非常重要的，很多 UI 新手在开始做 UI 设计的时候，常常会因为对 iOS 设计尺寸规范内容不了解，导致做出来的界面效果都不太合适。今天我就从设计尺寸、页面布局、字体规范和图标规范这四方面详细为大家介绍 iOS 系统 UI 设计尺寸规范指南，如果你是刚刚入门的 UI 设计新手，可千万不能错过！同时还会分享一些亲测好用的高质量且免费的iOS系统 UI 设计尺寸规范资源，希望对 UI 设计爱好者们有所帮助！

现在点击下图👇即可免费使用优质模板

1、设计尺寸

iOS 设备具有各种屏幕尺寸，而且只应用于苹果设备，尺寸跟会根据每年发布的最新设备而有所不同，但相对统一，根据具体设备型号进行划分，可以在 apple 支持里找到对应的尺寸标准。以下是我整理的一些常见的 iOS 设备的设计尺寸与分辨率大小。

型号

设计尺寸

分辨率

倍数

iPhone 6/6s/7/8

375 x 667 pt

750 x 1334 px

@2x

iPhone 6plus/7plus/8plus

414 x 736 pt

1080 x 1920 px

@3x

iPhone X/XS/11pro/12 mini/13 mini

375 x 812 pt

1125 x 2436 px

@3x

iPhone XR/XS max/11pro max

414 x 896 pt

828 x 1792 px

@2x

iPhone 12/12pro/13/13pro/14

390 x 844 pt

1170 x 2532 px

@3x

iPhone 12pro max/13pro max/14plus

428 x 926 pt

1284 x 2778 px

@3x

iPhone 14pro /15/15pro

393 x 852 pt

1179 x 2556 px

@3x

iPhone 14pro max/15pro max

430 x 932 pt

1290 x 2796 px

@3x

2、页面布局

目前 iOS 系统设备采用的显示屏，其中 iPhone6/7/8plus、iPhone X、iPhone XS、iPhone XS MAX、iPhone 11、iPhone 14 系列采用的是 3 倍率的分辨率，其他都是 2 倍率的分辨率，无论是栏高度还是应该图标，都可以参照 1倍率的尺寸进行变化，方便适配设计。

3、字体规范

iOS 英文字体：SF Ul

iOS 中文字体：苹方

为了确保字体在不同尺寸下的所有类型都具备可读性，建议字号都不应该小于 22 px，内容样式使用 34 px 的字号作为最大尺寸，字体必须为偶数。

以设计稿 (750 x 1334px) 为例

导航栏标题 —— 34 px
常规按钮 —— 32-36 px
内容区域 —— 24-28 px
标签栏 (图标+文字) —— 20 px
特殊情况 —— 不限

以下是我整理的一些常见的 iOS 设备的字体尺寸。

字体尺寸

文字

字号

字型

行间距重点文字

重点文字

48px

Bold

72 px

大标题

36px

Bold

54 px

一级标题

32px

Bold

48 px

列表文字、标签

30px

选择 Blod/默认 Regular

46 px

正文、按钮

28px

Regular

42 px

辅助文字、二级标题

26px

Regular

40 px

说明文字

22/24px

Regular

36/34 px

标签文字

20px

Regular

30 px

4、图标规范

说明：一般图标切图就切两套就可以的 (@2x、@3x）

命名：模块_功能_控件_状态 @2x.png

模块_功能_控件_状态 @3x.png

以 iPhone 4/4s/5/5s/5c/6/6s/7/8(@2x) 为例

应用图标 —— 120x120 px
App Store —— 1024x1024 px
spotlight 搜索图标 —— 80x80 px
设置图标 —— 58 px
标签栏图标 —— 44 px
导航栏和工具栏图标 —— 50 px

5、总结

以上就是一些 UI 新手必看的 iOS 系统 UI 设计尺寸规范指南，这些规范不仅有助于确保开发者创建的应用程序在不同的 iOS 设备上具有一致的外观和体验，同时也有助于提高应用程序的可访问性和可使用性。对设计师而言，一定要熟悉掌握这些设计规范，才能避免在设计前期会出现的一些不必要的错误，以便于我们设计出优秀的作品。如果你想了解更多关于 UI 设计尺寸规范内容，可以去即时设计看看，真的是一款亲测好用的软件！资源广场内为设计师提供了很多免费的规范指南，我经常在设计之前去这里看看，以防哪里出现错误，费时又费力。