android8.0应用图标适配调整_适配（移动端+web端）

移动端

什么是手机适配&＃xff1f;
手机适配&＃xff1a;设计狮制作效果图&＃xff0c;程序猿把效果图应用到不同的手机&＃xff0c;对不同的屏幕进行界面调整的过程&＃xff0c;确保界面不变形&＃xff0c;呈现效果图的位置、尺寸、比例。

一、屏幕尺寸、屏幕分辨率、屏幕像素密度

• 屏幕尺寸&＃xff1a;指屏幕的对角线的长度&＃xff0c;单位是英寸&＃xff0c;1英寸&＃61;2.54厘米&＃xff0c;常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。所以6.0的手机 6*2.54 &＃61; 15.24 厘米。
• 屏幕分辨率&＃xff1a;指在横纵向上的像素点数&＃xff0c;单位是px&＃xff0c;1px&＃61;1个像素点。一般纵向像素 * 横向像素来表示一个手机的分辨率&＃xff0c;如1960 * 1080。&＃xff08;这里的1像素指的是物理设备的1个像素点&＃xff09;。比如&＃xff08;iphone6 750 * 1337&＃xff09; &＃xff08;iphone6plus 1960 * 1080&＃xff09;
• 屏幕像素密度/像素密度/屏幕密度&＃xff1a;&＃xff1a;屏幕上每英寸可以显示的像素点的数量&＃xff0c;单位是ppi&＃xff0c;即“pixels per inch”的缩写。屏幕像素密度与屏幕分辨率有关。

二、物理像素&＃xff0c;CSS像素

• 设备像素/物理像素&＃xff1a;&＃xff08;分辨率&＃xff09;买手机的时候有一个nxm的分辨率&＃xff0c;那是屏幕的nxm个呈像的点&＃xff0c;一个点&＃xff08;小方格&＃xff09;为一个物理像素。它是屏幕能显示的最小粒度。设备像素也被称为物理像素&＃xff0c;他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。任何设备的物理像素的数量都是固定的。
• CSS像素&＃xff1a;CSS像素是一个抽象的单位&＃xff0c;主要使用在浏览器上&＃xff0c;用来精确的度量&＃xff08;确定&＃xff09;Web页面上的内容。它是为web开发者创造的&＃xff0c;在CSS或者Javascript中使用的一个抽象的层。一般情况下&＃xff0c;CSS像素被称为与设备无关的像素&＃xff08;device-independent像素&＃xff09;&＃xff0c;简称为“DIPs”。在一个标准的显示密度下&＃xff08;普通屏&＃xff09;&＃xff0c;一个CSS像素对应着一个设备像素。
• CSS像素与物理像素的关系&＃xff1a;一个width为200px的元素&＃xff0c;它占据了200个CSS像素&＃xff0c;但200个CSS像素占据多少个物理像素取决于屏幕的特性&＃xff08;是否是高密度&＃xff0c;即像素比&＃xff09;和用户的缩放行为。在苹果的视网膜屏幕中&＃xff0c;视网膜的像素密度是普通屏幕的两倍&＃xff0c;这个元素就跨越了400个设备像素&＃xff0c;如果用户放大&＃xff0c;它将跨越更多的设备像素。当然现在好多手机的像素比变得越来越大&＃xff0c;比如我之前用的魅族手机和现在用的iphone 8 plus都已经达到了3&＃xff0c;所以这个元素正常情况下就跨越了600个设备像素。
• 设备独立像素&＃xff1a;设备独立像素&＃xff08;也叫密度无关像素&＃xff09;&＃xff0c;可以认为是计算机坐标系中的一个点&＃xff0c;这个点代表一个可以由程序使用的虚拟像素&＃xff08;比如&＃xff1a;CSS像素&＃xff09;&＃xff0c;然后由相关系统转换为物理像素。
• 位图像素&＃xff1a;一个位图像素是栅格图像&＃xff08;如&＃xff1a;png&＃xff0c;jpg&＃xff0c;gif等&＃xff09;最小的数据单元&＃xff0c;至少1个位图像素对应1个物理像素&＃xff0c;图片才能得到完美清晰的展示。

对于Web开发者而言&＃xff1a;我们使用的每一个CSS和Javascript定义的像素本质上代表的都是CSS像素&＃xff0c;我们在开发过程中并不在意一个CSS像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。

三、像素比

• 像素比&＃xff1a;它的官方的定义为&＃xff1a;设备物理像素和设备独立像素的比例&＃xff0c;也就是devicePixelRatio &＃61; 物理像素/独立像素&＃xff08;window.devicePixelRatio&＃xff09;

iphone5

iphone6 plus

四、视口

• 布局视口&＃xff1a;在PC端上&＃xff0c;布局视口等于浏览器窗口的宽度。
• 视觉视口&＃xff1a;视觉视口是用户正在看到的区域。用户可以缩放来操作视觉视口&＃xff0c;而不影响视觉视口的宽度。视觉视口决定了用户看到了什么。

五、UI界面设计和适配尺寸规范&＃xff08;iphone5 iphone6 iphone6Plus&＃xff09;

如果以iphone5s 为基准设计稿&＃xff0c;适配iphone6 或者是iphone 6 plus的方法和技巧。
当旧的iPhone 5程序运行在iPhone 6上面&＃xff0c;假如没有经过适配。旧程序自动等比放大&＃xff0c;铺满新手机&＃xff0c;旧程序也可以正常运行。这种方案可算是自动适配。但因为旧程序拉伸了&＃xff0c;整体看起来有点虚&＃xff0c;也不能更好利用大屏空间。

一套设计稿适配的前提&＃xff1a;设计稿必须为矢量的。图片除外。比如图标&＃xff0c;线、点、颜色块等元素都是矢量或者形状。

分为两步走&＃xff1a;如果是一些常规界面&＃xff1a;比如以文字、列表为主的界面&＃xff0c;大部分是指布局相对简单的界面。不用设计师怎么切图的界面&＃xff0c;这些基本可以让ios程序员完成适配即可。显示效果也不会太差。如果是一些定制界面&＃xff1a;此时设计师应该手动为大屏幕重新调整设计。另外设计一些大图或者是大的图标&＃xff0c;以满足适配iphone6.或者iphone plus

前提是你们的ios程序员需要了解苹果公司的一个工具&＃xff1a;Auto Layout
Auto Layout &＃xff08;Auto Layout Guide: Introduction&＃xff09;&＃xff0c;可以理解成 iOS 上的 CSS&＃xff0c;如果设计师用 Auto Layout 提供的排版语言描述出 UI 布局&＃xff0c;那不同尺寸的 iPhone 只要同一份设计稿就可以了。

总之&＃xff1a;适配iPhone 6/6Plus UI界面设计的要点&＃xff1a;
1、针对iphone6 可以用高度不变&＃xff0c;横向拉伸。或者等比拉伸
2、全矢量作图。
3、定制界面或图片位图必须额外制作大图。
4、工具栏、状态栏、导航栏的高度规范和设计字体大小等均以2:3的比例放大即可。
5、iphone的5/5S/6/6P的屏幕比例为9&＃xff1a;16&＃xff0c;所以比例这个问题现在不是很大&＃xff0c;但因 Plus增加横版显示&＃xff0c;所以建议对于一些用户量较高的软件进行重绘。
如下图所示&＃xff1a;

给app设计师9点建议

• 1、以后的应用程序&＃xff0c;都使用AutoLayout, 不要再用绝对定位。
• 2、使用类似网页的方式来设计界面。
• 3、设计师好&＃xff0c;程序员也好&＃xff0c;尽量使用点这个单位进行思考&＃xff0c;而不要使用像素。比如&＃xff0c;你需要做44 x 66个点的按钮&＃xff0c;2x模式&＃xff0c;就乘以2, 3x模式就乘以3。这样的思考方式可以大致估计到真实的物理长度。44个点&＃xff0c;就是手机上导航栏&＃xff0c;工具栏的高度。假如用像素思考&＃xff0c;容易使得做出的图片过大或者过小。
• 4、非矢量素材&＃xff0c;就可以做尺寸最大的&＃xff0c;之后再进行缩小。比如你需要兼容3x的屏幕&＃xff0c;就直接做最高那种图片。
• 5、而当使用Flash之类的矢量工具来做素材的时候&＃xff0c;应该直接做点那个尺寸。比如44 x 66个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图&＃xff0c;3倍图&＃xff0c;因为矢量放大不失真。不要建立一个3x的场景&＃xff0c;导出成大图片&＃xff0c;再进行缩小&＃xff0c;这样就容易失真。更理想的是直接使用矢量图。
• 6、假如是那种导航栏&＃xff0c;工具栏之类的背景图&＃xff0c;需要横跨整个屏幕。可以只切一小块&＃xff0c;让程序拉伸&＃xff0c;拉伸方式是保持两边的像素不动&＃xff0c;只拉伸最中间的一列像素。需要拉伸的话&＃xff0c;横方向就不要出现一些渐变色。
• 7、按钮的点击区域&＃xff0c;不应该少于44像素&＃xff0c;就算按钮的图片看起来比较小&＃xff0c;也应该使得点按钮周围的透明区也有反应。
• 8、可以按照你当前最方便测试机子的型号来做一些主要预览图&＃xff0c;效果图。比如你手头有iPhone 5&＃xff0c;可以按照iPhone 5的尺寸&＃xff0c;320 x 568个点&＃xff0c;需要兼容iPhone 6 Plus&＃xff0c;就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机&＃xff0c;就选较大的&＃xff0c;之后再进行一些细调。假如支持iPhone 6 Plus的横屏模式&＃xff0c;需要另外处理。
• 9、上面说的是应用的处理方式&＃xff0c;游戏会有些特殊。现在很多游戏&＃xff0c;按照1136 x 768的像素尺寸来设计场景&＃xff0c;这样可以同时兼容iPad和iPhone&＃xff0c;并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素&＃xff0c;iPhone 6在2x模式下&＃xff0c;是1136 * 640。这种尺寸&＃xff0c;可以简单将场景居中显示&＃xff0c;各自将场景拉伸到最大。

web端

目前我们pc项目的设计稿尺寸是宽度1920&＃xff0c;高度最小是1080。

适配目标&＃xff1a;

• 1.在不同分辨率的电脑上&＃xff0c;网页可以正常显示
• 2.放大或者缩小屏幕&＃xff0c;网页可以正常显示

对于宽度的适配&＃xff1a;
首先设置html,body{width:100%;overflow-x:hidden;} 然后我们可以把页面分解为背景层和内容层&＃xff0c;对于背景层&＃xff0c;我们一般都要求完全铺开&＃xff0c;对于内容层我们保证我们的内容都封装在盒子内&＃xff0c;然后margin:0 auto;保持居中显示&＃xff0c;盒子里面的内容&＃xff0c;我们再另外调整 &＃xff08;内容区定宽&＃xff0c;在达到某个断点之后更改内容区的宽度&＃xff0c;并把某个内容显示/隐藏&＃xff09;

对于高度的适配&＃xff1a;
一般情况下&＃xff0c;页面都比较高&＃xff0c;我们通过给每个模块设置具体的高度值来做页面&＃xff0c;然后页面会出现导航条&＃xff0c;我们可以拉动导航条来浏览&＃xff0c;但是有的页面的需求是主体内容直接在不同的浏览器上都能完整显示&＃xff0c;不通过导航条来浏览

如何做&＃xff1f;

1、百分比的应用
百分比的应用在于主视角的定位和缩放&＃xff0c;百分比的取值以原设计稿的尺寸为标准。什么意思呢&＃xff1f;举个栗子&＃xff0c;一个元素在原设计稿里&＃xff0c;量出来距离顶部是 200px&＃xff0c;如果写死可能是top:200px 或者margin-top:200px,现在要转成百分比&＃xff0c;那么这个值可能就是23.3%。这个值怎么算&＃xff1f;如果设计稿是 1080&＃xff0c;200/1080&＃61;18.51%这样计算出来百分比的值。
但是&＃xff0c;有个地方要注意&＃xff0c;流体布局下&＃xff0c;百分比的值是根据父层计算的&＃xff1b;absolute布局的元素是根据最近的relative父层计算的&＃xff1b;fixed布局的元素是根据window的可视区域计算的。
所以&＃xff0c;如果要达到适配的效果&＃xff0c;不只是当前元素需要用百分比值&＃xff0c;其参考计算的元素也是要动态变化的。
另外还有一个就是图片缩放的问题&＃xff0c;pc很多主视角都是切图的&＃xff0c;但是pc不能直接用background-size。在pc我们可以直接通过img标签来插入图片&＃xff0c;通过设置 img宽度为100%&＃xff0c;高度auto&＃xff0c;然后让它根据父层来等比缩放来实现。

2、js监测
需要js主要有两个原因&＃xff1a;
上面说了&＃xff0c;百分比是要有父层做参照物的&＃xff0c;那么如果父层都用百分比&＃xff0c;那就是最终是根据window来参照的&＃xff0c;因为pc绝大部分都是宽屏设备&＃xff0c;而且他们的比例是不一致的&＃xff0c;我们来计算下(190是减去浏览器工具条、window桌面条、我们页面通用顶条)&＃xff1a;
设计稿&＃xff1a;1920/(1080-190) &＃61; 2.16
14寸普通笔记本&＃xff1a;1366/(768-190) &＃61; 2.36
所以&＃xff0c;我们不能宽高都100%按照屏幕尺寸来计算。另外考虑到主要是高度对pc页面的主视角影响比较大&＃xff0c;我们需要借助js来计算确定一个最小高度临界值&＃xff08;当然这个可以用css的min-height来实现&＃xff09;&＃xff1b;
另外一个是&＃xff0c;通过js判断最小高度临界值&＃xff0c;再加上这个最小临界值的class&＃xff0c;为了处理那些特殊的布局或者百分比无法完全解决适配的元素&＃xff0c;比如字体的相关布局