UI界面设计尺寸规范2019-2020最系统全面

UI界面设计尺寸规范2019-2020最系统全面

这个是苹果手机的对于尺寸  如果是用PS做设计稿就用750*1334，如果是用SKetch或者XD来设计，常见是用1倍尺寸来说，也就是375*667或者375*812（iPhone X）。

分辨率和显示规格

这个是苹果手机的对于尺寸  如果是用PS做设计稿就用750*1334，如果是用SKetch或者XD来设计，常见是用1倍尺寸来说，也就是375*667或者375*812（iPhone X）。

分辨率和显示规格

下面4张图片摘自：超全面的UI设计规范整理汇总（包含iPhone X适配）

规范文档。

字体：

app所用的字体大礼包下载（虎哥整理的）

中文字体：PingFang SC

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

其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字

注意：下面字号pt单位是按照1倍说明的，如果你是按照750*1334设计的话，需要自己乘2得到PX像素值。

常见的字体大小：

24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。

图标 Icon

从iOS 7开始，app图标一直使用超椭圆的形状，原来旧的简单圆角半径值没有了。所以在为iOS设计应用程序图标时，我建议使用Apple提供的官方应用程序图标模板。

圆角的图形不应该包含在最终的输出成品中，但如果你想要添加和应用程序icon拐角对齐的描边和阴影效果，那你可能还会用到圆角图形。

提醒：如果你要使用超椭圆形状对icon进行蒙板（遮罩），又希望将应用效果和icon拐角对齐，那你要确保在遮罩外的区域不能使用任何透明的图形。应用程序icon不支持透明度，相反作为纯黑色进行渲染。如果你的遮罩不是百分百精确，那用户将会在圆角边缘看 到黑色的锯齿。推荐将canvas的背景设置成和app icon一样的背景。

我们一般做1024×1024尺寸，一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

注意：我打开了裁切圆角的开关，所以自动生存的都是圆角的，主要是为了过稿子给大家看着方便。

给程序小哥的素材资源不用打开这个开关，那么自动切出就是方角的，直接一包图标素材丢给程序小哥就行了。

记住画图标的时候图形尽量在下图所示的圆形内。

自定义图标 Custom Icons

界面的图标切图：

1. 切图教程

2. 用Cutterman选中@2x @3x导出。

界面主流标注工具：

ios开发里单位是pt

750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。