iOS、Android的设计规范、适配问题一次全面的梳理和复习
iOS设计规范
苹果自07年1月9日正式发布iPhone到目前为止的iPhone11ProMax，已经历了十三代产品。19年9月11日推出的11、11Pro、11ProMax并没有新增尺寸，所以对设计师而言也就没有额外新增工作量了，还是按照以前的做法：750*1334px（@2x）或（375*667pt，@1x）做设计稿，再提供@2x、@3x切图。
以下为苹果手机历代产品明细
一代：iPhone
二代：iPhone3G
三代：iPhone3GS
四代：iPhone4
五代：iPhone4s
六代：iPhone5
七代：iPhone5s、iPhone5c
八代：iPhone6、iPhone6Plus
九代：iPhone6s、iPhone6sPlus
十代：iPhone7、iPhone7Plus
十一代：iPhone8、iPhone8Plus、iPhoneX
十二代：iPhoneXS、iPhoneXSMax、iPhoneXR
十三代：iPhone11、iPhone11Pro、iPhone11ProMax
如何有效记住iOS设计规范，这里我总结了一个方法“iOS五点两图记忆法”，也就是五个点+两张图。
1、设计尺寸：375x667pt@1x（750x1334px@2x）为基准设计。
2、设计工具：Sketch、AdobeXD、Photoshop
3、预览效果：SketchMirror、AdobeXD或PsPlay
4、切图输出：@2x@3x两套
5、标注工具：蓝湖，摹客
考考你：
1、iPhone8尺寸的设计稿如何快速变成iPhoneX的设计稿？
2、@2倍图被当作@3倍进行开发，会导致什么样的后果？
3、为什么要用375x667pt@1倍图进行设计？（后文也有详细答案哦）
4、iPhone8显示为34px的文字在iPhone11proMax里面是不是也是34px？
这里我们首先重点理解下PX和PT这两个单位，弄清楚为什么建议使用一倍图进行UI设计，才能在设计中以不变应万变。
请注意，在不同尺寸的显示器上，这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台27英寸的1080p液晶显示器，可以发现这两台显示器的像素分布就是27英寸的显示效果明显逊于22英寸显示器的效果，一个重要的原因就是两台液晶面板中的“像素”颗粒大小不一。
由此可见，像素这个单位是一个相对单位，不能用厘米、毫米等这些绝对度量单位来衡量他的长度或者宽度，因为1像素只代表一个单位的“点”。
另一个重要单位是PT，英文point的简称，这个单位也是iOS开发过程中使用的单位，与px这样的相对单位不同，PT（Point）是一个绝对单位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。
请大家记住一点，px是相对单位，pt为绝对单位（类似单位为厘米，毫米等等）。在不确定屏幕密度的情况下，px与pt没有任何可比性。
在开发工程师眼中，你如果使用750px的分辨率作图，那么按原大小标注设计稿中的尺寸的话，他们同样在开发环境中是要换算为一倍尺寸的，比如你标注了字号为40px，那么最终开发工程师写在代码里的就是20pt，除以2的关系。但是呢，如果使用一倍基准分辨率作图，那么就不用除以2啦，所有尺寸开发工程师直接拿过去随取随用。
sketch作为一款纯矢量的移动端ui设计软件，不管是设计还是后期与开发工程师的配合，都严格遵从开发原理，这种设计方法可以最大限度保证设计稿的复现，同时也可以减小文件体积和系统资源消耗，不管是从哪个方面看，都是设计师制作ui界面的明智之选。
最后总结一下原因，设计师使用一倍基准尺寸作图，主要是单位转换方便，输出切图方便，理解简单。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。
我们继续熟悉iOS中一些必不可少的页面规范细则。
一、引导页
引导页是一张完整图，不能适配，因此需要单独出设计图，iOS共需提供6套尺寸，当然也支持视频形式。（目前5以下的适配基本淘汰）
二、图标
注意：最终提交给到程序员的切图是直角，非圆角图标。
其他设备图标尺寸
三、状态栏和导航栏（具体尺寸见五点二图）
导航栏：状态栏下面的区域，含页面标题、功能图标等信息区域。
导航栏中的元素必须遵守如下几个对齐原则:
1、返回按钮必须在左边对齐。
2、当前界面的标题必须在导航栏正中。（可无）
3、其他控制按钮必须在右边对齐。
四、标签栏（具体尺寸见五点二图）
标签栏：即Tab栏，为底部快速入口，iOS规范中Tab栏一般有五个、四个、三个图标的形式。分为“纯图标标签”和“图标加文字标签”两种形式。
五、iTunes上传页面
六、字体
中文字体：PingFangSC，英文字体：SFUIText、SFUIDisplay，其中SFUIText适用与小于19pt的文字，SFUIDisplay适用于大于20pt的文字。
七、色彩
iPhone的系统色
八、控件
但得注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。
默认控件
控件中无处不在的44pt（88px）
无处不见的44pt（88px）
九、界面设计原则
1.边距和间距（@2x）
在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、通透和边距、间距的设计规范紧密相连。
（1）全局边距（iOS13，@2x）
iOS原生态页面“设置”和“通用”页面的边距都是40px。（@2x）
（2）卡片间距
以iOS（750*1334px）为例，设置页面卡片间距为70px，而通知中心承载了大量的信息，因此采用了较小的16px作为卡片的间距。
总结：卡片间距的设置是灵活多变的，一定要根据产品的气质和实际需求去设置，平时也可以多截图测量一下各类APP的卡片间距都是怎么设置的，看的多了并融会贯通，卡片间距设置自然会更加合理，更加得心应手。
（3）内容间距
一款APP除了各种栏（状态栏、导航栏、标签栏、工具栏）和控件icon，就是内容了，内容的布局形式多种多样，这里不去探讨内容具体应该如何去布局，我们来说一说内容的间距设置问题。
格式塔邻近性原则：
在UI设计中内容布局时，一定要重视邻近性原则的运用
2.内容布局
在APP的设计中内容的布局形式多种多样，这里介绍最常用的两种布局形式，列表式布局和卡片式布局。
（1）列表式布局
列表式布局方式非常普遍，随便打开一个APP，基本都存在这种布局方式。特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。这也是一种非常容易理解的展示形式。
（2）卡片式布局
这种布局形式相对灵活。其特点在于每张卡片的内容和形式相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。卡片式布局相对时尚、前卫，很多toC产品经常用到。另外，双栏卡片的布局形式，也常见于以图片信息为主导的App，例如一些商城的商品陈列页面。这种形式能在一屏里显示更多的内容（至少4张），同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。
3.界面图片设计比例
在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。
4.APP版式设计规范
版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素（文字、图片、控件）根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在UI设计中版面设计的基础原则有哪些呢？
（1）对齐
对齐是贯穿版式设计最基础，最重要的原则之一，它能建立起一种整齐规矩的外观，带给用户有序一致的浏览体验。
（2）对称
（3）分组
物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。
十、切图命名规范
切图命名对照表
然后我们要按照”功能_类型_名称_状态@倍数”来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是：
navi_icon_search_default@2x.png
(导航_图标_搜索_正常@2x.png)
Android设计规范
一、安卓开发单位是DP、SP
DP：安卓专用长度单位。
以160DPI屏幕为标注，则1DP=1PX
计算公式：dpxdpi/160=px
例：以720x1280px（320dpi）为例，1dpx320dpi/160=2px
SP：安卓专用字体单位。
以160DPI屏幕为标注，则1SP=1PX
计算公式：spxdpi/160=px
例：以720x1280px（320dpi）为例，1spx320dpi/160=2px
二、安卓设计尺寸：以1080x1920px作为设计稿标准尺寸
1.从中间尺寸向上、下适配，界面调整幅度最小，最方便适配。
2.大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。
3.用主流尺寸来做设计稿尺寸，极大的提高了视觉还原和其他机型适配。
三、安卓图标尺寸
四、安卓字体
中文：思源黑体/NotoSansHan
英文：Roboto
大小：主题文字36-34px正文28-26px提示文字24-22px
五、切图规范
1.切图尺寸必须为双数
2.单像素的图会出现边缘模糊的情况
一般情况下，我们只需要提供3套切图资源就可以满足安卓工程师的适配，分别是HDPI、XHDPI、XXHDPI3套切图资源。
如何用iOS的设计稿适配安卓
现在绝大多数公司限于人力物力的限制，不能把iOS和安卓的设计稿全部执行出来，因此就存在一稿两用的情况；设计师以iOS版本的设计稿来适配安卓，下面我们来看一组有趣的数学换算题：
1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是说，1242*2208（iOS@3倍尺寸）与1080*1920（安卓尺寸）是可以等比缩放的，所以，iOS与Android的尺寸是可共用1242*2208px。因此，以iOS设计尺寸进行设计是可以适配Android的。（前提是必须和安卓工程师沟通清楚）
另一种方式，就是把750×1334px等比例调整尺寸到安卓1080×1920px，对各个控件进行微调，重新提供标注（用dp标注）。也就是需要提供两套标注，一套给iOS，一套给Android。
iOS开发语言
作为iOS开发工程师，最重要的三个工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言；而Swift开发非常高效。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架，这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中，有许多控件和苹果自带程序是一致的，这就是UIKit的功劳。
iOS开发里单位是pt
750×1334尺寸的换算关系1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。（这也是为什么建议设计师用@1倍图做设计稿的原因）