浅析响应式网页的设计与开发-文献综述

1浅析响应式网页的设计与开发以计算机信息工程系网站为例（文献综述）专业: 前言一、研究的意义如今，移动设备用户的数量已在 2014 年远超电脑端用户数量。越来越多的人从用电脑查看新闻、浏览网页、购买商品等行为转变为使用随身携带的手机或平板电脑，这种情况出现后则需要网站自动切换适应性的分辨率、图像大小和脚本，并根据用户的具体体验和用户所使用的移动设备，使得做出的页面有能力去自动响应用户的设备环境。本论文设计作品是以计算机信息工程系网站为例,基于 HTML5 和 CSS3 技术在 Editplus 平台上设计与开发的。为的是设计开发出一个能让用户在移动设备上舒适浏览的响应式网页。它能够满足各种类型的移动设备的需求，能尽可能给所有终端用户带去最优的访问体验。虽说如今也有专为平板电脑和手机打造的网页，它们也能满足客户的访问需求，但根据调查数据显示，常用的移动终端有 230 多种不同的屏幕尺寸，我们不可能为每一种屏幕尺寸都设计一款与之相对应的网页，所以，响应式网页设计此时便体现出了其最有力的价值 1。二、解决的主要问题至今为止，响应式网页设计还在被广大设计师所推崇。这个掀起了网页设计新标准浪潮的事物，在近几年里，一次又一次的巩固着自己的地位。它可以自动识别屏幕尺寸，从而调整出适合的网页。网页设计中强调模块化，模块化的设计要求模块能够“可拓展，无浸染” ，从而使得网页在任何地方都能正常显示。响应式网页设计就是网页在任何设备中都能正常适应，而无需每一个设备都单独拎出来做一个子网站 2。相对需要开发电脑网站、pad 网站、手机网站来说，响应式网站是节省设计开发成本的，它避免了重复内容的发布，使得人们只需专心维护一个网站后台即可，省时省力。随着用户使用的移动设备数量不断增多，响应式网页设计的要求也不断趋于人性化，简约化。网页所有元素，均可设置五种屏幕（电脑宽屏、平板横屏、平板竖屏、手机横屏、手机竖屏）下的适配样式，也让愈来愈多用户使用其拥有的设备越来越方便舒适。2由于响应式网页在不同终端有友好的页面展示效果，用户可以与网站一直保持联系，比如 URL 不变积累分享；通过单一的 URL 地址收集所有的社交分享链接。搜索引擎也在变得越来越聪明，它们足够智能可以完成移动网站和桌面网站的连接。Google也建议优先采用响应式设计，因为无论是什么网页版本都是相同的 HTML、相同的内容，Google 更容易处理。三、搜集的资料范围及资料来源论文搜集的资料主要来源于中国期刊网全文数据库，硕士论文数据库，网络期刊，报纸杂志等。网络资料一般是通过输入关键词基于响应式网页设计于开发、HTML5 网站前端开发、响应式网页布局以及响应式网站的国内外研究等搜索相关的参考文献，共搜索到的相关论文约 26 多篇，其中有直接参考价值的约有 12 篇。正文一、研究历史1响应式网页设计的起源及兴起伊桑马科特（Ethan Marcotte）曾经在A List Apart发表过一篇文章Responsive Web Design，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科“响应式架构（responsive architecture）”，物理空间应该可以根据存在于其中的人的情况进行响应。已经有公司在生产“智能玻璃”：当室内人数达到一定的阈值时,这种玻璃可以自动变为不透明,确保隐私。将这种思路延伸到 Web 设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web 设计同样应该做到根据不同设备环境自动响应及调整 3。伊桑马科特利用三种已有的工具：流动布局、媒介查询和弹性图片创建了一个在不同分辨率下也能漂亮显示的网站。他力劝设计师们要利用那些 Web 独有的特性去进行设计，并证明了一种在多种设备上都能提供卓越体验的方法的存在，同时这一方法不会忽视不同设备的差异，也不会强调设计师的控制权，而是选择了顺其自然并拥抱 Web 的灵活性。简单介绍一下三种已有工具：流动布局（fluid grids）、媒介查询（media queri-es）、弹性图片（scalable images），原指现有的一些技术手段，但在做响应式设计研究过程中，这些概念还有更广泛的意义。流动布局原特指以百分比为度量单位的布局技术实现方式。而后马海祥就此统一为一个大概念：在响应式设计的布局中，3不再以像素（px）作唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。媒介查询则可让你根据在特定环境下查询到的各种属性值，比如设备类型、分辨率、屏幕物理尺寸及色彩等，来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出其同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。再有便是弹性图片，伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。虽说弹性图片是 Ethan 提出设计产品时发表的概念，我们后期的研究中可以以图片为典型，扩大研究范围，不单单是图片，包括图标，图表，视频等信息内容的响应方式都要加入深究的范围 4。2响应式网页的主要特征:（1）能兼容各种设备，而非使用传统方式将用户跳转至设备专用网站。它能自动适应屏幕尺寸，风格统一，增加网站辨识度。如果网站采用了响应式设计，就无需为不同设备设计不同的网页布局。（2）无需在网站上设置跳转，提高了转换率和销量。响应式网站能够更好地发掘潜在客户群体，给网站带来更多访问流量。（3）响应式网站所用的后台及数据库是统一的，即在电脑 PC 端编辑了网站内容后，手机、pad 等智能移动浏览终端能够同步显示修改之后的内容。网站数据的管理能够更加及时和便捷。（4）具有提升搜索引擎排名的效果。在搜索引擎（如百度、谷歌）中排名靠前是每个网站的终极目标，具有响应式设计布局的网站有助于达成这个目标。维护此类网站所需时间缩短，人们只需要一组超链接来优化该网站在搜索引擎中的排名，就会有更多时间你定全面的搜索引擎优化策略 5。（5）它配有优化的分析程序，可处理响应式报告，并对应多台设备，将其分析及整合。便无需多个网站来适应不同浏览平台，让人们跟踪网站的访客总数、单个和总体转换率以及从一个网站移至另一个网站的访客数量变得没那么困难。（6）需要管理的内容少，节省管理投入。在不同工作流程和布局工具的帮助下，使用适用于不同设备的样板来管理内容也显着简化了管理界面的操作优化，由于应用基本业务逻辑带来管理的单一化，可以明显改善网站在不同设备上的用户体验。4（7）提升离线用户体验，管理员可抽出更多时间精力为不同设备的各种用户提供更优质的服务。3响应式网页的影响近年来，响应式网页的影响力不断扩大，许多设计师都崇尚采用响应式网页设计，从而让用户体验得以提升。据了解，响应式网页设计下的用户体验。（1）非常方便的浏览、阅读体验。一个无论是在使用大屏幕显示器，还是小尺寸的笔记本电脑，还是手机、IPAD 这样的移动终端，都能够正常浏览到网页内容，那对于用户来说，是非常惊喜的，也是非常热爱的。网站的受欢迎程度，也会大大上升 6。（2）舒适、合理的网页大小变化、动态的响应式感受。曾几何时，网页一直是死板的，都是靠着那仅有的拖动来调整，如果屏幕小了，还要把网页放大，或者自动去调整浏览器的视图才可以正常看到网页内容。而这些诟病，在响应式网页设计就不存在了。而是随意而动，随心而动！（3）用户主动性减少。响应式的网页设计，方便了用户的同时，也增加了用户的惰性。用户曾经的“烦琐”拖动网页次数减少，用户更加懒了，取而代之的是，期待网页或网站的主动变化，甚至奢望最好把“饭”给送上来！其次，响应式网站还对未来 SEO 有所影响。未来网站设计、SEO 优化细节的要求更高，响应式网页设计的核心技术就是网页网格和网页布局的处理。搜索引擎会在未来引入响应式网页设计的排名计分。响应式网页设计带给用户的用户体验很大的提升。而这种提升，还是在未来的，现在只是一个趋势。再者，新型的响应式广告渠道将会出现，SEO 也迎来新的机遇和挑战。传统的互联网 SEO 将于手机等终端的移动互联网 SEO 将趋大同，逐渐“在一起” 7。二、研究现状1、响应式网页的发展现状至今为止，响应式网页设计还在被广大设计师所推崇。这个掀起了网页设计新标准浪潮的事物，在近几年里，一次又一次的巩固着自己的地位。随着互联网的迅速发展，网络逐渐成为人们获得信息和生活交流的一种重要方式。越来越多的人从用电脑查看新闻、浏览网页、购买商品等行为转变为使用随身携带的手机或平板电脑。这种情况出现后便需要网站自动切换适应性的分辨率、图像大小和脚本，响应式网页设计5便能顺利的解决这个问题。响应式网页设计就是网页在任何设备中都能正常适应，而无需每一个设备都单独拎出来做一个子网站。它可以自动识别屏幕尺寸，从而调整出适合的网页。它避免了重复内容的发布，使得人们只需专心维护一个网站后台即可，省时省力。同时，响应式网页设计没有网页版本之分，让工作人员实施 SEO 操作可以保持一致性。随着用户使用的移动设备数量不断增多，响应式网页设计的要求也不断趋于人性化，简约化，也让越来越多用户使用其拥有的设备越来越方便。2、响应式设计的思维模式在内容优先的策略中，有三点思维模式可以贯穿整个响应式设计的过程：（1）忘记设备因为我们不知道用户会用什么样的设备来访问网站，因此，我们必须尽可能地把所有情况都囊括进来，所有的东西（布局、组件等）都能与不同类型的设备和平台相兼容 8。（2）优雅降级虽然这个概念一开始是技术实现上对新的特性在老的浏览器上无法很好实现时的折中做法，但在此仅想表达在对布局做弹性设计时，内容从宽到窄的变化呈现，必须经过重重筛选，留存最核心的内容块，这种模式非常适合对已存在的 PC 页面产品进行响应式设计改造。（3）渐进增强在本质上来说，就是把优雅降级倒过来：先创建一个基本体验，侧重让内容以一种简介的方式来展现；之后，在保证基本体验的前提下，开始着手做有关显示的布局和交互。而在此，也借用来说明下对于响应式设计的内容策略中，内容从窄到宽的变化呈现中，可以让内容的丰富度也相应地有所增加，这种模式与移动优先策略是相匹配的。越来越多的网站选择成为响应式，2015 年如此，2016 年也还是会继续，因为这已经不是种趋势，而怡然是种常态了。3、响应式网页面临的难题虽然响应式网页设计带给人们诸多方便，它也具有一定的使用优势，但所谓事无绝对，响应式网页设计还是有它解决不了的难题。首先，它的一个致命伤在对 IE 的老版本支持不是很好，特别是老版 IE6。现在很多用户还在使用 IE6，若坚持使用响应式网页设计，那就不适合特定的网页推广了。再者，一些游戏、视频网页只能在 PC 端上6打开。国内有一些用户提出，迪士尼公司网站上有很多网页游戏，它能在 PC 端上玩，但却不能在移动设备上使用，因此，也不能一味地选择使用响应式网页设计方案，或许有时使用了也没有太大意义，只会费时费力 9。再者，目前弹性图片的做法主要是：缩放、裁剪、分条件加载等实现方法本质上都只是一个技巧，只是治标不治本地掩盖了问题，并未真正完美地实现图片的弹性。在性能方面，响应式开发中最大的痛，按条件加载、隐藏或显示什么内容，都会比单一条判断的代码结构来的繁琐，并影响体验及维护。尤其是移动性能上，更多样的设备具有更加复杂的使用环境，如何识别设备，并让设备在不同环境均能良好体验，也是根难啃的骨头。总结通过对响应式网页设计的了解，它能为不同移动设备环境的用户提供更友好的浏览体验和更加舒适的界面风格，伴随着移动设备的不断增加与普及以及网页技术的迅速发展，相信响应式网页设计很快将成为网页设计中的一大利器。虽说响应式网页设计仍然存在一些不足，再者对于不同用户体验来说也不是最完美的解决方案，即使如此，针对目前的响应式网页技术发展状况而言，它已经丰富了我们在网页设计方式可以采用的方案，给每一个设计师带去了不一样的惊喜。现在已经源源不断的有设计师采用响应式设计方案，相信不久的将来会有更多的基于响应式网页设计的网页产生。那时随着响应式设计的逐渐普及和被市场的认可，便会有更多的企业进入到响应式设计的市场中来，企业的加入，又会触发更多开发人员进入该领域，最后形成一个良性循环，促进整个响应式网页设计的发展 10。参考文献1刘智惠，薛晶晶，卢倩芸.面向不同设备的响应式网页设计Web 移动图书馆J.现代图书情报技术,2014(11).2谭富盛.校园网站的设计与开发J.新课程学习(下),2012(07).3张利平.色彩情感特征与网站色彩定位J.美术教育研究,2014(10).4国兰.高校网站页面设计中的色彩应用研究D. 东北林业大学,2012. 5孙小英.网页设计中 CSS 样式的应用分析J.软件工程师,2013(12).6陈凤芹.Dreamweaver 网页设计与制作教学探讨J.中国教育技术装备,2012.77杨彬.浅谈响应式网页设计J.辽宁行政学院学报,2014(05).8王愉，潘明明.响应式网页设计初探J.北京印刷学院学报,2014(03).9唐骏开.HTML5 移动 Web 开发指南M.北京电子工业出版社,2012.10韩绍鑫.基于 Dreamweaver 的网站设计与规划J.数字技术与应用,2013(04).