先来看看各种iPhone的尺寸和分辨率，这张图写的很清楚。

设备名称

屏幕尺寸

PPI

Asset

竖屏点(point)

竖屏分辨率(px)

iPhone X

5.8 in

458

@3x

375 x 812

1125 x 2436

iPhone 8+, 7+, 6s+, 6+

5.5 in

401

@3x

414 x 736

1242 x 2208

iPhone 8, 7, 6s, 6

4.7 in

326

@2x

375 x 667

750 x 1334

iPhone SE, 5, 5S, 5C

4.0 in

326

@2x

320 x 568

640 x 1136

iPhone 4, 4S

3.5 in

326

@2x

320 x 480

640 x 960

iPhone 1, 3G, 3GS

3.5 in

163

@1x

320 x 480

320 x 480

iPad Pro 12.9

12.9 in

264

@2x

1024 x 1366

2048 x 2732

iPad Pro 10.5

10.5 in

264

@2x

834 x 1112

1668 x 2224

iPad Pro, iPad Air 2, Retina iPad

9.7 in

264

@2x

768 x 1024

1536 x 2048

iPad Mini 4, iPad Mini 2

7.9 in

326

@2x

768 x 1024

1536 x 2048

iPad 1, 2

9.7 in

132

@1x

768 x 1024

768 x 1024

最新设计指南推荐：

虽然现在出来了Iphone X ，但是我们在工作中还是会按照750*1334来设计，虎哥总结一个精简版的设计流程方法，按这个做法就可以展开工作。

现在做设计稿主要是用到PS、SKetch(mac电脑)、XD这3个都可以，鉴于大部分人没有mac电脑，目前很多设计师还是用的PS在工作，XD的出现预计要爆发一波，win10系统可以用上XD啦。

这里以PS工具设计IOS界面

画布尺寸：

新建750×1334  分辨率72，像素/英寸。

常见的字体大小：

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

字体：

中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。

app所用的字体大礼包下载(虎哥整理的)

ios开发里单位是pt

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

界面里的小图标常见的尺寸：

24px、32px，48px等，记住4的倍数比较好。

注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。

界面上的间距和元素尺寸：

以偶数为单位，不清楚的可以截图量大公司的APP界面作为参考。

750 x 1334 设计稿尺寸：

状态栏高度：40 px

导航栏高度：88 px

标签栏高度：98 px

设计稿实时预览：

安装一个Ps Mirror可以在iphone上实时观看效果。

主流标注工具：

其他标注工具：

界面的图标切图：

启动图标：

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

交接给程序：

最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。

引导页：

值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1125×2436、1242×2208)这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。

适配方法3个原则：(不清楚的在网站搜索适配2字)

文字流式

控件弹性

图片等比缩放

测试界面：

程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。

干货资料：

可以看看下面这几篇文章：

      

      

以PS工具设计安卓界面。

画布尺寸：

如果想一稿适配ios，那就新建720×1280  分辨率72，像素/英寸。

如果单独设计安卓MD新规范的，那就新建1080×1920  分辨率72，像素/英寸。

720×1280常见的字体大小：

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

字体：

中文用Noto/思源黑体(是一个字体，叫法不同而已)，英文用Roboto。

app所用的字体大礼包下载(虎哥整理的)

单位换算

距离单位是DP

文字单位是SP

720×1280尺寸的换算关系 1dp=2px，文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿，自己除以2就是dp和sp了。

1080×1920尺寸就是1dp=3px，文字1sp=3px

界面里的小图标常见的尺寸：

24px、32px，48px等，记住4的倍数比较好。

注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。

界面上的间距和元素尺寸：

最新规范MD的做法：

8dp原则   栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。

常见一般常用做法：

直接把ios的设计稿照搬过来，只不过状态栏，导航栏，标签栏按照安卓的来。

720 x 1280 设计稿尺寸：

状态栏高度：50 px

导航栏高度：96 px

标签栏高度：96 px

设计稿实时预览：

安装一个Ps Mirror可以在安卓手机上实时观看效果。

标注工具：

马克鳗

PxCook 像素大厨

Parker标

标注的时候，如果是720×1280尺寸设计的，就选对应的xhdpi，如果是1080×1920尺寸设计的，就选对应的xxhdpi。

界面的图标切图：

用Cutterman选中下面所示，根据需要选择不同分辨率的导出。

界面中重复利用的资源切图需要做成点9图片：

主要是一些按钮，单色或半透明的背景块。图标不用做点9。

启动图标：

做1024×1024尺寸，安卓对图标的样式没有要求，你可以做各种形状都行，一般做方形无圆角的，各家手机厂商的定制系统会自己加圆角。

然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

交接给程序：

最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。

引导页：

值得注意的是引导页切图需要单独设计多套(480×800、720×1280、1080×1920)这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。

适配方法3个原则：(不清楚的在网站搜索适配2字)

文字流式

控件弹性

图片等比缩放

测试界面：

程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。

干货资料：

可以看看下面这几篇文章：

最后说句：“对界面上的字号，间距不清楚的，多动手去截图，量一量优秀APP界面，多分析找规律。”

虎哥整理。

2016年12月10日更新。

登录收藏