毕业设计基于响应式WEB设计模式的人机交互界面的研究与应用

《毕业设计基于响应式WEB设计模式的人机交互界面的研究与应用》由会员分享，可在线阅读，更多相关《毕业设计基于响应式WEB设计模式的人机交互界面的研究与应用（63页珍藏版）》请在装配图网上搜索。

1、工程技术学院毕业设计(论文)题 目 名 称基于响应式WEB设计模式的人机交互界面的研究与应用系 部信息系专 业 班 级计算机科学与技术61001学 生 姓 名指 导 教 师/讲师辅 导 教 师时 间2013年9月至2014年6月工程技术学院毕业设计(论文)任务书系 信 息 系 专业 计算机科学与技术班级 61001 学生姓名 指导教师/职称 讲师 1毕业设计(论文)题目：基于响应式WEB设计模式的人机交互界面的研究与应用2毕业设计(论文)起止时间： 2013年9月10日2014年6月1日3毕业设计(论文)所需资料及原始数据（指导教师选定部分）1周陟.UI进化论移动设备人机交互界面设计.清华大学

2、出版社, 2010.10.2秀野堂主.秀野堂主,蒋宇捷,罗睿.论道HTMLD.人民邮电出版社 ,2012.3张凤.基于WbeService的三层分市式系统应用研究D.长春理工大学 ,2009年.4朱印宏.CSS商业网站布局之道M. 清华大学出版社 2007年.5陈琳.“数字影像技术”课程的创设与教学. 2006.06 .6冉敏,余胜泉.小学移动英语学习资源设计J.中国远程教育. 2010.12 .7陈琳,王矗,李凡等.创建数字化学习资源公建众享模式研究.中国电化教育,2012.01. 8毛陈诚.移动智能终端应用促进文化旅游产业创新发展的思考.绿色科技, 2011.10.9许中博. 响应式网页布

3、局设计浅析. 人民邮电出版社,2012 .07.10Ben frain.响应式Web设计：HTML5和CSS3实战. 人民邮电出版社, 2012.11Tim Kadlec.响应式Web设计实践.人民邮电出版社, 2012.10.12ake spurlock.Bootstrap用户手册.人民邮电出版社 ,2013.11.13莱特曼.响应式用户界面与设计模式.机械工业出版社 ,2012.09.4毕业设计(论文)应完成的主要任务（1) 深入理解web开发中的响应式设计模式，撰写开题报告，完成设计前的准备。（3) web框架搭建，完成模块设计，并且完成人机交互系统的需求调查报告。（4) 从各个功能模块

4、完成系统，实现web中的各个页面，完成响应的设计工作。（5) 调试，总结分析设计思路和过程，撰写毕业设计论文。5任务书下达日期 2013年10月18日 指导教师(签字) 工程技术学院毕业设计（论文）开题报告题 目 名 称基于响应式WEB设计模式的人机交互界面的研究与应用系 部信息系专 业 班 级计算机科学与技术61001班学 生 姓 名指 导 教 师/讲师辅 导 教 师开题报告时间2013 年 11 月 22 日基于响应式WEB设计模式的人机交互界面的研究与应用一、题目来源模拟实际课题二、研究（设计）目的和意义响应式Web设计是当前网页设计领域的新趋势.针对响应式网页设计相关的设计方法和技术手

5、段,比如媒体查询、流式布局、弹性图片等展开探讨,为网页在多种设备上进行跨端的界面适配的问题提供新思路和解决方案。三、阅读的主要参考文献1周陟,UI进化论移动设备人机交互界面设计.清华大学出版社, 2010.10.2秀野堂主,论道HTMLD.人民邮电出版社, 2012.3张凤.基于WbeService的三层分市式系统应用研究D.长春理工大学, 2009年.4朱印宏.CSS商业网站布局之道M. 清华大学出版社 ,2007年.5http: web a 20111205769494.shtml.6Jessica AtheymLearning on the Rise in 2012OL7陈琳,王矗,李凡

6、等.创建数字化学习资源公建众享模式研究.中国电化教育,2012.01. 8毛陈诚.移动智能终端应用促进文化旅游产业创新发展的思考.绿色科技 2011.109许中博. “响应式”网页布局设计浅析.人民邮电出版社,2012 .07.10Ben frain.响应式Web设计：HTML5和CSS3实战. 人民邮电出版社, 2012.11Tim Kadlec.响应式Web设计实践.人民邮电出版社, 2012.10.12ake spurlock.Bootstrap用户手册.人民邮电出版社,2013.11.13莱特曼.响应式用户界面与设计模式.机械工业出版社, 2012.09.14冉敏,余胜泉.小学移动英语

7、学习资源设计J.中国远程教育, 2010.12.15陈翎.“数字影像技术”课程的创设与教学. 2006.06.四、国内外现状和发展趋势随着移动终端设备的增加，Web页面制作面临着一个挑战：变与不变。如何变是在产品设计的过程中显得尤为重要。案例：一个图集模块，在PC端，我们可以实现切换指针鼠标跟随、滚动条拖拽预览等，但是试想在没有鼠标没有拖拽事件的iPad上，如何实现更好的体验。当然，持有相应终端的用户希望有针对该终端专门的版本使用，然而成本的高昂否定了这种可能性。所以现在的互联网门户大多愿意选择以下方案：在用户访问网站时对设备进行识别，采取不同的策略。上述案例中，就可对iPad中无法实现的这些

8、操作进行相应修改，例如融入触摸屏手势：拨动翻页、拖拽滚动等。当然，太多细节的修改设计也会对页面造成压力过大的弊病。这就是我们说的响应式Web设计。响应式Web设计的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。显然，我们无法也

9、无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。五、主要研究（设计）内容、关键问题及解决思路5.1 主要研究内容（1） 深入理解web开发中的响应式设计模式，撰写开题报告，完成设计前的准备。（2） 掌握web开发中的几类常用技术和工具，html+css+javascript+sass，sublime等。（3） web框架搭建，完成模块设计，并且完成人机交互系统

10、的需求调查报告。（4） 从各个功能模块完成系统，实现web中的各个页面，完成响应的设计工作。（5） 调试，总结分析设计思路和过程，撰写毕业设计论文。5.2 关键问题（1） 如何做流体布局，流体图片，以及媒体查询。（2） 如何兼容各个版本。（3） 如何设计对用户友好。（4） 无重定向和更少维护。 (5) 利用node+grunt自动化工作。5.3 解决思路第一步：确定需要兼容的设备类型、屏幕尺寸；第二步：制作线框原型；第三步：测试线框原型；第四步：视觉设计；第五步：前端实现；六、完成毕业设计（论文）所必须具备的工作条件所必须具备的工作环境：（1）Sublime Text 2.2.2；（2）Pho

11、toshop6；（3）操作系统为Window 8 ；（4）Node.js 。七、预期成果（达到目标）通过响应式web的研究与应用，系统掌握了前端的自动化管理流程与步骤，进一步巩固专业基础知识，培养提高响应式web设计在web站点中的基本流程，为顺利走向工作岗位打下坚实的基础。八、工作的主要阶段、进度与时间安排第一阶段：2013年9月11日2013年11月9日，撰写开题报告，完成设计前的准备；第二阶段：2013年11月10日2014年1月1日，完成概要设计和详细设计；第三阶段：2014年1月2日2014年3月1日，web框架搭建，完成模块设计；第四阶段：2014年3月5日2014年5月20日，测

12、试各功能模块以及系统测试；第五阶段：2014年5月21日2014年6月1日，分析设计思路和过程，撰写论文；前言九、指导老师审查意见工程技术学院毕业设计(论文)指导教师审查意见学生姓名专业班级计算机科学与技术61001班毕业设计(论文)题目基于响应式WEB设计模式的人机交互界面的研究与应用指导教师职 称讲师审查日期2013.9.10审查参考内容：毕业设计(论文)的研究（设计）内容、方法及结果，难度及工作量，质量和水平，存在的主要问题与不足。学生的学习态度和组织纪律，学生掌握基础和专业知识的情况，解决实际问题的能力。毕业设计(论文)是否完成规定任务，是否达到了学士学位水平的要求，是否同意参加答辩等

13、。审查意见：指导教师签名： 评定成绩（百分制）：_分工程技术学院毕业设计(论文)评阅教师评语学生姓名专业班级计算机科学与技术61001班毕业设计(论文)题目基于响应式web设计模式的人机交互界面的研究与应用评阅教师王珏辉职 称讲师评阅日期2013.9.11评阅参考内容：毕业设计(论文)的研究（设计）内容、方法及结果，难度及工作量，质量和水平，存在的主要问题与不足。学生掌握基础和专业知识的情况，解决实际问题的能力。毕业设计(论文)是否完成规定任务，是否达到了学士学位水平的要求，是否同意参加答辩等。评语：指导教师签名： 评定成绩（百分制）：_分工程技术学院毕业设计(论文)答辩记录及成绩评定学生姓名

14、专业班级计算机科学与技术61001版毕业设计(论文)题目基于响应式web设计模式的人机交互界面的研究与应用答辩时间 年 月 日 答辩地点一、答辩小组组成答辩小组组长：成 员：二、答辩记录摘要答辩小组提问（分条摘要列举）学生回答情况评判三、答辩小组对学生答辩成绩的评定（百分制）：_分 毕业设计(论文)最终成绩评定(依据指导教师评分、评阅教师评分、答辩小组评分和学校关于毕业设计(论文)评分的相关规定成绩(百分制)：_分 A答辩小组组长(签名) ： 秘书(签名)： 年 月 日系答辩委员会主任(签名)： 系 (盖章)基于响应式WEB设计模式的人机交互界面的研究与应用学 生：，信息系指导教师：，信息系摘

15、要 响应式web设计是一种全新的web设计模式，其扩展性好、易用性强、兼容性好，能够做到一源多屏。本文以农业滴灌系统为实践中的案例，对传统网站建设所采用的技术和思想进行了对比论证，并阐述了媒介查询、流动布局、响应式多媒体技术的优点，同时分析了grunt技术实现自动化前端的可行性。人机交互界面的设计就是提高用户体验，而响应式设计模式有效的解决了交互中自适应多类客户端的问题。对在此实践中的项目进行了详细的论证，包括用户调研、需求分析、详细设计、实际开发、应用测试和项目发布。重点指出了响应式web设计过程中制作线框图与原型图，以及测试线框图、视觉设计与前端实现的流程。最后，对响应式web设计的调试问

16、题进行了分析和说明，对其结果进行了完整的总结。 关键词 响应式设计模式；人机交互；web前端开发In Response to Research and Application of Web Design Pattern in The Human-computer InteractionStudent：Zhou Miaomiao，Department of InformationSupervisor：Liu Zhi Yang ，Department of InformationAbstract Responsive web design is a new kind of web design p

17、atterns,its good expansibility,compatibility,ease of use,and can do more than one source.This paper begins with agricultural irrigation system engineering of web project,then contracts and argues the technology and thought that traditional website adopts at present,And expounds the media query respo

18、nse type,flow distribution,the advantages of multimedia technology.At the same time,analizes the technical feasibility of automated front of grunt.Human-computer interaction interface design is to improve the user experience, and responsive design model effectively solves the adaptive multiple class

19、 client issues in interaction.In this practice has carried on the detailed argumentation of the project, including user research, demand analysis, detailed design, development, testing and release.Highlight the responsive web design in the process of making wireframes and prototypes, and test a wire

20、frame, visual design and front-end realization process.Finally, the responsive web design debugging problems are analyzed and shows that the complete summary of the results.Keywords Resonsive design patterns；The human-computer interaction；Web front-end development目 录任务书.I开题报告.II指导老师审查意见.III评阅教师评语.IV

21、答辩会议记录.V中文摘要.VI外文摘要.VII1 前言12 选题背景.22.1 响应式web设计简介.22.2 论文提出与论文工作意义22.3 论文主要的组织结构43 方案论证53.1 自动化管理工具53.2 流动布局73.3 媒介查询93.4 响应式多媒体.114 设计论述134.1 总体流程图134.2 用户研究与设备规格预估154.2 制作线框原型164.3 测试线框模型214.4 视觉设计224.5 样式向导234.6 前端的实现245 结果分析295.1 测试环境295.2 测试程序与测试界面设计296 总结36参考文献.37附录.39 基于响应式WEB设计模式的人机交互界面的研究与

22、应用1 前言第 63 页 (共 63 页)随着移动互联网的飞速发展，大多数网站开始提供移动Web应用，由于移动互联设备屏幕宽度相对于PC的屏幕宽度较小，所以大部分原先在Pc上显示的页面并不能很好地直接在移动互联设备上呈现，特别是移动互联设备种类较多(如手机、平板电脑等)，而且显示的分辨率标准也比较多，更有许多未知和新的移动互联设备的推出。一个网页同样的内容，在大小迥异的屏幕上，会呈现出不同的效果，特别是屏幕宽度很难适应，这样会造成一个用户在用Pc和移动互联设备访问一个相同网站时，感觉有很大的差异和不一致性1。根据CNNIC第32次互联网络发展状况调查结果，截至2013年6月，中国手机网民的总规

23、模达4.64亿。其中，手机浏览器用户规模为3. 69亿，同比增长21. 0%，在手机网民中的渗透率为79. 5%23，响应式网页设计，整合媒体查询、弹性视觉媒体和流动布局，有助于解决不同上网设备的适配性问题，使网站兼容多种设备和屏幕，实现“一源多屏”。2选题背景2.1 响应式web设计简介2.1.1 传统的web设计理念目前的网站普遍使用固定的宽度，如果你的站点是960px的宽，当访客使用屏幕较小的设备浏览站点时，他只能看到站点的一部分，而且还会看到丑陋的水平滚动条45。大屏幕设备也存在相同的问题，如果有人用大屏幕访问站点时，那他会看到大片的空白，虽然留白作为设计心里学一部分固然是好的，但是对

24、于人们意料之外的空白，我想没有谁能从中获利6，传统的web设计在现在这个设备多样化的出现，早已呈现出多种问题，因为部分手机的浏览器都会默认显示缩小后的站点，虽然我们可以通过手指来缩放页面，可以看见站点的全貌，但是这样的用户体验，难免会让人觉得繁琐，况且这一过程也不能从中获利与享受。尤其针对于广告，对于许多企业而言，广告是能为企业提供利益的一种手段，大部分在站点上看到广告都是有厌烦的情绪，如何设计出合理的广告方案，在传统的web站点是很难做到的。2.1.2 响应式web设计理念响应式web设计，使我们的页面具有可变的特性，因为元素的宽度会根据浏览器的宽度自动进行调整。大多数情况下，不会出现水平滚

25、动条。其中媒介查询允许你根据设备的信息-如屏幕的宽度，方向或者分辨率等属性来使用不同的样式。响应式设计不是“为移动设备而设计”，它也不是“为台式机而设计”7它是关于采用灵活的,设备无关的方法来为web进行设计，对未来的可访问性更加友好。2.2 论文提出与论文工作意义2.2.1 响应式web设计的问题分析移动端的优化与设计现在已经成了一个时髦的话题，未来有可能有更多这方面的讨论。根据Mashable在2013年8月份发布的统计，可以得知，全球所有网站流量的17.4%都是通过移动设备来的，而这个数字在2014年将会继续增长。在早期，可以访问互联网的手机还只是少数人的时尚用品，那时的网络慢的让人无法

26、忍受，屏幕也是相当的小，用起来让人显得尴尬且不是特别友好，2010年5月，Ethan Marcotte写出一篇Responsive Web Design，他提出我们可以将不同联网设备上众多的体验，当做是同一网站体验的不同侧面来对待，而不要为每种设备进行单独裁剪而使设计彼此断选题背景开，这才是我们前进的方向。所以，作为web开发者如何不想失去移动端的用户，不想失去一杯羹的话，是时候步入web移动端的领域了。仅希望像Google和苹果这样的行业巨头公司网站适应移动设备往往是不够的，除非您不介意丢失几乎五分之一的游客到您的网站，我们的开发者追求的是精致，容不得页面在其他设备上的瑕疵，因此我们的设计不

27、仅要灵活，而且还能适应渲染他们的各种媒介。2.2.2 课题的提出响应式web网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了8，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？需要先明确好设计，再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始。对于响应式设计研究与应用，需要解决很多难题，主要有一下几个方面：（1） 媒介查询传统的固定布局有种种限制，媒介查询可以让你在特定的环境下查询到各种属性，比如分辨率，色彩，

28、高度宽度等，通过使用媒介查询，你可以熨平以前的布局的所有褶皱。但是你不知道要在哪里处理断点，如何为站点设定视口，如何为小屏幕设备提升导航栏的使用体验。也不清楚你的站点有哪些用户访问。也不清楚用户所用的设备分辨率。因此解决这个问题，在我的设计中将是重点。（2） 流动布局在传统的web站点，页面会被指定为特定大小的像素。会给开发者一种对页面拥有较多控制权的错觉。流动布局度量单位是百分比，但是在一些文本行宽在大屏幕下会很宽，小屏会太窄，在给左右padding时，能否给出页面一些合理的呼吸空间等。都需要考虑清楚，因此如何合理的设计流动布局是响应式设计的另一个重点。（3） 自适应图片当缩放浏览器窗口时，

29、有着固定宽度的图片与周围的元素格格不入，在较宽的列中，她们只占据一点点位置，在较窄的列中，她们又太宽，这些图片特别是在苹果的Retina显示屏上，更是一团糟，模糊不清，因此在设计中更是难解决的一步，如何定制出合格的图片，并通过代码来实现，这在新的响应式设计中也非常重要。综上所诉，响应式设计的实现与应用是一个巨大的挑战，也是一种全新的尝试，本文将为响应式的研究与应用提供借鉴。2.3 论文主要的组织结构2.3.1 论文组织结构第1章 ：论述了论文的前言，以及现在的移动平台发展状态第2章 ：论述了论文工作背景与研究意义，首先简要介绍了传统web设计的现状，分析了其中存在的问题，进而提出了设计新的we

30、b站点模式。第3章 ：深入分析研究了相关技术，是整个论文的技术支撑。第4章 ：响应式Web 设计及实现流程。第5章 :对各个平台的结果分析与测试。第6章 ：对论文工作进行了全面总结与展望。第一章前言第二章选题背景第三章方案论证（响应式设计涉及的关键技术） 第五章响应式结果分析第四章响应式web实现流程响应式Web 设计及实现流程第六章全文总结与展望图1 论文的框架结构方案论证3 方案论证本章介绍自动化管理工具，站点的性能优化设计，图片的csssprit等响应式web设计与实现的相关技术。着重讨论样式代码的复用性技术与组件开发技术，以帮助响应式设计过程中开发的效率问题。3.1 自动化管理工具Gr

31、unt是基于Node.js的项目构建工具。它可以自动运行你所设定任务。Grunt拥有数量庞大的插件，几乎任何你想要做的事情都可以用grunt实现。它能大大提高您运行前端开发工作流程9。使用大量的Grunt插件可以自动执行任务，例如编译Sass和CoffeeScript，优化图像和验证您的JavaScript代码语法的严格性与JSHint。编译，单元测试等，自动化工具可以减轻你的劳动，简化你的工作，同时对文件的加密有良好的设计模式。当你能正确配置好任务，任务运行器就会帮助你或者你的团队完成大部分无聊的工作在过去你可能使用类似CodeKit或Hammer来处理这些任务。我认为这两种应用程序是伟大的

32、(过去广泛的使用他们)，但Grunt比他们更优秀，他可以定制任务。有很多插件可以帮助你优化图片和在你的工作流中加入CSS样式。安装和运行Grunt需要有三个项目支持：Node.Js,NPM,Grunt CLI(命令行接口)，除此之外，需要将package.json和Gruntfile.js里面的项目名称进行调整。3.1.1 SASS(css预处理器)SASS的任务让我们把SASS文件编译成CSS，SASS在不破坏你的工作进程和工作流程中，让你的工作，生活变得简单轻松，过去我们的web设计师学习css并不容易，你需要知道每一个的属性，他们是如何通过优先级来实现样式的覆盖或重写样式，浏览器兼容，选

33、择器等，这并不简单，如何添加一个接口，通用的可维护性的css并不容易，我们的样式表非常的冗余。我们大多数前端工程师屈服与css的原始设计而从来不梦想它的改变，对面向对象的思想始终有惧怕的心理，css可以做任何事，除了不能复用，一个善用复用代码的开发者看到正统大小的css文件，首先感到困惑进而挫败的想哭。Css的缔造者很关心使用情况，他们希望css变得更有活力，维护工作变得更加精细，更富有挑战，幸运的是，有很多选项帮助我们摆脱了困境，其中之一就是SASS,此外还有less，Stylus。SASS作为css的一个扩展，可以容许你调用重复的代码，来更快的更有效的，更轻松的维护你的css。它有同面向对

34、象的思想，结合grunt的，可以将sass编译的css以各种方式输出，一般上线时，以compressed方式输出，节约带宽，减小服务器的压力，3.1.2 JSHint(javascript代码质量)JSHint是Grunt的一个任务，它是用来确保你的代码根据一组你希望的规则编写代码让语法更有效。让你按照严格的js语法。在团队开发中，尤为重要。3.1.3 ImageMin（压缩图像）设计师切出的图片，无论是jpg还是png格式，或多或少有大量的无关信息与多余的颜色值，这些信息通常对网页前端没有用处，增加了图片的大小，影响了带宽，加大了用户下载文件大小，延长了页面访问速度，减低了用户体验和对我们工

35、作的认知度。Jpegtrap/jpegoption是最理想的压缩工具，虽然操作不太方便，但是使用Grunt.Js的话，我们可以借助它的插件ImageMin，ImageMin封装jpegtran/optipng功能，可以批量的无损压缩图片大小。3.1.4 browserSync（浏览器同步对响应式开发来说，意义重大）快速的移动、pc的web开发模式，是我们web工程师一直在探索的一项内容，今天我要介绍一种高效的开发方式，在开始之前，我们先了解一下目前开发模式的现状，(1) 传统的PC模式以往的开发者一般在pc端调试好自己的页面后，然后在去手机上进行调试，并且手机上的许多细节与pc端又不完全一样的

36、，我们需要不断的修改源文件，不断的刷新，类似这样的流程：编辑器编码=>切换到浏览器F5=>编辑器编码=>切换到浏览器F5.如此的重复，并且手机调试刷新还不方便，特别是做响应式的时候，有多款设备，开发者刷新调试起来特别不方便，加大了开发的流程与繁琐。你的工作会更加的耗时，并且一团糟。(2) 远程调试模式现在又很多强大的调试工具，如weinre等，但这些工具有个弊端，就是工具不是支持所有的平台，而且他们的配置工作稍显的复杂，针对响应式的开发，并没有做出充分的考虑，而且需要购买商业授权。也不是很方便。(3) 当响应式开发遇上调试响应式这个概率，应该说从我们的智能手机普及的时候，就已

37、经进入到开发者的视线了，它应用媒介查询，为所有不同分辨率的设备编写出不同的样式，但是最终能达到一个页面在许多个设备中尽可能的呈现出最佳的用户体验，响应式主要兼容pc，响应式设计设计的关键技术平板，手机等，无论从浏览器的兼容，还是手机样式上的差异，交互的体验，都已经是繁琐的了，所以，如何高效的省时的开发，并从所有的设备上同时看到效果，能同步进行点击，滚动效果，那必然是最好的了。(4) Browser-Sync我们在实现响应式的站点时，一般我们有很多的调整和测试要做，Browser-Sync工具是一款非常强大的工具，它加快你的工作流程，通过在多个设备之间进行同步url，相互作用和代码的更改，它可以

38、跨设备同步操作，如滚动，点击，以及填写表单，它是免费的。对于开发者来说，还是不错的选择。当我们在更改源文件，保存的时候，都会被镜像到你当前所有设备连接的浏览器等等，且文件都会同步。并且能够运行在php，asp，Rails之上的网站。除此之外，它更大的亮点在于可以watch你的css文件，当我们的css文件有变化时，它完全可以动态的注入到页面中，而且不用刷新整个页面。我们可以架设静态的server，帮助我们更快的调试。还有重要的一点，我们如何在浏览器上调样式并且可以动态注入到所有的设备中了，搭配Chome Workspace我们的效率进一步得到提升，开发者可以将Chrome的网络资源与我们的本地

39、资源进行映射与同步，即可以实现在谷歌浏览器中对css的修改可以同步写到本地的css文件夹中，随之触发Browser-Sync的watch功能，这样样式便会自动注入到所有的设备中了，在本论文中，我将使用grunt-browser-sync，集成到我的开发中。3.2 流动布局 随着设备的不断涌现，开发者越来越难以忽视web所固有的灵活性和不可预测性，在拥抱我们的灵活性的第一步，就是要为我们的站点创建可维护性的布局，并借此来对不同尺寸的设备屏幕做出不同的响应。3.2.1 固定布局类型固定布局，在早期，用的最多的就是960像素的布局方式，它给我们的开发者一种对页面拥有很多控制权的错觉，即使非常大量的图

40、片，在不同的设备上，也能看起来相当的一致。而我们设定的宽度都是在假设前提之下的，然而我们经常猜测什么样的宽度可以照顾到更多的访问者，这其中又隐藏着比表面上看起来更深奥的技巧，经常出现滚动条与空白。3.2.2 流动布局媒体查询能适应不同设备和视口宽度，可以从一组CSS样式代码切换到另一组，但切换期间没有任何平滑过渡，会导致媒体内容要么过宽出现水平滚动条，要么过窄出现大量空白，尤其在切换临界点时布局会严重恶化。通过将固定像素布局转换成灵活的流动布局，确保在媒体查询未切换样式期间布局能适应视口改变。流动布局依靠浮动和百分比宽度来实现，浮动实现布局区块的动态重组，百分比宽度实现未到达断点时的区块宽度调

41、整，以减少创建的断点数。将固定像素宽度转换成百分比宽度可套用公式：百分比宽度=目标元素宽度÷上下文元素宽度。例如，将原来#wrapper宽度为960px，#content宽度为940px，转换为百分比布局#content宽度97.92%，即940÷960=0.9792。在网页文档<head>标签中插入一个HTM5<meta>标签，设置基于WebKit内核的画布缩放参数，如：<meta name="viewport"content="width=device-width initial-scale=1.0,minim

42、um-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可实现页面在浏览器中以原始大小显示，禁止用户缩放。其中：width和height检测设备屏幕分辨率宽度和高度，initial-scale 设定初始的缩放比例，值为1时将根据浏览器可视区域实际大小来渲染页面。minimum-scale和maximum-scale指允许用户缩放到的最小比例和最大比例，userscalable设定用户是否禁止缩放。3.2.3 弹性布局与流动布局类似，只是他们的度量单位不同，它通常用em作为单位，弹性布局给设计师们在排版方面提供了强大的控制权，另外弹

43、性布局，还有一个好处就是随着用户增大或者减小字体，弹性布局的元素宽度也会等比例的变化，但是有个弊端，它也会出现滚动条。3.2.4 混合布局它结合了上面几种布局方式，我们在利用的时候，应该先架构好，特别是固定宽度与流动宽度，正确的做法是表格布局。相比css布局，表格布局的优势在于它简化了将站点布局为多列的实现过程。其实我们可以给display属性赋予许多不同的，与表格相关的值，并来实现上述的样式，如果在css中使用表格值的做法会让我们觉得方案论证不爽，那么我们也不应该因此受到指责，在css中使用表格值与html表格来布局是有很大的区别，css表格只是定义了内容的样式，并非说表格也是内容的一分部。

44、但是我们可以通过hack或者额外加载css来兼容ie8一下的浏览器，再说了，它对移动平台对此的支持也相当棒。如果将某列display属性值指定为table-cell，我们就可以混合使用固定布局与流式布局了，不必担心滚动条的出现，虽然在ie8才开始支持display属性的的值，ie8之前的版本正在失去浏览器的市场份额，其实这任然由用户来决定，一些顽固分子，不愿升级浏览器的话，那你也没办法。我们开发者必须准备一些备用的样式，例如我们创建一个叫ie.css的样式表，并且规定只在ie8一下的浏览器才加载它，那么我们可以加条件注释:<!-if IE 8-><link rel=style

45、sheet href=css/ie.css media=all><!endif->那么，任何ie8一下的浏览器都会加载了，我们便轻松的实现了早期版本ie浏览器提供备选样式表目标。现在唯一的问题是windows phone7也会加载这个备用样式，幸好我们只需在条件注释中做一下小小的修改，就可以修复这个bug。<!-if (lt IE 8) & (!IEMobile)-><link rel=stylesheet href=css/ie.css media=all><!endif->总结，通过使用css表格，你可以很容易的将固定布局与流动

46、宽度结合起来，现代浏览器对此都有极为出色的支持，并且通过条件注释来为低版本的浏览器提供备用样式。记住，站点不需要在不同设备的不同浏览器看起来一模一样。3.3 媒介查询媒介查询可以让你根据特殊环境下比如分辨率，色彩，高度和宽度来决定你应用什么样的样式，通过媒介查询，你可以灵活的应用布局。3.3.1 为站点设置视口当我们浏览器窗口变窄时，我们的布局看上去像被砖拍扁了是的，我们的导航栏也乱成一团，每个li容纳的字数也严重变得奇异，严重的影响了美观，如图所示。当窗口放大时，每行文字的行宽就离最完美的阅读宽度越远，用户体验相当的不好。开发者要避免这样的情况出现。 智慧大棚 智能滴灌 智能气象首页 技术支

47、持图2 浏览器缩小后的界面通过视口标签，我们可以控制页面在很多设备上的大小和布局视口，<meta name=viewport content=width=device-width/>.这样设计后页面在屏幕上的布局视口将等于设备的屏幕宽度。还有就是用户在页面上的缩放问题，默认值是容许缩放的，在ios上user-scalable，当你将设备横屏后，页面就会自动变大，用户不得不点击两次使页面恢复正常，这个问题已得到了解决，通过利用设备的加速器计来确定设备何时方向发生了变化，并针对该问题作了集中的修复，当设备的方向发生变化时，会暂时禁止用户缩放，至到方向不在变化。缩放功能又会回复。3.3.

48、2 媒介查询顺序响应式web布局时响应式Web布局设计时，媒体查询顺序采用从移动端向上设计，优先建立移动设备用户体验，然后针对更大屏幕的显示器进行调整，以避免移动终端对媒体查询的支持不完善，也就是，在样式表的开头定义基本样式，然后使用媒体查询从低分辨率到高分辨率来重写样式以覆盖前面定义的样式。利用这种思想创建的样式表通常会是这样的，media all and (max-width:768px).,在本系统中采用的是移动端向上设计，media all and (min-width:768px.)。3.3.3 设置必要的断点设置断点就是通过使用主要断点和次要断点，创建媒体查询的条件，以下的截图，用

49、来帮助我们了解断点与Media Queries. Breakpoint -style sheet1 Breakpoint -style sheet2 Breakpoint ac BAVABC B CC CV C>xx px width xx px width to xx px<xx px width图3 断点的设计图3.4 响应式多媒体3.4.1 为什么性能重要现在我们无论使用什么设备，下载到客服端的都是相同的图片。这就意味着，在一个有468px宽的图片就已经足矣，但现在却下载一张1024px的图片，这无疑严重降低了页面的性能。如图所示，如果在手机端下载这样的图片，无疑流失更多的用

50、户。因为我们的用户能够更加敏锐地体会到那些性能较差的站点给他们带来的种种痛苦。图4 没经过处理的设计图3.4.2 如何实现由条件的加载图片我平时在工作中，经常喜欢用display;none，但是图片依然加载，额外的请求和文件的下载问题依然存在。我们应该从移动端开始，逐渐增强大屏幕上的体验。我们可以利用html5的data-属性可以很容易告诉js应该去哪下载图片10，且页面不会立刻请求了，我们只需要告诉页面不要在小屏幕加载图片就可以了。现在的站点，几乎是所有过度下载的网站都存在这方面的问题：下载并隐藏、下载并缩放、额外的dom。不过下载并缩放，是响应式运用最多的一种情况，额外的复杂dom加载，导

51、致了更高的内存消耗，昂贵的回流以及运行得更慢的网站。不过，有一些方法可以帮助我们将站点的性能维持在可控的范围之内，使用响应式图片，优先为移动平台创建，测量。3.4.3 响应式图片的实现方法Sencha.Io Src是最近似于即插即用型的响应式图片解决方案，它是以我们开发者设计的图片作为输出，并返回缩放后的图片，如果想要该服务只需在图片资源前面加上http:/src.sencha.io/图形图像、动画和视频的弹性设置使用“img,object,video,embed width:100%; max-width:100%;”，max-width属性用于设置媒体显示阈值，确保缩放时不会超出图片最大尺

52、寸，同时应删除HTML插入媒体的标记中的width和height属性定义，如果要定义特定规格的媒体尺寸，可编写专用样式单独设置宽度，以覆盖上下文定义，使其仅作用于该媒体即可。另外一种限制内部媒体显示缩放比例的方法是给外层盒子设置max-width属性，通过限制外层盒子来间接控制内部媒体缩放尺寸。在设计制作弹性视觉媒体时，仅考虑媒体放大到的极限情况会因此带来一个媒体文件整体偏大，使网站变得臃肿，需利用媒体压缩和优化技术来控制文件大小。另一种实现思路是通过JavaScript判断当前设备的分辨率，并根据预设的规则加载不同尺寸的图片文件。自适应图片，它会先确定屏幕大小，在创建并缓存一张缩放后的图片，

53、但是这种就是头痛医头，脚痛医脚的方法，不过每种方案取决于你手中的项目。设计论述4 设计论述4.1 总体流程图整个流程最初从交互阶段开始，分成8个主要步骤，视觉、前端、开发等角色根据情况尽早介入。在调查的部分，跟客户沟通，了解客户对新网站的要求和期望。确定网站的目标，评估需要使用的技术，审计和评估现有网站的内容，接下来要考虑对于复杂的网站，先画出线框图，优先处理移动设备，对于简单的网站，可以直接使用html，创建一个响应式的原型。然后，需要为网站建立一套视觉指南，比如文字的排版样式，按钮的样式，不同状态下按钮样式，导航菜单的样式，还有摄影风格等等。内容与风格确定后，需要给我们的用户进行审阅，在这

54、个过程中，要不断与客户沟通，使产品更具专业化。然后，视觉设计师与开发者保持密切的沟通，使用html+css创建所需的设计元素。前端开发者先编写移动设备的响应式模板代码，参考原型优化移动设备内容，在确定当浏览器宽度增加时设计如何去变化。响应式代码编写完成，我们还需要对我们的站点做测试，测试过后就可以发布我们的站点了。调查与客户交流，收集关于项目的期望确定确定网站的目标，评估技术需求，审计内容建立风格样式建立内容优先页头和导航按钮样式色板文字排版制作原型图制作线框图客户审核完成设计编写响应式模板代码测试/发布图5 设计流程图4.2 人机交互界面与设备规格预估4.2.1 用户原则在开发前期中，我们可

55、以通过用户的调研，了解到用户群里所使用的设备类型分布情况，这些不同年龄，不同背景以及不同收入的用户也许会以不同的方式来使用它们的设备，理解它们的行为能确保你的站点在其他设备运行的同时，还能针对它们的需求。做出合理的产品，通过用户调研，我们可以预估出几种典型的设备规格，可以帮助我们规划不同的呈现方式。有几个问题需要特别考虑下：在使用移动网络时，外部的样式表和脚本却严重的降低了站点的性能，因此，我们在考虑站点在移动端的性能的时候，通过采用内联的样式表和脚本来减小请求数目会更有意义，我们在加载图片的时候，特别是移动端，虽然我们在小屏幕的时候通过隐藏元素的方式达到了良好的用户体验，但是标签和css依然

56、会被下载，如果开发者从一开始就不考虑如何构建站点时，那么后期，将会导致站点的臃肿和缓慢。这些在响应式中尤为重要。响应式设计不仅是布局的响应，而且也是内容的取舍。4.2.2 界面分析与规范也许你会选择重新组织或者重构你的站点，有些时候开发者认为某个部分重要，但是对用户来说，不一定重要，所以我们要重新规划内容的顺序，那么页面的层级划分就会消失。响应式设计很复杂的，大多数负责开发响应式的人，都会去向原有工作流程添加工作，设计师在photoshop里面做了桌面大小的设计图，web工程师把它转化成页面后，放在手机设备浏览时，又感觉体验不是很好，大多数都是通过开发者认为的隐藏显示元素，来实现手机的见面显示，因此我们在设计时不能投机