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

工程技术学院毕业设计论文题目名称基于响应式WEB设计模式的人机交互界面的研究与应用系部信息系专业班级计算机科学与技术61001学生姓名指导教师/讲师辅导教师时间2013年9月至2014年6月工程技术学院毕业设计论文任务书系信息系专业计算机科学与技术班级61001学生姓名指导教师/职称讲师1毕业设计论文题目基于响应式WEB设计模式的人机交互界面的研究与应用2毕业设计论文起止时间2013年9月10日2014年6月1日3毕业设计论文所需资料及原始数据（指导教师选定部分）1周陟UI进化论移动设备人机交互界面设计清华大学出版社,2010102秀野堂主秀野堂主,蒋宇捷,罗睿论道HTMLD人民邮电出版社,20123张凤基于WBESERVICE的三层分市式系统应用研究D长春理工大学,2009年4朱印宏CSS商业网站布局之道M清华大学出版社2007年5陈琳“数字影像技术”课程的创设与教学2006066冉敏,余胜泉小学移动英语学习资源设计J中国远程教育2010127陈琳,王矗,李凡等创建数字化学习资源公建众享模式研究中国电化教育,2012018毛陈诚移动智能终端应用促进文化旅游产业创新发展的思考绿色科技,2011109许中博响应式网页布局设计浅析人民邮电出版社,20120710BENFRAIN响应式WEB设计HTML5和CSS3实战人民邮电出版社,201211TIMKADLEC响应式WEB设计实践人民邮电出版社,20121012AKESPURLOCKBOOTSTRAP用户手册人民邮电出版社,20131113莱特曼响应式用户界面与设计模式机械工业出版社,2012094毕业设计论文应完成的主要任务（1深入理解WEB开发中的响应式设计模式，撰写开题报告，完成设计前的准备。（3WEB框架搭建，完成模块设计，并且完成人机交互系统的需求调查报告。（4从各个功能模块完成系统，实现WEB中的各个页面，完成响应的设计工作。（5调试，总结分析设计思路和过程，撰写毕业设计论文。5任务书下达日期2013年10月18日指导教师签字工程技术学院毕业设计（论文）开题报告题目名称基于响应式WEB设计模式的人机交互界面的研究与应用系部信息系专业班级计算机科学与技术61001班学生姓名指导教师/讲师辅导教师开题报告时间2013年11月22日基于响应式WEB设计模式的人机交互界面的研究与应用一、题目来源模拟实际课题二、研究（设计）目的和意义响应式WEB设计是当前网页设计领域的新趋势针对响应式网页设计相关的设计方法和技术手段,比如媒体查询、流式布局、弹性图片等展开探讨,为网页在多种设备上进行跨端的界面适配的问题提供新思路和解决方案。三、阅读的主要参考文献1周陟,UI进化论移动设备人机交互界面设计清华大学出版社,2010102秀野堂主,论道HTMLD人民邮电出版社,20123张凤基于WBESERVICE的三层分市式系统应用研究D长春理工大学,2009年4朱印宏CSS商业网站布局之道M清华大学出版社,2007年5HTTPWWWALIXIXICOMWEBA20111205769494SHTML6JESSICAATHEYMLEARNINGONTHERISEIN2012OL7陈琳,王矗,李凡等创建数字化学习资源公建众享模式研究中国电化教育,2012018毛陈诚移动智能终端应用促进文化旅游产业创新发展的思考绿色科技2011109许中博“响应式”网页布局设计浅析人民邮电出版社,20120710BENFRAIN响应式WEB设计HTML5和CSS3实战人民邮电出版社,201211TIMKADLEC响应式WEB设计实践人民邮电出版社,20121012AKESPURLOCKBOOTSTRAP用户手册人民邮电出版社,20131113莱特曼响应式用户界面与设计模式机械工业出版社,20120914冉敏,余胜泉小学移动英语学习资源设计J中国远程教育,20101215陈翎“数字影像技术”课程的创设与教学200606四、国内外现状和发展趋势随着移动终端设备的增加，WEB页面制作面临着一个挑战变与不变。如何变是在产品设计的过程中显得尤为重要。案例一个图集模块，在PC端，我们可以实现切换指针鼠标跟随、滚动条拖拽预览等，但是试想在没有鼠标没有拖拽事件的IPAD上，如何实现更好的体验。当然，持有相应终端的用户希望有针对该终端专门的版本使用，然而成本的高昂否定了这种可能性。所以现在的互联网门户大多愿意选择以下方案在用户访问网站时对设备进行识别，采取不同的策略。上述案例中，就可对IPAD中无法实现的这些操作进行相应修改，例如融入触摸屏手势拨动翻页、拖拽滚动等。当然，太多细节的修改设计也会对页面造成压力过大的弊病。这就是我们说的响应式WEB设计。响应式WEB设计的理念是，页面的设计与开发应当根据用户行为以及设备环境系统平台、屏幕尺寸、屏幕定向等进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSMEDIAQUERY的使用等。无论用户正在使用笔记本还是IPAD，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。显然，我们无法也无需使用运动传感器或是机器人技术，响应式WEB设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的MEDIAQUERIES和脚本等。但是响应式WEB设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。五、主要研究（设计）内容、关键问题及解决思路51主要研究内容（1）深入理解WEB开发中的响应式设计模式，撰写开题报告，完成设计前的准备。（2）掌握WEB开发中的几类常用技术和工具，HTMLCSSJAVASCRIPTSASS，SUBLIME等。（3）WEB框架搭建，完成模块设计，并且完成人机交互系统的需求调查报告。（4）从各个功能模块完成系统，实现WEB中的各个页面，完成响应的设计工作。（5）调试，总结分析设计思路和过程，撰写毕业设计论文。52关键问题（1）如何做流体布局，流体图片，以及媒体查询。（2）如何兼容各个版本。（3）如何设计对用户友好。（4）无重定向和更少维护。5利用NODEGRUNT自动化工作。53解决思路第一步确定需要兼容的设备类型、屏幕尺寸；第二步制作线框原型；第三步测试线框原型；第四步视觉设计；第五步前端实现；六、完成毕业设计（论文）所必须具备的工作条件所必须具备的工作环境（1）SUBLIMETEXT222；（2）PHOTOSHOP6；（3）操作系统为WINDOW8；（4）NODEJS。七、预期成果（达到目标）通过响应式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日，测试各功能模块以及系统测试；第五阶段2014年5月21日2014年6月1日，分析设计思路和过程，撰写论文；九、指导老师审查意见工程技术学院毕业设计论文指导教师审查意见学生姓名专业班级计算机科学与技术61001班毕业设计论文题目基于响应式WEB设计模式的人机交互界面的研究与应用指导教师职称讲师审查日期2013910审查参考内容毕业设计论文的研究（设计）内容、方法及结果，难度及工作量，质量和水平，存在的主要问题与不足。学生的学习态度和组织纪律，学生掌握基础和专业知识的情况，解决实际问题的能力。毕业设计论文是否完成规定任务，是否达到了学士学位水平的要求，是否同意参加答辩等。审查意见指导教师签名评定成绩（百分制）_分工程技术学院毕业设计论文评阅教师评语学生姓名专业班级计算机科学与技术61001班毕业设计论文题目基于响应式WEB设计模式的人机交互界面的研究与应用评阅教师王珏辉职称讲师评阅日期2013911评阅参考内容毕业设计论文的研究（设计）内容、方法及结果，难度及工作量，质量和水平，存在的主要问题与不足。学生掌握基础和专业知识的情况，解决实际问题的能力。毕业设计论文是否完成规定任务，是否达到了学士学位水平的要求，是否同意参加答辩等。评语指导教师签名评定成绩（百分制）_分工程技术学院毕业设计论文答辩记录及成绩评定学生姓名专业班级计算机科学与技术61001版毕业设计论文题目基于响应式WEB设计模式的人机交互界面的研究与应用答辩时间年月日答辩地点一、答辩小组组成答辩小组组长成员二、答辩记录摘要答辩小组提问（分条摘要列举）学生回答情况评判三、答辩小组对学生答辩成绩的评定（百分制）_分毕业设计论文最终成绩评定依据指导教师评分、评阅教师评分、答辩小组评分和学校关于毕业设计论文评分的相关规定成绩百分制_分A答辩小组组长签名秘书签名年月日系答辩委员会主任签名系盖章基于响应式WEB设计模式的人机交互界面的研究与应用学生，信息系指导教师，信息系摘要响应式WEB设计是一种全新的WEB设计模式，其扩展性好、易用性强、兼容性好，能够做到一源多屏。本文以农业滴灌系统为实践中的案例，对传统网站建设所采用的技术和思想进行了对比论证，并阐述了媒介查询、流动布局、响应式多媒体技术的优点，同时分析了GRUNT技术实现自动化前端的可行性。人机交互界面的设计就是提高用户体验，而响应式设计模式有效的解决了交互中自适应多类客户端的问题。对在此实践中的项目进行了详细的论证，包括用户调研、需求分析、详细设计、实际开发、应用测试和项目发布。重点指出了响应式WEB设计过程中制作线框图与原型图，以及测试线框图、视觉设计与前端实现的流程。最后，对响应式WEB设计的调试问题进行了分析和说明，对其结果进行了完整的总结。关键词响应式设计模式；人机交互；WEB前端开发INRESPONSETORESEARCHANDAPPLICATIONOFWEBDESIGNPATTERNINTHEHUMANCOMPUTERINTERACTIONSTUDENTZHOUMIAOMIAO，DEPARTMENTOFINFORMATIONSUPERVISORLIUZHIYANG，DEPARTMENTOFINFORMATIONABSTRACTRESPONSIVEWEBDESIGNISANEWKINDOFWEBDESIGNPATTERNS,ITSGOODEXPANSIBILITY,COMPATIBILITY,EASEOFUSE,ANDCANDOMORETHANONESOURCETHISPAPERBEGINSWITHAGRICULTURALIRRIGATIONSYSTEMENGINEERINGOFWEBPROJECT,THENCONTRACTSANDARGUESTHETECHNOLOGYANDTHOUGHTTHATTRADITIONALWEBSITEADOPTSATPRESENT,ANDEXPOUNDSTHEMEDIAQUERYRESPONSETYPE,FLOWDISTRIBUTION,THEADVANTAGESOFMULTIMEDIATECHNOLOGYATTHESAMETIME,ANALIZESTHETECHNICALFEASIBILITYOFAUTOMATEDFRONTOFGRUNTHUMANCOMPUTERINTERACTIONINTERFACEDESIGNISTOIMPROVETHEUSEREXPERIENCE,ANDRESPONSIVEDESIGNMODELEFFECTIVELYSOLVESTHEADAPTIVEMULTIPLECLASSCLIENTISSUESININTERACTIONINTHISPRACTICEHASCARRIEDONTHEDETAILEDARGUMENTATIONOFTHEPROJECT,INCLUDINGUSERRESEARCH,DEMANDANALYSIS,DETAILEDDESIGN,DEVELOPMENT,TESTINGANDRELEASEHIGHLIGHTTHERESPONSIVEWEBDESIGNINTHEPROCESSOFMAKINGWIREFRAMESANDPROTOTYPES,ANDTESTAWIREFRAME,VISUALDESIGNANDFRONTENDREALIZATIONPROCESSFINALLY,THERESPONSIVEWEBDESIGNDEBUGGINGPROBLEMSAREANALYZEDANDSHOWSTHATTHECOMPLETESUMMARYOFTHERESULTSKEYWORDSRESONSIVEDESIGNPATTERNS；THEHUMANCOMPUTERINTERACTION；WEBFRONTENDDEVELOPMENT目录任务书I开题报告II指导老师审查意见III评阅教师评语IV答辩会议记录V中文摘要VI外文摘要VII1前言12选题背景221响应式WEB设计简介222论文提出与论文工作意义223论文主要的组织结构43方案论证531自动化管理工具532流动布局733媒介查询934响应式多媒体114设计论述1341总体流程图1342用户研究与设备规格预估1542制作线框原型1643测试线框模型2144视觉设计2245样式向导2346前端的实现245结果分析2951测试环境2952测试程序与测试界面设计296总结36参考文献37附录39基于响应式WEB设计模式的人机交互界面的研究与应用1前言随着移动互联网的飞速发展，大多数网站开始提供移动WEB应用，由于移动互联设备屏幕宽度相对于PC的屏幕宽度较小，所以大部分原先在PC上显示的页面并不能很好地直接在移动互联设备上呈现，特别是移动互联设备种类较多如手机、平板电脑等，而且显示的分辨率标准也比较多，更有许多未知和新的移动互联设备的推出。一个网页同样的内容，在大小迥异的屏幕上，会呈现出不同的效果，特别是屏幕宽度很难适应，这样会造成一个用户在用PC和移动互联设备访问一个相同网站时，感觉有很大的差异和不一致性1。根据CNNIC第32次互联网络发展状况调查结果，截至2013年6月，中国手机网民的总规模达464亿。其中，手机浏览器用户规模为369亿，同比增长210，在手机网民中的渗透率为79523，响应式网页设计，整合媒体查询、弹性视觉媒体和流动布局，有助于解决不同上网设备的适配性问题，使网站兼容多种设备和屏幕，实现“一源多屏”。2选题背景21响应式WEB设计简介211传统的WEB设计理念目前的网站普遍使用固定的宽度，如果你的站点是960PX的宽，当访客使用屏幕较小的设备浏览站点时，他只能看到站点的一部分，而且还会看到丑陋的水平滚动条45。大屏幕设备也存在相同的问题，如果有人用大屏幕访问站点时，那他会看到大片的空白，虽然留白作为设计心里学一部分固然是好的，但是对于人们意料之外的空白，我想没有谁能从中获利6，传统的WEB设计在现在这个设备多样化的出现，早已呈现出多种问题，因为部分手机的浏览器都会默认显示缩小后的站点，虽然我们可以通过手指来缩放页面，可以看见站点的全貌，但是这样的用户体验，难免会让人觉得繁琐，况且这一过程也不能从中获利与享受。尤其针对于广告，对于许多企业而言，广告是能为企业提供利益的一种手段，大部分在站点上看到广告都是有厌烦的情绪，如何设计出合理的广告方案，在传统的WEB站点是很难做到的。212响应式WEB设计理念响应式WEB设计，使我们的页面具有可变的特性，因为元素的宽度会根据浏览器的宽度自动进行调整。大多数情况下，不会出现水平滚动条。其中媒介查询允许你根据设备的信息如屏幕的宽度，方向或者分辨率等属性来使用不同的样式。响应式设计不是“为移动设备而设计”，它也不是“为台式机而设计”7它是关于采用灵活的,设备无关的方法来为WEB进行设计，对未来的可访问性更加友好。22论文提出与论文工作意义221响应式WEB设计的问题分析移动端的优化与设计现在已经成了一个时髦的话题，未来有可能有更多这方面的讨论。根据MASHABLE在2013年8月份发布的统计，可以得知，全球所有网站流量的174都是通过移动设备来的，而这个数字在2014年将会继续增长。在早期，可以访问互联网的手机还只是少数人的时尚用品，那时的网络慢的让人无法忍受，屏幕也是相当的小，用起来让人显得尴尬且不是特别友好，2010年5月，ETHANMARCOTTE写出一篇RESPONSIVEWEBDESIGN，他提出我们可以将不同联网设备上众多的体验，当做是同一网站体验的不同侧面来对待，而不要为每种设备进行单独裁剪而使设计彼此断开，这才是我们前进的方向。所以，作为WEB开发者如何不想失去移动端的用户，不想失去一杯羹的话，是时候步入WEB移动端的领域了。仅希望像GOOGLE和苹果这样的行业巨头公司网站适应移动设备往往是不够的，除非您不介意丢失几乎五分之一的游客到您的网站，我们的开发者追求的是精致，容不得页面在其他设备上的瑕疵，因此我们的设计不仅要灵活，而且还能适应渲染他们的各种媒介。222课题的提出响应式WEB网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了8，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么交互与视觉如何协作前端何时介入哪些事情让后端开发来做更合理需要先明确好设计，再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始。对于响应式设计研究与应用，需要解决很多难题，主要有一下几个方面（1）媒介查询传统的固定布局有种种限制，媒介查询可以让你在特定的环境下查询到各种属性，比如分辨率，色彩，高度宽度等，通过使用媒介查询，你可以熨平以前的布局的所有褶皱。但是你不知道要在哪里处理断点，如何为站点设定视口，如何为小屏幕设备提升导航栏的使用体验。也不清楚你的站点有哪些用户访问。也不清楚用户所用的设备分辨率。因此解决这个问题，在我的设计中将是重点。（2）流动布局在传统的WEB站点，页面会被指定为特定大小的像素。会给开发者一种对页面拥有较多控制权的错觉。流动布局度量单位是百分比，但是在一些文本行宽在大屏幕下会很宽，小屏会太窄，在给左右PADDING时，能否给出页面一些合理的呼吸空间等。都需要考虑清楚，因此如何合理的设计流动布局是响应式设计的另一个重点。（3）自适应图片当缩放浏览器窗口时，有着固定宽度的图片与周围的元素格格不入，在较宽的列中，她们只占据一点点位置，在较窄的列中，她们又太宽，这些图片特别是在苹果的RETINA显示屏上，更是一团糟，模糊不清，因此在设计中更是难解决的一步，如何定制出合格的图片，并通过代码来实现，这在新的响应式设计中也非常重要。综上所诉，响应式设计的实现与应用是一个巨大的挑战，也是一种全新的尝试，本文将为响应式的研究与应用提供借鉴。23论文主要的组织结构231论文组织结构第1章论述了论文的前言，以及现在的移动平台发展状态第2章论述了论文工作背景与研究意义，首先简要介绍了传统WEB设计的现状，分析了其中存在的问题，进而提出了设计新的WEB站点模式。第3章深入分析研究了相关技术，是整个论文的技术支撑。第4章响应式WEB设计及实现流程。第5章对各个平台的结果分析与测试。第6章对论文工作进行了全面总结与展望。第一章前言第二章选题背景第三章方案论证（响应式设计涉及的关键技术）第四章响应式WEB实现流程响应式WEB设计及实现流程第五章响应式结果分析第六章全文总结与展望图1论文的框架结构3方案论证本章介绍自动化管理工具，站点的性能优化设计，图片的CSSSPRIT等响应式WEB设计与实现的相关技术。着重讨论样式代码的复用性技术与组件开发技术，以帮助响应式设计过程中开发的效率问题。31自动化管理工具GRUNT是基于NODEJS的项目构建工具。它可以自动运行你所设定任务。GRUNT拥有数量庞大的插件，几乎任何你想要做的事情都可以用GRUNT实现。它能大大提高您运行前端开发工作流程9。使用大量的GRUNT插件可以自动执行任务，例如编译SASS和COFFEESCRIPT，优化图像和验证您的JAVASCRIPT代码语法的严格性与JSHINT。编译，单元测试等，自动化工具可以减轻你的劳动，简化你的工作，同时对文件的加密有良好的设计模式。当你能正确配置好任务，任务运行器就会帮助你或者你的团队完成大部分无聊的工作在过去你可能使用类似CODEKIT或HAMMER来处理这些任务。我认为这两种应用程序是伟大的过去广泛的使用他们，但GRUNT比他们更优秀，他可以定制任务。有很多插件可以帮助你优化图片和在你的工作流中加入CSS样式。安装和运行GRUNT需要有三个项目支持NODEJS,NPM,GRUNTCLI命令行接口，除此之外，需要将PACKAGEJSON和GRUNTFILEJS里面的项目名称进行调整。311SASSCSS预处理器SASS的任务让我们把SASS文件编译成CSS，SASS在不破坏你的工作进程和工作流程中，让你的工作，生活变得简单轻松，过去我们的WEB设计师学习CSS并不容易，你需要知道每一个的属性，他们是如何通过优先级来实现样式的覆盖或重写样式，浏览器兼容，选择器等，这并不简单，如何添加一个接口，通用的可维护性的CSS并不容易，我们的样式表非常的冗余。我们大多数前端工程师屈服与CSS的原始设计而从来不梦想它的改变，对面向对象的思想始终有惧怕的心理，CSS可以做任何事，除了不能复用，一个善用复用代码的开发者看到正统大小的CSS文件，首先感到困惑进而挫败的想哭。CSS的缔造者很关心使用情况，他们希望CSS变得更有活力，维护工作变得更加精细，更富有挑战，幸运的是，有很多选项帮助我们摆脱了困境，其中之一就是SASS,此外还有LESS，STYLUS。SASS作为CSS的一个扩展，可以容许你调用重复的代码，来更快的更有效的，更轻松的维护你的CSS。它有同面向对象的思想，结合GRUNT的，可以将SASS编译的CSS以各种方式输出，一般上线时，以COMPRESSED方式输出，节约带宽，减小服务器的压力，312JSHINTJAVASCRIPT代码质量JSHINT是GRUNT的一个任务，它是用来确保你的代码根据一组你希望的规则编写代码让语法更有效。让你按照严格的JS语法。在团队开发中，尤为重要。313IMAGEMIN（压缩图像）设计师切出的图片，无论是JPG还是PNG格式，或多或少有大量的无关信息与多余的颜色值，这些信息通常对网页前端没有用处，增加了图片的大小，影响了带宽，加大了用户下载文件大小，延长了页面访问速度，减低了用户体验和对我们工作的认知度。JPEGTRAP/JPEGOPTION是最理想的压缩工具，虽然操作不太方便，但是使用GRUNTJS的话，我们可以借助它的插件IMAGEMIN，IMAGEMIN封装JPEGTRAN/OPTIPNG功能，可以批量的无损压缩图片大小。314BROWSERSYNC（浏览器同步对响应式开发来说，意义重大）快速的移动、PC的WEB开发模式，是我们WEB工程师一直在探索的一项内容，今天我要介绍一种高效的开发方式，在开始之前，我们先了解一下目前开发模式的现状，1传统的PC模式以往的开发者一般在PC端调试好自己的页面后，然后在去手机上进行调试，并且手机上的许多细节与PC端又不完全一样的，我们需要不断的修改源文件，不断的刷新，类似这样的流程编辑器编码切换到浏览器F5编辑器编码切换到浏览器F5如此的重复，并且手机调试刷新还不方便，特别是做响应式的时候，有多款设备，开发者刷新调试起来特别不方便，加大了开发的流程与繁琐。你的工作会更加的耗时，并且一团糟。2远程调试模式现在又很多强大的调试工具，如WEINRE等，但这些工具有个弊端，就是工具不是支持所有的平台，而且他们的配置工作稍显的复杂，针对响应式的开发，并没有做出充分的考虑，而且需要购买商业授权。也不是很方便。3当响应式开发遇上调试响应式这个概率，应该说从我们的智能手机普及的时候，就已经进入到开发者的视线了，它应用媒介查询，为所有不同分辨率的设备编写出不同的样式，但是最终能达到一个页面在许多个设备中尽可能的呈现出最佳的用户体验，响应式主要兼容PC，平板，手机等，无论从浏览器的兼容，还是手机样式上的差异，交互的体验，都已经是繁琐的了，所以，如何高效的省时的开发，并从所有的设备上同时看到效果，能同步进行点击，滚动效果，那必然是最好的了。4BROWSERSYNC我们在实现响应式的站点时，一般我们有很多的调整和测试要做，BROWSERSYNC工具是一款非常强大的工具，它加快你的工作流程，通过在多个设备之间进行同步URL，相互作用和代码的更改，它可以跨设备同步操作，如滚动，点击，以及填写表单，它是免费的。对于开发者来说，还是不错的选择。当我们在更改源文件，保存的时候，都会被镜像到你当前所有设备连接的浏览器等等，且文件都会同步。并且能够运行在PHP，ASP，RAILS之上的网站。除此之外，它更大的亮点在于可以WATCH你的CSS文件，当我们的CSS文件有变化时，它完全可以动态的注入到页面中，而且不用刷新整个页面。我们可以架设静态的SERVER，帮助我们更快的调试。还有重要的一点，我们如何在浏览器上调样式并且可以动态注入到所有的设备中了，搭配CHOMEWORKSPACE我们的效率进一步得到提升，开发者可以将CHROME的网络资源与我们的本地资源进行映射与同步，即可以实现在谷歌浏览器中对CSS的修改可以同步写到本地的CSS文件夹中，随之触发BROWSERSYNC的WATCH功能，这样样式便会自动注入到所有的设备中了，在本论文中，我将使用GRUNTBROWSERSYNC，集成到我的开发中。32流动布局随着设备的不断涌现，开发者越来越难以忽视WEB所固有的灵活性和不可预测性，在拥抱我们的灵活性的第一步，就是要为我们的站点创建可维护性的布局，并借此来对不同尺寸的设备屏幕做出不同的响应。321固定布局类型固定布局，在早期，用的最多的就是960像素的布局方式，它给我们的开发者一种对页面拥有很多控制权的错觉，即使非常大量的图片，在不同的设备上，也能看起来相当的一致。而我们设定的宽度都是在假设前提之下的，然而我们经常猜测什么样的宽度可以照顾到更多的访问者，这其中又隐藏着比表面上看起来更深奥的技巧，经常出现滚动条与空白。322流动布局媒体查询能适应不同设备和视口宽度，可以从一组CSS样式代码切换到另一组，但切换期间没有任何平滑过渡，会导致媒体内容要么过宽出现水平滚动条，要么过窄出现大量空白，尤其在切换临界点时布局会严重恶化。通过将固定像素布局转换成灵活的流动布局，确保在媒体查询未切换样式期间布局能适应视口改变。流动布局依靠浮动和百分比宽度来实现，浮动实现布局区块的动态重组，百分比宽度实现未到达断点时的区块宽度调整，以减少创建的断点数。将固定像素宽度转换成百分比宽度可套用公式百分比宽度目标元素宽度上下文元素宽度。例如，将原来WRAPPER宽度为960PX，CONTENT宽度为940PX，转换为百分比布局CONTENT宽度9792，即94096009792。在网页文档标签中插入一个HTM5标签，设置基于WEBKIT内核的画布缩放参数，如可实现页面在浏览器中以原始大小显示，禁止用户缩放。其中WIDTH和HEIGHT检测设备屏幕分辨率宽度和高度，INITIALSCALE设定初始的缩放比例，值为1时将根据浏览器可视区域实际大小来渲染页面。MINIMUMSCALE和MAXIMUMSCALE指允许用户缩放到的最小比例和最大比例，USERSCALABLE设定用户是否禁止缩放。323弹性布局与流动布局类似，只是他们的度量单位不同，它通常用EM作为单位，弹性布局给设计师们在排版方面提供了强大的控制权，另外弹性布局，还有一个好处就是随着用户增大或者减小字体，弹性布局的元素宽度也会等比例的变化，但是有个弊端，它也会出现滚动条。324混合布局它结合了上面几种布局方式，我们在利用的时候，应该先架构好，特别是固定宽度与流动宽度，正确的做法是表格布局。相比CSS布局，表格布局的优势在于它简化了将站点布局为多列的实现过程。其实我们可以给DISPLAY属性赋予许多不同的，与表格相关的值，并来实现上述的样式，如果在CSS中使用表格值的做法会让我们觉得不爽，那么我们也不应该因此受到指责，在CSS中使用表格值与HTML表格来布局是有很大的区别，CSS表格只是定义了内容的样式，并非说表格也是内容的一分部。但是我们可以通过HACK或者额外加载CSS来兼容IE8一下的浏览器，再说了，它对移动平台对此的支持也相当棒。如果将某列DISPLAY属性值指定为TABLECELL，我们就可以混合使用固定布局与流式布局了，不必担心滚动条的出现，虽然在IE8才开始支持DISPLAY属性的的值，IE8之前的版本正在失去浏览器的市场份额，其实这任然由用户来决定，一些顽固分子，不愿升级浏览器的话，那你也没办法。我们开发者必须准备一些备用的样式，例如我们创建一个叫IECSS的样式表，并且规定只在IE8一下的浏览器才加载它，那么我们可以加条件注释那么，任何IE8一下的浏览器都会加载了，我们便轻松的实现了早期版本IE浏览器提供备选样式表目标。现在唯一的问题是WINDOWSPHONE7也会加载这个备用样式，幸好我们只需在条件注释中做一下小小的修改，就可以修复这个BUG。总结，通过使用CSS表格，你可以很容易的将固定布局与流动宽度结合起来，现代浏览器对此都有极为出色的支持，并且通过条件注释来为低版本的浏览器提供备用样式。记住，站点不需要在不同设备的不同浏览器看起来一模一样。33媒介查询媒介查询可以让你根据特殊环境下比如分辨率，色彩，高度和宽度来决定你应用什么样的样式，通过媒介查询，你可以灵活的应用布局。331为站点设置视口当我们浏览器窗口变窄时，我们的布局看上去像被砖拍扁了是的，我们的导航栏也乱成一团，每个LI容纳的字数也严重变得奇异，严重的影响了美观，如图所示。当窗口放大时，每行文字的行宽就离最完美的阅读宽度越远，用户体验相当的不好。开发者要避免这样的情况出现。图2浏览器缩小后的界面通过视口标签，我们可以控制页面在很多设备上的大小和布局视口，这样设计后页面在屏幕上的布局视口将等于设备的屏幕宽度。还有就是用户在页面上的缩放问题，默认值是容许缩放的，在IOS上USERSCALABLE，当你将设备横屏后，页面就会自动变大，用户不得不点击两次使页面恢复正常，这个问题已得到了解决，通过利用设备的加速器计来确定设备何时方向发生了变化，并针对该问题作了集中的修复，当设备的方向发生变化时，会暂时禁止用户缩放，至到方向不在变化。缩放功能又会回复。332媒介查询顺序响应式WEB布局时响应式WEB布局设计时，媒体查询顺序采用从移动端向上设计，优先建立移动设备用户体验，然后针对更大屏幕的显示器进行调整，以避免移动终端对媒体查询的支持不完善，也就是，在样式表的开头定义基本样式，然后使首页智能滴灌智能气象智慧大棚技术支持BREAKPOINTSTYLESHEET1BREAKPOINTSTYLESHEET2BREAKPOINTAVV用媒体查询从低分辨率到高分辨率来重写样式以覆盖前面定义的样式。利用这种思想创建的样式表通常会是这样的，MEDIAALLANDMAXWIDTH768PX,在本系统中采用的是移动端向上设计，MEDIAALLANDMINWIDTH768PX。333设置必要的断点设置断点就是通过使用主要断点和次要断点，创建媒体查询的条件，以下的截图，用来帮助我们了解断点与MEDIAQUERIES图3断点的设计图34响应式多媒体341为什么性能重要现在我们无论使用什么设备，下载到客服端的都是相同的图片。这就意味着，在一个有468PX宽的图片就已经足矣，但现在却下载一张1024PX的图片，这无疑严BCCCABCCACBXXPXWIDTH重降低了页面的性能。如图所示，如果在手机端下载这样的图片，无疑流失更多的用户。因为我们的用户能够更加敏锐地体会到那些性能较差的站点给他们带来的种种痛苦。图4没经过处理的设计图342如何实现由条件的加载图片我平时在工作中，经常喜欢用DISPLAYNONE，但是图片依然加载，额外的请求和文件的下载问题依然存在。我们应该从移动端开始，逐渐增强大屏幕上的体验。我们可以利用HTML5的DATA属性可以很容易告诉JS应该去哪下载图片10，且页面不会立刻请求了，我们只需要告诉页面不要在小屏幕加载图片就可以了。现在的站点，几乎是所有过度下载的网站都存在这方面的问题下载并隐藏、下载并缩放、额外的DOM。不过下载并缩放，是响应式运用最多的一种情况，额外的复杂DOM加载，导致了更高的内存消耗，昂贵的回流以及运行得更慢的网站。不过，有一些方法可以帮助我们将站点的性能维持在可控的范围之内，使用响应式图片，优先为移动平台创建，测量。343响应式图片的实现方法SENCHAIOSRC是最近似于即插即用型的响应式图片解决方案，它是以我们开发者设计的图片作为输出，并返回缩放后的图片，如果想要该服务只需在图片资源前面加上HTTP/SRCSENCHAIO/HTTP/MYSITECOM/IMAGES/FOOTBALLPNG即可，默认情况下，它会将图片缩放到设备宽度的100，如果想缩放到某个程度，传个参数即可HTTP/SRCSENCHAIO/640/HTTP/MYSITECOM/IMAGES/FOOTBALLPNG，将图片缩放到屏幕宽度的100只是小屏幕上有帮助，在大的显示器上，图片依然是屏幕的大小，因为SENCHAIOSRC只看屏幕宽度而不是容器的宽度，网络上说尽管使用容器宽度可以实现，但是涉及实验性质的客户端检测。图形图像、动画和视频的弹性设置使用“IMG,OBJECT,VIDEO,EMBEDWIDTH100MAXWIDTH100”，MAXWIDTH属性用于设置媒体显示阈值，确保缩放时不会超出图片最大尺寸，同时应删除HTML插入媒体的标记中的WIDTH和HEIGHT属性定义，如果要定义特定规格的媒体尺寸，可编写专用样式单独设置宽度，以覆盖上下文定义，使其仅作用于该媒体即可。另外一种限制内部媒体显示缩放比例的方法是给外层盒子设置MAXWIDTH属性，通过限制外层盒子来间接控制内部媒体缩放尺寸。在设计制作弹性视觉媒体时，仅考虑媒体放大到的极限情况会因此带来一个媒体文件整体偏大，使网站变得臃肿，需利用媒体压缩和优化技术来控制文件大小。另一种实现思路是通过JAVASCRIPT判断当前设备的分辨率，并根据预设的规则加载不同尺寸的图片文件。自适应图片，它会先确定屏幕大小，在创建并缓存一张缩放后的图片，但是这种就是头痛医头，脚痛医脚的方法，不过每种方案取决于你手中的项目。4设计论述41总体流程图整个流程最初从交互阶段开始，分成8个主要步骤，视觉、前端、开发等角色根据情况尽早介入。在调查的部分，跟客户沟通，了解客户对新网站的要求和期望。确定网站的目标，评估需要使用的技术，审计和评估现有网站的内容，接下来要考虑对于复杂的网站，先画出线框图，优先处理移动设备，对于简单的网站，可以直接使用HTML，创建一个响应式的原型。然后，需要为网站建立一套视觉指南，比如文字的排版样式，按钮的样式，不同状态下按钮样式，导航菜单的样式，还有摄影风格等等。内容与风格确定后，需要给我们的用户进行审阅，在这个过程中，要不断与客户沟通，使产品更具专业化。然后，视觉设计师与开发者保持密切的沟通，使用HTMLCSS创建所需的设计元素。前端开发者先编写移动设备的响应式模板代码，参考原型优化移动设备内容，在确定当浏览器宽度增加时设计如何去变化。响应式代码编写完成，我们还需要对我们的站点做测试，测试过后就可以发布我们的站点了。调查与客户交流，收集关于项目的期望确定确定网站的目标，评估技术需求，审计内容建立内容优先建立风格样式制作线框图客户审核制作原型图文字排版色板按钮样式页头和导航图5设计流程图42人机交互界面与设备规格预估421用户原则在开发前期中，我们可以通过用户的调研，了解到用户群里所使用的设备类型分布情况，这些不同年龄，不同背景以及不同收入的用户也许会以不同的方式来使用它们的设备，理解它们的行为能确保你的站点在其他设备运行的同时，还能针对它们的需求。做出合理的产品，通过用户调研，我们可以预估出几种典型的设备规格，可以帮助我们规划不同的呈现方式。有几个问题需要特别考虑下在使用移动网络时，外部的样式表和脚本却严重的降低了站点的性能，因此，我们在考虑站点在移动端的性能的时候，通过采用内联的样式表和脚本来减小请求数目会更有意义，我们在加载图片的时候，特别是移动端，虽然我们在小屏幕的时候通过隐藏元素的方式达到了良好的用户体验，但是标签和CSS依然会被下载，如果开发者从一开始就不考虑如何构建站点时，那么后期，将会导致站点的臃肿和缓慢。这些在响应式中尤为重要。响应式设计不仅是布局的响应，而且也是内容的取舍。422界面分析与规范也许你会选择重新组织或者重构你的站点，有些时候开发者认为某个部分重要，但是对用户来说，不一定重要，所以我们要重新规划内容的顺序，那么页面的层级划分就会消失。响应式设计很复杂的，大多数负责开发响应式的人，都会去向原有工作流程添加工作，设计师在PHOTOSHOP里面做了桌面大小的设计图，WEB工程师把完成设计编写响应式模板代码测试/发布它转化成页面后，放在手机设备浏览时，又感觉体验不是很好，大多数都是通过开发者认为的隐藏显示元素，来实现手机的见面显示，因此我们在设计时不能投机取巧，从桌面构建响应式站点时，正如大家看到的那样，会有很多问题呈现在移动端，虽然先进的WEBKIT的浏览器如谷歌，对媒介查询有良好的支持，但是其他市面上有很多优秀的手机设备对此并不提供支持，如果你从桌面开始体验，那些不支持的设备也会得到一个和桌面一样的版本站点，这样就是去了我们的原始思想了，取而代之，如果你采用渐进增强的方式，并为能力最弱的浏览器编码，然后使用媒介查询逐渐地增加体验，并从最小的屏幕开始构建，就可以避免上面的问题。423跨设备体验你每天会用到多少种设备如果你和大多数人一样，那么答案就是好多个并且你们要完成的任务也是类似的。一份由YAHOO发布的调查显示；59的人会先在他们的手机访问某一站点，接着使用他们的桌面电脑，34的人与此相反，他们会先从PC开始，然后接着使用自己的手机，随着用户拥有的其他具有WEB功能的设备加入，人们在设备之间进行切换就成了一个非常难以忽视的现实。其中，如果某个用户已经在某个设备上与你的站点进行过交互，用户心理学中有一类，叫孰能生巧无需特别留意，人们反复的做一系列动作，就会产生无意识的惯性，导航的路径，交互的行为应该是熟悉的，并且用户永远都不应该感觉到好像某些重要的内容不见了，我们从一开始就应该将跨设备体验牢记在心中，并且要充分的架构好不同尺寸和能力的设备之间体验必须做出哪些改变，哪些改变的意义，以及保证设备与设备之间切换时的一致性。用户使用不同设备的目标差别并没有想象的那么大，我们不能片面的假设不同类型设备的用户对功能的需求差异。43制作线框原型在现在这样互联网快速发展的情况下，WEB的脚步也在不断提升，其中线框原型也慢慢的被提起，虽然得到了普及，但是或多或少还是给我们的开发者带来了很多的误解，它的真实内涵也在慢慢被误解，尤其对于我这样的新手来说，往往不能理解他的用途。其实这个概念涉及到很多的方面，我们开发者都知道有这个概念，就是不愿去做这方面的尝试，都知道线框原型是我们设计流程的一部分。但是就是不明白她的重要性，通过对行业现状的观察，线框原型在很多的设备中执行的情况惨不忍睹，原因有很多方面如客户、产品本身的缘故、设计的新人等等。其实线框原型是我们WEB中必不可少的。431线框原型是信息与功能的展现线框图不是在文字的大小，行间距，图片的高上大，主题配色等等上面进行研究。多数人将它理解成设计方案的设计稿，过多的追求外表上的美观，将大多数时间浪费在设计上，从而影响了开发的效率，干扰了对功能的呈现。线框图的作用是组织并呈现信息，避免在视觉上过多的研究。大多数人认为线框图就是在设计师设计时，交付的设计稿，设计师在布局上要对这些基础结构进行细节上的调整，然后前端去装换成静态的页面，然而它主要的功能是描述功能与逻辑的关系，非视觉上的美化。线框原型可以帮助设计和开发人员更全面的预计到潜在的出错情景，并做好相应的出错解决方案。有时客户和决策者对产品关注的比较宏观，对于产品中的细节并没有做出明确的概念。在这种情况下，我们的线框原型可以帮助我们解决沟通上的问题。并对产品的可用性，以及功能进行快速的勾勒，高效的传达自己的信息。我们在对产品的功能描述时，不能只画个长方体或者圆形来表示组件，比如某个BANNER位置，我们正确的做法应该是要描绘出相关的元素，并且在需要的时候，对功能方面进行逻辑方面的文字描述与注释，如果我们的细节做得足够精细，那么未来和客户、执行者沟通的时就会大大降低开发的效率。综上所述线框图是产品设计的低保真呈现方式。它有三个简单直接而明确的目标1、呈现主体信息群，2、勾勒出结构和布局，3、用户交互界面的主视觉和描述。432确定需要兼容的设备类型、屏幕尺寸通过线框图的原理与实战，我们可以对响应式视觉设计的逻辑结构进行规划与定义，我们根据之前的用户调研与预估的结构，制定出比较大众化的屏幕尺寸规格，在本论文中，采用了三个代表性的尺寸，分别是桌面的显示器，768PX960PX平板和768以下的手机，因为这三类在用户群体中应用的比较广泛，在这个部分，要强调的是响应式设计的目的在于，针对我们规划的屏幕规格区间，进行产品的功能以及内容的输出格式预设。我们关注的是制作线框原型规划样式后的逻辑，而非视觉上的设计，在这个阶段，我们的相关人员应该清楚哪些重要的页面在后续会复用性特别高，且功能与布局是否具有代表性等，对于本次的论文，关键的页面包括首页，智能滴灌流程中的页面，地图中的页面等等。以及皮肤的更换。首页来定义关键中的网格，我们首先创建三个页面，宽度分别是1200像素，978像素，768像素。433沟通与评审现在现在我们需要考虑的是，我们在开发的模块中，哪些部分需要随页面的缩放，而布局进行相应的调整，当然，这个过程中，我们要时刻与团队里的视觉设计师，交互设计师，前端开发人员保持密切的沟通，深入理解线框原型后，我们要按最初的原型进行样式和布局上面的调整，不断把功能完善，及早发现页面上潜在的BUG。434功能模块图智能农业物联网应用平台智能滴灌智慧大棚智能气象开心农场气象数据滴灌操作实时监控滴灌地图大棚地图气象地图开心农场地图室内环境土壤墒情泵房管理实时气象历史气象气象预报数据分析实时监控图6农业模块图435首页在本论文中，将以首页为基础，做展示。下图就是首页制作的三种线框原型。图7首页线框图436全局导航在导航的设计上，经过多次分析与思考，导航的宽度应该随我们屏幕的宽度变化而变化，在不同的媒介查询中，显示不同的样式，在最后的规格里，我选择的是在