赞助商
立即赞助

关于适配这个知识点,这篇文章帮你彻底掌握它!

UI设计3年前 (2021)更新 流光
2.1K 0 0

橙子的橙子:得刚做 UI ,根不道做完界面还需要适,就以为把设计图做就行,其他的情跟自己没有半点关系。慢慢的踩坑之,才道还有适一说。所以说有情别人不告诉你,自己是很难意识到的,光靠踩坑得出经验,终究成太大。何不站在前人的肩膀上进步呢。

一、当前现状

UI 行业的火爆,各行各业的人涌进来,很之前没有设计基础的转行做 UI设计师,其中不乏只突击学习几个月的新手,在培的时为能让学切切的看到际效果,大在练习画图标、做界面,而对际工中才用到的基不讲,倒不是说培班讲的不,也没有贬低培班的意思,我自己也参加。他们不讲只不是因为识晦涩难懂,教新手也很难理,索不讲。

这就让很多新入行的设师认 UI 很简单,只需把产品的原型填色,把填色后的设稿输出就觉得万事吉了。对于配知之甚少,甚至些觉得自己半点关系,都发的事。

二、错误做法

由于部分设师对配了解不够透彻,以至于实际项目的时候,需把750的设稿配到640、720、1242的屏幕时,都选择把设稿直接比拉伸至对应的尺寸,然后再重新标注,殊不知此方法不仅增加了几倍作,还会导致终的效果不如人意,花了功夫还不出效果,的就这种事了。

下面以 QQ 首页为例,左图是750的计稿(临摹的)直拉伸至1242的,右图是实际线上1242的界面。

关于适配这个知识点,这篇文章帮你彻底掌握它!

相大家也出差别了,750直拉伸后的界面素整体都比实际线上1242的大。

关于适配这个知识点,这篇文章帮你彻底掌握它!

之所以说这的方法是错的,有个因,一个是按照此方法,750和1242所显示的内容是一多的,但实际上1242的屏幕要比750的长一些,显示的内容更多一些才对,如下图金融。

关于适配这个知识点,这篇文章帮你彻底掌握它!

另一个因就跟数学有关了,750的页面要1242的大,需要放大1.65倍,但实际上750是2x倍率下的界面,1242是3x倍率下的界面,的比例是1:1.5,而不是1:1.65。

关于适配这个知识点,这篇文章帮你彻底掌握它!

也就是说由750直拉升1242的稿开发实现的候会出现这的情况,icon 是1.5倍的大( icon 实现的候用的是3x切图文件)文字大、间距、图片却是1.65倍的大,标注稿也是按照1.65倍的来标注的,这就会响开发布局,导致出现一系列误差。

关于适配这个知识点,这篇文章帮你彻底掌握它!

由图可见,当直在拉伸的计稿中标注间距、icon大,在实际开发的候 icon 的尺寸会比标注的要,相差15px,这个候如果开发完全按照标注稿来布局,这就会导致有 icon 的域间距显和其地方不一,相差大,甚至会出现 icon变形的情况。

关于适配这个知识点,这篇文章帮你彻底掌握它!

那既然直拉伸计稿的方法不可行,难道只能为每个屏幕尺寸都重新做一套计?当然不是,这的开发成本大,而且也没有必要,其实只要计的候多注适配的问题,就能做一稿适配所有。

三、为什么不能一稿适配所有

大多数人对于750适配1242都表示能理解,但对于750720就理解不了,持反对见,觉得这个属于 iOS 和 Android 个不同的端,标签栏和导航栏高度都不一,不独输出计稿的话,图标图片会变形、间距会窄……

那面来解释一往大的路子都是正面说一稿为么适配有,今天我们走个一样的路子,一稿为么适配有呢?面针对大存在疑惑的几个点来做详细解释。

1. 图标变形

开发在做的时候都是的2x、3x的切图,每个屏幕尺寸哪套图是根据倍率来择的,同一个倍率的图标大小、间距、字号都是一样的。

关于适配这个知识点,这篇文章帮你彻底掌握它!

2. 图片变形

图片都是按照比例来的,只要标注的候只标注比例,而不是把宽高都限制死,这个问题是可以避免的。

关于适配这个知识点,这篇文章帮你彻底掌握它!

3. iOS 和 Android 平台差异

一些人总认两平台存差异性,比如它们的导航栏、标签栏、时间栏不一样,怎么能配呢?其实部的导航栏、时间栏底部的标签栏这些平台的基础控件,与界面内的元素不一 Z轴,它们属于界面层,界面的尺寸也不受它们的影响。

如下图哔哩哔哩,Android 和 iOS 的基础控件不一,但是并不会响导航栏下方的 Tab 筛选的大以及它的位置高度。所以事实证,适配跟并没有大的关系。

关于适配这个知识点,这篇文章帮你彻底掌握它!

四、掌握正确的适配规则

1. 倍率相同

适需要在同一倍率下,既要做比的,当要在同一水平上,总不能让一个姚明跟林丹去比羽毛球吧。

知道手机的屏幕分辨率倍率之后,就可以算出其他倍率下,屏幕分辨率多少。比如 iPhone 6的尺寸750*1334(2x下),乘以1.5之后就可以算出3x下的小。

关于适配这个知识点,这篇文章帮你彻底掌握它!

同理可得其他手机的屏幕分辨率不同的倍率下的小,框处表示常的分辨率小。

关于适配这个知识点,这篇文章帮你彻底掌握它!

配只倍率相关,同一倍率下,界面的间距、文字小、icon小一样的,不同的只屏幕显示内的宽度高度不同,所以2x倍率下,750=640=828=720;同理3x倍率下,960=1125=1242=1080。

下面以虾音为例,别对比640、720、750页面上的素大,证实界面上的间距、文字大、icon大都是一的。

关于适配这个知识点,这篇文章帮你彻底掌握它!

2. 适配三原则

配的时候通常会遵循三配原则:比缩、弹性控件、文字流自应。

关于适配这个知识点,这篇文章帮你彻底掌握它!

等比缩放

等比缩放指的是该元素的尺寸大小并不是固定的,是跟随着屏幕的大小(一般是宽度)变化而变化。下图 App Store 的搜索结果页,单个预览图的比例是16:9,不管屏幕分辨率何变化,图比例并不生变化。

关于适配这个知识点,这篇文章帮你彻底掌握它!

标注的时,我们也只需要标注页边距、图比例、图之间的间距就,开就以把适规则写成随屏幕宽度变化而变化。

关于适配这个知识点,这篇文章帮你彻底掌握它!

弹性控件

弹性控件指是元素尺寸不变,距随着屏幕宽度自适应,屏幕越宽,距越大。

关于适配这个知识点,这篇文章帮你彻底掌握它!

字流自适应

一行字的数量多和屏幕宽成正,屏幕越宽,一行显示的字数量就越多。

关于适配这个知识点,这篇文章帮你彻底掌握它!

3. 适配跟平台基础控件无关

其实并不是界面的所有素都需要进行适配的,只需要适配中间那一块域即可。

关于适配这个知识点,这篇文章帮你彻底掌握它!

而上下导航的高度不固定,每个的高度不一。比如 iOS 的导航栏是88px,Android 有112px、104px ……但是不管高度如何,只需要做让素居中即可。

关于适配这个知识点,这篇文章帮你彻底掌握它!

4. 实际例子

了那么多,时候一实际的例子了,配其实总结起就三骤,先换算至同一倍率,再去调整界面元素,后将调整好的界面按照倍率还原到始需配的尺寸。

关于适配这个知识点,这篇文章帮你彻底掌握它!

750何适至1242

首先适需要在同一个倍率下,750*1334是2x 下的,1242*2208是3x 下的,根据倍率换1242 的2x 大小是828*1472。

所以将750*1334配至1242*2208,就需先把750配828*1472,然后再将调整好的界面×1.5 到1242*2208。

关于适配这个知识点,这篇文章帮你彻底掌握它!

其他的比如750如何配至720、640,原理一样的,他们的倍率一样的,就省了尾的那两,只需根据配三原则调整界面元素即可。

五、需要注意的点

1. 小屏幕适配

我们的设计尺寸基是用750的居,就涉及到小屏幕的适问题,当一个元素在750上显示的效果很完美,到640上能就放不下。所以在做图的时,设计师是需要用动态的眼光去考虑问题。下面就来讲述几个最常出现的问题。

2. 弹窗

下图弹框的样式,在设计尺寸750上显示很完美,但是不做任何整,直接适应到640的屏幕上,就放不下。所以个时,我们就需要定义一适规则,比小屏幕缩小字号,间距缩小等。

关于适配这个知识点,这篇文章帮你彻底掌握它!

3. 文字截断距离

屏幕大小会接影响到显示数,数右侧有元素时候,涉及到文和元素安全截断距离。换句话说,也是文最多能显示区域。很多时候设计师在做设计稿时候,没有考虑到文极端情况,这导致在小屏幕时候,文和元素生叠现象。

比下图的爱奇艺我的页面,在750的界面上昵称显示的很完美,但是到640上就显示不,就需要我们定义一下文字显示的区域,当文字长度超个区域的时,文字省略,用「…」代替。

关于适配这个知识点,这篇文章帮你彻底掌握它!

4. 平台差异

iOS 和Android 两端系统级控件样不,所以我们可以为两端单独做几个样,这个成本不大,效却很好。比如 iOS 平台搜索框是矩形,而 Android 搜索是下划线。

关于适配这个知识点,这篇文章帮你彻底掌握它!

5. 单屏页面

大分我们做的界面适配都是考虑屏幕宽多,只会影响到一屏幕显示容的多,屏幕显示的容就长一点。对于瀑布流布来说,需要进行适配。但总是有一些特殊的单屏页面,如:音乐播放页面、空白页面……需要在有屏幕上显示一样多的容。

空白页面

类似图这种较简单的页面,如果固定上方间距,那么在大屏幕上就会显得容偏上,这个时候要想有屏幕显示的容都一样,我们可将上方和方的空白区设置一个例,这样管在么屏幕上,容相较于整个屏幕来说,位置都是一样的。

具体计算法:屏幕高度减去上下导航,再减去内容区域高度,剩下区域按照比例来分配。上占3/7,下占4/7。

关于适配这个知识点,这篇文章帮你彻底掌握它!

音乐播放页面

这个页面相较于空白页面来说,复杂一些,但是原是一样的。把够按照基础适配规则的地方固定来,留一些自适应的分。如图易音乐,同是2x的界面,播放操作区域的都是一样的,按照基础适配规则来的,而光盘区域则是固定左右间距得。

关于适配这个知识点,这篇文章帮你彻底掌握它!

而需要根据屏幕自适应的区域只有绿色矩形区域,实有没有发现把这个图简后,就和上面讲的空白页面的适配方法一了。不过需要注的是适应的部不要超过个,超过个之后,变数大,不利于计算,也没大必要。

关于适配这个知识点,这篇文章帮你彻底掌握它!

六、设计稿尺寸

至于设稿尺寸,我看并特别本质的区别。从原理看,可以用任何用的设尺寸。只不过从配的角度,750(2x)、720(2x)、375(1x)这三相对合些。

之前用过750,也用过720,那候就想不为什还有人用1x做图,现在市面上都没1x的机了,用1x做图导出2x、3x 图标不都虚边了。但后来换了一个新工作,同事都是用的375(1x)做图,习惯了之后发现者并没有大的别。

只是有些图标是整数的时候,需要手导2x、3x,但实就算750(2x)做图怕图标虚边,还是要手导3x的,都一样。1x的好处是,很多国外的资源都是1x做的,就可直接了。

需要注意是,在1x下做分割线时候,需要改成0.5px,这样导出2x图后才会是1px。议分割线用内阴影做,而不要接用0.5px线。

七、小技巧

我们做图时候,想要快速知前页元素在小屏幕上是否放下?那不能都把前页拖动到小屏幕上看看实效吧。这样成本也太大,其实有个常简便法可以解决这个问题。

750和640的界面相差110px(2x下),我们只需要在750的界面上减去110,看是否能放的下,果放的下,就表示在小屏幕上也能放下。

关于适配这个知识点,这篇文章帮你彻底掌握它!

果想要道字数是否能放的下,也以通计的方式得出结论,用110px除以字号大小,就以得出小屏幕的比设计稿少显示几个字。比字号是30px,在750的屏幕上能显示30个字,么在小屏幕上就只能显示26个字。

关于适配这个知识点,这篇文章帮你彻底掌握它!

八、总结

最后来结下全文最要几,帮助大家加深印象。

传统的等比拉伸界面去适的方法是错误的,也是极其浪费人力成的,完以一稿适所有; 适跟平台无关,只跟倍率相关,750和720的尺寸从适的角度来看,是一样的,只是界面尺寸相差30px; 适三原则:等比缩放、弹控件、文字流自适应; 适不要标死,要用动态的眼光去看,做的时需要考虑到极端情况,最常见的比小屏幕适问题……

配这概念很特殊,它看起很简单,简单到多数人都觉得自己会了,不用再去研究了,但其实只懂了皮毛,并不清楚原理。比如很多人都自己会 PS ,但那些专业的比起,自己所认自己知道的不过冰山一角。所以我们时刻保持一颗求知的,不总固执的坚持己见,共勉。

欢迎关注作者的公众号:「海盐社」

关于适配这个知识点,这篇文章帮你彻底掌握它!

图片素材作者:Daria

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

设计师的厉害之处不是设计方案有多么天马行空,而是是否有能将其落地的能力。 你们是否遇到过这种情况:自己做的设计方案在...
ui设计
最近遇到一个同学,说做了很多稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上线了,该怎么办。经过一轮沟通,发...
ui设计
作为设计师的我们,在思考设计实现方案的时候一定记得从业务逻辑出发,多跟运营以及产品沟通,挖掘到更多的需求,这样才能更...
ui设计
编者按:一套 UI 界面当中,核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候,要用到大家...
Tubik Studio
编者按:这篇文章来自资深 UI设计师 Danny Sapio,他总结了日常设计过程中,使用 Figma 的一些非常快速的设计技巧,希望能帮...
Figma
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
ui设计
文字的基本属性 字体属性包含的内容很多,我们可以根据 Sketch 或 Figma 的文字属性栏为例,分别进行解释。 1. 字体选择 F...
B端
设计平平无亮点???不如看看这些仪式感设计 在我们日常生活中,存在着各种各样的仪式感:婚庆、过节,升国旗奏国歌,它可...
ui设计