移动端APP~最新UI界面设计规范（尺寸大小篇）

Fiona云和月

杭州/UI设计师/9年前/59396浏览

版权

Fiona云和月

移动端手机界面看似简单，然而里面却存在着许许多多的设计规范，只有最好的规范才能给我们带来最好的视觉。

在各个网站里面关于界面设计规范的文章多如牛毛，自己也根据自己的经验来做一个小小的总结，希望能够帮到一部分人，让一部分人先看到～～～文笔有限，请酷友各种包涵。

智能手机如今已经完完全全的改变了我们的生活，身边的很多人都变成了低头族（沉默一族），缺少交流，生活都无趣了，不过后来仔细想想，有趣的人依然有趣，无趣的人玩着手机，好吧，我真的不是故意要扯的，不要转移视线，现在真的要进入主题了。。。

俗话说，没有规矩不成方圆，所以手机界面的规范真的是着实重要！

Android的界面尺寸规范

首先看一张图。

看到这张图之后，我的内心是拒绝的，难道全都要出一套图？ No No No,答案当然是否定的

第一代安卓手机出的尺寸是240x320px大小，现在市场上已经没有这么小尺寸的手机了，因此这个尺寸我们可以不用考虑，总共的话安卓手机的大小尺寸我们归为以下五类。

在这里中屏幕的尺寸大小320x480px目前在市场也已经没有，不予考虑，因而安卓我们要出三张图（1.5倍图、2倍图和三倍图），目前主流的我们都是用2倍图的大小720x1280px尺寸来做界面设计，有需要然后再对另外两个尺寸的进行适配。

需要注意一个问题，可能会有很多人不明白2倍图或者3倍图是怎么得来的，这里我们不是用尺寸大小320x80px这些数字来计算的，因为你再怎么加减乘除，你发现你都无法从1倍图（320x480px）变成两倍图（720x1280）的大小。这里我们要看的是dpi的大小，也就是上图中手机模型下面的第一行字，你会很容易发现160dpi就是320dpi的一半，于是它就是两倍图。可是160dpi是怎么得来的呢，这里我们需要引入一个概念。

像素密度

像素密度是每英寸屏幕上所拥有的点，单位是DPI（dots per inch）。很多人通常会把DPI与PPI(pixels per inch)搞混，甚至模糊使用，DPI表示的是点，PPI是分辨率的单位表示的是像素， PS用PPI，1px=0.75dp，而且根据不同分辨率，它们之间的换算比例是不一样的，由上图可以看出。在安卓版本的切图中一般要求我们使用单位dp。DPI常使用在印刷行业，即为输出、打印的分辨率，它可以指喷墨打印的墨点，可以指扫描仪的采样点。既然是由一个个点组成，那我们就有一个公式可以计算出像素密度的大小：像素密度={√（长度像素数^2+宽度像素数^2）}/ 屏幕尺寸。手机的分辨率和英寸大小我们都知道，因而根据公式很容易算出像素密度。例如（√（720^2+1280^2））/6=245

好了，问题搞清楚了之后，那么我们要开始APP的制作了。

图标尺寸参考：

安卓手机基本尺寸大小

界面：

@2x 720x1280px

状态栏：50px 状态栏字体：24px

导航栏：96px 导航栏字体：34px 可以大于34px但不能小于34px

导航栏中搜索框：56~60px

主菜单栏：96px 菜单栏图标下使用字体：22~24px

@3x 1080x1920px （现用较多）

状态栏：60px 状态栏字体：32px

导航栏：144px 导航栏字体：50px 图标74px

主菜单栏：186px 字体：32px 图标100px

按钮最小为44px（手指可触控范围），通栏按钮至少60px

文本框大小为80~88px

弹框遮罩深色遮罩20%~40%透明度

浅色遮罩40%~60%透明度

文本框之间的间距使用8的倍数，例如8px、40px等

需要图标尺寸：

512x512 144x144 72x72 96x96 64x64 48x48 32x32 24x24

字体使用谷歌开发的微软雅黑字体，或者思源黑体，英文则用Roboto字体

正文字体大小20~22是最小使用字体，最大不能超过导航栏中的标题字大小，可以等于。根据层级关系，设定字体大小。

IOS的界面尺寸规范

苹果机同样也有很多尺寸，如下图

苹果的1倍图是第一代苹果手机320x480px的大小，现在已经基本不用了。2倍图有三个尺寸，分别是：640x960px（iphone4/4s）、640x1136px（iphone5/5s）、750x1334px（iphone6/6s），尽管它们的尺寸不同，但计算出来的dpi是相同的，因此有三个2倍图。3倍图则是1080x1920px（iphone6plus物理版）、1242x2208px（iphone6plus设计版）。

现在iPhone手机主流的是用750x1334px做设计图，然后适配到3倍图的大小。6plus我们要用1242x2208px来做设计，苹果公司用他们自己的方法再适配到1080x1920px尺寸的大小上，因此苹果只需要出两套图。

图标尺寸参考：

苹果手机基本尺寸大小

界面：

@2x 750x1334px

状态栏：40px 状态栏字体：24px

导航栏：88px 导航栏字体：34px 中等可以大于34px但不能小于34px

导航栏中搜索框：56~60px

主菜单栏：98px 菜单栏图标下使用字体：20~24px 常规

@3x 1242x2208px

状态栏：60px 状态栏字体：28px

导航栏：132px 导航栏字体：44px 中等

主菜单栏：146px 字体：24px 常规

iPhone x 750x1624@2x

状态栏 88px

导航栏 88px

标签栏 98px

（Home Indicator） 68px

iPhone 1125x2436@3x

状态栏 132px

导航栏 132px

标签栏 147px

（Home Indicator） 102px

按钮最小为44px（手指可触控范围），通栏按钮至少60px

文本框大小为80~88px

弹框遮罩深色遮罩20%~40%透明度

浅色遮罩40%~60%透明度

文本框之间的间距使用8的倍数，例如8px、40px等。

需要图标尺寸：

1024x1024 180x180 120x120 87x87 80x80 75x75 66x66 58x58 50x50 44x44

苹果手机的尺寸规范是要严格遵守的，而安卓手机由于品牌以及厂商等等的问题，尽管也有相应的尺寸规范，但相对自由很多，不同情况下可以设置不同的参数，正是因为此原因，谷歌新推出了Material Design设计语言，为安卓界面设计带来了革命性的历史变化，这里大家可以看看另一位酷友写的关于Material Design的文章，详细又深入。

英文命名规范

home_nav_back (表示主页的导航栏上的返回按钮)

personal_my like_btn_nor/dis (表示个人中心页面里的我的喜欢页面里的按钮，该按钮位正常显示状态/不可点击状态)

不同状态：

normal（正常）、pressed（按下）、selected（选中）、disabled（禁用）、visited（已访问）、hover（悬停）、

图标 icon

搜索 search

编辑 edit

内容 content

注释 note

按钮 button（btn）

头部 header