很多UI新手在开始学习的时候，不明白控件的名字是什么，字体应该多大，截图适配哪些，有时还有哪些等等，一系列令人头疼的问题摆在面前他们，就像来到BMW一样，明天会为大家介绍入门级的设计规范，帮助大家快速上手，所以比较基础。 作为一名专业的UI设计师，我们应该温故知新。 下面我就和大家一起去学习iOS，设计规范，适配问题做一个全面的梳理和准备。

iOS 设计规范

苹果自2007年1月9日发布Max以来，已经经历了十三代产品，19年9月11日推出的11、11Pro、没有新的规格，设计人员没有额外的工作量。 还是按照之前的做法：750*（@2x）或者（375*667pt，@1x）做设计稿，然后提供@2x，@3x裁剪图。

以下是历代苹果手机产品列表（说说你拥有过哪几代产品，欢迎留言交流）

一代：

第二代：

三代：

四代：4

五代：4s

六代：5

第七代：5s、5c

八代：, Plus

九代：6s、

十代：, Plus

第十一代： , Plus, X

十二代：XS、XSMax、XR

十三代：、、Max

如何有效记忆iOS设计规范，这里我总结了一个方法《iOS五点两图记忆法》，即五点+两张图。

1、设计规范：@1x（@2x）为基准设计。

2.设计工具：Adobe XD，

3.预览效果：、或

4.图像切割输出：@2x@3x 两组

5.标注工具：Blue Lake

测试你：

1、如何快速做出尺寸的设计稿？

2、@2倍图被开发成@3倍会有什么后果？

3、为什么要用@1倍图做设计？ （后面也有详细解答）

4.文本显示为34px在上也是34px吗？

在解释里面的问题的时候，这里我们先着重理解PX和PT这两个单位，搞清楚为什么UI设计推荐使用双图，这样设计才能以不变应万变。 （注：这部分内容是根据静态老师的总结优化而来）

PX大家可能比较熟悉，PX是英文pixel的缩写。 最简单的理解就是找一个放大镜（不是笔记本里的放大镜，而是真正的放大镜），然后对准自己面前的显示器或者手机屏幕观看。 大多数显示器在放大镜下会出现点状。 这就是我们通常所说的像素概念。 在化学码率的显示中，垂直分布1920个点，水平分布1080个点。 这种点通过显示器的光学特性为我们合成不同的图像。

请注意，在不同规格的显示器上，这些点的单位面积是不一样的。 比如22寸1080p液晶显示器和27寸1080p液晶显示器，可以发现两款显示器的像素分布是27寸显示器的显示效果明显不如22寸英寸显示器。 LCD 面板中的“像素”大小不同。

可见，像素的单位是一个相对单位，不能用分米、毫米等绝对计量单位来判断它的宽度或长度，因为1个像素只代表一个单位的“点”。

另一个重要的单位是PT，英文point的缩写。 这个单位也是iOS开发过程中使用的单位。 与 px 等相对单位不同，PT（点）是绝对单位。 英文名称为“磅因数（或Pound）”（1PT=1/72 inch）。

同样用一个简单直观的计数器例子来演示，拿两个不同的模型，比如一个ip11和一个Max，打开同一个应用（比如QQ音乐），准备一个尺子，用尺子检测最文本规范上面的标题“音乐厅”。 经过测试，可以发现不同型号的“音乐厅”字样规格是一样的。 也可以让iOS开发者写两个相同的适配不同规格型号的文件，分别安装在两部手机上，保证这个文件中的字体使用一个字号（30PT）。 在这两款手机中运行并使用卷尺进行测试，我们发现它们的化学规格完全相同。

请记住px是相对单位，pt是绝对单位（类似的单位有分米、毫米等）。 在不确定屏幕密度的情况下，没有 px 和 pt 之间的比较。

在开发工程师看来，如果你用750px的帧率画图，如果你在设计稿中按照原来的尺寸标注规格，在开发环境中也会被转换成两倍的规格。 比如你把字体大小标记为 40px ，那么开发工程师最后在代码中写的就是 20pt ，这是一个乘以 2 的关系。而且，如果你使用双倍的基础帧率来绘制，那么你就不会不需要乘以2，所有规格的开发工程师都可以直接拿来随意使用。

现在，XD和Figma是中国联通的纯矢量ui设计软件。 无论是设计还是后期与开发工程师的合作，都严格遵循开发原则。 这些设计方法可以最大限度地再现设计稿，减少文件。 体积和系统资源消耗，无论从哪个角度来看，都是设计师在制作UI界面时的明智选择。

最后，让我们总结一下激励措施。 设计者采用双基准规范来绘制，主要是单位换算方便，输出方便，理解简单。 对于工程师来说，他们不再需要进行复杂的转换，这有助于完美地再现设计稿。

1.引导页

导览页为完整图片，无法适配，需另行制作设计图。 iOS 总共需要提供 6 套规范。 事实上，它也支持视频。 （目前5以下改编基本淘汰）

2.图标

可根据规范制作APP应用图标设计。 然后利用现成的规范模板资源，生成一套完整的规范，一键导入。 （模板链接：）

注意：最终提交给程序员的切图是一个直角的非圆角图标，像画框一样适合框架sketch安卓图标模版，没有切圆角！

设备名称

应用图标

应用商店图标

图标

设置图标

,,X,Xs,8P,7P,6sP,6P

像素

像素

像素

87x87 像素

,XR,8,7,6s,6,SE,5s,5c,5,4s,4

像素

像素

80x80 像素

58x58 像素

1,3G,3GS

57x57 像素

像素

29x29 像素

29x29 像素

.9,10.5

像素

像素

80x80 像素

58x58 像素

&2,Mini2&4,3&4

像素

像素

80x80 像素

58x58 像素

iPad1,2,Mini1

76x76 像素

像素

40x40 像素

29x29 像素

其他设备图标规范

3.状态栏和导航栏

状态栏：显示时间、操作者信息、电池电量等信息区。 （短发区）

导航栏：状态栏下方的区域，包括页面标题、功能图标等信息区域。

状态栏和导航栏通常是集成在一起的。 现在流行大标题导航栏的设计，就是加强导航栏的高度，整合页面内容的标题。 当内容向上滑动时，大标题回到正常的导航高度。

（大标题导航栏的高度通常为116pt（232px），其中包括20pt（40px）状态栏的高度，也可以容纳34pt（68px）的大标题和辅助信息（如返回图标）。

导航栏中的元素必须遵循以下对齐原则：

1.返回按钮必须右对齐。

2、当前界面的标题必须在导航栏中间。 （现在也有左对齐）

3.其他控制按钮必须靠左对齐。

4.标签栏

Tab bar：Tab栏，就是最上面的一个快速入口。 在iOS规范中，Tab栏通常有五个、四个或三个图标，一般不会超过五个。 有“纯图标标签”、“图标加文字标签”和“文字标签”三种方式。 高度为98px（双图），最小文本为20px，图标大小为60px。

5.上传页面

当程序上传到时，我们需要提供多张App截图，方便用户了解App的功能。 这里需要提供1242x和1125x的两组截图，并且还支持视频模式。 （陌陌目前使用五个静态页面）

陌陌上传截图

6.字体

英文字体：SC，英文字体：，SFUI，其中适合大于19pt的文字，SFUI适合小于20pt的文字。 一些-only需要使用思源宋字进行设计。 其他字体大小和粗细请参考iOS。

平方字体链接：

提取码：uvlp

注：以下字号pt单位适用于@1x双图，10pt（20px）是手机端显示的最小字体，最大字体应该是当前标题字体，达到34pt（68px）。

元素

字重

字体大小（pt）

利润

字宽

标题

34pt

41pt

11pt

标题 1

28pt

34pt

13pt

标题 2

22pt

28pt

16pt

标题 3

20pt

24pt

19pt

头条新闻

半粗体

17pt

22pt

-24pt

文本

17pt

22pt

-24pt

标记

16pt

21pt

-20pt

字幕

15pt

20pt

-16pt

笔记

13pt

18pt

-6pt

注1

12pt

16pt

0点

笔记2

11pt

13pt

6pt

七、颜色

屏幕显示的色域比我们画图时的RGB色域要宽。 因此，任何颜色都可以在网站上设计，只要符合产品的智能性，但在色彩心理学理论的范围内。 官方推荐的系统配色如下：

系统颜色

8. 控制

控件包括：输入框、按钮、滑块、页卡、开关等，这些都已经在设计模板中列出来了。

下载链接：

为了让设计更符合产品整体品牌基调，可以重新设计这个控件。

但是你要注意两点：第一，点击区域基本符合44pt（88px）的原则，也就是手机上的尺寸在7mm-9mm左右，适合中指点击。 第二，设计不同的运行状态，而不是只有一种状态。

44pt（88px）在控件中无处不在

之前我们介绍过，人的手臂点击区域是7mm-9mm，在@2x中就是44pt（88px）。 Apple 的导航栏、列表和工具栏都包含神秘数字 44pt (88px)。 我们还确保在设计时考虑到脚趾点击区域。

到处都是 44pt (88px)

九、界面设计原则

1.行间距和宽度（@2x）

在中国联通终端页面的设计中sketch安卓图标模版，页面元素的行间距和宽度的设计规范非常重要。 一个页面是否美观、简洁、通透与行距、间距的设计规范密切相关。

全局行间距（iOS13，@2x）

全局行间距是指页面内容到屏幕边缘的距离。 整个应用的界面应该以此来规范，达到页面整体视觉效果的统一。 在实际应用中，应根据不同的产品知识采用不同的行距，使行距成为界面的一种设计语言。 全局行间距的设置可以更好的引导用户竖直向上阅读。 也没有行间距，一般用在卡片布局中，用来展示图片。 这些图片显示的设置方式，让用户更容易将注意力集中在每个图文本身的内容上。

iOS原生页面“”和“”的行间距都是40px。 (@2x)

陌陌和支付宝的行间距是32px。 (@2x)

卡片宽度

卡片布局是联通页面设计中非常常见的一种布局形式。 至于卡片之间的距离，需要根据界面的风格和卡片承载的信息量来划分。 一般最小不高于16px，太小了。 宽度会让用户紧张。 最常用的宽度是 20px、24px、30px、40px。 事实上，宽度不应该太大。 过大的宽度会使界面看起来松散。 宽度的颜色设置可以和分界线保持一致，也可以多改。 较浅。

以iOS（750*）为例，设置页面卡片宽度为70px，通知中心承载的信息较多，所以卡片宽度采用较小的16px。

卡片宽度设置灵活多变。 必须根据产品的智能和实际需要来设置。 平时可以多截图看看各个app的卡片宽度是怎么设置的。 设置自然会变得更加合理和得心应手。

内容宽度

一个APP不仅有各种栏（状态栏、导航栏、标签栏、工具栏）和控件图标，还有内容。 有多种方式来布置内容。 我们不会在这里解释内容应该如何布局。 说说吧先说说内容的宽度设置。

格式塔就近原则：

各个元素之间的相对距离会影响我们的感知，彼此靠近的元素看起来属于一个组，而那些相距较远的元素则被手动定义在组外。 看右图，左图中的圆在水平方向上比垂直距离更近。 这样，我们看到了 4 行点，而下图看到了 4 列。

在UI设计中对内容进行布局时，一定要注意应用邻接原则

2.内容布局

APP设计中布局内容的方式有很多种。 下面介绍两种最常用的布局方式，列表布局和卡片布局。

列表布局

列表式布局非常普遍。 当你随意打开一个应用时，这种布局基本​​上是存在的。 特点在于是否可以在较小的屏幕上显示多条信息，用户可以通过上下滑动的手势获得大量的信息反馈。 这也是一个特别通俗易懂的介绍。

卡片布局

这些布局方式都比较灵活。 其特点是每张卡片的内容和方法相互独立，互不干扰，因此不同的卡片可以出现在同一个页面上承载不同的内容。 卡片式布局比较新潮前卫，在很多toC产品中经常使用。 另外，双栏卡片的布局在以图片信息为主的App中也很常见，比如一些商城的商品展示页。 这些方法可以在一屏中显示更多内容（至少 4 张卡片）。 同时，由于左右栏的显示是分开的，用户可以更方便地比较左右栏中卡片的内容。

3.界面图片设计比例

在UI设计中，图片的大小和比例并没有严格的标准。 设计师往往根据经验和感觉来设定一个好看的尺寸，但其实我们是有规律可循的。 可以通过科学的手段设置图片规格来获得最优解。 常见的图片规格有16:9、4:3、3:2、1:1和1:0.618（黄金比例）。

4.APP版面设计规范

版面设计也叫版面编辑，即在有限的版面空间内，将版面的组成部分（文本、图片、控件）按照特定的内容进行组合、排列。 一个优秀的排版应该考虑到用户的阅读习惯和设计美学。 UI设计中布局设计的基本原则是什么？

对齐

对齐是整个布局设计中最基本和最重要的原则之一。 它可以构建整齐规则的形状，为用户带来有序一致的浏览体验。

对称

对称是对立统一规律的本质属性，呈现出一种和谐自然的美。 在应用界面的设计上，引导页、注册登录输入框和按钮的设计都是对称的设计。

团体

物以类聚。 分组就是将同类信息组合在一起，直观地呈现在用户面前。 这样的设计可以减轻用户的认知负担。 中国联通终端界面设计中最常见的分组方式是卡片，为用户提供有针对性、清晰的浏览体验。

10.切图命名规范

最后，切图需要以规范的格式命名，方便程序员查找。 建议切图命名格式全部为中文。 如果你的中文不好，你需要想办法提高一点简单的词汇量。 使用上述工具切图后，需要整理切图的名称，也可以先给视口命名再切图。 下面是图片切割元素的中英文对比：

切图命名对照表

之后，我们需要根据“tatus@”来命名每个切片。 比如我们的导航栏上有一个搜索图标，那么它的名字就是：

aault@2x.png

(@2x.png)

设计规范

然后，上去看看设计规范。 这里只是总结了规范中的一些关键信息。 更详细的信息就不多说了。 网上已经有不少大鳄出过这样的文章，大家可以自行搜索。

1.开发单位为DP和SP

DP： 特定的宽度单位。

以屏幕为标志，则1DP=1PX

估算公式：/160=px

例子：以()为例，/160=2px

SP： 专用字体单元。

以屏幕为标志，则1SP=1PX

估算公式：/160=px

例子：以()为例，/160=2px

2. 设计规范：作为设计稿的标准规范

1.从中间规格向下适配，接口调整范围最小，适配最方便。

2、在大屏时代，仍然以小规格作为设计规范，会限制设计师的设计视野。

3、使用主流规范制作设计稿规范，大大提高视觉还原等模型适配。

3. 安卓图标规范

4.安卓字体

英语: /

英语：

尺寸：主题文字36-34px 正文28-26px 提示文字24-22px

宋思远字体

密码：jd31

五、切割规范

1.切割规格必须是单数

2. 单像素图像边缘会模糊

一般情况下，我们只需要提供3套切图资源就可以满足工程师的适配，即HDPI，XHDPI，3套切图资源。 现在用figma,,xd不用自动切图直接解放右手很方便！

iOS的设计稿如何适配

现在大部分公司受限于人力、物力，无法将iOS和的设计稿全部落地，出现一稿两用的情况； 设计师使用iOS版的设计稿适配，下面我们来看一组有趣的物理转换题：

1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是说1242*2208（iOS@3倍规格）和1080*1920（规格）可以等比例缩放区别，因此可以共享iOS和1242*的规格。 为此，可以采用 iOS 设计规范进行设计。 （前提是你必须和工程师沟通清楚）

另一种方法是将750×比例调整为 1080×，微调各个控件，重新提供指示（以dp表示）。 也就是说，需要提供两套指示，一套针对iOS，一套针对iOS。

iOS开发语言

作为一名iOS开发工程师，最重要的三个工具是：-C、Swift、UIKit框架。 -C是目前效率最高的语言； 而且Swift开发效率很高。 通常iOS工程师会选择这两种语言中的一种作为开发工具。 UIKit是苹果系统自带的一套框架。 在这个框架中，有用于设置按钮、滑块、状态栏、电池电源和键盘的套接字。 所以我们看到在很多第三方APP的界面中，有很多控件是和苹果自己的程序一致的，这是UIKit的功劳。

iOS开发中的单位是pt

750×1334规格的换算关系是1pt=2px，也就是说程序员收到我们标注draft的px单位减去2得到pt。 （这也是为什么推荐设计师使用@1倍图来制作设计稿的原因）

参考资料和资源下载

苹果开发者中心网址：

苹果人机交互规范：

iOS设计资源下载：

iOS控件下载地址：

屏幕规格规范资源：

PS蓝湖插件下载：

插件下载：

Blue 手机预览APP下载：

蓝湖手动同步云盘团队协作：

长按加入UI设计群↓

如有侵权请联系删除！