《毕业设计-基于响应式web设计模式的人机交互界面的研究与应用》由会员分享，可在线阅读，更多相关《毕业设计-基于响应式web设计模式的人机交互界面的研究与应用（62页珍藏版）》请在金锄头文库上搜索。
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评阅参考内容：毕业设计(论文)的研究（设计）内容、方法及结果，难度及工作量，质量和水平，存在的主要问题与不足。学生掌握基础和专业知识的情况，解决实际问题的能力。毕业设计(论文)是否完成规定任务，是否达到了学士学位水平的要求，是否同意参加答辩等。评语：指导教师签名： 评定成绩（百分制）：_分工程技术学院毕业设计(论文)答辩记录及成绩评定学生姓名专业班级计算机科学与技术61001版毕业设计(论文)题目基于响应式web设计模式的人机交互界面的研究与应用答辩时间 年 月 日 答辩地点一、答辩小组组成答辩小组组长：成 员：二、答辩记录摘要答辩小组提问（分条摘要列举）学生回答情况评判三、答辩小组对学生答辩成绩的评定（百分制）：_分 毕业设计(论文)最终成绩评定(依据指导教师评分、评阅教师评分、答辩小组评分和学校关于毕业设计(论文)评分的相关规定成绩(百分制)：_分
