移动开发需要了解的UI设计知识_tpcvrlogo.png (512脳512-CSDN博客

本文链接：https://blog.csdn.net/u014284625/article/details/80727096

下面我列出了自己做项目时遇到的需求，及解决方案

1,安卓各大应用市场图标、闪屏页、应用截图要求如下：

360：图标——圆角半径弧度：70PX，尺寸：512*512PX，图片格式：PNG

截图——支持JPG、PNG格式。截图尺寸要求：480×800，单张图片不能超过3M。请去除截图中的顶部通知栏。

应用宝：小图标－尺寸16×16，大小20K以内，PNG格式

图标－尺寸512*512，大小200K以内，JPG、PNG格式，建议使用直角图标

截图－尺寸推荐480*800像素，单张图片不超过1M，JPG、PNG格式。

百度：图标－尺寸512*512，大小800K以内，PNG格式，图标需为透明背景截图－单张图片不超过2M。

截图推荐480*800像素。JPG、PNG格式。

小米：图标－自动读取包内

截图－尺寸720×1280，JPG、PNG格式。

注意图片中不能存在手机外观素材非Android设备或界面非Android系统，不能存在其他设备品牌标志、名称、商标。

华为：图标——需上传完整正方形图标。尺寸：192*192px，图片格式：PNG（不允许上传JPG）

截图——大小：2MB以内，推荐截图大小为480×800格式：jpg、jpeg、png

2,安卓手机分辨率及横向像素

上图中“1x，1.5x，2x，3x，4x”我们可以理解为相对单位或者倍数关系，我们将mdpi作为一个基础一个参考物，它为1倍的话，hdpi就为1.5倍，下面依次类推，作为设计师更关注的是横向分辨率

横向上来看：

屏幕级别横向分辨率屏幕密度（dpi）

mdpi 360px左右 160

hdpi 480px（1.5倍） 240

xhdpi 720px（2倍） 320

xxhdpi 1080px（3倍） 480

xxxhdpi 1440px（4倍） 640

3,移动开发给设计师的规范：

安卓

启动图（App中使用）：
drawable-land-hdpi-screen.png 800*480
drawable-land-ldpi-screen.png 320*240
drawable-land-mdpi-screen.png 480*320
drawable-land-xhdpi-screen.png 1280*720
drawable-land-xxhdpi-screen.png 1920*1080

drawable-port-hdpi-screen.png 480*800
drawable-port-ldpi-screen.png 240*320
drawable-port-mdpi-screen.png 320*480
drawable-port-xhdpi-screen.png 720*1280
drawable-port-xxhdpi-screen.png 1080*1920

应用程序图标（AppIcon要求是圆角有弧度1024*1024的弧度是180px，App中使用）:
drawable-hdpi-icon.png 72*72
drawable-ldpi-icon.png 36*36
drawable-mdpi-icon.png 48*48
drawable-xhdpi-icon.png 96*96
drawable-xxhdpi-icon.png 144*144
drawable-xxxhdpi-icon.png 192*192

vivo市场特殊：

drawable-hdpi-icon-vivo.png 192*192

drawable-xhdpi-icon-vivo.png 256*256

drawable-xxhdpi-icon-vivo.png 384*384

drawable-xxxhdpi-icon-vivo.png 512*512

应用市场美化之后的截图（应用市场使用）：
drawable-port-hdpi-screen.png 480*800
drawable-port-xhdpi-screen.png 720*1280
drawable-port-xxhdpi-screen.png 1080*1920

IOS

启动图（App中使用）
iphone6.png 750*1334
iphone6plus.png 1242*2208
iphoneSE.png 640*1136

iphone4s.png 640*960
iphoneX.png 1125*2436

iphoneXR.png 828*1792

iphoneXSMAX.png 1242*2688

应用程序图标（AppIcon方角，App中使用）:
icon-40.png 40*40
icon-40@2x.png 80*80
icon-40@3x.png 120*120
icon-50.png 50*50
icon-50@2x.png 100*100
icon-60.png 60*60
icon-60@2x.png 120*120
icon-60@3x.png 180*180
icon-72.png 72*72
icon-72@2x.png 144*144
icon-76.png 76*76
icon-76@2x.png 152*152
icon-83.5@2x.png 167*167
icon-1024.png 1024*1024
icon-small.png 29*29
icon-small@2x.png 58*58
icon-small@3x.png 87*87
icon.png 57*57
icon@2x.png 114*114

应用市场美化之后的截图（应用市场使用）：
iphonex.png 1125 *2436

iphone6Plus.png 1242 *2208

4,苹果手机尺寸及分辨率及点

手机型号	屏幕尺寸	屏幕密度	开发尺寸	像素尺寸	倍图
4/4s	3.5英寸	326ppi	320*480pt	640*960px	@2x
5/5s/5c	4英寸	326ppi	320*568pt	640*1136px	@2x
6/6s/7/8	4.7英寸	326ppi	375*667pt	750*1334px	@2x
6p/6sp/7p/8p	5.5英寸	401ppi	414*736pt	1242*2208px	@3x
x/xs	5.8英寸	458ppi	375*812pt	1125*2436px	@3x
xr	6.1英寸	326ppi		828*1792px
xs max	6..5英寸	458ppi		1242*2688px

注意：这里手机的尺寸是对角线的尺寸

5，分辨率定义

图像分辨率与显示分辨率

显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。

图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义，就是ppi。

6，dpi与ppi区别

首先dpi是dot per inch

每英寸的物理点

ppi是pixel per inch

每英寸的像素点

比如iphone6的ppi计算方式为

(iphone6)ppi=√750平方*1334平方￣/4.7=326ppi

两个参数的区别就在于Dot和Pixel的区别，dot指的是显示器上每一个物理的点，而pixel指的是屏幕分辨率中的最小单位。这两个难道会不一样么？会！当一个像素需要多于一个屏幕上的物理点来显示的时候dot就跟pixel不一样了

比如一些人的电脑屏幕，看上去总是那么傻大傻大的。就是因为他们把分辨率调的太低导致ppi变低了，让画面看上去那么的不协调。ppi变低了，对角线尺寸不变，那么显示像素就要变小，屏幕的物理点不变，这样就会导致一个像素点会占据多个物理点，自然感觉图标之类的都变大了。

7，png与jpg互转（能直接改后缀吗）

不能直接改后缀

文件的后缀是系统用来区别该用什么程序软件打开他的，改后缀后就相当于告诉电脑用另一种程序打开这个文件，如果改后的程序可以打开这个文件，不会有什么影响，如果更改后的程序打不开这个文件那会导致文件表面上不可用，（可以用这个方法隐藏你不想让人看到的文件）系统无法打开他。但是你还原之前的后缀电脑使用原来的程序依然可以打开他，不会对文件造成任何影响。

而专换格式则是更改文件的构造，让他从这种格式变成另外一种格式，电脑不会因此识别不了、打不开他，就这样。

8，PNG压缩图片，像素不变（这种需求是要改变图片的物理大小，所占存储空间变小）

修改ppi，ppi变小，图片会变模糊，这样图片的物理大小会变小

9，网大图片像素变小（需求比如512512变为3636）

这种需求ppi不会变，图片的像素大小会变小（发现图片宽和高变小了），但是直接双击打开是不会模糊不清的（因为图片宽和高变小了）

10，网上找的图片png或者jpg，要像素（宽和高）变大

比如转svg

使用Adobe Illustrator编辑后导出SVG

首先，只要jpg或者png图片没有太小，比如宽高都大于200px，并且没有阴影等乱七八糟的效果，我认为用Illustrator就可以做出比较好的矢量SVG。操作流程如下：

（1）用Illustrator打开JPG/PNG图片。

（2）点击图片，进入选择状态，上面的工具栏点击“图像描摹”右侧的下拉箭头，选择“高保真度图片”。

这时无敌的illustrator已经把普通jpg/png转换成了矢量图。但还有一个问题，就是仔细观察的话，这个图是有白色背景的。如果你恰好需要这个背景那太好了，否则我们必须把这个背景弄掉。

（3）打开描摹面板。两种方法，第一种，点击工具栏上的按钮。第二种，右上角切换工作台模式。二选一，如图：

（4）展开高级，方法选择第一个“临接（创建木刻路径）”，选项勾选“忽略白色”，看图就明白了：

但注意转换为svg后有可能出现问题，需要修正

11，图片的像素改变了，如何使图片不变形

这个应该需要在ai中修改下，需要重新做下

12,如何导出多个尺寸的图标

ai中选择文件导出所选项目项目即可

13，导出svg，转成iconfont

登录阿里巴巴iconfont，上传svg图片即可一键转换

14，图片圆弧，透明底（网上有在线转）

15，安卓中sp，dp，px区别

dp和px的关系：px = dp * (dpi / 160)

Density-independent pixel (dp)独立像素密度。标准是160dip.即1dp对应1个pixel，，屏幕密度越大，1dp对应的像素点越多。上面的公式中有个dpi，dpi为DPI是Dots Per Inch（每英寸所打印的点数），也就是当设备的dpi为160的时候1px=1dp；

dp=px*160/dpi

举例：比如尺寸不变，不同分辨率上都用5px，在160dpi时控件长度采用5px，然后480dpi上控件长度也用5px，会发现480dpi上的5px变短了，因为480dpi上每英寸像素点多了，5px所占的英寸自然小了，但是采用dp会发现控件的视觉大小没变因为控件所占的英寸没变。

比如：我将一个控件设置长度为1dp,那么在160dpi上该控件长度为1px，在240dpi的屏幕上该控件的长度为1*240/160=1.5个像素点。（公式px=dp*(dpi/160)）

sp和dp的关系 :

dp只跟屏幕的像素密度有关；
sp和dp很类似但唯一的区别是，Android系统允许用户自定义文字尺寸大小（小、正常、大、超大等等），当文字尺寸是“正常”时1sp=1dp=0.00625英寸，而当文字尺寸是“大”或“超大”时，1sp>1dp=0.00625英寸。类似我们在windows里调整字体尺寸以后的效果——窗口大小不变，只有文字大小改变。

16，设计师在标注图上标的字体px转换成ios和android开发中的大小

对于android

1dp定义为屏幕密度值为160ppi时的1px，即，在mdpi时，1dp = 1px。以mdpi为标准，这些屏幕的密度值比为：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在xhdpi的密度下，1dp=1sp=2px；在hdpi情况下，1dp=1sp=1.5px。其他类推。

17，设计师在标注图上标的图片px转换成ios和android开发中的大小

设计师一般标注图都是用的iphone6，而iphone6的像素是750*1334，对应于开发的点是375*667，比如标注图片是67*67，那么我们在xib上的大小是33.5*33.5,这时候我们需要的图片是@2x为67*67，@3x为100.5*100.5。

原因：

在同样一个尺寸的屏幕下由于使用的屏幕不一样(retina和非retina),所以造成的屏幕分辨率会不同.也就是说,同样是30*30的像素,在3.5 inch大小的屏幕上,如果是非retina显示会大一些,retina屏幕显示会小一些。
在开发中使用的是点.(比如 30 * 30 ,不是表示30像素,而是表示30点,这样的话iOS系统会自动把点转换为对应的像素)
- 非retina屏幕1个点表示1像素
- retian屏幕1个点表示2像素
- iPhone6 Plus 下1个点表示3像素
因为程序中是点,iOS系统会自动把点转换为不同的像素去找图片,所以图片对应的也要准备多份不同的图片,
- @2X:视网膜屏幕,在原来点坐标的大小上乘以2
- @3X：在原来的坐标的大小上乘以3

对应于安卓中xhdpi为67*67