地方工科类院校门户网站界面设计研究

迟瑞丰 许宏年

摘 要：近几年随着地方工科类院校信息化建设的不断发展，门户网站建设越来越受到重视，同时对门户网站的界面设计提出了更高的要求。文章研究了地方工科类院校门户网站界面设计存在的问题，并提出了界面设计的基本原则，重点论述了扁平化技术、网站地图、线框图、学校大数据展示等内容。

关键词：门户网站；界面设计；学校大数据

随着计算机信息技术迅速普及和网络技术应用的发展，地方工科类院校门户网站己经成为学校对内、对外展示和宣传手段方面发挥着越来越重要的作用。如果把高校信息化建设比做一個框架，那么高校门户网站建设就是信息化建设的主要窗口，高校门户网站的建设水平和内容丰富程度直接决定了信息化建设水平。通过对现有地方工科类高校门户网站行比对与分析，发现网站界面设计问题较多，信息框架复杂，功能定位不准确，交互设计不友好等问题严重影响了高校门户网站的使用效果。

1 高校门户网站的定义

1.1 门户网站的定义

门户网站中的门户原意是指正门、入口，现多用于互联网的门户网站和企业应用系统的门户系统。所谓门户网站指的是一个应用框架，它将各种应用系统、数据资源和互联网资源集成到一个信息管理平台之上，并以统一的用户界面提供给用户。根据维基百科的定义门户网站（Web portal，又称入口网站，入门网站）指的是将不同来源的信息以一种整齐划一的形式整理、储存并呈现的网站。

1.2高校门户网站的定义

高校门户网站的是一个让高校师生以及校友、访客利用校园网络平台获取校内、外信息资源和互联网信息资源的重要入口，建立门户网站同时也是高校对外展现学校实力和宣传学校自身优势的一种有效手段。通常来说高校门户网站一般是由作为形象框架的门户主网站和作为内容主体的二级网站以及各类信息系统来共同组成的，是高校内部所有校园信息与互联网资源实现交互、共享的窗口，同时高校门户网站解决了高校信息孤岛问题，整合了校园内部所有资源，方便了师生以及校友、访客的使用。

2.1地方工科类院校门户网站界面设计存在的主要问题

1）网站界面设计内容过于繁多，重点不突出，所有的信息都想在门户网站的首页展示出来，网站界面排版非常乱，没有统一的设计风格，造成用户使用不方便，更不能及时得找到感兴趣的内容，用户体验差。

2）网站界面设计没有总体规划，思路不清晰，目标不明确，设计初期没有使用设计原型软件，致使网站总体设计结束以后才去返回重新设计，更重要的是重新设计也不一定会是最终的网站效果，浪费了大量时间。

3）网站界面设计中没有重点突出学校的办学特色，没有根据学样现有的文化和办学理念找到合适的方式展现出来，导致界面设计者和学校要求没有达到统一的意向，始终达不到最终的理想界面设计。

4）过时的界面设计 ，由于負责制作地方工科类门户网站的制作者大部分都是计算机或者相关专业的，对界面设计的现有的流行技术了解得不是特别多，所以造成制作的网站界面跟不上时代潮流，做不到与时俱进，严重影响了

5）网站界面设计对用户访问的粘性不够，例如：大部分同学甚至不知道学校的门户网站，或者由于网站界面设计的不合理，造成没有兴趣去访问第二次或者更多次的访问，出现这些问题主要是我们在设计门户网站的时间没有充分的考虑到我们主要的用户是谁？分为几类？每一类的用户都需要什么？我们能提供什么？

3 地方工科类院校门户网站界面设计基本原则

3.1 简洁统一性原则

简洁统一性原则是门户网站界面设计的重要的原则，这条原则说起来简单却做起来难，要做到简洁而不简单，富有感染力，有强烈的第一印象，简洁不仅仅是去年不必要的内容还要重点突出一些内容，同时操作设计也要尽量做到简单，使潜在用户能最快的速度找到想要的内容，并且有明确的操作提示，而且所有门户网站的界面要统一，包含所有的二级网站界面也要统一，通过对网站界面的各种元素（框架、颜色、图片、字体、留白等）使用统一的规格，使得网站的用户看起来应该是和谐统一的一个整体。通过这些系统的、规范化的设计 ，不断的强化潜在用户的记忆，使用户对网站产生良好的印象，减少用户的学习量和记忆量，用户必须记住的任何信息应该是和当前操作有关的，而不是和计算机使用相关。统一的网站界面设计对于潜在的报考学生来说，是了解学校的第一印象，特别重要，错误的网站界面设计最后会影响到招生的排名。

3.2 界面友好性原则

门户网站界面友好性是门户网站制作的需要重要考虑的重要原则，界面友好性对网站潜在用户的正确使用门户网站起着十分重要的作用。友好性的界面设计要符合用户的使用习惯，充分考虑到门户网站页面的兼容性和信息导航的舒适性，选择好框架和色彩的搭配，提高网站的访问率和使用效率，同时也要考虑到网站的界面风格、框架设计和色彩的搭配等因素对网站界面设计的影响。

3.3 以用户为中心原则

学校门户网站界面设计要从师生方便使用为中心的原则立场上来充分考虑门户网站界面设计。深入研究师生的使用习惯，通过调查问卷、现场问答等多种方法了解师生的需求，关注他们的期望和喜好等，对反应的问题要想办法解决，清楚师生使用门户网站界面习惯不同，设计要有针对性，比如：在界面设计调查时发现学生主要关注学习方面、校园文化、体育活动等方面的内容，教师主要关注教学任务、科学研究等方面的内容，针对这一情况我们在设计界面时要对不同的访问用户制作出不同的访问页面。

3.4 个性化设计原则

成功的学校门户网站界面设计可以给潜在用户带来亲切感，使用方便，提高用户体验。对于学校门户网站的个性化设计就是在符合学校整体网站界面设计风格的基础上，增加一些个性化的设计元素（如现在比较流行的学校大数据、扁平化设计等），同时研究新的界面设计技术溶入到网站界面设计里面。

4 对地方工科类院校门户网站界面设计的几点建议

4.1 深入调查研究，对地方工科类院校门户网站界面用户进行分类

为了更好的方便用户使用，使用户更有兴趣访问网站，根据多年从事门户网站设计和调研结果分析，目前地方工科类院校门户网站的用户主要分为以下几类用户：考生、学生、教工、校友、访客、捐赠。

考生：主要关注的信息是学校的本科、研究生的招生信息，奖学金、助学金、贷款等介绍，学校简介、校园环境等相关信息。

学生：主要关注学校跟学生自己学习和生活密切相关的网站，如：学生经常访问的教务处网站、图书馆网站、学工处网站、就业中心网站、本人的学校邮箱和博客等相关网站。

教工：主要关注的是校内的教务信息、科研信息、学校的新闻和公告等网站，如：人事处网站、教务处网站、科研处网站等。

校友：校友是学校门户网站访问用户不可忽略的重要访问来源，根据调研，校友主要关注校友网站、校友电子杂志、校友查询等信息。

访客：主要关注学校的校园风光、学校历史等信息。

捐赠：校友捐赠已经是目前很多高校一项重要的收入来源，同时也给在校学生带来多项奖学金、助学等，校友捐赠主要关注学校的捐赠平台以及所捐赠款项的使用去向等。

如下图所示：

以上的用户访问的位置要跟搜索放在页面的右上角，方便用户第一时间找到。

4.2 将扁平化设计应用到地方工科类院校门户网站界面设计中

早在2013年ios7发布以来，扁平化设计就轰动了整个互联网世界，很多网站和APP界面设计都使用了这项技术，带来了很好的效果，所以我们要把扁平化设计应用到地方工科类门户网站界面设计当中。扁平化设计是一种设计风格，以减法为主要设计理念，呈现出更加概括、抽象的设计样式，在实际运用中不使用透视、渐变、纹理、阴影等效果。扁平化设计通常应用在视觉设计范畴，即放弃一切装饰效果，所有元素的形式都更靠近几何形态，边界干净利落，没有复杂的装饰效果。相比常见的拟物化设计，扁平化设计略去了一切仿真的元素，包括阴影效果，高光等，目的在于让使用者将注意力集中在信息本身，而不是产品的装饰美等辅助因素上。“在视觉设计中，扁平化设计强调了极简主义，提倡了‘少即是多的美学理念”，通过简洁的色彩、图形、文字的搭配最直观的向用户展示有效信息，是一种极简的设计方法。

4.3 使用信息架构对地方工科类院校门户网站界面进行设计

1）信息架构的英文是Information Architecture，简称信息架构，是美国建筑师沃尔曼（Richard Saul Wurman）先生在1975年创造出的一个新词汇。目前一般将信息架构定义为“组织信息和设计信息环境、信息空间或信息体系结构，以满足需求者的信息需求的一门艺术和科学。”，包括调查、分析、设计和执行过程，它涉及到组织系统、导航系统、搜索系统和标签系统的设计，目的是帮助人们成功地发现和管理信息。简单的说，信息架构就是将复杂的信息简单地传达用户的技术。人们在出于各種目的对信息加以处理的时候，对复杂的信息，怎样才能使他们更易于理解，更便于使用呢？这个时候，需要用到的就是信息架构。

2）网站地图在地方工科类院校门户网站界面设计中的的应用。维基百科定义：网站地图描述了一个网站的架构。它可以使一个任意形式的文档，用作网页设计的设计工具，也可以是列出网站中所有页面的一个网页，通常采用分级形式。这有助于访问者以及搜索引擎的机器人找到网站中的页面。网站地图是门户网站界面设计中的一个重要环节，良好的网站地图设计可以使潜在的访问用户第一时间了解到网站的结构、栏目和内容等基本信息以及网页之间的相互关系，同时可以快速的被各大搜索引挚收录，就像我们经常访问的城市在线地图一样，使我们的潜在用户快速找到自己想要的内容。

3）线框图在地方工科类院校门户网站界面设计中的的应用。线框图是门户设计设计不可或缺的重要组成部分，是网站设计师根据网站客户需求将网站构架形象化的一种展现形式。良好的网站线框图的设计可以使整个门户网站在设计前期更早的发现问题，并及时的解决，这将会大量的节约我们设计门户网站的时间、人力和金钱，使我们有更多的时间去开发门网户网站新的功能。本实例使用Axure进行设计线框图，这是根据对地方式工科类院校门户网站的内容的分类的展示。

4）合理的搜索系统设计。搜索系统主要负责帮助门户网站的用户第一时间搜索到自己感兴趣的信息，通过网站内部和外部搜索引擎，使用最快捷的方式提交给用户搜索的结果。通过对用户使用方式的了解，我们将搜索系统放到了门户网站的右上角，使用户在使用过程中能快速找到并方便使用。为了能更好的推廣学校的门户网站我们这里使用了百度网站的搜索，使搜索的信息更精确，内容更丰富。

4.4 运用大数据技术对学校特色信息进行定期展示

目前我国已经处于大数据时代，随着互联网技术的快速发展、高校门户网站建的迅速普及，以及家长和学生对学校大数据要求了解的逐渐提高，学校门户网站急需展示出学校的核心竞争力，增强学校的办学信心，在高校门户网站的位置上增加学校大数据的展示已经成为未来发展的必要趋势，同时学校的大数据信息要不断的更新，保证信息的准确，通过学校大数据运用突出数字和图示的方式，使访问者可以快速的了解学校的一些基本信息

4.5 学校要统一思想，提高认识，充分认识到网站界面设计的重要性

学校领导以及相关工作人员要充分认识到网站界面设计是一个重大的系统工程，是学校信息化建设的重要组成部分，需要全校干部职工理解、参与 、协调及配合。因此，在设计网站界面之前，要通过召开会议和调查问卷等形式，广泛宣传，了解各方面需求。同时对相关设计工作人员进行定期技术培训，确保设计人员掌握最新的网站界面设计技术，提高界面设计能力。

5 结语

综上所述，本文探索了地方工科类院校门户网站界面设计中存在的主要问题，并归纳了地方工科类门户网站界面设计的原则和网站界面用户分类，同时简要探讨了扁平化技术、信息架构、网站地图、线框图、搜索系统设计、学校大数据展示等在地方工科类院校门户网站界面设计中的发展趋势。

参考文献：

[1] 王令中.视觉艺术心理.北京：人民美术出版社，2006.