UI 设计常用尺寸规格

先来看看各种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*1134来设计，虎哥总结一个精简版的设计流程方法，按这个做法就可以展开工作。

以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上实时观看效果。

标注工具：

界面的图标切图：

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

启动图标：

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

交接给程序：

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

引导页：

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

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

文字流式
控件弹性
图片等比缩放

测试界面：

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

干货资料：

facebook出品的iOS 10 GUI (iPhone)源文件

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

以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的倍数比较好。

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

UI 设计常用尺寸规格

移动端界面设计之尺寸篇（淘宝版）

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

最新规范MD的做法：

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

常见一般常用做法：

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

720 x 1280 设计稿尺寸：

状态栏高度：50 px
导航栏高度：96 px
标签栏高度：96 px

设计稿实时预览：

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

标注工具：

马克鳗
PxCook 像素大厨
Parker标
一键标注神器－zeplin

标注的时候，如果是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日更新。

秒客网

UI 设计常用尺寸规格

以PS工具设计IOS界面。

画布尺寸：

常见的字体大小：

字体：

ios开发里单位是pt

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

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

设计稿实时预览：

标注工具：

界面的图标切图：

启动图标：

交接给程序：

引导页：

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

测试界面：

干货资料：

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

以PS工具设计安卓界面。

画布尺寸：

720×1280常见的字体大小：

字体：

单位换算

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

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

设计稿实时预览：

标注工具：

界面的图标切图：

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

启动图标：

交接给程序：

引导页：

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

测试界面：

干货资料：

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

相关文章