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

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

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

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

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

ios 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) 为例

以下是我整理的一些常见的 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) 为例

5、总结

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