iOS设计尺寸

1.1 界面设计尺寸

目前主流的 iOS 设备主要有iPhone X（5.8英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone SE（4英寸），采用Retina 视网膜屏幕，其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。

现在做设计稿主要是用PS、SKetch（适用于Mac）和XD，但目前很多设计师还是用PS，win10系统可以用XD。Adobe XD 可以打开PS、AI、Sketch文件，并且Windows和Mac都能安装使用。

如果用PS做设计稿就用750*1334或750*1624（iPhoneX）

如果用SKetch或XD做设计稿，常用1倍尺寸来做，也就是375*667或者375*812（iPhone X）。

在设计设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的，我们可以选择中间尺寸750 *1134px作为基准，向下适配640*1136px，向上适配1242*2208px和750*1624px/1125*2436px。

---

1.2  字体设计规范

文字是 APP 中最核心的元素，是产品传达给用户的主要内容，所以说文字在 APP 的设计中是非常重要的。那么，字体如何选择，字号如何设定，是否加粗，颜色如何设置？

中文字体：PingFang SC

英文字体：SF UI Text 、SF UI Display

其中SF UI Text适用<19pt的文字，SF UI Display适用>20pt的文字

常见字体大小：22px、24px、26px、30px、34px，40px等。字体是偶数，最小字号20px。

---

1.3  组件库

1.3.1  状态栏

750*1334：高度为40px；   750*1624：高度为88px；

1.3.2  导航栏

导航栏（Nav Bar）高度为88px；

一般都存在于屏幕的顶部，状态栏的下方。

导航栏包含了可以导航整个应用、管理当前界面内容的控件。导航栏可以设置为不透明的纯色背景、渐变色背景甚至是一个自定义的位图。

导航栏中的元素必须遵守如下几个对齐原则:

返回按钮必须左对齐；

当前界面的标题必须在导航栏居中；

其他控制按钮必须右对齐。

1.3.3  标签栏

标签栏（Tab Bar）高度为98px；iPhoneX底部高度为68px；

标签栏（Tab Bar）可以让用户快速地在一个应用的几个页面之间来回切换，通常出现在屏幕的底部边缘。

标签栏标签个数是有限的，iPhone设备上最多允许展示5个标签，如果超过了最大值，那么最后一个标签就会被替换成“更多”选项，该 选项会引出一个列表，里面全是被隐藏掉的标签以及一个可以将所有标签进行重新排序的选项。为了通知用户来自某个界面的新消息，在对应标签按钮上标记出消息条数就显的很有意义。另外，如果某个 界面是暂时不可用的，那么它对应的标签按钮也不应该完全隐藏，而是应该整体变淡呈现出一种视觉上的不可点击状态。

---

1.4  其它

1.4.1  引导页/启动页

值得注意的是引导页/启动页切图需要单独设计多套（640*1136、750*1334、1125*2436、1242*2208）

1.4.2  版式设计

UI设计中版面设计的原则:对齐，对称，分组

---

1.5  切图规范

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

1.5.1  输出切片

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

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

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

1.5.2  切片命名

切片命名的通用规范是，界面_功能_状态.png。名称应使用英文命名，不要使用数字或者符号作为开头，使用下划线进行连接，例如：首页正常状态下的按钮命名 [email protected]，其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性，设计师需要先和合作的开发工程师进行沟通确认。

---

1.6  设计稿标注

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

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

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