中学官方网站设计对比研究范文

【摘要】文章对我国清华大学附属中学和美国TheMastersSchool网页设计进行对比，从中美教育事业与网页设计大环境出发，分析其中的文字区别、文化差异、一级菜单选题、颜色运用、版式设计、后期维护与影响。同时，分析网站对中学生提高艺术修养的重要性，以及网页对中学教育方针体系等宣传起到的关键作用，并探究如何提高国内中学网页设计水平。

【关键词】中学官方网站；网页设计；文化差异

对于学生来说，每一次择校对未来的道路和发展都是至关重要的，想要全面掌握各个学校的信息，官方网站是一个最直接的选择。从学校的角度来说，在当今的互联网时代，人们可以从中了解更多内容，甚至从整体的设计风格就可以看出学校所倡导的教育理念、遵循的教育方针和未来的发展方向。在互联网科技发展和新媒体崛起的当下，人们对网页内容的要求已经不局限在是否美观、是否内容全面，而是要求两者更加契合、更加协调统一。由于文化、生活环境、历史条件等原因，从排版布局到用户体验、从资料整合到信息设计，中美两国中学对网页设计的需求有所不同，当然，这也与网站建设者和用户人群有着密切的关系。

一、中美中学网页设计现状

一个精致的门面是吸引大众的基础，国内中学网页设计风格大部分还处于类似报纸、杂志的排版。人们的审美与艺术需求从年龄段划分上来看，老一辈人习惯浏览排版紧密且内容充实的版面，注重页面的功能性；现代年轻人生活节奏快，较能接受以少量图片信息代替大量文字的表达方式，从而提高工作生活质量。国内一部分中学的网页是没有经过设计师设计的，直接由工程师进行切图，其中并没有设计的元素，成品结果不尽人意。其实不是没有追求美的想法，只是没有发现美的眼睛。部分人只是墨守成规，不接受设计师的建议，不接受崭新的设计风格，一再影响设计师的设计理念，这也是许多设计师所苦恼的事情。对于整体的VI体系在网页中的融合，有时会直接影响网页最初的设计风格。这时就需要设计师与客户进行良好的沟通，从而完成优秀的设计。美国的网页设计相对于中国而言起步要早，美国中学网站的重视程度并不低于大学网站。而国内并不是如此，这就严重制约了对外宣传的良好渠道，无法向国外展示我国中学的文化和教育理念。

二、清华大学附属中学和美国TheMastersSchool官网设计对比

（一）设计文字区别与文化差异美国中学网站的设计风格深受西方极简主义的影响，网站设计注重信息的动态更新以及用户体验，设计元素较为丰富。部分网页会将一级菜单隐藏在一个按钮中，营造出十分简洁的界面。我国大部分用户对学校网站还停留在阅读层面，在文字的使用上，考虑到后台程序在显示上的问题，网页一般会选用黑体等最基本的字体，清华大学附属中学的网页设计亦是如此。一些网页设计会选择用图片代替文字，将带有文字的图片直接上传至网站后台，这样字体既不会因电脑型号的不同而产生改变，还可以在排版上加以规划。笔者认为，我国的中学网站设计中可以融入更多的动态媒体资料。区别于传统媒体，网页不仅仅是平面布局，它可以将信息设计融入其中，使版面更加自由化，从而生动直观地展示出各个学校的文化和教育理念。同时，还可以将中国的传统文化和日益发展的新媒体文化相结合，在以人为本的基础上将创新融入其中。汉字作为世界上最古老的文字之一，承载着人类的文明。如何将这种富有历史感的文字运用到现代设计中，是中国设计师一直探讨的问题。与拉丁文字相比，使用汉字完成一个设计感强的作品是相对复杂的，尤其是学校官网这种需要大量文字表达的网站，这需要设计师对文字版式设计有着丰富的经验。而在美国的部分中学网站设计中，设计师将数据可视化设计与网页设计相融合，有着极强的现代设计感。其中TheMastersSchool的文字选择集中于现代感较强的无衬线字体，页面轮廓较窄，深度融合西方的极简主义风格；同时，设计师也十分注重整体的框架与布局。

（二）一级菜单选题对比信息具有多向交互性，对于一级菜单的选择可以直接反映学校的主要教育目标和教育理念。清华大学附属中学的一级菜单有：学校概况、校园风貌、教育科研、教育资源、情系母校、百年校庆、国际部、招生专栏、人才招聘、数字校园、空中学堂、奥森•将台校区。TheMastersSchool的一级菜单有：Admission，About，Academics，Arts，Athletics，CampusLife，Boarding，Alumnae/I。从以上的排列顺序可以看出，两者的共通点有对学校、师资力量、教学资源的介绍，这也是在学校的网页中必不可少的。由于教育环境和文化背景的不同，清华大学附属中学比较重视学生的文化知识教育，而TheMastersSchool则是将艺术与体育放在一级菜单里。这也与教育目标有着必然的联系，我国中学是倡导培养学生在德智体美全面发展的同时，以高考为第一目标；与国内的应试教育不同，美国的中学则是主要培养中学生的实践能力，从实践中找真知[1]。

（三）颜色的运用对比对于颜色的运用往往代表着一个网站带给用户的第一印象，也是加深用户对该网站记忆度的一个体现。相对于文字和图片，颜色有着更大的吸引力，可以体现一个学校的主题风格和文化。这两所学校的整体主色调都以紫色为主体，其中清华大学附属中学的颜色种类运用多于TheMastersSchool，以紫色为主色调，其余颜色做辅助划分板块，使用户能快速地找到自己想浏览的板块，也起到用颜色加深用户印象的作用。TheMastersSchool则是紫色搭配少部分的黄色作为整体板块的划分，不规则图形的运用使网页既简洁又活泼，加强了视觉冲击感。两个网站在色彩的运用上方向不同，但都起到相对决定性的作用。

（四）版式设计对比从清华大学附属中学的网站首页来看，内容庞大、信息量多、层次鲜明，科学的布局让用户可以一目了然地看到网站的主体信息。为了符合社会需求和国内用户浏览网页的习惯，清华大学附属中学增加了浮动弹窗和固定信息窗口，这也是许多学校网站都会出现的情况。这样也许会凸显领导层想表达的内容，却忽略了这会导致网页信息碎片化。虽然在放大缩小网页窗口的同时改变了一级菜单的交互方式，可以方便用户浏览，但是从设计审美角度看则没有突出视觉重心。美国TheMastersSchool官网首页banner位置以视频的方式进行展示，增加了网页生动性。采用“I”字型框架，版面布局设计体现了设计者在前期设计时树立了良好的全局意识，合理利用留白让网页中的文字、图像深度融合。网站将banner与下面板块以色块分割，大部分以图片为主体，文字部分较少。相对来说，清华大学附属中学注重文字表达，而TheMastersSchool注重用图片传递信息，文字内容相对较少。各有其优点，从用户的角度出发，在屏幕显示器分辨率较小或者网速受限的情况下，加入大量的图片视频可能会造成用户无法准确浏览到自己想要的内容。相较之下，传统的文字说明可以更加直接、快速地表达内容。但这也是其中的弊端，繁多的文字内容会使用户感到十分枯燥。综上所述，在版式和文字的运用上，必须要考虑用户群体的接受程度和文化底蕴[2]。

（五）后期维护与影响网页的整体性保留和后期维护有着密不可分的关系。例如，在后台程序规定好的尺寸上传一个不同大小的图片，会造成图片的挤压或变形。这是在大部分中小学网站上出现的问题，其原因就是后期维护者可能是一位并不了解设计的工作人员。国内的中学官网往往会根据实时新闻或活动在页面上层添加弹窗，这样就导致页面混乱，使用户分不清主次。而美国大部分中学官网网页设计界面较为简洁，后期维护人员秉承着设计师最初的设计理念，给用户营造一种简洁清新的氛围。对于媒体信息的选择也是后期维护的重中之重，设计师在最初设计的时候为避免后期维护时会发生的问题，应尽量减少后期需要修改的部分，加强整体的框架性；同时秉承规范性、严密性和可持续性，这样才不会违背最初的设计理念[3]。

结语

综上所述，笔者对这两个具有代表性的中学网站进行对比的主要目的，是希望可以促进国内中学网站进一步发展，将艺术教育融入学生的日常生活中并融入新时代的设计理念，满足新一代的审美需求。每个领域的发展都是从事该领域的人群在实践中不断探索追求，并将其推上更高的台阶。推己及人，设计师需要想到用户体验与客户需要，不断思考如何提高网页设计质量，使网站页面设计在不失其原有本质的情况下更加美观和谐，更具生命力、感染力。媒体设计的变化日新月异，设计师要积极汲取国外好的设计理念，把优秀的艺术设计融入人们的生活中，从而推动国内教育和新媒体艺术的进步。

参考文献:

[1]田甜.网页设计中版面布局设计及色彩搭配分析[J].明日风尚，2018（18）.

[2]ZhyldyzMukaeva.东西方文化的视觉差异下中国网页设计的感知度研究[D].重庆大学，2016.

[3]蒋昊朋.新媒体环境下网页设计发展趋势分析[J].赤峰学院学报（自然科学版），2017（2）.

作者：秦旭剑 钱前 单位：吉林艺术学院新媒体学院教授