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

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

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,苹果手机尺寸及分辨率及点

 

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

 

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，网大图片像素变小（需求比如512*512变为36*36）

这种需求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，图片圆弧，透明底（网上有在线转）

推荐网址 http://www.atool.org/roundcorner.php

 

 

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。

原因：

 

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

 

对应于安卓中xhdpi为67*67

 

 

 

 

18，用ps修改png格式图标的颜色

点击打开链接

 

19，使用pixelstick量像素大小

pixelstick在Mac上是需要购买的

使用方式：如下图

最左边的红色圈圈是固定点，右边黄色圈圈里面可以左右拉伸，还可以有角度的变换，，然后看右边黑色圈圈里面的值512px，说明白色小块的宽度为512px