13964452023
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
1、响应式网页设计简析摘 要： 伴随着互联网飞速发展的今天，网页设计也呈现出翻天覆地的变化，设计师们需要摸索一些新的技巧和方法来优化网页设计，此时伊桑马科特提出的响应式网页设计将我们带入一个全新的设计领域，在CSS与HTML5的理论实践基础上，与用户的艺术审美需求相融合，使得响应式网页设计脱颖而出。 响应式网页设计是针对不同尺寸移动设备而诞生的技术，该技术很好地解决了由于不同尺寸设备引起的错误问题。响应式Web设计的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。关键词：网页设计；响应式；智能1. 前言1.
2、1 背景 据相关数据统计，截止到2016年至今，使用移动互联网的用户数量已是大幅增长，使用智能手机、平板电脑的用户已经大大超过桌面用户，越来越多的人更倾向于通过移动设备的方式访问互联网。怎么让网站兼容更多类型的设备使用已经成为越来越重要的问题，面对这种问题，响应式网页设计也因此应运而生。 传统网页设计采用“固定页面及元素宽度，任何终端统一页面效果”的策略，无疑将造成网页在一些新兴移动终端上显示的文字极小、链接分布极密，用户需要在屏幕上不停操作来自主寻求较好的体验。面对这一弊端，网页设计师聚焦于“响应式网页设计”这一关键词，试图使用一套代码为各类终端设备提供不同的设计和体验。从先前“为固定设备设
3、计网页”跨越到“响应式网页设计”是一个较难的过程。1.2 响应式原理 在CSS中，有一个不常用到的属性media。为了达到响应式设计的目的，让CSS根据屏幕宽度(例如 media screen only (max-width:480px)，使用不同的CSS代码，从而达到自动调整页面DIV宽度的目的。当然，除了CSS，还可以使用JS对页面内容进行动态的调整，不过这个技术不是很流行。1.3 响应式网页的优势 (1)不同终端设备的出现，如智能手机、平板电脑等这些设备存在不同屏幕尺寸的问题，且新的屏幕尺寸设备的不断研发，在大小、功能甚至分辨率上都会发生变化。当用户从便携式电脑切换到ipad时，响应式网
4、页即刻切换到相应的分辨率、图片尺寸和脚本。换言之，即网站能够自动响应用户的设备参数。拥有这样的响应式网页便无需对市场上每一种新的设备都进行不同的设计和开发。 (2)各种操作系统的出现，如Windows、Android、IOS等系统，它们之间相互兼容，解决跨浏览器的问题。现如今全球手机浏览器的使用量逐年上升，IE7的使用率不断下降。响应式设计能够根据用户的浏览器版本，既保证老版本的可响应性，又为高分辨率显示器提供相应的页面内容，使用户体验得到最佳效果。 (3)桌面版浏览器满足不同视口大小、旋转方向的需求。现在许多用户没有最大化他们的浏览器，对于屏幕本身有太多可调整的空间，如将浏览器视口调小，那么
5、网站的布局就不能完整的呈现出来。随着iPhone、ipad和智能手机的流行，许多新的设备能够根据用户的行为在竖屏和横屏之间进行瞬间切换，而固定网页布局已不能适应众多设备的考验，但响应式网页能够根据不同视口，为现有及将来的各种设备做出快速响应，呈现出完整的页面布局。1.4 响应式网页设计的特点响应式网页设计是为了让浏览者使用不同设备时获得一致的用户体验而开发的，不只是针对移动设备。在互联网产品、技术和标准不断发展的过程中，响应式网页设计也是不断进化的，只有了解其利弊，才能更好地为用户服务。首先，响应式网页设计操作灵活，可以针对某个页面调整，而不必影响网站中的其他页面;其次，响应式网页设计适应性强
6、，相对传统方法更容易调整以适应层出不穷的新设备;再次，响应式网页设计虽然在规划阶段有些耗时费力，但从长远看，却可以节省产品整体的开发维护成本，节约时间;最后，响应式网页设计可以促使产品在不同设备上保持视觉体验的统一性，维护品牌体验的一致性。响应式网页设计并非总是最合适的方法。有的网络服务商需要为大屏幕、固定位置用户和小屏幕、移动用户提供的内容差别非常大，两者的生命周期不同，动态效果和交互体验不同，以及移动定位、传感器和大数据带来的诸多因素，设计师就需要为不同用户的不同使用情境分别设计网站，然后通过媒介查询自动定位到适合的站点。2. 响应式网页设计概述2.1 响应式网页设计与原型 响应式网页设计
7、是一种网页前端开发技术，它可以描述为，“兼顾多种不同设备屏幕尺寸、分辨率、系统平台和行为做出相应的调整和布局的显示机制”。原型（Prototype），也叫“原样”，是“模拟科学”中的一个术语。在心理科学中，由于很难对动作或心智活动认识清楚，所以一般沿用JR安德森的观点，把原型（Prototype）视为关于范畴的最典型的样例设想，即把“原型”视为外化的实践模式，或“物质化”了的心智活动方式或操作活动程序。综合上述，响应式网页设计原型可描述为：符合“响应式网页设计项目分析、各类终端具有适合自身用户体验的不同页面效果、一套代码完成所有不同终端的网页制作、各类终端与主流浏览器良好兼容”等一系列规则的，
8、外化的响应式网页设计活动实践模式。2.2 建构响应式网页设计的原型建构原型一般采用心理模拟法，它包含三个步骤：（1）响应式网页设计活动的功能分析；（2）响应式网页设计活动的结构分析； （3）功能分析与结构分析的有机结合。 其中，功能分析的重点是作用的对象，条件与结果；结构分析的重点在于组成要素及要素之间的关系。响应式网页设计的目标是能够高效的编写一套代码为各类终端设备提供良好的设计效果和使用体验，这需要具备HTML5、CSS3、Javascript和jquery的基本技能。响应式网页设计之父伊桑.马科特认为，响应式网页设计应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕设计。这种思路颠覆了传
9、统固定宽度的网页设计方法，对于那些已经积攒了零散的响应式网页设计开发技巧、HTML5及CSS3等技术，能够较熟练的完成固定宽度桌面端网页的新手而言，恐怕很难理解从小屏幕开始设计然后渐进增强的思路。考虑到新手已经习惯设计制作固定宽度的桌面版网页，响应式网页设计如果从固定宽度的大屏幕网页制作开始，然后改造这套代码将仅适用于桌面的网页依次兼容平板端和手机端也是一个不错的思路。2.3 响应式布局布局类型:在谈响应式布局前，我们先梳理下网页设计中整体页面排版布局，常见的主要有如下几种类型：通栏、等分、非等分的多栏结构。布局实现:采用何种方式实现布局设计，有不同的方式，这里基于页面的实现单位而言，分为四种
10、类型：固定布局、可切换的固定布局、弹性布局、混合布局。 固定布局:以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。 可切换的固定布局、弹性布局、混合布局都是目前可
11、被采用的响应式布局方式：其中可切换的固定布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果具响应性，都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计，需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。 布局响应:对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）；无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点），我们通过JS获取设备
12、的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式：布局不变，即页面中整体模块布局不发生变化，主要有：模块中内容挤压拉、换行平铺、删减增加；布局改变，即页面中的整体模块布局发生变化，主要有：模块位置变换、模块展示方式改变：隐藏展开、模块数量改变：删减增加。 很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻巧，而且保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。2.4 响应式图片 响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，
13、我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径/rwd-router。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的响应式图片，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。虽然响应式设计在2012年被
14、提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而现在各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。3. 响应式网页设计的方法响应式网页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式网页设计的方法主要包括以下几个方面。3.1 移动优先(MobileFirst) 在网站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用
15、情境，优先从移动端开始设计，从创建具有一定可用性的基本体验开始，满足用户简洁、顺畅的情境需求。然后，渐进增强，布局显示内容，提高图片质素，增加必要的服务，提供恰当的交互，创造更丰富的体验。移动优先采用渐进增强(ProgressiveEnhance-ment)原则，而非早期网站设计提倡的优雅降(GracefulDegradation)原则。移动优先既可以为不支持媒介查询的移动设备提供适合的布局，聚焦当下最重要的事，也可以降低CSS代码复杂性，减少冗余代码。3.2 媒介查询(MediaQueries) 媒介查询是指根据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括:设备屏幕宽高(d
16、evice-width，device-height);视窗显示区域的宽高(width，height)，例如浏览器窗口的大小;屏幕方向媒体特性决定一个设备是处于横屏还是竖屏，即设备处于垂直或水平的状态(orienta-tion)，宽长比例等特性(aspectratio);设备屏幕分辨率(resolution)，每平方英寸像素数(ppi)，一般的屏幕为163ppi，视网膜(etina)屏为326ppi。这些属性可以通过“与或非”等逻辑运算符形成复杂的表达式，以此判断是否为特定目标设备类型，从而加载特殊样式、调整页面布局、提供适合的功能和交互。3.3 流式布局(FluidLayouts) 传统的固定
17、宽度(FixedWidth)布局以像素为单位，是网页布局中最常见的方法，它简单粗暴地固定了页面的宽度，使用户在不同设备上浏览相同的页面。屏幕较大时，页面两侧出现大片的空白区域未加利用;屏幕较小时，页面内容位置不变，用户只能不断地通过手指滑动进行浏览和界面交互。目前，响应式网页设计较常用的流式布局方法是利用CSS表格属性(display:table-cell)混合内容列为流动宽度，侧边列为固定宽度的方法。页面布局采用内容优先(ContentFirst)原则，即权衡如:图片、视频、文本、广告等不同内容的重要性来决定网格的编排。3.4 文本九游娱乐单位(SizingFont) 设计师常用像素(px)来设置文
18、本大小，不同的设备屏幕具有不同的长宽尺寸和像素密度，这就造成了以像素为单位的文本可能在这台设备上显示的效果不错，在另一台设备上看起来太大或太小。并且，由于像素的精确控制，不同的文本大小需要分别逐一设置，调整时也更繁琐。在响应式网页设计中默认文本大小(em)的比例和百分比(%)却具有更好的可访问性和灵活性。“em”可以进行跨浏览器缩放，1em相当于当前默认文本大小，指定了默认文本大小以后，调整默认基准或倍数，其余的文本就会自动按比例进行缩放，从而简化了维护。“%”和“em”类似，文本尺寸也可以按比例缩放，两者在技术上没有太大区别，且都是随父级容器级联的，只是“em”在语意上作为默认文本大小的比例
19、设置更容易理解。3.5 自适应图片和视频(ScalablelmagesVideos) 许多网站在小屏幕设备上采取简单的方法来处理图片:方法一，设置图片的CSS的display属性为none，从视觉上隐藏图片;方法二，通过媒介查询简单地控制缩放图片的比例。采用这两种方式的图片依然会被按照原始文件量下载，既没有节省流量也没有节省下载时间，因此都是不可取的。目前最优的方法是在加载页面之后，按照页面布局确定加载哪张图片。根据图片容器在不同设备上的宽度设置断点，通过媒介查询为不同断点提供不同的图片，如果图片等比缩放的艺术效果不够好，则需要视觉设计师为其单独切割画面以保证艺术感染力。视频的处理与图片不同，
20、在小屏幕中可以只提供一个视频链接来提高页面的加载速度;在大屏幕中则按照布局需要成比例缩放，关键是视频的容器要设置与视频的长宽比例一致，这样，视频才能够随着容器的变化而成比例调整。3.6 导航方式(NavigationMode)不论在哪种设备中，导航都是引导用户交互的重要元素，其可访问性和易用性是至关重要的，尤其在小屏幕中如何布局导航成为影响用户体验的重要课题。最简单的方式是任导航栏目流动堆叠下来，虽然直观整齐，但却占用了屏幕的宝贵空间，把主要内容信息挤了下去。第二种方法是把导航转化为下拉列表，节省空间，但不够直观，很多用户还不能把原本用于表单中的组件和导航栏目结合起来，另外，目前大多数设备都不
21、支持下拉列表的样式化。第三种方法则是先隐藏导航，然后通过单击一个形象化的按钮来展开导航栏目，节省了屏幕空间，相对于下拉列表也比较容易理解，但增加了一个单击的操作步骤。4. 总结 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。 课程论文评分表评阅点评分标准分值得分选题（0-10）与课程的关联度密切，选题适中9-10与课程相关，选题内容过大或偏小5-8与课程基本无关0-4摘要（0-20）基本写出论文大意且语言简练、
22、文字组织合理 16-20基本写出论文大意且语言简练 11-15基本写出论文大意6-10套话、虚话较多或字数不够或文不对题0-5正文（0-20）论证严谨、思路清晰、逻辑性强、有较强说服力，引文准确 16-20论证较严谨、思路较清晰、符合逻辑、有一定说服力，引文准确 11-15思路较清晰、引文较恰当 6-10有一定的说服力但论文紊乱、自相矛盾、大段抄袭他人章 0-5结构（0-20）结构严谨、逻辑严密、层次清晰16-20结构合理、符合逻辑、层次分明11-15结构基本合理、层次比较清楚、文理通顺 6-10有不合理部分，逻辑性不强 0-5深广度（0-20）见解独特，对问题分析透彻，且非常全面16-20有自主的见解，对问题的分析比较深入全面 11-15能提出自己的见解，分析的深度、广度一般6-10对问题的分析既无深度，又无广度0-5规范性（0-10）格式完全符合规范，字数符合要求 ,参考文献大于5篇，文献相关性密切10格式比较规范，字数偏少，参考文献3-5篇，文献相关性较好 8-10格式基本符合规范，但有个别地方不合规，字数、参考文献偏少 4-7格式规范性尚可，但不足之处较多，字数太少 0-3其他内容与其他同学雷同处超过30%文字、公式为图片形式重做总分11
1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
服务热线 13964452023 