Android和IOS开发图标、启动页尺寸

最近项目在做android和ios的项目，设计师让我给出图标的尺寸，于是查了一下尺寸。

第一步：产品经理和UI设计师制定好UI规范，然后开始做图标做颜色做尺寸等一系列和APP界面强相关的工作，以最常见的“back”按钮为例，UI设计师从无到有的具体实现步骤：

①在coreldraw或者Sketch中制作好“矢量图标“—返回，此时的长宽单位是毫米；

②保存输出为“PNG位图”—返回，此时的长宽单位是px（像素）；

③指定好此图标的内外边距，此时的边距单位是px（像素）；

④最终此图标交到开发者手中，做好的放置和内外边距的实现。开发这在这个过程中会遇到一个问题：内外边距是由px为单位的距离，但是在实际开发中“dp”做为单位的更加常见，所以就会涉及到“px”“dp”互转的封装类，专门用来实现这个过程，同时还要注意不同分辨率屏幕的适配。

（1）px，平常我们所说的手机的分辨率是1920×1080，这就是像素数量，也就是1920px×1080px，代表手机高度上有1920个像素点，宽度上有1080个像素点，每个像素点的单位是px。

（2）dp，dp是为了开发者便于做不同屏幕的适配而引入的开发单位，具体来说就是为了使得开发者设置的长度能够根据不同屏幕(分辨率/尺寸也就是dpi)获得不同的像素(px)数量。比如：我将一个控件设置长度为1dp，那么在160dpi上该控件长度为1px，在240dpi的屏幕上该控件的长度为1 240/160=15个px。也就是dp会随着不同屏幕而改变控件长度的像素数量。

（3）DPI，用户实际判别手机屏幕的显示好坏，除了分辨率还要考虑屏幕的宽高(英寸)，也就是用dpi，即每英寸多少像素来评价屏幕的显示效果。（不然假如手机分辨率是1920×1080，但是屏幕是几十寸的，那显示效果将不会很好，甚至你有可能看到小的像素块，那将更影响视觉效果。）

三、Android开发中图标尺寸总结（务必掌握）：

（1）dpi、分辨率与图标尺寸的关系L DPI ( 120 DPI )—分辨率240 320px，其启动图标大小为 36 x 36 pxM DPI (160 DPI )—分辨率320 480px，其启动图标大小为 48 x 48 pxH DPI ( 240 DPI )—分辨率480 800px，其启动图标大小为 72 x 72 pxXH DPI ( 320 DPI )—分辨率1280 720px，其启动图标大小为 96 x 96 pxXXH DPI( 480 DPI )—分辨率1920 1080px，其启动图标大小为144 x 144 pxXXXH DPI( 640 DPI )—分辨率38402160px，其启动图标大小为192 x 192 px

（2）开发中“px”到“dp”从 px 换算成 dp 要知道它是以什么 dpi 标准来设计的，换句话说，就是要根据不用分辨率的屏幕，根据换算关系表得到相应的 dp 。 例如： 以 xxhdpi 标准设计的 UI，其中一个切图的分辨率是 600 px 360 px ，根据换算关系表可知，在 xxhdpi 标准下，1 dp = 3 px ,则其对应的 dp 是 200 dp 120 dp 。换算关系表如下：（两次标红 请重点关注）

36 x 36 48 x 48 64 x 64 72 x 72 96 x 96 144 x 144 192 x 192

具体的图标尺寸可以打开xcode ，在项目目录下找到Assetsxcassets文件，这个文件里面标识出了所需要的图标尺寸，下面标识的是基本尺寸，2x就是底部尺寸x2 ，即下面的尺寸为80pt和120pt

看了一下新的苹果开发文档和Xcode给的AppIcon坑，发现又新增了一些尺寸的图标。在这里整理一下最新的最全的icon尺寸。

itunes中使用的icon

1024 1024

iPhone: iOS7-10桌面图标

60 60

120 120 @2x

180 180 @3x

iPhone: iOS5-6桌面App图标

57 57

114 114 @2x

iPad: iOS7-10桌面图标

76 76

152 152 @2x

iPad: iOS5-6桌面图标

72 72

144 144 @2x

iPhone: iOS5-6的搜索 iOS5-10的设置

iPad: iOS5-10的设置

29 29

58 58 @2x

87 87 @3x

iPad: iOS5-6系统搜索图标

50 50

100 100 @2x

iPhone、iPad: iOS7-10系统搜索图标

40 40

80 80 @2x

120 120 @3x

iPhone、iPad: iOS7-10通知栏图标

20 20

40 40 @2x

80 80 @3x

iPad Pro: App桌面图标

167 167 @2x

iPhone汇总：

1024 1024

120 120

180 180

20 20

40 40

80 80

29 29

58 58

87 87

57 57 (iOS5-6)

114 114 (iOS5-6)

iPad汇总：

1024 1024

76 76

152 152

20 20

40 40

80 80

120 120

29 29

58 58

72 72 (iOS5-6)

144 144 (iOS5-6)

50 50 (iOS5-6)

100 100 (iOS5-6)

167 167 (iPad Pro)

APP启动页，即LaunchImages，需要五张不同尺寸大小的图，切记一定要选择png格式，否则打包时报错，导致APP适配失败。

五张图的大小即：320 480、640 960、640 1136、750 1334、1242 2208 828 1792 1125 2436 1242 2688

分别对应的iphone屏幕尺寸：iphone 3GS、iphone4(s)、iphone5(c、s)、iphone6(s)、iphone 6(s) plus 、iphoneX(S)、iphoneXR、iphoneXs Max

具体步骤：

第一步：

1点击工程目录中的Imagesxcassets，点击左侧边栏的LaunchImages(如果没有，在空白处右击创建一个)

2然后在xcode最右侧的边栏处选择你的APP是否要对ipad、横竖屏、以及低版本的iOS系统做支持。

第二步：

将填好的配置到工程中的启动页选项中

点击项目目录的工程 -> target -> General -> App Icons And Launch Images

将Launch Images Source的选项设置为LaunchImages，切记当APP不是用LaunchScreenxib来配置启动页时，LaunchScreen File的选择状态一定为空！否则编译无法通过

如果此时还没有显示的话，那么你先删除app，然后再运行一下项目看看

参考网站：

>

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

今天我们的主题就是探讨iOS的界面尺寸规范。首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是plus版本，这种一般切图命名为@3X。

今天我们的主题就是探讨iOS的界面尺寸规范。

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

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

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

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

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

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大15倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，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号。

状态栏：显示运营商、信号和电量的区域，高度 40px导航栏：显示当前页面名称，包含页面“返回”等功能按钮，高度 88px主菜单栏：显示在页面下方的区域，一般作为分类内容的快递导航，高度 98px具体文章请可以浏览：/article/news_0f5262408cd675729dd88877e6309f0as=1里面有更加详细的介绍

以上就是关于Android和IOS开发图标、启动页尺寸全部的内容，包括:Android和IOS开发图标、启动页尺寸、安卓/ios中，app设计时常见的尺寸有哪些、安卓手机APP里面的图标设计尺寸是多少等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！