杭州嵌入式培训
达内杭州嵌入式培训中心

13732203138

热门课程

手把手教你们如何快速上手做适配

  • 时间:2020-05-18 10:39
  • 发布:转载
  • 来源:网络

前两天在跟别的项目沟通适配的时候,傻白甜的设计一脸莫名其妙的问我,什么适配啊?我们为什么还要管适配啊?这不是前端要管的事情吗?

真的是这样吗?这里涉及到一个绕不开的话题,就是设计验收,一旦效果不及预期,设计师就要协助技术人员完成调试,为了提高沟通和协作效率,设计师自然要理解一些相关的专业知识或代码开发。 

今天我们就来手把手的教大家,在适配的时候经常会遇到的难题,并且要怎么解决?

错误的做法

首先先说说常见的错误做法,由于部分设计师对适配了解不够透彻,导致在做实际项目的时候,需要把750的设计稿适配到640、720、828的屏幕时,都会以为是把设计稿直接等比拉伸至对应的尺寸,重新标注就可以的(我们公司前端也是这么想的)。


下面以微信为例,左图是750的直接拉伸至828的,右图是实际线上828的界面。


能看出区别了吗?750直接拉伸的比828的内容都要大,而明明750是@2x下的界面,828是@3x下的界面,由此可见直接拉伸是不行的,适配才是解决多端展示的唯一办法,但是适配要怎么做才能在每个设备中都达到视觉统一呢?下面就来看看适配的时候经常会遇到的问题吧!

问题一:简单的界面一定简单吗

以前的时候我们标注的时候就是把页面中所有元素的尺寸、位置、属性一一标清楚,如下如所示:


把所有界面中的尺寸、间距等都标注出来,这样那么在适配的时候要怎么处理呢?如果一直继续这样的手动标注方式,那么你们在遇到简单的页面时,是不是就会觉得很简单?如下图所示:


看到上面两张图如果觉得简单的,那么接下来的内容你要记得认真看哦!

我们以马蜂窝举例说明,适配和标注是需要一起考虑的两个因素,首先一定要先纠正大家的一个误区就是,像上边图中一样,标注的时候就只考虑标注好位置,不考虑适配。 

其实越简单的界面适配挺难的,为什么说很难呢?因为我们要保证不管是什么设备,同样的页面视觉上偏差不能太大。要确定自适应的部分,首先要找到固定的那部分,就是在@2x,@3x的情况下,依然不会变的模块,如下图所示:


上图中的橘色覆盖的就是在三个设备中Y轴间距没有改变的部分,这样看起来就简单一些,第二部分到第三部分就是根据屏幕高度自适应的,如下图所示:


这里的适配还涉及到小屏幕的适配问题,当一个元素在750上显示的效果很完美,到640上可能就放不下了。所以在做图的时候,设计师是需要用动态的眼光去考虑问题。如下图所示:


马蜂窝的登陆页面在750的界面上显示的很完美,但是放在640的屏幕上就放不下了,所以就出现了图中第一部分到第二部分的举例缩短,从104px缩小到52px,减少了一半的距离,同时减少了20px输入框的高度,保证视觉上不会产生因为上紧下松的突兀感。需要强调的是,这三个适配界面中字体的大小都是没有变的。

知识点:

在简单的界面中,由于本身界面的内容比较少,确定位置就会比较难,因为要考虑到不同的界面内容要怎么放才能保持视觉统一,这个时候可以先将界面中的信息分成不同的几个部分,先保证每个部分内的固定内容,再确定自适应的内容。

问题二:怎么判断自适应的部分?

我们用一个例子来直接说明会简单一点,这个是我之前做的适配练习,我在适配的时候经常遇到的问题就是不确定哪一部分是自适应的,不过我在练习的时候发现了一些规律,想要分享给你们,先来看看之前的适配练习,如下图所示:


先来说说固定的一些内容:

1、图标或按钮


2、搜索框

高度不变,宽度自适应


3、Y轴间距


一般来说,Y轴的间如果在相近的组件里,都会是固定的,不会有变化

4、图片

像这种图片的列表或者,十字纵横的头像或文字,大小都是固定的,变得会是间距或者数量,如下图所示:


那么哪些是自适应的呢?

1、文字流

文字流指在多行文字的情况下,文字数量变化会影像页面布局和元素大小,如下图所示:


2、banner

这里说的图片是指banner或者feed流里的图片,适配的方法大多都是自适应,界面中的元素间距和数量不变,元素尺寸进行等比缩放,比较适用于固定比例,但尺寸随屏幕宽度变化的元素,如下图所示:



知识点:

对于比较复杂的模块,快速找到将以上所说的固定因素和自适应因素,除了能够让标注效率大大提高之外,还能够找到合适的适配方法,避免出现开发完成后才发现某机型适配效果不理想的情况。

划重点

当我们学会适配之后,最大的变化就是在做设计的同时,可以利用适配原理去预想当前设计在其他机型上的效果,从而帮助我们发现一些可能存在的问题,提前做出应对,也能够更好的与开发区沟通。

预约申请免费试听课

怕钱不够?就业挣钱后再付学费!    怕学不会?从入学起,达内定制课程!     担心就业?达内多家实践企业供你挑选!

上一篇:如何让你的设计不那么千篇一律
下一篇:为什么你在职场很难得到晋升?

手把手教你们如何快速上手做适配

如何让你的设计不那么千篇一律

选择城市和中心
江西省

贵州省

广西省

海南省