2020年整理的最全设计规范

本文6000字上下，反复校对6遍以上，初步阅读完大概需要25分钟，若是深入理解并完全吸收则建议“先收藏再反复的品，细细的品”。希望对各位朋友有所帮助，不足之处望校正，祝阅读愉快。

双20年终究还是来了，互联网产品对于这个时代不是什么新鲜事了，互联网人也从未停止对优秀产品的探索和创新。而做为一个设计人的我们，在前行的脚步中也应该温故知新，就让我跟大家一起来对iOS、Android的设计规范、适配问题做一次全面的梳理和复习吧。

iOS设计规范

苹果自07年1月9日正式发布iPhone到目前为止的iPhone11Pro Max，已经历了十三代产品。19年9月11日推出的11、11Pro、11Pro Max并没有新增尺寸，所以对设计师而言也就没有额外新增工作量了，还是按照以前的做法：750*1334px（@2x）或（375*667pt，@1x）做设计稿，再提供@2x、@3x切图。

以下为苹果手机历代产品明细（话说你拥有过那几代产品，欢迎留言交流）

一代：iPhone

二代：iPhone3G

三代：iPhone3GS

四代：iPhone 4

五代：iPhone 4s

六代：iPhone 5

七代：iPhone 5s、iPhone 5c

八代：iPhone6、iPhone6 Plus

九代：iPhone 6s、iPhone 6s Plus

十代：iPhone7、iPhone7 Plus

十一代：iPhone8、iPhone8 Plus、iPhone X

十二代：iPhone XS、iPhone XS Max、iPhone XR

十三代：iPhone11、iPhone11Pro、iPhone11Pro Max

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

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

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

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

4、切图输出：@2x @3x两套

5、标注工具：蓝湖，摹客

考考你：

1、iPhone8尺寸的设计稿如何快速变成iPhoneX的设计稿？

2、@2倍图被当作@3倍进行开发，会导致什么样的后果？

3、为什么要用375x667pt @1倍图进行设计？（后文也有详细答案哦）

4、iPhone8显示为34px的文字在iPhone11 pro Max里面是不是也是34px？

这里我们首先重点理解下PX和PT这两个单位， 弄清楚为什么建议使用一倍图进行UI设计，才能在设计中以不变应万变。（说明：该部分内容优化自静电老师的总结。公众号@静Design）

PX大家可能比较熟悉，就是像素，英文pixel的简称。最通俗的理解就是找一个放大镜（不是电脑中的放大镜，是真实的放大镜），然后对准自己面前的显示器或者手机屏幕观看，大部分显示器会在放大镜下出现一个个点。这就是我们平时所说的像素概念。在一台物理分辨率为1080x1920px的显示器中，横向分布1920个点，纵向则有1080个点。这些点通过显示器的光学特性，为我们组成不同的图像。

请注意， 在不同尺寸的显示器上，这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台27英寸的1080p液晶显示器，可以发现这两台显示器的像素分布就是27英寸的显示效果明显逊于22英寸显示器的效果，一个重要的原因就是两台液晶面板中的“像素”颗粒大小不一。

由此可见，像素这个单位是一个相对单位，不能用厘米、毫米等这些绝对度量单位来衡量他的长度或者宽度，因为1像素只代表一个单位的“点”。

另一个重要单位是PT，英文point的简称，这个单位也是iOS开发过程中使用的单位，与px这样的相对单位不同，PT（Point）是一个绝对单位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。

同样用简单直观的例子来演示，拿两台不同型号的iPhone，比如一台ip11和一台ip11pro Max，打开同样一款应用（如QQ音乐），准备好一把尺子，使用尺子分别测量最上方title“音乐馆”文字尺寸。经测量，可以发现不同型号的“音乐馆”文字的尺寸都一样。也可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件，并在两部手机安装，确保这个文件中的字体使用一个字号（30PT）。在两个手机中运行并用尺子测量，我们发现他们的物理尺寸完全一样。

请大家记住一点，px是相对单位，pt为绝对单位（类似单位为厘米，毫米等等）。在不确定屏幕密度的情况下，px与pt没有任何可比性。

在开发工程师眼中，你如果使用750px的分辨率作图，那么按原大小标注设计稿中的尺寸的话，他们同样在开发环境中是要换算为一倍尺寸的，比如你标注了字号为40px，那么最终开发工程师写在代码里的就是20pt，除以2的关系。但是呢，如果使用一倍基准分辨率作图，那么就不用除以2啦，所有尺寸开发工程师直接拿过去随取随用。

sketch作为一款纯矢量的移动端ui设计软件，不管是设计还是后期与开发工程师的配合，都严格遵从开发原理，这种设计方法可以最大限度保证设计稿的复现，同时也可以减小文件体积和系统资源消耗，不管是从哪个方面看，都是设计师制作ui界面的明智之选。

最后总结一下原因，设计师使用一倍基准尺寸作图，主要是单位转换方便，输出切图方便，理解简单。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。

我们继续熟悉iOS中一些必不可少的页面规范细则。

一、引导页

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

二、图标

以1024x1024px尺寸进行图标创作即可。再通过现成尺寸模版资源，一键生成整套尺寸导出即可。（模版链接：http://www.cdwanxun.com/