行业动态响应式在网页设计中的应用

发布：2019-03-07 12:51:25 浏览：4828

互联网技术发展到今天,为了能够更好地适应社会发展的需要,人们把关注的焦点放在移动互联网技术的发展。但是大多数的网页开发基本都是基于原来的PC端的设计模式,呈现出的页面布局也与PC端无异,只是将其等比例的缩小,然而这种网页布局在小屏设备上的使用表现并不理想,并且显示分辨率低、系统平台不稳定,针对不同的系统和分辨率的设备分别进行图书馆网页的定制显然是不切实际的,但是随着响应式网页设计概念的提出,问题便有了新的解决办法,可以为不同设备终端前的用户带来良好的使用体验。对于大部分的高校而言,其校园门户网站都是在很早之前开发的,没有定期的维护与更新,导致在手机等便携式移动终端的访问体验不理想,现在大部门高校的图书馆网页在手机端访问时并不能识别出手机,仍然是以电脑界面的页面布局呈现,可用性非常低,极大的降低了学生的使用欲望和使用频率。毕竟,对学生而言,想要随时随地有台电脑访问学校图书馆网站是不现实的,但是几乎每个大学生都有智能手机,手机已经成为大学生最为依赖的工具和排名第一位的上网设备,所以,基于响应式思维设计的高校图书馆网页可以更加方便大学生在手机、平板上访问,为大学生带来更好的移动使用体验。

一、概念解读与设计原则

响应式是一种新的网络页面设计布局方式,其概念在2010年由伊桑·马科特率先提出,为的是给不同终端前的用户带来较好的移动阅读与使用体验。这种设计方式的理念在于,在充分考虑到用户可能会使用的设备的特性,如分辨率大小、系统差异、屏幕长宽比等,对页面的排布与图片的大小进行集中式设计,再根据终端特性的不同,智能的选择页面排布方式,呈现出极佳的页面布局效果。当然,设计网页时本着移动设备优先级高的原则进行,其主要表现在如下两个方面:第一个是需要更注重考虑移动设备本身的特性,鉴于不同的移动设备的多样性与差异性,需要优先照顾这些设备的显示效果,针对性的优先设计。第二是设计时遵循渐进式的设计思想,按照设备显示大小,逐步优化显示效果,比如在较小的设备上优先突出主要的内容,忽略次要信息的显示,随着设备尺寸的增大,可以相应的增加一些信息显示。另外,在进行网页设计的过程中,针对不同版本的浏览器,需要根据其特性进行设计,比如针对高级的浏览器可以相应的增加页面效果,为用户带来更好的使用体验。总的来说,不管是面向PC端的用户还是面向移动设备的用户,在网页设计时,需要考虑到图片大小的自由切换、分辨率的自动调节等,这样做的目的是在不同的设备上都能很好的兼容页面,而不存在为哪一个设备进行单独的网页设计这种费事费时的做法,这就是响应式网页设计的优势。

二、网页设计的核心技术

响应式网页设计理念提出至今,经过了几年的发展,这套设计理念发展的已经比较成熟,大部分的主流网页都已经跟进,实现了对自家网站的更新。目前,人们对于其核心技术的认识已经形成了共识,设计如下所示的3个内容。

(一)页面布局设计

首先页面的呈现效果,由于移动设备进行网页浏览发展时间较短,大部分的网页布局都是直接移植PC端的显示布局,这对于移动设备来说,体验是相当不友好的,不仅是体现在操作上的不方便,而且就显示效果来说也非常的差,很难让受众适应,久而久之造成了读者在移动设备端的体验不理想。响应式网页设计采取了流动式的布局方法,从而避免了此类问题。流动布局,不同于一般的固定布局,二者存在的区别如下,所谓固定布局,顾名思义,其页面显示的左右宽度是固定的,以px作为其宽度单位。流式布局则不同,其页面的左右宽度并不会为固定长度而限制,它是一种相对的页面宽度,其单位是百分比,这里的百分比指的是页面宽度与其所在元素的比值。简而言之,相较于传统固定式的网页排布,流式布局的网页排布具备灵活性和自主适应性,其网页布局的宽度会根据屏幕的大小自动的做出相应的改变,保证不会发生页面溢出的现象,极大的增强了页面元素在网页中的适应性。

(二)针对不同设备的响应方式

对于响应式网页设计而言,其核心的技术之一是在不同设备中做出的相应差别式响应。基于响应式设计的网页,其自身会进行设备屏幕宽度的自动检测,根据检测到的屏幕宽度数据,会加载预设的CSS文件。而加载响应的CSS文件,就会使其调用相应的网页排版方式。通常,对于CSS文件的加载,可以通过HTML标签进行加载,也可以通过已有的CSS进行加载,可以根据需求选择,需要注意的是,即使是在同一CSS文件里面,也存在着不同的CSS规则,会依据设备的不同分辨率选取不同的规则,这些规则会改变网页的呈现方式与呈现效果,比如网页的背景色等。由于移动设备的尺寸大小、分辨率和长宽比的形式要比电脑端更为丰富,所以,需要的网页排版布局的风格也会更多,如果网页能够很好的识别每种设备的特性。然后调用相应的文件来进行匹配,使得在相应屏幕上的内容呈现效果尽可能达到在PC上一样的使用效果。

(三)图片处理

对于一个网站而言,不能局限于单纯的文字内容,通常也会包含形形色色的图片。在传统的PC上,由于早先都是作为唯一优化对象,因此设计者认为传统的界面已经能够满足受众的需要,但是随着移动互联网的发展,移动阅读设备出现,其屏幕尺寸小的属性使得网页的显示效果大打折扣,一些网站为了尽可能的减少大幅图片对小屏设备显示面积,通常会相应的缩小图片的大小,甚至是直接将CSS文件的属性设置为空,实现图片的隐藏。从表层进行分析,其已经达到了理想的效果,而深入探究发现,虽然图片被缩小甚至是隐藏,但是经过处理的图片在加载的过程中并不会相应的缩小或是消失,仍旧按照原始文件大小下载,不会节省时间,更不会节省流量。目前关于这个问题尚未形成最佳的解决方案,一般的做法是优先加载页面,然就根据加载好的页面布局来确定图片加载的具体排布方式,比如哪边的图片可以加载,哪边的不需要加载,当然,鉴于页面加载的过程中可能会形成断点,通常可以在断点的位置加载图片。但是,视频的处理问题上,与图片的处理方式不同,在小屏幕上播放视频的体验不佳,往往只会在小屏幕上提供视频的链接,这样就不会对页面加载造成压力,而在大屏幕上就可以按比例缩放。

三、网页设计过程中的阻碍与难点

在很大程度上,响应式网页设计解决了传统网页设计在移动设备上的显示兼容性问题。由于响应式设计理念的提出,很多原本只能在电脑上才能实现的功能和高效的交互方式,现在可以很方便的在手机端实现。事实表明,很多高校的图书馆网页设计上都采用响应式网页设计的方式,并且反馈的效果也很不错,由此可以看出,响应式设计网页在相当长的一段时间内都会是最佳的网页设计方式。即便如此,响应式网页设计在实际的开发过程中还是暴露出了一些问题,在一定程度上阻碍了它的发展,如何较好的解决这些问题显得非常重要,它将决定其以后的发展态势。以下罗列存在的一些常见问题。

(一)时间成本投入的增加

传统的网页设计,由于专门针对的是大屏的电脑设备,可以很好的显示内容,网页设计的主要内容都被直接呈现在页面,在系统内部不存在一些隐形的设计,但是响应式网页设计不同,它是为了解决多设备的兼容性问题、分辨率、小屏优化问题,所以设计的工作量非常大,常常一个界面需要设计多种排布格式以便在实际应用中可以随着设备的改变做出相应的呈现。虽然在一个设备上并不会全部用到,但是都必须将其设计好并储存在网站的内部,而这看似额外的设计必然会增加初期的项目时间投入。据统计,在一个响应式的网页设计项目中,初期所耗费的成本投入超过了总成本的10%-20%。对于高校的图书馆而言,由于其本身的学术特殊性,为了尽可能的构建最前沿的技术基地,往往需要花费更大的精力才能达到目的,而这一切都会增加成本和时间的投入,延长开发周期与维护难度。

(二)需要针对移动触屏设备进行优化

在开发一些移动端的网站,尤其在开发诸如手机或者平板电脑等小屏设备的网页时,需要充分考虑便捷性。传统的键鼠操作可以很容易实现的操作转到这些小屏设备上是只能依靠其触屏功能来实现,但是由于触屏可以提供的交互方式极为有限。原先依靠键鼠可以轻易实现的操作在触屏上就会变得繁杂,低效,甚至有一些特殊的功能靠触屏可能都无法实现,就比如电脑端的悬停功能,在触屏上暂时不能实现。为了实现同样的功能,在触屏设备上据需要花费更多的心思来设计并实现。所谓的响应式网页设计,更多的工作或者说设计的重心其实是在针对小屏触摸设备的优化,如果其网页在移动端设备上能有比肩电脑端的交互体验,由此可以看出网页设计非常成功。

(三)浏览器的版本兼容性存在问题

在实际的使用中,我们渐渐发现,传统的浏览器对于基于响应式设计的网页并不友好。在IE8代之前的浏览器上都是不支持打开响应式设计网站的,究其原因在于响应式网页需要用到的媒体查询由CSS3实现,而在IE8之前,是不支持此项功能。要想实现此功能,只有进行系统升级。当然,也可以通过加载一些特殊文件解决。事实上,我们经常会发现,利用现在的浏览器去登陆高校的一些网页,或多或少存在一些兼容性问题,比如无法输入内容,无法显示内容,无法触发功能按键等等,需要一系列繁杂的设置方式才能在现在的浏览器上正常的使用高校的网站。即便如此,很多高校依然没有意识到如何更新自己的网站,而是通过修改浏览器的一些隐形设定,来实现对高校门户网站的兼容。