网页布局与人机学的研究与实践

[摘 要]在教学中让学生充分利用人机界面设计的原则及设计方法，对现有网页界面总体布局进行分析优化，使学生的网页设计能力更好的与就业岗位对接。

[关键词]网页布局与人机学；研究意义；研究目标；研究过程；教学实践

中图分类号：U46 文献标识码：A 文章编号：1009-914X（2016）04-0216-01

我们生活的21世纪已经进入了信息时代，近年来随着智能手机，平板电脑的不断发展发展。人机界面的设计和开发已经成为国际上计算机设计领域最为活跃的研究方向。在网站策划、网站设计和网站运营的过程中，人机交互和用户体验是经常被谈及与运用的概念。一个网站布局得不合理，首先会表现在功能和页面设计的契合度上，具体表现就是用户在网站上找不到需要的信息，或者是我想完成一个操作找不到相应的按钮。这就是在设计网站时没有从用户的角度出发所造成的。为了让学生运用网站配色与布局知识设计出人性化的网站，更好的与就业岗位对接，在本阶段的课题研究中我将“网页布局与人机学的研究与实践”作为我研究的课题。学生在设计作品时能够运用人机学的知识，提高用户体验的舒适度。

一、网页布局与人机学的研究意义

通过本课题的研究，学生能够运用色彩原理进行网页颜色的搭配并且能够运用布局技巧进行网页的布局设计。同时能从临摹网页到自主设计，让网页效果设计真正从想法逐渐变成现实。在综合项目实战中，贯穿网页配色与布局的知识，综合运用人机学的原理，达到对网页设计制作的整体把握。有助于提高中职学生网页制作的能力。

二、网页布局与人机学的研究目标

通过对网页布局与人机学的研究与实践，不断改进网页布局综合案例的教学策略，力求找到提高我校学生网页设计能力的方式方法，提高教育教学质量，有效的把课堂变为真正的工作室。在综合项目实训中设计出与就业岗位充分对接的网页作品，为学生就业打下坚实基础。

三、网页布局与人机学的研究过程

（1）准备阶段（2013年7月～2013年8月）

专题研究准备阶段的主要任务是学习与课题研究有关知识，确定专题研究目标、研究对象、研究方法和研究内容，制定研究实施计划。

（2）实施阶段（2013年9月～2014年6月）

根据市场调研结果明确专业核心能力，制定相应的计划，编写技能检测手册。

（3）总结阶段（2014年7月～2014年9月）

对本课题研究过程及资料进行收集整理，形成课题总结报告，并将专题论文、调查报告和研究个案汇编成集，撰写个人结题研究报告。

四、教学实践的成果和结论

在学校课题的研究分类中，我主要承担的是《网站配色与布局》这本教材中网页布局与人机学这部分的教学研究。在几年的网页制作课程的教学实践中，不断尝试应用多种信息化教学手段，以“学生为主体教师为主导”的教学理念贯穿整个教学过程。体现了“做中学，做中教”的职业教学理念，充分调动了学生学习的主动性和积极性，较好的培养了学生独立思考，分析与解决问题的能力，取得了很好的教学效果。在教学中旨在网页布局与人机学的教学实践中有更为突出的成果，培养中职学生的职业能力，为学生今后成为一名优秀的网页设计师打下坚实基础。2013年7月在抚顺市信息化教学设计中获得一等奖；2013年9月辽宁省“创新杯“信息技术说课大赛一等奖；2013年11月获得部级”创新杯“信息技术说课大赛一等奖；2013年12月获得抚顺市级优秀课。2015年11月获得部级信息技术教学设计大赛二等奖。

1.网页布局与人机学的相关概念研究

通过对此概念的研究，在教学过程中，我采用实例讲解的方式。从iPad看人机学。iPad是当今社会较为流行的电子设备，也可以称之为街机。同学们对我列举的实例会非常感兴趣，由此学生会非常渴望即将要讲解的知识。iPad是著名的苹果公司出的平板电脑。iPad在人机交互操作上做得非常细致。为什么iPad无论老人小孩都会用，其基本操作甚至很少需要别人的协助和说明书？究竟是孩子容易接受iPad？还是iPad容易让孩子接受？iPad的设计可谓“童叟无欺”，老人、孩子都可以流畅使用。人机学应该是“傻瓜式”的，去追求一种更“本能”的操作，就像吃饭穿衣一样简单。通过以上实例的讲解，学生很快理解人机学的概念，并且知道在网站配色与布局这本书中为什么给我们介绍人机学的概念。让学生充分理解了网页的易用性和美观性非常重要，这样同学们就能很认真的学习人机界面设计的原则及设计方法。在教学中有效的突出了教学重点，突破教学难点。

2.网页布局综合案例的设计风格研究

引入案例――网页布局的风格类型。本案例的主要目的是在不改变网页内容的前提下，改变网页的风格类型。这就需要用的布局的知识。在之前的学习中我们已经掌握了各种网页布局的知识与技巧。不同的网页有不同布局。这样综合起来就形成了不同的网页风格类型。那我们常见的网页风格类型有哪些？有什么特点？引入理论学习知识，教学过程很自然的过度。经过理论讲解后，进行实战案例――设计临摹典型商业型网站。

在教学过程中引入实际案例，教师通过案例讲解相关理论知识，再让学生应用所学理论知识完成实战案例，使学生能够 “学以致用”，完成本课的技能目标。这样不仅增强了讲解的直观性，降低了学生学习的难度，还可以有效的激发学生的学习兴趣，充分调动和发挥了学生学习的积极性、主动性、创造性，培养职业核心能力，实现教、学、做一体化。

3.电子商务网站个案研究

网页设计是一项系统工程，它包含了从用户调研到最终上线的全过程。我将以一个电子商务网站为例，系统地讲解整个网页的设计过程。

在项目实战案例――新蛋购物网站主页制作讲解过程中。首先了解技术要点，包括（1）确定网站整体风格。（2）网页色彩搭配。（3）网页布局技巧。其次进行案例分析：随着网络的普及，网购已经火起来，给同学们阐述 “没有人上街不代表没有人逛街”的现象。同学们在这个过程中就会纷纷议论都在哪些网站上买过东西，喜欢浏览哪些网站，为什么喜欢去浏览那些网站，引出网页设计的重要性。电子商务网站作为网购的首要利器，是用户和商家的唯一互动平台。所以界面设计的好坏，对其销售额起着重要的影响作用。在授课过程中自然引入案例，要求在设计制作过程中注意体会如何运用网页配色与布局的知识来设计出人性化的购物网站。使学生能够自主学习、独立操作和自我评测。

通过对新蛋购物网站首页的制作，更加熟练的使用之前学过的技巧。深入了解页面的合理用色和颜色之间搭配使网页更有效果；图片在画面中的合理摆放；准确划分页面结构等。对前面所学的知识融会贯通，学以致用。在设计网站的时候，要分析网站的主题内容，选择符合主题表现形式的布局，采用搭配合理的色彩表现主题的风格，加上细心的构思和新颖的创意，必然可以设计出优秀的网站。

五、存在的问题和今后的设想

学生到企业学习的机会太少，没有实际开发项目的经验。每个企业都有自己的团队，每个人都有自己指定的设计项目，这就要求都得是有经验的设计师。而我们的学恰恰就缺少这中间的锻炼过程，很少会给我们中职学生提供实践的机会。这使我们中职学生不能够很好的与企业对接。

要想解决这一问题，我觉得我们任课教师必须走入企业，先接触一些开发网站的公司，在企业参观学习。在网页制作的课堂上，拿一些企业的真正案例让学生实践，制作网页配色和布局的整个流程，这样同学们才能真正的得到锻炼。让学生深刻体会网页界面布局的人性化设计，真正的将课堂变为企业的创作工作室，使学生能快速适应工作环境，提高中职学生的就业率。

参考文献

[1]《网站配色与布局》电子工业出版社，职业教育研究院，编著.

[2]《人机界面设计》北京大学出版社，张丽，徐文平，罗印，编著.