UI 设计师从零开始做一个App 要经历哪些流程？这个系列的文章会为新手一一讲解。本篇会为你讲解界面设计中基础的知识点（设计稿尺寸、图标/字体设计等），比较实用。
界面设计
目前在行业里，关于APP界面设计规范也是层次不齐，很多都还停留在6的设备和iOS 9的系统之上，而现在最新的是iPhone X和iOS 10了（更新换代真的很快），我这里说的是最新的iOS 界面设计规范
一. 关于设计工具
俗话说：工欲善其事必先利其器，好的工具可以让我们的工作效率更高，做界面设计我们用的最多的就是PS和AI了，如果你是Mac用户，可以尝试一下Sketch，软件的版本当然是推荐高版本，因为功能更强大，作图的速度也就更快。
我个人刚接触PS是从CS6开始，CS 6 – CC – CC 2014 – CC 2015，一直到现在的最新的CC 2017，深刻体会，新的版本更好用。也可以根据个人习惯，选择自己顺手的工具就好。
二. 设计稿尺寸
在看设计稿尺寸之前，我们先来了解一下APP界面设计构成。
界面构成由：布局层、图文排版层和图标层。
在iPhone 6还没出的时候，都是用640×1136 px来做设计稿的，自从6的发布，所有的设计稿尺寸以750×1334 px来做设计稿尺寸。
再带大家来看看，到目前为止所有iPhone的尺寸（1-3代就不用考虑了）：
iPhone界面设计规范：
iPhone 界面尺寸：
以750x1334px作为设计稿标准尺寸的原由：
1. 从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。
2. 大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。
3. 设计安卓版本时只需做最小的设计调整，提升设计效率。
所以做设计稿时请以750 x 1334 px来做设计稿。
在文档建立参考线是一个很好的习惯，我希望大家也可以养成这个习惯，上下很容易设置，左右我习惯设置24 px的距离，我通过对国内外很多APP就行了对比，总结是24 px更合理，这个是我的个人习惯，所以也不要当做是明文规则，你设置为30 px，也是可以的。
三. 图标设计
iPhone 图标尺寸：
图标设计请用栅格化系统进行设计。
设计尺寸：1024 x 1024 px，尽可能的采用黄金比例设计。
四. 关于设计字体
先来看一下字体的历史演变过程
iOS 9：英文字体为Helvetica Neue
iOS 9：中文字体由为冬青黑
iOS 10：英文字体为San Francisco
iOS 10：中文字体为苹方
关于字体大小的问题：
顶部操作栏文字大小 34-38px
标题文字大小 28-34px
正文文字大小 26-30px
辅助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一个范围，这要根据设计的视觉效果来决定，不要死记硬背，但是切记，字体大小要用偶数
我们设计完界面，就要开始切图和标注了。
五. 切图工具和标注工具
1. 切图工具：Cutterman：一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。推荐安装官方完整版PS CC及以上版本，目前cutterman最新版为3.2.0版本。
Cutterman官方地址：http://www.cutterman.cn/
2. 标注工具：
Parker 现在Parker已经更新到3.1.0，优点在于将标注、切图这两项设计完稿后集成在一个软件内完成，支持Windows和Mac双平台。标注功能包括：支持长度，颜色，区域，文字注释。
Parker安装包和使用教程请戳这里：http://www.cutterman.cn/zh/parker
Parker，和cutterman是同一家的，Parker能够自动计算尺寸、距离、文字大小、阴影、描边圆角、行高等信息，并按照你的需要进行标注, 它极大节省你标注的时间，大幅度提升设计效率。
但是，Parker并不是免费的，而是一款付费软件，需要60RMB。
六. 页面标注
标注是非常重要的，开发哥哥能不能完美的的还原设计稿，很大一部分取决于我们的标注；如果不清楚你该怎么标，一定要和开发哥哥沟通！
沟通是非常有效解决问题的途径！
在这里我大致的说一下我的标注习惯，不需要将每一张效果图都进行标注，你标注的页面能保证开发能把每个页面都能顺利进行就可以了。
我拿我标注过的页面做个示例：
我们从上面的标注图可以看出，需要标注的内容有：
文字：字体大小、字体颜色
布局控件属性：控件宽高、背景色、透明度、描边、圆角大小
列表：列表高度、列表颜色、列表内内容上下间距
间距：控件之间的距离、左右边距
段落文字：字体大小、字体颜色、行距
全部属性：如导航栏文字大小、颜色，左右边距，默认间距等，你可以提前跟开发哥哥说好，不用标注
所有的页面标注总结起来就是：标文字，标间距，标大小，标区域
注：标注颜色格式是使用16进制（如：#FF0000），还是RGB（255,0,0）？你需要和开发哥哥商量一下，根据他的开发习惯，一般采用16进制色值就好了。
七. 界面切图
我还是拿图举例来说明:
icon_alipay.png→iPhone 1-3代的手机(已经不考虑了)
icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸，这就是我们通常所说的2倍图
icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，这就是3倍图
可以简单的理解为倍数关系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。
总结
1. 到底哪些资源需要切图，哪些不需要切图？
只要是无法用代码来实现和表达出来的，就需要切图
如果实在不清楚要不要切图，多和开发沟通，他会告诉你哪些是需要你切图的
2. 切图需要切几套？（这里我只以iOS作为标准，安卓下期再说）
理论上，我们需要切3套图，是为了更好的适配
在实际工作中，iOS只需要切2套图就可以，分别为：@2x和@3x
3. 切图该怎么命名，不会命名怎么办？
之前看到过一篇关于界面切图命名规范的文章，请戳进去：《基础知识！写给UI设计新手的切图命名规则手册》
注意：切图是需要注意几点
切图输出格式必须为png24位、png8位、jpg格3种格式
同一模块内，切图大小应保持一致
切图输出大小必须保持为偶数
为了减小包的大小，所有切图尽量压缩后再给开发
关于设计界面、切图和标注就说到这里了，如果在工作中，不清楚该怎么切怎么标的时候，多和开发沟通交流，良好的沟通才是解决问题的唯一方法，切记不要一个人在那瞎琢磨。
