浅谈响应式网站论文

浅谈响应式网页设计[摘要]经过十多年的快速发展，中国的互联网如今已经日趋成熟。随着3G,4G的发展和移动通信及WEB2.0技术的提升以及近年来各种移动智能设备的兴起，移动互联网也即将会步入高速发展时期，成为一种大势所趋。这一来就使中国互联网的发展变得更加丰富、多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等，在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一致体验这将成为了整个网页设计行业的一个新挑战。据非官方调查，移动设备正在逐渐超过PC设备，如果数据属实那么无可置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了避免这种情况能够使所有利用移动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择.【关键词】:设备响应式设计;Web设计;移动终端;动态网页一、晌应式网页设计《ResponsiveWebdesign)的理念页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是ipad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等.以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环魂。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。其实这个是一个设计问题，既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。交互设计师，要满足各自不同分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到页面性能和移动端带宽问肠，权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师，则要完成满足视觉需求和交互功能.更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面!二、响应式网页设计要素EthanMarcotte曾经在AListApart发表过一篇文章“Re-sponsiveWebDesign，在第一次正式提出响应式设计概念时就定义了响应式设计的三大要紊:流体栅格、弹性图片、煤体查询。传统网页是被固定的装在固定尺寸的盒子(栅格)里，无法随着外界环境而改变，而响应式页面就像一袋水，可以成为不同形状，流体栅格就是按照百分比来设定容器的宽度，宽度会随着浏览器变化而变化.当然，光容器流体也不行，内容也需成比例变化.所以页面上的内容:文字，图片等都可以设为弹性的。“流体栅格+弹性内容”让网页具备了响应能力，媒介查询起的作用是定义响应规则。就像使用不同的容器来装水，呈现的形状也将不同。媒介查询探侧浏览器宽度，并在指定宽度范围内加载不同的样式。网页显示状态如图2-1所示：三、晌应式网页设计基本技术响应式网页设计模式基于“移动第一’的原则而提出。主要使用如下基本技:viewportmeta”标签，可以在浏览器中禁止zoom;排版，根据设备大小自动剪裁，包括字体大小和垂直空间布局;大屏幕设备采用grid布局，小屏幕设备缺省使用单列;针对特定代理做一定的设计折中。通过使用这样的技术策略，可以达到良好的网页屏幕自适应效果，尽可能消除不同屏幕尺寸上用户体验的落差。如果符合上面的设计，header看起来会是这样:!DOCTYPEhtmlhtmldir=”Itrlang=en一UShead?metacharset=”UTF-8/?title/title?metaname=“viewportcontent=”width=device-width/?linkrel=“stylesheettype=”text/cssmedia=”screen“href=”core.css”/?linktel=“stylesheettype=”text/enameaia=”screenand(min-width:640px)”href=”grid.css”/?!--[iflteIE8]linkrel=”stylesheettype=”text/cssmedia=”screenhref=”ie/core.css/linkrel=”stylesheettype=text/cssmedia=screenhref=”grid.css/?![endif]--?linkrel=stylesheettype=“text/cesmedia=“screenhref=style.css”//head上面所列的代码，还是一个在不断试脸和发展中的响应式设计，随着时间的推移,以及设备的发展，这里表述的设计本身也将得到发展。四、响应式网页设计的优势开发、维护、运营成本优势:页面只有一个.只是针对不同的分辨率、不同的设备环境进行了一些不同的设计.所以在开发、维护和运营上.相对多个版本，能节约成本。兼容性优势:移动设备新的尺寸层出不穷.定制的版本通常只适用千某些规格的设备.如果新的设备分辨率变化较大.则往往不能兼容.而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前顶防这个问题。操作灵活:响应式设计是针对页面的，可以只对必要的页面进行改动.其他页面不受影响。五、响应式Web设计的劣势兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。但，响应式网页设计最近几年被提的比较多.但是响应式设计仍然在不断变化.不断创新。比如，新的设备不断出来，这让以前的设计想法土崩瓦解。而各种网页的晌应式设计也获得了越来越多的注意.“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以网页设计也将迎来更多的响应式设计元素。Web响应式设计原则美国交互媒休设计大师RobFlaherty在他(ttjDesigningTheWell-TemperedWeb文章中就响应式Web设计的一系列问题给出了一些建议，根据RobFlaherty的建议及结合作者对Web响应式设计概念的理解与开发经验，提出了如下针对响应式设计需求不可或缺的四个设计原则。移动优先原则随着移动互联网的大举发展，移动设备的不断增加，移动终端的持有人数己经逐渐在赶超PC机，考虑到当前的发展形势，优先考虑移动设计无可厚非。有限所谓移动优先原则是指，整个页面设计的流程优先考虑到移动设备的兼容显示，再次前提下在考虑PC机的兼容显示。触控优先原则对触控优先原则的考虑也是华于移动互联网的发展迅速的前提下提出的。在移动设备终端上LI前触控是我们主要的一种人机交互方式。笨于这点在设计页面上就应该优先考虑设计出易于手指触摸的按钮等交互元素其次才是考虑同样易于鼠标点击的按钮等其他元素。所以为了能够使设计出的界面能够兼容史多的平台系统、设备环境等条件，网页设计师应该先从触控优先原则入手设计页面，之后在此丛础上对页面进行适当的调整以在不影响移动设备正常显示下.达到对PC端的兼容显示。即使网页上的相关交互元素既适合手指触摸又适合鼠标点击。弹性化原则在弹性化布局的琴础上引入Css媒介查询的功能使得web响应式的设计和开发思路让页面真正的富有弹性。页面布局再不会被破坏，图片的尺寸可以被自动调整，虽然这并不是最完美的解决方案，但它给了我们一种新的选择。这样无论用户切换设备的屏幕定向方式，还是从PC机屏幕转到iPad或者手机上浏览，页面都能够作者响应与调整。宏观性原则在响应式Web开发过程中，设计人员在项目的每一个阶段都要在多种浏览器和不同尺寸屏幕中进行测试，以尽一早发现问题。