IOS设计规范

IOS设计规范

AI TOOL PROFILE工具资料

苹果 iOS 设计尺寸、字体、图标与屏幕规格的速查手册

官网地址 https://www.ubuuk.com/ios

访问官网
价格官网未标价
平台Web
归类办公效率
收录2025-01-01
复核2025-01-01
编辑评分 4.2 / 5

IOS设计规范编辑总结

EDITOR REVIEW编辑评测

这是一份面向 iOS 开发与设计的中文速查文档,把苹果官方 Human Interface Guidelines 里的关键尺寸整理成表格。内容覆盖苹方字体方案:中文 PingFang SC,英文按 19pt 为界在 SF UI Text 与 SF UI Display 之间切换;字号字重从 Title 1 的 28pt Light 到 Caption 2 的 11pt Regular,共 10 档。设备尺寸表从 iPhone 1 的 3.5 in、163 PPI、@1x 一直列到 iPhone X 的 5.8 in、458 PPI、@3x,并给出应用图标、导航栏与标签栏图标在各机型下的像素尺寸。短板是全部为静态表格,官网未标注各条规范的更新日期,也未附供直接下载的设计源文件。

IOS设计规范是什么?

这是一份中文整理的 iOS 设计规范速查页,内容依据苹果官方 Human Interface Guidelines,把设计过程中最常被反复查阅的尺寸数据集中成表,方便开发者和设计师在一处对照,而不必逐个翻官方文档。

页面主体分四块。字体部分给出苹方方案:中文字体 PingFang SC,英文字体分 SF UI Text 与 SF UI Display,以 19pt 为分界,小于 19pt 用前者,大于 20pt 用后者。文字样式表列出 Title 1 到 Caption 2 共 10 档,标注每档的字重、字号、行距与字间距。图标部分区分应用图标与自定义图标两类,前者按 iPhone、iPad 各代列出 App Store 图标统一为 1024 x 1024 px,后者给导航栏、工具栏与标签栏的图标尺寸。分辨率表则把屏幕尺寸、PPI、Asset 倍率、竖屏点值与竖屏分辨率一一对应。

使用方式上,设计师可以在做标注和切图时按设备型号查图标尺寸与倍率,前端在写导航栏、搜索栏、标签栏样式时对照组件字号与字重表;条目末尾还附了状态栏、导航栏、搜索栏、标签栏、列表视图、弹出、提示框、切换控件、滑动条、开关等 UI 组件的标题索引,以及一份参考引文清单。

IOS设计规范核心功能

CAPABILITIES工具标签

字体方案对照

中文用 PingFang SC,英文按字号分两套:小于 19pt 用 SF UI Text,大于 20pt 用 SF UI Display,避免大小字号共用一套字导致的视觉失衡。

十档文字样式表

从 Title 1 的 28pt Light、行距 34pt、字间距 13pt,到 Caption 2 的 11pt Regular、行距 13pt、字间距 6pt,共 10 档,每档给出字重、字号、行距、字间距四项数值。

组件级字号规格

覆盖 Nav Bar Title 17pt Medium、Nav Bar Button 17pt Regular、Search Bar 13.5pt、Tab Bar Button 10pt、Table Row 16.5pt、Action Sheets 20pt 等组件的字号、字重与字距,并标注属于 Display 还是 Text 类型。

应用图标尺寸表

按设备分列应用图标、App Store 图标、Spotlight 图标、设置图标四种尺寸。例如 iPhone X 与 8+ 一档为 180 x 180 px、120 x 120 px、87 x 87 px,App Store 图标全设备统一 1024 x 1024 px。

自定义图标尺寸

给出导航栏与工具栏图标、标签栏图标两组尺寸。iPhone 8+ 一档为 66 x 66 px 与 75 x 75 px(最大 144 x 96 px),iPhone 8 与 iPad 系列为 44 x 44 px 与 50 x 50 px(最大 96 x 64 px)。

分辨率与倍率表

列出各机型屏幕尺寸、PPI、Asset 倍率、竖屏点值与竖屏分辨率。iPhone X 为 5.8 in、458 PPI、@3x、375 x 812 点、1125 x 2436 px;iPhone 1 到 3GS 为 3.5 in、163 PPI、@1x、320 x 480。

IOS设计规范适合谁用?

WHO IS IT FOR工具标签

iOS 独立开发者

推荐

一个人从设计到上架全包时,切图倍率和图标尺寸表可以直接照着用,省去逐个机型查官方文档的时间。

移动端 UI 设计师

推荐

做标注和出图前对照字体与组件字号表,字重、行距、字间距三项都有明确数值,交付给前端时争议少。

对接多端的切图工程师

推荐

分辨率表把点值和像素值并列,@1x、@2x、@3x 三档齐全,适合批量导出资源时做尺寸核对。

需要设计源文件的团队

有条件

页面以表格数据为主,官网未提供可直接下载的 Sketch、Figma 模板或切图资源包,团队若要成套源文件需另找素材。

IOS设计规范优点和缺点

PROS & CONS工具标签

优点

  • 覆盖 iPhone 1 到 iPhone X、iPad 1 到 iPad Pro 12.9 的横跨多代机型数据
  • 字体表同时给出字号、字重、行距、字间距四项,不止字号一个维度
  • App Store 图标尺寸全设备统一为 1024 x 1024 px,不易记错
  • 组件规格细分到 Nav Bar、Search Bar、Tab Bar、Table Row 等具体部位
  • 中文内容,苹方字体方案直接给出,省去英文文档阅读成本

缺点

  • 官网未提供设计源文件或切图资源包下载
  • 机型列表停在 iPhone X 一代,官网未说明后续机型是否补充
  • 配色、UI 组件布局等章节仅有标题,官网未展开具体数值

IOS设计规范常见问题

FAQ工具标签
英文该用 SF UI Text 还是 SF UI Display?

分界线在字号。小于 19pt 的文字用 SF UI Text,大于 20pt 的文字用 SF UI Display。中文字体统一用 PingFang SC。这样分的目的是让大标题在小尺寸下不会显得过细,正文在小字号下也不会发虚。

正文 Body 的字号和行距是多少?

Body 用 Regular 字重、17pt 字号、22pt 行距,字间距为 -24pt。同档的还有 Headline,字重为 Semi-Bold,字号和行距与 Body 一致。Callout 略小,为 16pt 字号、21pt 行距。

iPhone X 的屏幕参数具体是什么?

屏幕尺寸 5.8 in,PPI 458,Asset 倍率 @3x,竖屏点值 375 x 812,竖屏分辨率 1125 x 2436 px。对应的应用图标为 180 x 180 px,Spotlight 图标 120 x 120 px,设置图标 87 x 87 px。

App Store 上架图标要做多大?

全设备统一 1024 x 1024 px,iPhone、iPad 各代都是这个尺寸。设备上的应用图标则按机型不同,iPhone X 与 8+ 一档为 180 x 180 px,iPhone 8 与 7 一档为 120 x 120 px,iPhone 1 到 3GS 为 57 x 57 px。

标签栏图标在不同机型上尺寸一样吗?

不一样。iPhone 8+、7+、6+、6s+ 为 75 x 75 px,最大 144 x 96 px;iPhone 8、7、6s、6、SE 以及 iPad Pro、iPad、iPad mini 均为 50 x 50 px,最大 96 x 64 px。导航栏和工具栏图标则分别是 66 x 66 px 与 44 x 44 px。

IOS设计规范竞品对比

COMPARISON工具标签
工具编辑评分价格核心功能平台
IOS设计规范本工具 4.2 未标价 字体方案对照;十档文字样式表;组件级字号规格;应用图标尺寸表 Web
Android 设计规范 — 未标价 安卓设计尺寸规范文档 Web
PDF2MD — 未标价 使用 AI OCR 将 PDF 转换为 Markdown —
Otter Script — 未标价 文档生成平台,快速创建复杂文档 —
AI OFFICE BOT — 未标价 AI OFFICE BOT 提供智能办公解决方案,助力高效学习与行动 Web
Supa Doc — 未标价 AI 驱动的文档生成 —