一、iOS五点两图记忆法

如何有效记住iOS设计规范，我总结了一个方法“iOS五点两图记忆法”，也就是五个点+两张图。

• 设计尺寸：375x667pt @1x（750x1334px @2x）为基准设计。

• 设计工具：Sketch、Adobe XD、Photoshop

• 预览效果：Sketch Mirror、Adobe XD或Ps Play

• 切图输出：@2x @3x两套

• 标注工具：蓝湖，摹客

两图psd下载链接：https://pan.baidu.com/s/15g2x0vDd1yZevADuUj1V3g 提取码: i4ai

设计师使用一倍基准尺寸作图的原因

主要是单位转换方便，输出切图方便。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。

二、引导页

引导页是一张完整图，不能适配，因此需要单独出设计图，iOS共需提供6套尺寸，当然也支持视频形式。（目前5以下的适配基本淘汰）

三、图标

以1024x1024px尺寸进行图标创作即可。再通过现成尺寸模版资源，一键生成整套尺寸导出即可。

模版链接：https://developer.apple.com/design/resources/Template-AppIcons-iOS

注意：最终提交给到程序员的切图是直角，非圆角图标。

在应用界面的设计中，功能图标不是单独的个体，通常是由许多不同的图标构成整个系列，它们贯穿于整个产品应用的所有页面并向用户传递信息。

一套APP图标应该具有相同的风格，包括造型规则、圆角大小，线框粗细，图形样式和个性细节等元素都应该具有统一的规范。

通过分析以上三组图标可以得出：他们具有统一的色彩，统一的圆角大小，统一的线框粗细，那综合起来也就是具有统一的风格，给用户高度统一的视觉体验。

三、状态栏和导航栏（具体尺寸见五点二图）

状态栏：显示时间、运营商信息、电池电量等信息区域。(齐刘海区域)

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

状态栏跟导航栏一般会进行一体化设计。现在流行大标题导航栏设计，也就是加大导航栏的高度，融入页面内容的标题，当内容上滑时，大标题再回归到常规导航高度。（大标题导航栏的高度一般为116pt（232px），这里包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。

导航栏图标尺寸

导航栏中的元素必须遵守如下几个对齐原则:
1、返回按钮必须在左边对齐。
2、当前界面的标题必须在导航栏正中。（可无）
3、其他控制按钮必须在右边对齐。

四、标签栏（具体尺寸见五点二图）

标签栏：即Tab栏，为底部快速入口，iOS规范中Tab栏一般有五个、四个、三个图标的形式。分为“纯图标标签”和“图标加文字标签”两种形式。

标签栏图标尺寸

五、iTunes 上传页面

在程序上传App Store时我们需要提供多张App截图，供用户了解APP的功能。这里我们需要提供1242 x 2688px和1125 x 2436px两套截图。也支持视频形式。（微信目前采用的是五张静态页面形式）

六、 字体

中文字体：PingFang SC，英文字体：SF UI Text 、SF UI Display，其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。

链接: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取码: hd35

在一款APP中字号范围一般在20-36之间（@2x）,当然iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

关于字体：在iOS 9推出之前设计师普遍采用华文黑体、谷歌思源、冬青等字体进行设计，iOS 9推出了苹果自己的字体——苹方！自此之后苹方字体被广泛应用于移动端设计中。

关于字体颜色和是否加粗：字体的颜色设置我们一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体（注意要用字体本身的字重，不能用PS的加粗功能）来区分重要信息和次要信息，进行信息层级的划分。

七、色彩

在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以，只要符合产品气质并且在色彩心理学理论范围内。官方建议的系统色彩如下：

八、控件

控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。

下载地址：https://developer.apple.com/design/resources/

为了让设计更符合整体产品品牌调性，这些控件可以做二次设计。

但得注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。

控件中无处不在的44pt（88px）
之前我们介绍过，人手指点击区域为7mm - 9mm，在@2x中就是44pt（88px）。苹果的导航条、列表、工具栏都充满了44pt（88px）这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。

九、界面设计原则

1.边距和间距（@2x）

在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、通透和边距、间距的设计规范紧密相连。

（1）全局边距（iOS13，@2x）

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

iOS原生态页面“设置”和“通用”页面的边距都是40px。（@2x）

微信和支付宝的边距都是32px。（@2x）

（2）卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

以iOS（750*1334px）为例，设置页面卡片间距为70px，而通知中心承载了大量的信息，因此采用了较小的16px作为卡片的间距。

下面来看一下微信的卡片间距设置的是多少，以及颜色值。

注：卡片间距和颜色值是直接截图测量和吸取的，可能不十分准确

继续举例，下面的两张截图分别是巨划算（卡片间距20px）和拼多多（卡片间距16px）的首页截图，这种电商类的APP因为需要承载大量的信息，所以一般间距设置的都比较小。

卡片间距的设置是灵活多变的，一定要根据产品的气质和实际需求去设置，平时也可以多截图测量一下各类APP的卡片间距都是怎么设置的，看的多了并融会贯通，卡片间距设置自然会更加合理，更加得心应手。

2. 内容间距

一款APP除了各种栏（状态栏、导航栏、标签栏、工具栏）和控件icon就是内容了，内容的布局形式多种多样，这里不去探讨内容具体应该如何去布局，我们来说一说内容的间距设置问题。

先来介绍一下格式塔原则中的一个重要的原则就是邻近性，格式塔邻近性原则认为：单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起，，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分组外，距离近的关系紧密。来看下图，左图中的圆在水平方向比垂直距离近，那么，我们看到了4排圆点，而右图则看成4列。

在UI设计中内容布局时，一定要重视邻近性原则的运用，比如在下面这款轻芒阅读APP的主界面中，每一个应用名称都远离其他图标，与对应的图标距离较近，保持亲密的关系，也让用户的浏览变得更直观，如果应用名称与上下图标距离相同，就分不出它是属于上面还是下面，从而让用户产生错乱的感觉。

再来看一个案例，日日煮APP，上面图片与文字较近，下面图片与文字较远，所以我们清晰的知道文字是属于上面的图片的。

2.内容布局

在APP的设计中内容的布局形式多种多样，这里介绍最常用的两种布局形式，列表式布局和卡片式布局。

（1）列表式布局

列表式布局方式非常普遍，随便打开一个APP，基本都存在这种布局方式。特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。这也是一种非常容易理解的展示形式。

以我们最常用的微信和QQ为例，其“信息”页面都是采用的列表式布局，在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px，最大的高度要视内容的多少而定。

继续举例，自如（列表高度110px）和唯品会（列表高度106px）的列表式布局。

（2）卡片式布局

形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富。

在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等。

双栏卡片的布局形式，比较常见于以图片信息为主导的App。例如一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。

3.界面图片设计比例

在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。

这些比例不无根据，它们都和图片尺寸有关。16:9 是根据人体工程学的研究，发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形，4:3 是勾三股四弦五，在摄影中非常常见……。

4.APP版式设计规范

版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素（文字、图片、控件）根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在UI设计中版面设计的基础原则有哪些呢？

对齐

对齐是贯穿版式设计最基础，最重要的原则之一，它能建立起一种整齐规矩的外观，带给用户有序一致的浏览体验。

对称

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

分组

物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。

5、设计适配

iOS主流设备的分辨率分别是640x1136px（@2x）（iPhone SE）、750 x1334px（@2x）（iPhone 6s/7/8）、1242x2208px（@3x）（iPhone 6s/7/8 Plus）、1125x2436px（@3x）／750x1624px（@2x）（iPhone X）。

![(https://upload-images.jianshu.io/upload_images/17279224-d1d6d7430dfcf73e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Alt

在设计设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的，我们可以选择中间尺寸750 x1334px作为基准，向下适配640x1136px，向上适配1242x2208px和750x1624px／1125x2436px。

750x1334向下适配640x1136

由于750x1334px和640x1136px两个尺寸的界面都是2倍的像素倍率，因此它们的切片大小是相同的，即系统图标、文字和高度都无需适配，需要适配的是宽度。

为了让大家了解适配的原则，我们以文字描述和图示的方式进行750x1334px到640x1136px的界面推导。

绘制一个750x1334px的设计图，这是最常见的首页设计图，从上至下分别是状态栏、导航栏、首焦图、主要入口、分割、列表。

下面开始进行适配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的图标、文字大小等都是相同的，所以我们不需要改变图像大小，只需将画布大小改成 640x1136px即可，然后再改变横向元素的间距以达到适配的目的。

首先打开750x1334px的设计稿，执行Command+Alt+C（改变画布大小的快捷键），鼠标左键单击“定位”的左上角的格子，设置宽高为640和1136，点击“确定”。

改变画布大小之后，设计稿的右边和下边都被裁切（上面左图中半透明蒙版覆盖区域），画布缩小成640x1136px。

上面左图裁切到右图适配完成，做了如下调整。
1）导航栏右边的图标向左移动保持和原来的右边距一致，标题居中。
2）首焦图高度除以1.17（750／640=1.17得到）后居中，宽度640px。
3）主要入口右边的图标向左移动保持和原来的右边距一致，各图标的间距等宽。

750x1334向上适配1242x2208

由于750x1334px界面是2倍的像素倍率，而1242x2208px是3倍的像素倍率，也就是说1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，所以我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍，然后调整画布大小为1242x2208px，最后调整界面图标和元素的横向间距的大小完成适配。

上面说了整体思路，下面我们来说说具体怎么适配。

首先对750x1334px的画布执行Command+Alt+I命令（调整图像大小），单位设置为百分比，宽高设置为150%，点击“确定”，调整之后的画布大小为1125x2001px。

紧接着对1.5倍之后的1125x2001px界面执行Command+Alt+C（调整画布大小），鼠标单击“定位”左上角的格子，调整宽高为1242和2208px，点击“确定”。

上面左图拓展画布到右图完成适配做了如下调整。
1）导航栏右边的图标向右移动保持和原来的右边距一致，标题居中。
2）首焦图的高度乘以1.65（1242/750=1.65得到）后居中，宽度1242px。
3）主要入口右边的图标向右移动和原来的右边距一致，各图标的间距等宽。
注：分割线仍是1px。

750x1334向上适配1125x2436px（@3x）

与苹果之前发布的iOS设备相比，iPhone X的像素分辨率发生了变化，为1125x2436px（@3x），在实际工作中为了方便向上和向下的适配，我们仍然可以选择熟悉的iPhone 7（750x1334px）的尺寸作为模版进行设计，只是高度增加了290px；设计尺寸为：750x1624px（@2x）。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的设计稿。

在适配的时候需要注意，状态栏由之前的40px增加到88px，标签底部预留68px用于放置主页指示器，如下图所示。

![](https://img.zcool.cn/community/01c1815ac19e90a8012182074703f5.jpg]

关于主页指示器的适配涉及到两种情况：底部出现标签栏、工具栏等操作设计时，需要将底色下延68px并填充原有颜色，这样的处理可以让底部设计更佳简洁舒适，没有功能操作时，页面底部不需要填充颜色，只需盖住主页指示器即可。

对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

十、切图规范

当界面设计定稿之后，设计师需要对图标进行切片提供给开发工程师，通常我们只需要对icon进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。

输出切片

先将设计稿中的图标重新排列在一张新的画布中，保证同样尺寸的图标间距相同，这样做的好处是为图标建立一个控件库，有利于图标的整理。

给每一个图标建立好参考线之后，用PS自带的切片功能，沿着建立好的每个图标的参考线画框即可，注意最后要输出PNG格式的切片（PNG格式拥有更多的颜色和细节并且支持透明）。

在具体操作时首先要将画布背景色去掉，让画布变成透明，做好切片后执行“文件-存储为Web所用格式，在对话框中选择PNG格式，点击“存储”即可。

注：图中标签栏图标的底色块是为了保证统一的切片尺寸，可以根据色块建立参考线，具体切图时要将色块去掉。

切图命名

切图最后需要命名成规范格式，方便程序员查找。切图命名的格式建议全英文。借由上述工具切图后，需要整理切图命名，或在切图之前对图层命名亦可。以下是切图元素的中英文对照：

然后我们要按照“功能类型名称_状态@倍数”来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是：
navi_icon_search_default@2x.png
(导航图标搜索_正常@2x.png)

设计稿标注

当界面设计定稿之后，设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率，常用的标注工具有Mark Man或PX Cook。

在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度；界面的背景颜色、不透明度；各个图标、列表、文字之间的间距。

界面标注的作用是给开发工程师提供参考，因此在标注之前需要和开发工程师进行沟通，了解他们的工作方式，标注完成之后宣讲你的注意事项，以更快捷高效的完成工作，并且最大限度的完成视觉高的还原。

iOS开发语言

作为iOS开发工程师，最重要的三个工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言；而Swift开发非常高效。一般iOS工程师会在这两个语言中选择一种作为开发工具。

UIKit是苹果系统自带的一套框架，这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中，有许多控件和苹果自带程序是一致的，这就是UIKit的功劳。

iOS开发里单位是pt

750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。

参考资料

也许是2020年全网最全的关于iOS、Android设计规范、适配总结文章