一．界面尺寸

目前市面上的苹果手机主要是：iphone6/6s，iphone6/6s plus，iphone7，iphone7 plus，iphone8，iphone8 plus，iphonex。

我们可以简单归纳为：iphone6，750*1334，326ppi；iphone6 plus，1242*2208，461ppi；iphonex，1125*2436，458ppi。它们分别对应的图片素材是：@2x，@3x，@3x。

所以我建议把1242*2208作为设计稿尺寸，对应@3x图。

为什么iphone6 plus 的设计稿分辨率是1242*2208而不是1080*1920呢？

确实iphone6 plus的实际屏幕分辨率是1080*1920，屏幕密度是401ppi。我们知道163ppi条件下，苹果系统规定1pt=1px，所以401/163=2.46，也就是此时1pt=2.46px，这并不是一个整数，那苹果系统为了方便开发，从写代码到渲染这一步，都是采用@3x素材，此时1pt=3px，ppi=489，到这里可能就有人问了，苹果系统采用的是1242*2208，461ppi啊！怎么不是489ppi呢？？别急，我用下面这张图来说明原因。

想必到这里，大家应该知道1242*2208是怎么来的了。那有人就会发现这里存在误差的呀，对的，原本x=1318，取舍之后变成x=1242，相差76px。但是别忘了还有最后一步处理，渲染之后等比缩小处理到1080*1920屏幕上，继续看图。

结论：iphone6 plus屏幕分辨率实际上是1080*1920，ppi=401，它既不满足@2x，也不满足@3x，所以为了方便开发和设计，苹果系统把它归类到@3x里，但画布分别率是1242*2208而不是1318*2344，主要是考虑到X:Y必须等于9:16，这里产生的误差很小，可忽略。

二．组件大小

iphone6 plus

状态栏高度：60px

导航栏高度：132px

标签栏高度：148px

（大家也可以截屏在PS里测量）

注意：以下是个人经验总结的数值，仅供参考

导航栏图标：范围54*54px~66*66px

标签栏图标：范围68*68px~76*76px

列表最小高度：132px

内容和页边的距离：30px

最小点击区域：132px（如果是图标，那它的透明区域应该大于或等于132px）

字体大小

导航栏标题文字：50px

标签栏文字：28px

最小字号：26px

标题常用字号：46px

正文常用字号：42px

说明文字常用字号：36px

其他常用字号：34px，36px，38px

字体常用灰度等级

20%亮度：标题，正文

40%亮度：二级标题，补充文本

60%亮度：说明文本，摘要

（肉眼容易区别相差20%亮度值的色彩）

三．单位

单位大家基本都能烂熟于心了，这里还是拿出来写写吧。

Px——像素

这个单位我们不陌生，它是图像的基本单位，也是最小单位。但要记住，它是相对单位，尺寸可大可小。

Pt——点

iOS系统规定的物理绝对单位，大概是1pt=0.16毫米，它的大小是固定的，可以用量尺测量。

那为什么iOS系统要发明这么一个单位出来呢？因为px是相对单位，即大小是根据显示屏变化的，为了保证不同屏幕尺寸手机上的组件物理尺寸是一样的，所以只需要保证pt值相同，我们肉眼看到的就是一样大的。那有人就会问，明明小手机比大手机字号小啊，确实，这个问题应该是缩放显示造成的吧。

PPI——像素密度

指屏幕1英寸长度上排列的像素点数量，PPI值越高代表屏幕显示效果越精细。

它的意义是为了区别屏幕显示的清晰程度，可以作为我们买手机的参考值。

需要注意的是163ppi这个数值，因为它是苹果公司规定的普屏像素密度，且此条件下1pt=1px，所以作为设计师，看到326ppi的屏幕时，自然想到1pt=2px，对应@2x素材。

分辨率

分辨率就是手机屏幕长宽上显示的做大像素数量，比如iphone6手机，分辨率时750*1334，表示x方向上最多显示750个像素，y方向上，最多显示1334个像素。分辨率并不能体现屏幕的显示清晰度，但设计师可以利用这个参数作为设计稿的尺寸。

四．色彩

我们知道，一个产品颜色最多不能超过三个自定义色相。这三个色相是：主题色，作为软件的标识和识别色彩；邻近色，作为辅助色彩，既可以和主题色有所区别体现层次，又不会显得跳跃；对比色，作为软件的醒目提示，但使用比例要小，起到强调的作用。

一些常用色彩

五．适配

适配原理

我们知道市面上苹果手机至少有四五种屏幕密度，那设计和开发不可能兼顾这么多屏幕的，所以苹果公司就发明了一个简单的方法，只需要设计一套图写一套代码，就可以适配所有机型。这个简单的方法是什么呢？

苹果公司发明了定义屏幕密度，也就是自定义的屏幕密度分类，它们是163ppi，326ppi，489ppi，对应的是@1x，@2x，@3x图片素材。这样我们就可以把市面上的苹果手机归类到某一定义屏幕密度下，把图片素材放大缩小就可以了。需要注意的是，定义屏幕密度和实际屏幕密度并不相等，所以会有小的误差，至于为什么苹果手机不按照定义屏幕密度来生产手机呢？原因是屏幕比例，技术，性价比造成的吧，话说只要误差不影响显示，苹果公司愿怎么造就怎么造吧。

程序员如何操作

开发其实并不关心你设计的是多少像素，而是你设计的素材是多少pt的，或者是几倍图，因为开发环境有专门针对定义屏幕密度的素材库文件，你切图给开发，他放到对应的素材库就好了。为了保证显示效果一致，原则上一个文字对应的pt值是固定的，所以无论你按照几倍图设计，换算成pt都是一样的，在标注这一环节，你要么全部标注成pt，要么用px标注，但要告诉开发要除以多少倍数。一句话，开发单位是pt，一套代码搞定。

设计师应该知道什么

你设计的几倍图到底是什么意思，如何和开发沟通。

六．切图

先明确你的设计稿是几倍图，比如你设计的是@3x图，那1:1切出的图就是3倍图。

切完图之后，不要忘了规范命名和压缩图片，一定要压缩图片！压缩图片！我推荐智图压缩工具。

标注

标注也是很重要的，没有标注，开发根本不知道你设计的是啥，像素大厨标注就很方便。

七．交互

其实交互才是真正考验设计师水平的方面，上面那些规范都是固定不变的知识，看一篇文章就能学到手。但是交互不一样，准确的说，它更像是组件的灵活应用，需要考虑的方面有用户体验，排版布局，功能逻辑。

举个简单的例子，有这样一个需求：六个大分类下有各自的内容，这里我们可以用tab选项卡，也可以用列表或者图标来设计这个功能，也许还有其它更好的解决办法，但到底哪个方法才是最优解呢？所以我们需要根据功能，结合用户体验和产品逻辑，来选择设计样式。

那怎么才能在交互上有所提升呢？首先，我们要了解开发组件库，因为用组件库里现成的样式，开发效率高，交互不会出错；其次，要多搜集组件样式，比如我们想加入一些创意，就可以参考网络资源，修改一些基本样式，这样既可以避免我们脑洞的设计实现不了或者出现逻辑问题，也可以把链接发给开发看，提高沟通效率。

一句话就是，平时要多留意一些组件样式和交互方式，比如常见的搜索，输入框，日历，弹框，开关，按钮，列表，tab，卡片等等。

八．补充

• 对于iphonex的适配，我的解决办法是：按照iphone6 plus设计界面，但是要针对iphonex的屏幕重新布局，因为它的屏幕比例并不是9:16，特别是还有底部横条，按钮不能被横条挡着，影响美观不说，还会造成误操作，我们可以把底部按钮设计到右下角，避开那个横条。
  

• 这里总结了设计规范包含的方面，这只是一个提纲，每个标题下还包含很多内容，需要大家去完善。
  

一．界面尺寸

目前市面上的苹果手机主要是：iphone6/6s，iphone6/6s plus，iphone7，iphone7 plus，iphone8，iphone8 plus，iphonex。

我们可以简单归纳为：iphone6，750*1334，326ppi；iphone6 plus，1242*2208，461ppi；iphonex，1125*2436，458ppi。它们分别对应的图片素材是：@2x，@3x，@3x。

所以我建议把1242*2208作为设计稿尺寸，对应@3x图。

为什么iphone6 plus 的设计稿分辨率是1242*2208而不是1080*1920呢？

确实iphone6 plus的实际屏幕分辨率是1080*1920，屏幕密度是401ppi。我们知道163ppi条件下，苹果系统规定1pt=1px，所以401/163=2.46，也就是此时1pt=2.46px，这并不是一个整数，那苹果系统为了方便开发，从写代码到渲染这一步，都是采用@3x素材，此时1pt=3px，ppi=489，到这里可能就有人问了，苹果系统采用的是1242*2208，461ppi啊！怎么不是489ppi呢？？别急，我用下面这张图来说明原因。

想必到这里，大家应该知道1242*2208是怎么来的了。那有人就会发现这里存在误差的呀，对的，原本x=1318，取舍之后变成x=1242，相差76px。但是别忘了还有最后一步处理，渲染之后等比缩小处理到1080*1920屏幕上，继续看图。

结论：iphone6 plus屏幕分辨率实际上是1080*1920，ppi=401，它既不满足@2x，也不满足@3x，所以为了方便开发和设计，苹果系统把它归类到@3x里，但画布分别率是1242*2208而不是1318*2344，主要是考虑到X:Y必须等于9:16，这里产生的误差很小，可忽略。

二．组件大小

iphone6 plus

状态栏高度：60px

导航栏高度：132px

标签栏高度：148px

（大家也可以截屏在PS里测量）

注意：以下是个人经验总结的数值，仅供参考

导航栏图标：范围54*54px~66*66px

标签栏图标：范围68*68px~76*76px

列表最小高度：132px

内容和页边的距离：30px

最小点击区域：132px（如果是图标，那它的透明区域应该大于或等于132px）

字体大小

导航栏标题文字：50px

标签栏文字：28px

最小字号：26px

标题常用字号：46px

正文常用字号：42px

说明文字常用字号：36px

其他常用字号：34px，36px，38px

字体常用灰度等级

20%亮度：标题，正文

40%亮度：二级标题，补充文本

60%亮度：说明文本，摘要

（肉眼容易区别相差20%亮度值的色彩）

三．单位

单位大家基本都能烂熟于心了，这里还是拿出来写写吧。

Px——像素

这个单位我们不陌生，它是图像的基本单位，也是最小单位。但要记住，它是相对单位，尺寸可大可小。

Pt——点

iOS系统规定的物理绝对单位，大概是1pt=0.16毫米，它的大小是固定的，可以用量尺测量。

那为什么iOS系统要发明这么一个单位出来呢？因为px是相对单位，即大小是根据显示屏变化的，为了保证不同屏幕尺寸手机上的组件物理尺寸是一样的，所以只需要保证pt值相同，我们肉眼看到的就是一样大的。那有人就会问，明明小手机比大手机字号小啊，确实，这个问题应该是缩放显示造成的吧。

PPI——像素密度

指屏幕1英寸长度上排列的像素点数量，PPI值越高代表屏幕显示效果越精细。

它的意义是为了区别屏幕显示的清晰程度，可以作为我们买手机的参考值。

需要注意的是163ppi这个数值，因为它是苹果公司规定的普屏像素密度，且此条件下1pt=1px，所以作为设计师，看到326ppi的屏幕时，自然想到1pt=2px，对应@2x素材。

分辨率

分辨率就是手机屏幕长宽上显示的做大像素数量，比如iphone6手机，分辨率时750*1334，表示x方向上最多显示750个像素，y方向上，最多显示1334个像素。分辨率并不能体现屏幕的显示清晰度，但设计师可以利用这个参数作为设计稿的尺寸。

四．色彩

我们知道，一个产品颜色最多不能超过三个自定义色相。这三个色相是：主题色，作为软件的标识和识别色彩；邻近色，作为辅助色彩，既可以和主题色有所区别体现层次，又不会显得跳跃；对比色，作为软件的醒目提示，但使用比例要小，起到强调的作用。

一些常用色彩

五．适配

适配原理

我们知道市面上苹果手机至少有四五种屏幕密度，那设计和开发不可能兼顾这么多屏幕的，所以苹果公司就发明了一个简单的方法，只需要设计一套图写一套代码，就可以适配所有机型。这个简单的方法是什么呢？

苹果公司发明了定义屏幕密度，也就是自定义的屏幕密度分类，它们是163ppi，326ppi，489ppi，对应的是@1x，@2x，@3x图片素材。这样我们就可以把市面上的苹果手机归类到某一定义屏幕密度下，把图片素材放大缩小就可以了。需要注意的是，定义屏幕密度和实际屏幕密度并不相等，所以会有小的误差，至于为什么苹果手机不按照定义屏幕密度来生产手机呢？原因是屏幕比例，技术，性价比造成的吧，话说只要误差不影响显示，苹果公司愿怎么造就怎么造吧。

程序员如何操作

开发其实并不关心你设计的是多少像素，而是你设计的素材是多少pt的，或者是几倍图，因为开发环境有专门针对定义屏幕密度的素材库文件，你切图给开发，他放到对应的素材库就好了。为了保证显示效果一致，原则上一个文字对应的pt值是固定的，所以无论你按照几倍图设计，换算成pt都是一样的，在标注这一环节，你要么全部标注成pt，要么用px标注，但要告诉开发要除以多少倍数。一句话，开发单位是pt，一套代码搞定。

设计师应该知道什么

你设计的几倍图到底是什么意思，如何和开发沟通。

六．切图

先明确你的设计稿是几倍图，比如你设计的是@3x图，那1:1切出的图就是3倍图。

切完图之后，不要忘了规范命名和压缩图片，一定要压缩图片！压缩图片！我推荐智图压缩工具。

标注

标注也是很重要的，没有标注，开发根本不知道你设计的是啥，像素大厨标注就很方便。

七．交互

其实交互才是真正考验设计师水平的方面，上面那些规范都是固定不变的知识，看一篇文章就能学到手。但是交互不一样，准确的说，它更像是组件的灵活应用，需要考虑的方面有用户体验，排版布局，功能逻辑。

举个简单的例子，有这样一个需求：六个大分类下有各自的内容，这里我们可以用tab选项卡，也可以用列表或者图标来设计这个功能，也许还有其它更好的解决办法，但到底哪个方法才是最优解呢？所以我们需要根据功能，结合用户体验和产品逻辑，来选择设计样式。

那怎么才能在交互上有所提升呢？首先，我们要了解开发组件库，因为用组件库里现成的样式，开发效率高，交互不会出错；其次，要多搜集组件样式，比如我们想加入一些创意，就可以参考网络资源，修改一些基本样式，这样既可以避免我们脑洞的设计实现不了或者出现逻辑问题，也可以把链接发给开发看，提高沟通效率。

一句话就是，平时要多留意一些组件样式和交互方式，比如常见的搜索，输入框，日历，弹框，开关，按钮，列表，tab，卡片等等。

八．补充

• 对于iphonex的适配，我的解决办法是：按照iphone6 plus设计界面，但是要针对iphonex的屏幕重新布局，因为它的屏幕比例并不是9:16，特别是还有底部横条，按钮不能被横条挡着，影响美观不说，还会造成误操作，我们可以把底部按钮设计到右下角，避开那个横条。
  

• 这里总结了设计规范包含的方面，这只是一个提纲，每个标题下还包含很多内容，需要大家去完善。