安卓手机设计规范

大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。

而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。

那我们就来看看安卓和iOS的具体有哪些界面规范。

一、iOS界面规范

首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。

苹果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。

来分析一下界面的尺寸规范：

首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。

而下边的底部栏（导航栏）高度则为98px。

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？

☆ 关于图标部分

苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。

整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。

☆ 关于板块与板块之间

板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？

☆ 关于列表中的尺寸规范以及字体要求

☆ 关于左右间隔的安全区域

这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，最大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

☆ 关于字体

iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。

主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

关于苹果界面的小部分尺寸规范就介绍到这里，下期再做安卓界面的尺寸介绍。

作为UI设计师，一定要具体掌握界面的大小尺寸来适应美学观点，让人感觉协调舒适，能在有效的范围内极快吸引用户的注意力。

二、安卓界面规范

众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。

1、字体

安卓系统中文采用的是思源黑体，英文字体为robot字体。

只使用偶数单位 24 pt，28 pt，36 pt等字体大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

讲图标之前先来分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。

px是像素的意思， 不同设备显示效果相同。

安卓各屏幕密度关系如下：

3、图标

不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：

系统图标的尺寸：

快捷图标的尺寸：

应用图标的尺寸：

4、应用栏的尺寸

从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；

②应用栏高度为128dp；

③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。

5、列表高度

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp

6、切图

上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。

7、界面适配

安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。

如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~

安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益最大化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。

所以作为UI设计，必须要要遵守设计规范，这样才能做到设计有道可寻，希望以上回答对你了解手机界面设计规范有所帮助。

众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。

1、字体

安卓系统中文采用的是思源黑体，英文字体为robot字体。

只使用偶数单位 24 pt，28 pt，36 pt等字体大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

讲图标之前先来分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。

px是像素的意思， 不同设备显示效果相同。

从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；

②应用栏高度为128dp；

③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。

5、列表高度

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp

用户界面设计的规范性显得尤为重要。一些事一、界面效果的整体性、一致性yixieshi手机软件运行于手机操作系统的软件环境，界面的设计应该是基于这个应用平台的整体风格，这样有利于产品外观的整合。yixieshi1、界面的色彩及风格与系统界面统一互联网的一些事软件界面的总体色彩应该接近和类似系统界面的总体色调，例如：系统色调以蓝色为主，我们的软件界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，比如大红、柠檬黄，色彩的强烈变化会影响用户的使用情绪，假想你买了一款从外观到系统界面都很满意的手机，操作的时候突然发现内置的应用软件和系统界面不统一，你会有何感想呢?第一感觉不好的东西我们的用户还会去用它吗?所以我们要知道手机的外观和系统界面已经是由手机制造商根据用户审美习惯定制的，它应该有他们的审美群体，我们要给这款手机做软件就应该有效地利用制造商基于此款手机的审美特征，以赢得喜爱此款手机的用户，使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。互联网的一些事2、操作流程的系统化互联网的一些事手机用户的操作习惯是基于系统的，我们的界面设计在操作流程的安排上，也得遵循系统的规范性，让用户达到可以使用手机就会使用我们的手机软件，简化用户操作流程一些事二、界面效果的个性化一些事是不是我们追求整体性和一致性，就忽略软件界面的个性化呢?整体性和一致性是基于手机系统视觉效果的和谐统一而考虑，个性化是基于软件本身的特征和用途而考虑。因此这一点也是不容忽视的!一些事1、特有的界面构架yixieshi软件的实用性是软件应用的根本，我们设计应该结合软件的应用范畴，合理的安排版式，以求达到美观适用的目的，这一点不一定能与系统达到一致的标准，它应该具有它所具有的行业标准，例如:证券交易、地图操作等界面特征，需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区、内容显示区、导航控制区都应该统一规范，不同功能模块的相同操作区域的元素风格应该一致，让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。互联网的一些事2、专用的界面图标一些事软件的图标按钮是基于自身应用的命令集，它的每一个图形内容映射的是一个目标动作，因此作为体现目标动作的图标，它应该有强烈的表意性，制作过程中选择具有典型行业特征的图符，有助于用户的识别，方便操作。图标的图形制作不能太繁琐，要适应手机本身显示面积很小的屏幕，在制作上尽量使用像素图，确保图形质量清晰，如果针对立体化的界面，可考虑部分像素羽化的效果，以增强图标的层次感。互联网的一些事3、界面色彩的个性化设置互联网的一些事色彩影响一个人的情绪，不同的色彩会让人产生不同的心理效应，反之不同的心理状态所能接受的色彩也是不同的，不断变化的事物才能引起人的注意，界面设计的色彩个性化，目的就是用色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，它是通过用户根据自己的需要来改变默认的系统设置，选择一种自己满意的个性化设置，达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术，在手机的软件界面设计过程中，应用这一个性设置可以更大的提升软件的魅力，满足用户的多方面需要!在具体操作实现的过程中，色彩的搭配显得尤为重要，要考虑图标色彩与换肤色彩的色彩反差和效果的统一，以不至于造成花、乱的界面效果。一些事三、界面视觉元素的规范。互联网的一些事1、图形图像元素的质量一些事尽量使用较少的色深表现色彩丰富的图形图像，既确保数据量小又确保图形图像的效果完好，使图形图像在软件系统中所占数据量尽量减小，提高程序的工作效率。

原型设计尺寸

☆ 状态栏(status bar)：就是电量条，其高度为：20px；

☆ 导航栏(navigation)：就是顶部导航，有线其高度为：45px；没有线高度就是44px；

☆ 主菜单栏(submenu，tab)：就是标签栏，底部导航，其高度为：46px；

☆ 信号格：5 * 5

☆ wifi 图片：11 * 9

☆ 锁：11 * 11

☆ 导航：8 * 8

☆ 电量：22 * 9

☆ 闪电：5 * 8

☆ 状态栏中的文字：10px

☆ 顶部导航栏的图标尺寸为16x16px左右，底部标签栏的图标尺寸为23 x 23px左右。

☆ 导航栏的文字大小最大值是14px，底部标签栏的图标下方的文字大小为10px。

☆ 内容区域的文字大小是：10px, 12px，14px，16px。

① 文字黑色：#282828

② 文字深灰色：#656565

③ 文字浅灰色：#989898

④ 边框浅灰色：#C3C3C3

⑤ 背景淡灰色：#f2f2f2

⑥ 按钮背景纯白色：#ffffff

A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。

B、亲密距离：比如，左边图标与右边文字之间的距离。

1、iPhone6手机模型尺寸：429x881px

2、界面尺寸布局：满屏尺寸375x667px

3、高度电量条高度20px，导航栏高度44px，标签栏高度46px；

4、各区域图标大小导航栏图标16px，底部标签栏图标23px；

5、各区域文字大小电量条-文字10px，导航栏-文字14px，标签栏-文字10px；

6、常用的文字大小：16px，14px，12px，10px；

7、常用的颜色：背景浅灰色：#f2f2f2, 文字深黑色： #323232，边框色深灰：#CCCCCC；

8、常用可点击区域的高度（比如搜索区域）：28px；

9、单行文字的背景框的高度：44px，双行则为：88px，三行则为：132px；

10、常用间距：亲密距离：10px；疏远距离：15px，其它距离：5px，22px等；

iPhone界面尺寸

设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度

iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px

iPhone6 - 6S  - 7 750×1334 px 326PPI 40px 88px 98px

iPhone5 - 5C  - 5S 640×1136 px 326PPI 40px 88px 98px

iPhone4 - 4S 640×960 px 326PPI 40px 88px 98px

iPhone &iPod Touch第一代、第二代、第三代 320×480 px 163PPI 20px 44px 49px

iPhone图标尺寸：

设备 App Store 程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏

iPhone6P - 6SP  - 7(@3×) 1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px

iPhone6 - 6S  - 7 (@2×) 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone5 - 5C - 5S (@2×) 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone4 - 4S (@2×) 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone &iPod Touch第一代、第二代、第三代 1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px

iPad的设计尺寸

设备 尺寸 分辨率 状态栏高度 导航栏高度 标签栏高度

iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2 2048×1536 px 264PPI 40px 88px 98px

iPad 1 - 2 1024×768 px 132PPI 20px 44px 49px

iPad Mini 1024×768 px 163PPI 20px 44px 49px

iPad图标尺寸：

设备 App Store 程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏

iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2 1024×1024 px 180×180 px 144×144 px 100×100 px 50×50 px 44×44 px

iPad 1 - 2 1024×1024 px 90×90 px 72×72 px 50×50 px 25×25 px 22×22 px

iPad Mini 1024×1024 px 90×90 px 72×72 px 50×50 px 25×25 px 22×22 px

Android SDK模拟机的尺寸

屏幕大小 低密度（120） 中等密度（160） 高密度（240） 超高密度（320）

小屏幕

??QVGA（240×320） ?????480×640

普通屏幕

WQVGA400（240×400）   WQVGA432（240×432）                                                    ??HVGA（320×480） WVGA800（480×800） WVGA854（480×854） 600×1024 ??640×960

大屏幕

WVGA800 *（480×800） WVGA854 *（480×854） WVGA800 *（480×800） WVGA854 *（480×854）                                  600x1024

超大屏幕

???1024×600                           1024×768  1280×768WXGA（1280×800） 1536×1152  1920×1152                                  1920×1200                             2048×1536  2560×1600

Android的图标尺寸

屏幕大小 启动图标 操作栏图标 上下文图标 系统通知图标(白色) 最细笔画

320×480 px

48×48 px 32×32 px 16×16 px 24×24 px 不小于2 px

480×800px                            480×854px                            540×960px

72×72 px 48×48 px 24×24 px 36×36 px 不小于3 px

720×1280 px

48×48 dp 32×32 dp 16×16 dp 24×24 dp 不小于2 dp

1080×1920 px

144×144 px 96×96 px 48×48 px 72×72 px 不小于6 px

Android安卓系统dp/sp/px换算表

名称 分辨率 比率 rate (针对320px) 比率 rate (针对640px) 比率 rate (针对750px)

idpi

240×320 0.75 0.375 0.32

mdpi

320×480 1 0.5 0.4267

hdpi

480×800 1.5 0.75 0.64

xhdpi

720×1280 2.25 1.125 1.042

xxhdpi

1080×1920 3.375 1.6875 1.5

主流Android手机分辨率和尺寸

设备 分辨率 尺寸 设备 分辨率 尺寸

魅族MX2 4.4英寸 800×1280 px 魅族MX3 5.1英寸 1080×1280 px

魅族MX4 5.36英寸 1152×1920 px 魅族MX4 Pro未上市 5.5英寸 1536×2560 px

三星GALAXY Note 4 5.7英寸 1440×2560 px 三星GALAXY Note 3 5.7英寸 1080×1920 px

三星GALAXY S5 5.1英寸 1080×1920 px 三星GALAXY Note II 5.5英寸 720×1280 px

索尼Xperia Z3 5.2英寸 1080×1920 px 索尼XL39h 6.44英寸 1080×1920 px

HTC Desire 820 5.5英寸 720×1280 px HTC One M8 4.7英寸 1080×1920 px

OPPO Find 7 5.5英寸 1440×2560 px OPPO N1 5.9英寸 1080×1920 px

OPPO R3 5英寸 720×1280 px OPPO N1 Mini 5英寸 720×1280 px

小米M4 5英寸 1080×1920 px 小米红米Note 5.5英寸 720×1280 px

小米M3 5英寸 1080×1920 px 小米红米1S 4.7英寸 720×1280 px

小米M3S未上市 5英寸 1080×1920 px 小米M2S 4.3英寸 720×1280 px

华为荣耀6 5英寸 1080×1920 px 锤子T1 4.95英寸 1080×1920 px

LG G3 5.5英寸 1440×2560 px OnePlus One 5.5英寸 1080×1920 px

主流浏览器的界面参数与份额

浏览器 状态栏 菜单栏 滚动条 市场份额(国内)

Chrome 浏览器 22 px（浮动出现） 60 px 15 px 42.1%

火狐浏览器 20 px 132 px 15 px 1%

IE浏览器 24 px 120 px 15 px 34%

360 浏览器 24 px 140 px 15 px 28%

遨游浏览器 24 px 147 px 15 px 1%

搜狗浏览器 25 px 163 px 15 px 3.8%

系统分辨率统计

分辨率 占有率 分辨率 占有率

1920×1080

13.8%

1366×768

10.2%

360×640

7.9%

1440×900

7.7%

720×1280

6.4%

1024×768

5.1%

320×568

3.7%

1600×900

3.5%

1080×1920

3.3%

375×667

3.2%