基于高校校园网站的界面设计研究——以武汉纺织大学外经贸学院为例_百

第4期2021年2月无线互联科技Wireless Internet TechnologyNo.4February，2021基于高校校园网站的界面设计研究—以武汉纺织大学外经贸学院为例金子维（武汉纺织大学 外经贸学院，湖北 武汉 430070）摘 要：随着互联网的飞速发展，网络在思想文化宣传乃至整个精神文明建设中所起的作用越来越强，校园网是学校面向社会的一扇互联网窗口，在高度信息化的社会里，校园网成为最直接的宣传方式，但很多高校对网站界面设计的视觉创意缺乏足够的重视。文章将武汉纺织大学外经贸学院官网作为研究主体，通过用户调研和吸取国内外高校网站优秀设计经验，总结存在的问题，从配色、框架结构、校园特色等角度，对校园网站界面设计提出具体建议。

关键词：网页界面；校园网；高校0 引言本文将以武汉纺织大学外经贸学院门户网站为研究主体进行研究，针对官网界面存在的问题进行适当地再设计，希望通过本次研究可以优化网站布局、提高使用率，并扩大高校的影响力。

1 校园网页面建设背景

1.1 校园网定位

校园网站与普通的企业门户、公众媒介平台是大不一样的，高校网站的设计要保证网站的可扩展性和易维护性，制作赏心悦目的图文界面，力求把网站建成合理性与艺术性相结合的产物[1]。因为校园网不仅包含对内的服务与日常办公功能，还是对外界进行校园文化输出的窗口，所以校园网的呈现方式会一定程度上体现一个学校的办学理念与管理水平。由此，在界面布局上要避免过于花哨和过分活泼的表现手法，而以沉稳、大气为主旋律进行延展。高校作为人才培养和学术研究的最高殿堂，同时还肩负着服务社会和文化传承的重要使命，因此高校门户网站有突出的教育性和学术性[2]。1.2 界面再设计的必要性

在高度信息化的社会里，校园网成为最直接的宣传方式。通过建立优秀的校园门户网站，不仅能对本校的校园文化做好宣传，还有关学校的各项重要信息都能够及时对外公布与查询。除此之外，校园网站将作为一个开放的、公共的平台供师生及全校职工之间交流的全新方法，也将不再受到传统课堂教育的制约。而武汉纺织大学校园网在发展过程中存在着一些亟待解决的问题，这些不足可能会对校园形象产生一定的负面影响。由此，建设并优化我校网络平台，刻不容缓、意义深远。同时，如果想要与众多高校官网做出明显区分，学校应当重视用户的体验感，除了基本的功能模块需合理化外，还需提升网页的视觉形象设计，加深用户对于网站以至于[3]对校园的印象。2 网站现存问题分析

2.1 问卷调查报告

笔者使用“问卷星”网站作为调研平台，发放“武汉纺织大学外经贸学院（以下简称“外经贸”）官网界面设计调查问卷”，对外经贸网站的目标群体进行意见征询。共回收有效问卷 203份，数据真实有效。通过问卷所得数据分析，结果如下：36%的受访者认为在校园网获取信息较为方便；64%的受访者表示一般或是不太方便，部分受访者认为较难进一步获取想要的详细信息；42%的受访者认可目前学校官网的布局；58%的受访者希望调整页面布局与信息投放比重，并增加图片部分，且相当一部分受访者认为应当突出地域特色。除此之外，笔者还走访了校园的各行政部门，受访者表示校园网在运行的这段时间中，某些功能板块需要根据使用频率进行增减，以便与工作的开展。对于网站的导航、布局、功能、配色这几个方面被多次提及，说明用户在浏览网页过程中对这些是十分在意的。2.2 调研结果问题分析

2.2.1 页面布局不完善校园网首页作为门户网站至关重要的一环内容可以更加的丰富化，而外经贸学院首页采取的是全横屏banner轮播图加上简单的三栏布局，这样就会显得组织编排形式上较为单一。同时，各个学院的主页也存在着同样的问题，在布局上使用的是年代较久的分栏模式，完全服务于内容，却缺失了对院系文化的输出部分。

2.2.2 网站元素缺少鲜明的特征目前，外经贸校园网的首页分区结构为首页、校情总览、教学管理、校务管理、学工管理、党建工作、招生就业、信息公开，整体界面除放置必要信息外，对于展现校园活力与魅力的板块略有不足，最为明显的体现在校园网站的版头与页脚处理方式过于笼统，只有一个纯色块作为背景，无法从视觉上彰显校园活力。另外，各项板块栏目的图标使用的是已退出界面设计主舞台的拟物风格图标，使校园网看上去风格偏于老作者简介：金子维（1994— ），女，湖北武汉人，助教，硕士；研究方向：界面设计。- 78 -

第4期2021年2月无线互联科技·设计分析No.4February，2021旧。并且本校的各个专业学院的网站首页基本上是套用的统一模板，无法体现出学科各自不同的特点与风采。3 校园网设计实现

3.1 预期设计目标

通过整合校园网的各项功能与导航分支，网站将利用率不高的页面和功能删减，添加上有必要的功能和空间，同时预留出将来会使用的部分模块。将利用率高的窗口和栏目分布在更为显眼的位置，对整体框架进行调整形成一个更加清晰的网站脉络，使其结构更加严谨、合理。改变当前校园网繁复的拟物风格，而拟采用现代化简约的表现形式，以点、线、面等抽象形体作为装饰、点缀元素，用线条和大面积色块来划分版面，同时还需注重高品质图片的投放，让校园界面看起来更具有层次感和空间感，使之能够在同类院校中独树一帜。3.2 设计实现

3.2.1 网页布局合理

网页当中版面的编排主要针对的对象为文字、图形与图片（含动图），一个好的版面可指引来访者按照正确的、顺畅的阅读秩序进行浏览。在排版方面，校园网一般使用新闻式的排版布局，是因为该布局在信息获取的效率及准确性上都高于大部分布局方式。外经贸学院主页的版面采用的是较为单一的布局结构，尤其是导航栏放置的位置居右，不符合人的阅读习惯，其他相关信息的编排采用此种布局虽然结构清晰、主次分明，但由于缺少变化，易使阅读者落入循规蹈矩的俗套，甚至有点乏味的印象。此次，改版的页面布局在结构清晰的基础上对美观性进行提升。整个页面顶端部分除导航栏放置位置要与版头居中编排外，学院LOGO和轮播图不变；中间学院相关信息部分将划分为两部分内容，除原新闻动态与通知消息外，新增学术讲座、学生活动等内容；页面底部为学院风光多图展示；这样的页面结构清晰、简洁、美观、大方，看上去一目了然、主次分明。

3.2.2 突出特色

学院的logo仍然将放置在顶部的左侧，而原本纯色的背景使得层次感单一，其留白面积过多，从视觉感上会使人觉得单调，由此在右侧部分添加校园主建筑的去色图片，使用正片叠底的图层模式至于底层。同样，页脚部分也叠加上校园建筑、风光的图片，对图片进行去色处理。这样一来可以保证网页的整体特性又增加了画面层次，二来达到了突出我校特色的目的。在页面底部还设置了专栏，展现学院的风光，让浏览者有身临其境的感觉。另外，对于界面上偏老旧的拟物风格图标，例如信箱图标、新闻图标、麦克风图标等，替换成几何感更强的订制图标。除了图标风格，也将在网站首页添加相关的社交平台账号，如：外经贸官方微博、官方微信公众号、各个学院官方微信公众号，这些功能的添加为用户节省时间的同时也方便信息沟通。4 结语提供丰富的教育教学信息和资源是校园网的生命力，校园网络具有距离短、延时少、相对成本低和传输速率高等优点，它的低层协议较简单，控制选择等问题大大简化，而很多网站在构建中忽略了实用性与用户体验及视觉感受的结合，导致最终效果大打折扣，所以如何真正做到实用性与艺术性兼顾的优秀网站也是本文考量与探究的创新之处。[参考文献][1]吕思思.浅谈高校校园网站界面的人性化设计[J].大众文艺，2013（17）：88.[2]程璨.高校门户网站视觉形象优化设计研究—以青岛科技大学为例[D].青岛：青岛科技大学，2017.2019（5）：112-116.[3]丁雅晴，米春晖.高校官网UI构建与实现—以安徽艺术学院为例[J].池州学院学报，（编辑 姚 鑫）Research on the interface design of university campus website—a case of International Business Economic College of Wuhan Textile University Jin Ziwei（College of International Business and Economics，WTU，Wuhan 430070，China）With the rapid development of the Internet，the role of the Internet in ideological and cultural propaganda and even the

Abstract：construction of spiritual civilization has become stronger and campus network is an Internet window for the school to face the

a highly informatized society，the campus The Internet has become the most direct way of publicity，but many universities lack

sufficient attention to the visual creativity of website interface article takes the official website of Wuhan Textile University

School of Foreign Economics and Trade as the main body of research，through user research and absorbing excellent design experience

of domestic and foreign university websites，summarizes existing problems，and puts forward specific suggestions on campus website

interface design from the perspectives of color matching，frame structure，and campus interface；campus network；colleges and universitiesKey words：- 79 -