请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册
艾Q网 博客 设计达人 网页设计 查看内容

不藏不掖着,响应式网页大揭秘来了!

1226 0
admin | 2022-5-23 22:31
摘要: 大家肯定有过这样的体验,有些网站在电脑端使用起来还不错,但是并没有做相应的移动端口的适配,导致在用手机浏览的时候,非常不便,大大降低了网页的使用率。随着移动端设备的不断普及和发展,导致网页设计也从原来 ...

不藏不掖着,响应式网页大揭秘来了!

大家肯定有过这样的体验,有些网站在电脑端使用起来还不错,但是并没有做相应的移动端口的适配,导致在用手机浏览的时候,非常不便,大大降低了网页的使用率。

随着移动端设备的不断普及和发展,导致网页设计也从原来的电脑端,过渡到了移动端。这也就要求我们设计一个网页的时候需要去适配不同的设备。

而我们都知道,网页设计是整体且系统的,在设计过程不能各自适配各自的端口,那样会导致整个网页设计的项目不统一。再加上现在各种尺寸的显示器,没有办法一一进行统计和适配。今天我们就来讲解一下怎么去解决这个问题。

不藏不掖着,响应式网页大揭秘来了!

响应式网页 RESPONSIVE WEB DESIGN 简称为RWD,可以让网页自动的适应不同尺寸的显示器。这种形式的优点也是显而易见的,那就是高适应性和提升网页的实用性。

不藏不掖着,响应式网页大揭秘来了!

这是一个典型的响应式网页,当在我们缩小这个家具网页页面的同时,它的内容也随着发生改变。

不藏不掖着,响应式网页大揭秘来了!

我们来看一下这个示意图,这是一个正常尺寸的网页。

不藏不掖着,响应式网页大揭秘来了!

当我们缩小它的尺寸时,里面每一个元素都会相应的发生改变,现在看到的是一个平板端口的尺寸,内容并没有受到任何的影响。

不藏不掖着,响应式网页大揭秘来了!

当我们的尺寸进一步的缩小,到了移动端,元素自动调整,依旧是不会影响整个网页的识别。

不藏不掖着,响应式网页大揭秘来了!

而这个网页,在电脑端观看没有任何问题,但是并没有适配其他的端口,浏览起来就会给用户造成不便,导致用户流失。

不藏不掖着,响应式网页大揭秘来了!

来看这个网页,在收缩的过程可以明显看到,每到达一个点的时候,里面的元素就会相应的减少,直到最小。

不藏不掖着,响应式网页大揭秘来了!

中断点,是网页在收缩的过程中的最小范围。当网页到达这个范围以后,网页内部的元素就要进行相应的变化,用来适应网页尺寸的变化。

不藏不掖着,响应式网页大揭秘来了!

这是一个正常尺寸的网页的线框图,我们接下来通过收缩这个网页,理解中断点的概念。

不藏不掖着,响应式网页大揭秘来了!

当网页收缩到了标记的中断点的位置以后,整个网页就要做出相应的调整。不然有些元素就会影响整个网页的观感。

不藏不掖着,响应式网页大揭秘来了!

下方的单元型数量减少,保持元素的基本比例不受影响。

不藏不掖着,响应式网页大揭秘来了!

以此类推,继续收缩这个网页。

不藏不掖着,响应式网页大揭秘来了!

到了下一个中断点的时候,整个元素还是要进行相应的调整。最常见的做法就是,减少这一屏的元素数量。保持他们的正常比例不变。

不藏不掖着,响应式网页大揭秘来了!

前面讲过的中断点,并不是随意去设定的数值,各个大的互联网公司,都会制定自己公司的设计指导手册。我们在刚刚进入这个行业的时候,如果束手无策,不妨多去看看这些设计的指导手册。

指导手册会提供一个规范的设计标准,确保设计师的设计规范。就像最简单的数学公式。这里我们主要来看一下,谷歌的指导手册(Material Design)。

手册链接:https://material.io/design/

不藏不掖着,响应式网页大揭秘来了!

这份指导手册,涵盖整个显示器端的内容,从最开始的网格搭建,到大的设计原则。大家感兴趣可以去这个网站看一下。

不藏不掖着,响应式网页大揭秘来了!

今天我们主要来看的是,这里面给我们提供的关于中断点的信息。黄色标记的位置就是中断点的信息。

不藏不掖着,响应式网页大揭秘来了!

这份表格里面规定的数值很多,在适配的时候不需要全部都做,我们只需要挑选几个常见的就可以了。

不藏不掖着,响应式网页大揭秘来了!

在上面的动图演示中,使用就这个规范里面的数值,这样,设计出来的响应式网页会更加的具有规范性。

不藏不掖着,响应式网页大揭秘来了!

这个网页我们在浏览的时候,可能会发现它只有两个中断点,其他的时候基本保持不变。

这是因为,平板端基本可以直接沿用电脑端的相关尺寸,而手机端必须要重新的适配。

现在大家应该对响应式网页有一定的了解了。它的高适应可以让你的网页,更好地适应不同的设备,并且提高网页的实用性。

中断点越多会让你的网页变得更加的细腻,而当我们没有那么多的时间和精力去做的时候,可以像上面的网页一样,只适配两个尺寸。

这样可以确保大部分的用户都可以接受到网页的信息。接下来,我们来看一下,响应式网页的类型都有哪些。

不藏不掖着,响应式网页大揭秘来了!

响应式网页的类型分为两种,固定网格和流动网格,这里的网格并不是我们熟知的网格系统的建立,而是在收缩网页的时候,网格的变化模式。

先来看一下固定网格,这里是在收缩网页的过程中,网格基本固定保持不变,当收缩接近中断点时,页面才会发生变化。

不藏不掖着,响应式网页大揭秘来了!

我们先来看一下线框图,红色的线段是中断点的标记。

不藏不掖着,响应式网页大揭秘来了!

当我们的页面收缩到一个中断点的位置,最边缘的元素就会自动被减掉,用来适配尺寸。

不藏不掖着,响应式网页大揭秘来了!

到达下一个中断点的时候也是同样的方式。

不藏不掖着,响应式网页大揭秘来了!

固定网格的最大的特征是整个网页,在收缩的过程,到了中断点就会自动的减少元素,其他元素基本保持不变。

不藏不掖着,响应式网页大揭秘来了!

而流动网格的形式,则是相反的,元素会随着尺寸的变化而变化。

不藏不掖着,响应式网页大揭秘来了!

这个网页,在收缩的过程,到了中断点就会自动的减少元素,其他元素基本也会随着尺寸进行相应的变化。

不藏不掖着,响应式网页大揭秘来了!

继续来收缩这个网页,当网页收缩接近中断点的时候,整个网页中的每一个元素,比例都随之变化。当到中断点的时候,边缘的元素被减掉。

不藏不掖着,响应式网页大揭秘来了!

以此类推到下一个中断点的时候,各个元素还是按照比例进行缩放,直到接近下一个中断点。但并不是每一个中断点都需要去减少元素,可以适当的按照元素的比例进行调整。

不藏不掖着,响应式网页大揭秘来了!

到达下一个中断点,元素继续减少,用以适配尺寸。最后到达最小的尺寸为止。

不藏不掖着,响应式网页大揭秘来了!

这里除了这样的继续两列展示,还有另外一种形式。直接变成一个单专栏型的网页展示,这样可以最大的展示图像的效果。

不藏不掖着,响应式网页大揭秘来了!

流动网格中,随着网页的尺寸变化,整个元素的大小发生着改变。

在设计的过程中选择流动网格还是固定网格,主要取决于网页的内容,图片和文字可以适应随着网页的变化而变化,可以选择使用流动网格,反之则是固定网格。

这里还是要再强调一下,网格类型主要是指网格的模式,是固定的还是移动的,和我们在设计中的网格系统有一定的区别。

接下来,Adobe 的Xd 这个软件的实际操作,给大家讲解一下。在设计响应式网页的时候,如何去按照不同的端口去设置网格系统。

不藏不掖着,响应式网页大揭秘来了!

首先我们打开页面后,点击右下角画板,会出现网格的菜单,点击版面按钮,版面网格就建立完成了。

不藏不掖着,响应式网页大揭秘来了!

建立好版面网格后,下方的数值,它们分别代表着不同的设定,我们一个一个来讲解。

不藏不掖着,响应式网页大揭秘来了!

首先是列,这个概念比较清晰,就是网格中的矩形框,这里设置了12列。

不藏不掖着,响应式网页大揭秘来了!

间隔宽度则是矩形框之间的距离,这里设置了16像素。

不藏不掖着,响应式网页大揭秘来了!

列宽则是矩形框的宽度,这里是135像素。

不藏不掖着,响应式网页大揭秘来了!


鲜花

握手

雷人

路过

鸡蛋

本文暂时没有评论,来添加一个吧!

您需要登录后才可以评论 登录 or 立即注册