android 1396x750设计图,移动端的适配|切图|标注

年前最后一个工作日，完成这篇干货～

这篇文章的目的是想从更深的原理层去找到一些设计规范的原因，比如为什么要选用@2x的750*1334做基础设计稿？

开发拿到设计基础稿是如何操作适配的？

基础稿是如何做到一稿适配到iOS和android的？

px与pt之间的关系是怎么样的？等等......

深挖这些设计背后的原理，有助于我们更好的开展设计，也方便我们与开发更好的沟通，最重要的，在了解来背后的原理后，在开发进行中遇到问题的时候，我们也能很快的去融入参与问题的解决，也能培养锻炼自己的逻辑思维，以及打开自己的设计眼界～

这篇文章想从以下目录展开：

Px物理像素与Pt逻辑像素的理解以及倍图之间的关系

iOS常用手机分辨率

同等倍率和不同倍率的适配原则

关于适配的案例说明

iPhone X及以上的适配规则

iOS与android之间的适配方案

用于适配的标注规范

切图命名规范

1) Px物理像素与Pt逻辑像素的理解

Px (pixel)：物理像素

px是组成位图图像中的最小单位，不分大小，设计师常用单位～

像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方块的颜色和位置就决定了图像所呈现出来的样子～

可以将像素视为整个图像中不可分割的单位/元素，因为像素已经是最小单位；并且它是以一个单一颜色的小格存在～

我们看到的一张张图像，都是由一定量的像素构成，像素的多少决定了图像在屏幕上所呈现的大小，像素的色彩拼接组合决定了图像在屏幕上呈现什么内容～

Pt (point)：逻辑像素

pt也被成为逻辑点，在移动适配中被成为“逻辑像素”，是程序员用的一种计量单位～

pt是有固定大小的，一般用来测量设备的实际大小尺寸～

1pt=1/72英寸，1英寸=2.54厘米，那么，1pt=0.03527778厘米，可见1pt是有具体的大小值的～

所以，在72像素/英寸的显示屏下，1pt=1px

逻辑像素大小=物理像素1倍图尺寸大小

eg：两款手机iPhone3G/S 和 iPhone4/4s，iPhone3G/S 是非Retina的1倍屏，分辨率为480*320px也就是该手机的物理像素，对应的逻辑像素就是该手机的硬件设备的大小为480pt*320pt；

iPhone4/4s 是Retina的2倍屏，分辨率为960px*640px也就是该手机的物理像素，对应的逻辑像素也是480pt*320pt；

Retina屏叫视网膜屏，也叫@2x屏。

如何理解两款手机逻辑像素一样，物理像素不同？

iPhone3G 和 iPhone4这两款手机逻辑像素一样表示硬件设备的测量尺寸一样，物理像素不同说明相同面积里像素块的构成数量不同，数量越多说明色彩越丰富，呈现的图像也就约清晰；

相同大小的设备屏幕中，iPhone4承载的像素数量是iPhone3G的两倍，相当于iPhone3G放一个像素块的空间位置在iPhone4中放两个像素块，iPhone4的像素密度更高～

同样，1920px*1080px的PC端，与1920px*1080px的小米手机，二者的物理像素(设计大小)一样，逻辑像素(测量大小)很明显差异很大，说明一样多的像素内容，在逻辑像素更小的设备上图像显示的会更清晰，像素密度更高～

所以可以这样理解倍图的关系：

1倍图即设备的物理像素：逻辑像素=1：1

2倍图即设备的物理像素：逻辑像素=2：1

3倍图即设备的物理像素：逻辑像素=3：1

注意⚠️：物理像素px不分大小！逻辑像素pt有固定大小！

Q：为什么像素px不分大小？

A：px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“像素”的大小是会“变”的，也称为“相对长度”。

px&em&pt之间的对比

px是像素单位，em是相对单位，pt是绝对单位～

px的优点：可以在计算机屏幕上，能达到预期的效果，在打印机和其它的高分辨率设备上，它又能取得所希望的效果。

em的优点：比较多，比如在一个页面上，你给定了一个父元素的字体大小，这样就可以通过调整一个元素来成比例的改变所有元素大小。它可以自由缩放，比如用来制作可伸缩的样式表。

pt的优点：是一种固定长度的度量单位，是能够使用测量设备测得的长度

2)iOS常用手机分辨率

以下是常用手机逻辑分辨率、物理(设计)分辨率等信息表～

可以观察到6P、6sP、7P、8P的物理(设计)分辨率为1242px*2208px，逻辑分辨率为414px*736px【并不是375pt*667pt的3倍】，所以其实我们把375pt的3倍图适配在Plus手机系列上来看的话，可以说Plus是伪3倍屏～

Plus放大模式的由来：

6Plus刚推出来的时为了方便快速适配，使用与iPhone6相同的逻辑像素尺寸，*3倍则为1125*2001与实际逻辑像素相差一些，在相同的屏幕尺寸下，放的更少的像素块相对来说就比较大的显示，就被定义为“放大模式”。

2倍图，iPhone5 640px*1136px(物理像素) @2x 320pt*568pt(逻辑像素)

2倍图，iPhone6 750px*1334px(物理像素) @2x 375pt*667pt(逻辑像素)

3倍图，iPhone6P 1242px*2208px(物理像素，设计的实际标准模式) @3x 414pt*736pt(逻辑像素)，但我们一般用375pt的@3x图1125*2001(物理像素，适配在Plus手机上称为放大版) 来适配在Plus手机上～

那么，设计师有规定的设计稿尺寸大小吗？

清楚适配规则、方法，在设计的时候注意距离值，元素大小的设置，那么用1倍图设计和2倍图设计都是一样的，根据个人习惯就好～

再加上开发查看设计的软件工具可以根据需要切换单位，就更加灵活了～

需要注意两点：

注意设计尺寸与导出尺寸的对应

下图以@2x图为设计稿，导出切图操作；导出后，检查@2x的切图尺寸是否与设计稿元素尺寸一致～

注意设计尺寸与上传尺寸的对应

下图为上传画板到蓝湖上的操作；上传时，确认好选择的设计图画板尺寸，因为这个是标注平台识别并计算单位的依据～

3)同等倍率和不同倍率的适配原则

设计时需要考虑什么问题

既然是一稿适配，在设计的时候需要始终把两点始终带入，一是大屏&小屏如何显示问题(移动端适配/PC端响应式)，二是不同终端平台(iOS&Android、移动端&PC端) 交互方式不同，分辨率差异会引起的设计差异；

如何能在不同终端设备较“舒适”的显示，又不会有特别多的开发量？尽可能灵活设计、可延展性设计～

开发的视角

一张设计页面，开发可能会脑补它会在不同屏幕下的样子，所以我们在设计的时候也可以用这张设备屏幕图来作为辅助工具，来摆放设计内容～

上图中可观察到，360pt*640pt是小米手机@3x 1080*1920的逻辑尺寸。对比iPhone8 375pt*667pt可以看出，这款小米手机比iPhone6要小一点(逻辑/测量尺寸)，但物理像素要高很多，像素密度更高，图像清晰度也就更高～

iOS适配需要考虑两种：相同倍率和不同倍率

相同倍率，不同大小；eg：iPhone5 640px*1136px @2x、iPhone6 750px*1334px @2x；

不同倍率，不同大小；eg：iPhone6 750*1334 @2x、iPhoneX：1125*2436 @3x

相同倍率适配原则

原则一：文字流(fluid)

比如：相同的文字内容；在iPhone5和iPhone6下，左右两边距离屏幕的边距相同，由于屏幕大小不一样，在iPhone5下显示4行，而iPhone6下显示3行～

2. 原则二：弹性控件(flexible)

对比iPhone5和iPhone6的同一个页面，整体内容距离屏幕左右边距不变，字号、图标大小、图标与文案之间的间距都保持一致，仅仅只放大了中间的距离～

3. 原则三：等比缩放

iPhone5和iPhone6的“瓷片区”图片，整体内容距离屏幕两边的边距、图片与图片之间的距离在同倍率不同大小的手机上都是一样的，对图片的处理：同等比例缩放～

总结：

综上所述，边距(整体内容距离屏幕两边的大小)、字体大小、控件、间距(元素之间)在同等倍率下是不变的！

可以这样理解，同等倍率一位置像素密度相同，也就是说除了手机硬件屏幕的大小不一样，看到手机内容的清晰度是一样的；

那么在做适配的时候我们是不是可以考虑在多出的/少一些的测量大小上做文章呢？

当遇到文字流的时候，文字的大小不变，手机屏幕两边距不变，改变的是显示高度的不同(宽屏显示的行数少些，窄屏显示的行数多些)～

当遇到控件的时候，控件大小与辅助文案大小均不变，改变的是控件与对端中间的距离；

当遇到图片的时候，两侧边距和图片之间的间距不变，改变的是图片在不同屏幕下的等比缩放；

不同倍率适配原则

方法：将所有需要适配的@3x图都统一换算为@2x图(根据@2x图的适配方法，相同倍率下修改中心的距离即可完成同倍率下的适配)，再将@2x乘以1.5即可适配到@3x下。

为什么将iPhone6/7/8作为设计稿尺寸？

下方橙色区分别是上方设计稿逻辑像素@2x图的尺寸，可以发现750px*1334px的尺寸是居于中间的，所以用iPhone6的尺寸作为设计稿是合适的～

以2倍图为基础，因为2倍图更方便做同倍率和不同倍率之间的适配～

4)关于适配的案例说明

以下是UI效果图设计稿，以及设计稿对应的适配方案～

一般交付给开发UI效果图的时候，会对适配进行说明，方式不限，只要能表述清楚就可以，个人比较喜欢采用以下这种方式～

同倍率适配：根据适配说明稿，标出的数值固定不变，宽度按一定的百分比计算方式～

比如：在@2x iPhone5上的适配，只有两个悬浮窗的宽度和高度发生了改变，其他的(图中箭头所示)的元素大小，内容边距，都没有变化。

不同倍率适配：找到@3x对应的@2x设计稿，整体放大1.5倍，其他元素按一定的百分比计算～

比如：在@3x iPhoneXS上的适配，整体放大1.5倍，两个悬浮框的宽度和高度按照百分比的方式计算，其他的元素以1.5倍的规律进行换算～

5)iPhone X及以上的适配规则

iPhoneX的适配

首先得了解iPhoneX硬件设备的特征，也是与我们的设计有关联的，iPhoneX & iPhoneXs(1125px*2436px) 系列是刘海屏手机，“刘海区”为44pt(@3x下，即为132px)，底部“home条”34pt(@3x下，即为102px)这两个是固定的逻辑像素尺寸～

适配步骤：

将iPhoneX固定不变的两个位置空出来，就是上面提到的，上方“状态栏+刘海”44pt(132px)，下方“取代home键操作区域”34pt(102px);

将@2x 750*1334的设计稿整体乘以1.5，适配到iPhoneX的面板中，需要注意的是我们放大的设计稿中包含了状态栏高度的部分，而在步骤1中我们已经将状态栏(包含在“刘海区”)空出来了，所以需要去掉40*1.5=60px的高度。

注意事项：

苹果官方给了iPhoneX，距离两边屏幕边距为34pt(102px)，原因是iPhoneX与iPhone其他手机还有个区别在于它是圆角的，当iPhoneX横屏幕(比如：游戏类、适配类app)时，圆角那块是不能有内容的，所以在4个边角留出安全区域，采用的也是34pt的边距。

iPhoneXR&XS Max的适配

iPhoneXR：414pt*896pt @2x 828px*1792px

iPhoneXS Max：414pt*896pt @3x 1242px*2688px

可以观察到，iPhoneXR和iPhoneXS Max硬件手机尺寸大小一样(拥有相同的逻辑像素)，物理(设计)尺寸不同，iPhoneXS Max像素密度更高，画面清晰度更高～

那么做他们的适配，只需要先将@2x的iPhoneXR适配稿完成，再通过x1.5的方式即可完成@3x iPhoneXS Max的适配～

XR的适配步骤：

将“刘海区”、“home条”的位置提前空出来：“刘海区”44pt(@2x的XR即为88px)；“home条”44pt(@2x的XR即为68px)；

将750*1334的基础稿复制到XR的画板中，同倍率适配调整：

图片等比放大；

左右边距保持与750px的设计稿一致；

注意内容中元素之间的上下、左右间距保持一致；

文字流的适配，扩大文字域范围；

分割线长度的补充(左右边距保持一致)；

... ...

XS Max的适配步骤：

新建1242*2688px的画板；

将适配好的XR设计稿放大1.5倍，放在画板中即可。

6)iOS与Android之间的适配方案

上述流程已完成iOS同倍率@2x与不同倍率@3x之间的适配；那么iOS与Android之间如何进行适配的呢？

iOS与Android的适配步骤：

Android主流屏幕尺寸为：1080*1920px，@3x屏；

基于iOS 750*1334px的@2x图的设计稿尺寸，乘以1.44，适配在1080*1920px的android的设计稿上。

主流适配流程图：

注意事项：

pt可看作是@1x图的尺寸，方便计算；

注意在机型为：iPhoneX/XS/XR、iPhoneXS Max下，“刘海区44pt”&“home条34pt”的计算。

7)用于适配的标注规范

通过上述介绍我们知道，同倍率和不同倍率进行适配时，图片会进行等比缩放，为图片更好的被使用，开发则需要使用我们提供的@2x和@3x；

切图素材在后台数据库，前段开发将这个素材的位置空出来，通过媒体查询判断用户使用哪种设备类型，再向后台服务器请求数据，获取这个图片素材，再在前端显示图片～

设计稿中其他元素可通过蓝湖进行开发查看～

适配标注注意事项：

* 不能标“死”，如果把每个元素的上下左右的每一个间距都给标注来，只适合在某一种机型下，不能灵活的应用在所有机型尺寸上～

正确做法有两种：

间距自适应型

在一定范围下，比如：同倍率机型下，或无论什么机型都适用，将可以固定的间距标出来，其他的间距自适应；

素材适应型

在一定范围下，比如：同倍率机型下，或无论什么机型都适用，将可以固定的间距标出来，其他的距离根据分辨率的宽度减去固定值后进行均分的适应方式；

结论：

标注并不是给的越详细越好

需要自适应的地方不要进行标注

最重要的标注完成后需要与开发工程师进行沟通

tabbar开发小技巧：

底部tabbar，当有4个tab时，发现750除以4=187.5，意味着不能等分，程序员常规操作是：

@2x设计稿下当有4个tab时，左右两侧预留3px，将剩下的744px除以4=186px，每个tab被分摊到186px～

8)切图命名规范

通用切图命名格式：

组件_类别_功能_状态@2x.png

例子

android 1396x750设计图,移动端的适配|切图|标注相关推荐

android 从服务端获取的图片怎么适配不同分屏幕的手机,移动端的适配|切图|标注...
年前最后一个工作日,完成这篇干货- 这篇文章的目的是想从更深的原理层去找到一些设计规范的原因,比如为什么要选用@2x的750*1334做基础设计稿? 开发拿到设计基础稿是如何操作适配的? 基础稿是如何 ...
android ui 切图工具,APP切图标注教程：UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
UI实战教程之切图标注篇（UI小白必备）
UI实战教程之切图标注篇(UI小白必备) 一. 切图工具和标注工具学会使用工具可以起到事半功倍的效果.在这里为大家推荐我常用的切图和标注工具. 1. 切图工具: (1)Cutterman 这是一款运 ...
蓝湖怎么切图标注_蓝湖让APP设计师再也不用每天手动标注和切图了
真正的APP设计师工作协调神器来了,那就是完美的蓝湖APP.因为蓝湖APP 2018年已经完美支持photoshop和sketch的所有标注.切图.交互.演示等功能啦. 简直就是APP设计师的最佳利器 ...
paddle 图标注_「插件」UI必看！推荐切图标注工具
标注和切图,是UI设计师工作中必须要做.传统的切图很麻烦,出现了一大堆的切图标注软件. 今天,贱贱为你讲解其中一款,新手来收. 注意! 注意! 不要眨眼睛对你没有看错今天介绍的是蓝湖插件话不多 ...
37-Figma-摹客平台切图标注方案-Mockplus使用
37-Figma-摹客平台切图标注方案-Mockplus使用利用Mockplus插件 1.选中模板中组件,添加切片图层 2.这里只上传一个画板作为测试 3.点击查看项目 4.在摹客平台查看标注或者导 ...
android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu[转]
http://blog.csdn.net/jj120522/article/details/8095852 示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这 ...
[超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)
网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1. 有人说用sketc ...
移动端切图内容包括什么_手机移动端前端开发切图的一些疑问
该楼层疑似违规已被系统折叠隐藏此楼查看此楼从前年就开始学习html5,陆陆续续也学到了很多,html5新增的标签.css3新属性.js中和html5相关的部分: 可是每到项目实战的时候,总还是感觉 ...

android 1396x750设计图,移动端的适配|切图|标注

android 1396x750设计图,移动端的适配|切图|标注相关推荐

最新文章

热门文章