手机端页面UI设计尺寸和字体大小规范

UI设计师在初涉移动端设计和开发的时候，基本都会面临一个令人十分苦恼的问题那就是移动端页面UI设计尺寸标准和字体规范，今天奇酷学院整理了一些关于手机端页面UI设计尺寸和字体大小规范问题，希望对UI设计师设计移动端页面的时候有一些帮助。

一、PS工具设计IOS界面

1.画布尺寸

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

2.常见的字体大小

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

3.常用字体

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

4.界面里的小图标常见的尺寸

注：ios开发里单位是pt

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

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

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

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

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

750 x 1334 设计稿尺寸：

状态栏高度：40 px

导航栏高度：88 px

标签栏高度：98 px

二、PS工具设计安卓界面规范

1.画布尺寸

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

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

2.720×1280常见的字体大小

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

3.常用字体

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

4.界面上的间距和元素尺寸

最新规范MD的做法：

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

常见一般常用做法：

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

720 x 1280 设计稿尺寸：

状态栏高度：50px

导航栏高度：96px

标签栏高度：96px