响应式布局在网页设计中的应用

直 敏,高天哲,孙 杨

(盘锦职业技术学院,辽宁 盘锦 124010)

0 引言

社会生活网络化是当前社会中一个不可避免的网络趋势,也是大数据发展过程中不可忽略的一部分。当前网络媒介的发展呈现出了两种极为不同的趋势,一方面,小屏移动设备已经成为当前网络媒介发展中的主流趋势,而另外一方面大屏显示器仍旧在市场中并没有退出市场,反而普及程度还有所加深。 这两个不同的趋势所带来的一个极为明显的问题就是在用户上网时,设备之间的尺寸差距可谓是越来越大,不同设备终端其屏幕分辨率差别越来越大,传统的网页设计在当前已无法完全满足需求,而网页设计师不可能给每一个设备都单独设计网站,网站开发者更无法承担这样的高额成本。 这就要求响应式网页设计确保在不同的移动终端,即无论是电视、电脑、平板、手机等设备上,都能清晰显示网页内容,且加载速度更加流畅。

1 响应式布局在网页设计中的优势与劣势

响应式布局不是为每个终端做一个特定的版本,而是一个网站能够兼容多个终端,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其布局结构如图1 所示。

图1 响应式布局

1.1 响应式布局的优势

响应式网页设计在不同的屏幕上可以自动调整页面布局的设计理念,不仅能够给用户带来更加流畅的体验,也直接增加了网站的点击率。 响应式网页设计,具备多种终端浏览的流畅性和高清晰度,使得用户可以在不同设备上获得同样的体验,在增强用户体验感的同时,能够确保网页设计的质量及效果得到极为明显的提升,切实保障网页应用效果。 响应式网页设计由于拥有更加独特的优势,其在全球范围内得到广泛推广。 然而在实际操作过程中其仍然存在一定缺陷。为此,设计人员需要透彻了解其优势与劣势,才能更好地加以利用。 响应式网页设计的优势在于其可以根据用户终端设备的尺寸、使用情境以及行为模式进行页面布局的调整,以便更好地适应在不同设备端浏览页面的需求,让播放速度更加流畅、显示效果更加清晰,更好地适应市场发展的实际需求。 在后续的维护过程中,响应式网页后台不会因为某一个新设备的出现而设置专门的升级、开发等烦琐的流程,极大提升了加载速度,改善了使用体验。 在后期维护过程中,响应式网页所需要消耗的时间和资金相比于传统的网页设计而言更少。

1.2 响应式布局的劣势

当前,响应式网页布局存在极为明显的劣势,包括以下两点:(1)浏览器类型支持不足。 由于响应式网页设计的技术相对较为新颖和前卫,如果用户使用的浏览器为IE8 以下,那么用户在进行网页浏览的过程中,其页面将无法正常响应。 此外,如果该网站的用户较多,并且仍旧使用的是旧版IE 浏览器时,该网站并不适合采用响应式设计方法。 (2)布局范畴局限性极为明显,响应式网页设计并不适用于所有类型的网站。例如,一些小型的网页游戏网站。 如果只是单纯对页面进行响应式设计,那么其内容在移动终端使用时,将无法顺畅加载出来,显示效果不尽如人意,该网页使用响应式设计就失去了意义[1]。

2 响应式布局在网页设计中的应用

在分析响应式网页布局的应用时,首先要考虑到响应式网页设计要求网络页面能够兼顾PC 端和移动端。 页面布局可以根据设备屏幕的大小进行调整,并且确保页面内容不会变形,只是布局形式发生改变。为此,在使用时,响应式布局不仅要满足终端设备的屏幕显示要求,而且要达到网页设计目标中优秀的视觉效果,给用户提供良好的使用体验,在下一次使用时,能够提供更优质的页面浏览和搜索效果,确保在多种设备端都能以合理的布局展现给用户。 只有这样才能给用户带来最舒适的体验。 想要更好地分析响应式网页布局兼顾PC 端和移动端的效果,可以通过图形按钮、文字布局、导航等多种元素结合设计,通过不同的设计风格了解其应用价值以及布局方式[2]。

2.1 媒介查询

媒介查询是响应式网页布局的基本方法,这种方式会根据不同设备的类型、不同屏幕的宽度以及分辨率对页面进行最合理的布局。 在使用媒介查询时,设计人员可以利用css 代码第一时间判断出用户浏览器视口的大小以及用户浏览器所在的区间,可以针对其所属区间进行定义,并且找到相应的css 样式,从而有效控制页面的元素,使得不同设备都能够呈现与自身屏幕相适应的最佳页面布局。 媒介查询可以了解当前设备的尺寸以及分辨率,并且根据该设备的实际情况对网页进行整体改变,使得弹性布局网页质量得到提升。 弹性布局网页的视窗单位为百分比,即如果一个页面左侧有正文区域,右侧有边栏,那么两者的宽度将分别占据总页面的70%和25%,而这样的页面在PC 端上的分布是相对舒适的,但是在移动端上显示,则会显得较为拥挤,媒介查询存在的目的和作用就是针对这一问题进行判断。 如果其宽度较宽,则可以选择70%和25%的比例,而如果宽度不足,则需要调整设备显示的效果,以满足移动设备的需求。 以iPhone4 为例,其宽度为320 px,这里可以设置一个判断点,在利用媒体查询时,其规则为如果页面小于320 px,则页面左侧正文区域和右侧的边栏需要被其他两个数值所覆盖,分别改为100%和100%,即如果使用iPhone 进行网页浏览,宽度为320 px 能满足条件,响应式页面所产生的效果则是100%与100%之间的关系。 为此,左侧的正文区域和右侧的边栏会从原本的从左到右横向并排显示,变成从上到下的纵向排列。 为此,媒介查询存在的作用就是根据不同的设备调整显示效果[3]。 移动端网页所采用的布局方式是流动布局,而在PC 端,则可以采用固定布局模式。 流式布局是在响应式页面设计方法出现之前,用来解决不同设备上页面布局问题的一种方式,其能够很好地适应各种不同比例的设备显示屏。 选择应用流式布局,是以百分比为度量单位实现页面布局的,突破了原本页面布局中存在的诸多限制。例如,利用流式布局图案,可以根据设备屏幕的尺寸自动调节各种不同视窗的宽度,使得网页能够充分地利用宽度页面空间,保证信息的显示效果。 大屏幕上不会出现两侧大面积空白的情况,相比流式布局而言,媒体查询技术更加简单易用,这也是当前选择响应式布局方案时更多采用媒体查询技术的主要原因。

2.2 文字以及图片的布局

随着页面布局弹性的出现,文字和图片作为页面最为重要的信息,需要以更加灵活的方式适应当前页面布局的变化。 在大多数情况下,利用rem 来代替传统的像素px,能够让文字在短时间内适应缩放的需求。其中rem 的大小是根据节点元素的字体大小而形成的,1rem 等于〈html〉的标签字体大小。 在浏览器中,一般情况下,开发人员会将字体大小默认为16 px,而如果将〈html〉标签的front—size 设置为50%,其带来的最终结果相当于将页面整体的字体大小设置为8 px,通过这种方式能够推算出1rem 等于8 px。 rem 代替像素px 是通过改变〈html〉的标签实现front—size 值来改变rem 值,这就导致一旦页面发生了改变,则页面中所有以rem 为单位的样式元素都会发生相应的改变,使得页面无论是放大还是缩小都更加方便,同时也能够满足用户的使用需求。 不仅文字能够在短时间内适应页面变化的需求,而且图片也会根据页面的布局进行自动响应。 自动响应的图片是通过JavaScript 脚本第一时间对所有正在使用的设备进行检测,计算出该设备的屏幕分辨率,并且根据已经检测到的结果,对相应的图片进行加载,形成一个定向的虚拟目录,也就是说,当服务器在接收到请求后,会将最适合该屏幕的分辨率的图片及时地反映出来。 无论是媒介查询、流式布局或是弹性图片,其最终的目的都是为响应式网页服务,确保网页效果能够在众多设备上展现出最佳的效果,其整体效果给人的感受是良性的,并且能够满足页面的设计需求[4]。

结合媒介查询弹性文字和图片使用方式的分析,响应式网页设计中常见的几种布局方式,能够发现其包括断点切换布局、弹性布局以及混合布局、单页滚动布局等。 所谓断点切换布局是以像素为基本页面单位,根据主流设备的类型和尺寸来确定断点,也就是说,使用断点布局模式设计出几套不同的布局宽度,然后根据浏览设备的屏幕尺寸大小选择合适的布局方式。 以某页面为例,该页面布局为720 px×990 px。

(1)利用页面断点为该页面设计出3 套不同宽度的布局且当设备屏幕尺寸小于720 px、设备屏幕尺寸在720 px 到990 px 之间,设备大屏幕尺寸大于990 px时,这3 种不同宽度的布局需要分别进行匹配,以提高网页设计师的整体效率。 但在使用断点切换布局模式时,设计人员能发现这种布局模式的优势在于可以根据不同的主流设备确定相对固定的断点,能够利用方便模式在使用时最快达到设计效果,但是由于设备更新的速度较快,用户在使用这种模式时仍旧会出现不适应该模式的设备,甚至无法进行良好匹配的设备[5]。

(2)在使用弹性布局时,这种模式是以百分比为页面最基本的设计单位,该页面具有一定的弹性,能够适应一定尺寸范围内设备屏幕的浏览器,并且能将设备屏幕空间加以有效利用,其最终目的是展现出最佳的、良好的设计效果。

(3)混合布局。 混合布局的页面单位与其名称一致,是由像素和百分比共同构成的。 混合布局同样能够在最短时间内适应一定尺寸范围内的屏幕,并且在屏幕上展现出良好的页面效果。

(4)单页布局。 这种布局可以更好地解决PC 端和移动端存在的布局问题。 所谓单页布局,就是一种滚动式布局,属于特殊的页面设计方法。 这种布局结构非常简单,仅需要打开一个窗口,所有的内容都会在单个页面上呈现,选择单页滚动式布局,最大的优势在于可以在短时间内吸引用户的注意力。 这是由于用户所有的注意力均会放在正在展示的信息上,这种方式能够让浏览的效果更佳,并且浏览的体验感更好,能够在浏览过程中,第一时间抓住用户的注意力,使得浏览体验更加具有条理性,并且效率较高。 在单页设计中,多数情况下,其导航利用的同样是极简的设计风格,客户也可以直接隐藏导航,这种方式可以确保页面整体更加简洁,在浏览页面时,即使导航没有被用户发现,用户也不会因为缺少导航而迷失方向。 在使用时,用户有自己的浏览习惯,大多数人都会习惯自上而下地浏览,即便没有导航提示,用户也会下意识地向下滚动页面[6]。 为此,单页滚动布局能够提高用户使用体验,真正满足当前用户对页面布局的使用要求。

3 结语

综上所述,当前我国处于互联网时代,各种不同的智能设备均已接入互联网,无论是传统的台式电脑,还是可移动的平板、手机、智能手表,或是新一代的智能设备等,都需要通过互联网才能使用,而响应式页面是解决当前不同设备打开网页,界面效果相对较差这一问题最有效、最好的方式。 对于响应式页面设计而言,它不仅是一种解决设备差异性的方法,更是一种进行页面设计的全新思路,其发展并不局限于现有的设计理念以及设计方法。 在未来,响应式页面设计能够兼容层出不穷的全新产品,也可以有效地解决好网站跨设备问题,给予用户最佳的体验。