开放大学门户网站的构建与优化

张新海 蔡会霞

摘要：开放大学门户网站是对外信息发布和宣传的重要窗口，是网上教学和各种业务系统的应用汇聚。开放大学门户网站的设计理念和设计风格，直接关系到网站的服务质量。该文从设计理念和设计风格两方面，以服务终端用户为根本目标，对开放大学门户网站的构建进行了实践和探索。最后通过实践，验证了门户网站优化方案是有效的。

关键词：门户网站；访客细分；服务理念

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）25-6022-03

Construction and Optimization of the Open University Portal

ZHANG Xin-Hai， CAI Hui-Xia

（Network Center， Jiangsu Open University， Nanjing 210036， China）

Abstract： In this paper， open university portal is an important window of external information dissemination and publicity， is the application of e-learning and a variety of business systems converge. Open University portal design and style， directly related to the quality of service the site. From the design concept and design aspects， to serve visitors as a fundamental goal， the establishment of open universities portals were practice and exploration.

Key words： Portal； visitors segmentation； service concept

开放大学是以广播电视大学为基础，依托市县开放大学，整合各类教育资源的办学系统和服务体系。作为开放大学的基础设施之一，各级市县开放大学都建设了自己的门户网站，在对外宣传和网络教学中发挥了重要的作用。在开放大学的办学过程中，经过多年努力已经建成了一系列完善的业务系统群，如：开放大学学习平台、课程辅导答疑库、终身教育学分银行、数字图书馆等。开放大学门户网站不仅是各级开放大学信息沟通和交流的枢纽，还是各种业务系统的应用汇聚，如何更好的建设开放大学门户网站，服务广大访客，显得尤为迫切和重要。

1 国内外主流高校门户网站分析

通过对国内外主流高校（英国开放大学、凤凰城大学、华东师范大学）门户网站进行分析[1]，可以发现，江苏开放大学门户网站在设计理念、设计风格等方面与这些主流国内外高校还存在一定差距，主要体现在以下几点：

1.1 服务对象定位模糊

高校门户网站承担着对外信息发布和网上学习的功能，合理的信息分类和导航可以使访客迅速找到“自己想要”的内容。如英国开放大学，门户网站首页的第一幅导航大图就是字母A-Z的课程导航，网站正中间醒目的搜索框为Find a course，很显然英国开放大学门户网站设计的主要访客就是访问率最高的“在校学生”或“潜在学生”[2]。国内高校门户网站首页通常都是设置“新闻速递”、“最新消息”、“机构设置”等栏目，这些内容的访客通常都是“本校教职工”或“社会人员”，学生通常找不到自己感兴趣的内容[3]。

1.2 网站设计风格落后

互联网技术的发展，推动了Web前端技术的飞跃发展，Html5、JavaScript、Ajax等前端技术成为网站前端开发的主流[4]。受国内用户低版本浏览器使用率较高的影响，Html5技术在国内流行度不广，限制了网站前端技术的发展，网站的交互功能较差。国内高校门户网站在设计上主要偏重内容，多以文字方式呈现，网站缺乏感染力、吸引力。国外网站通常采用扁平化风格、响应式、交互式设计，网站在具有强烈的视觉冲击力同时，还有良好的用户体验[5]。

2 门户网站设计理念和风格的探析

2.1 基于访客的信息分类

开放大学办学系统和服务体系分为省市县三级开放大学，网站的主要访客为全省办学机构教职工、学生、未来学生、校友和社会人员。网站发布的信息不仅包含行政部门的文件通知，还包含教学部门的网上教学信息，必须对这些信息进行科学的分类，设计合理的栏目，才能使每类访客迅速找到自己想要的信息。

根据信息受众的不同，高校门户网站信息的处理有两种模式：

第一种模式是以行政部门和教学部门作为信息划分的依据，将信息划分为两大类提供给用户。目前国内高校普遍采用这种按职能部门划分信息的方式，采用这种模式，信息的发布和归类都比较简单，但访客查询信息时就必须筛选掉一些对访客无用的信息，信息投递效率不高。

第二种模式是分析访客的实际需求，对每类访客进行分析，客观地统计出每类访客的大致数量，每类访客信息查询的大致范围，并以此为依据对信息进行分类，将用户最关心的信息呈现给用户。采用这种信息处理方式，网站的设计和运维难度相对较大，因为大量信息是跨越很多职能部门后聚集出来的综合信息，但这种信息处理方式无疑给每类访客提供了更好的服务。

在现代远程教育中，开放学员是门户网站最重要的访客。开放大学门户网站的建设应采用第二种信息处理模式，将学员最需要的资源、信息直接呈现出来，更好的体现：“一切为了学生，为了学生的一切”的服务理念。

2.2 建立完善的信息发布机制

门户网站是信息发布和呈现的平台，内容更新滞后、栏目混乱是国内高校门户网站的普遍现象。职能部门和教学部门往往侧重部门二级网站的建设，将信息发布在部门网站上，各自为政，缺乏全局观。

因此，需要建立全新的网站运行和维护机制，由技术部门（技术中心、网络中心）负责技术处理，信息主管部门（宣传部、校办）负责信息审核，行政和教学部门信息员负责信息的收集、编辑、发布。通过建立一个完善的信息发布、审核机制，提高了门户网站信息的数量和质量。

2.3 采用Web 2.0设计风格

随着Html5、CSS3、JavaScript等网站前端技术的发展，网站设计风格得到了革命性发展。过去网站设计过程中普遍采用Div+CSS技术，以展示静态文本、图片为主，网站交互功能较差。随着上述技术的投入使用，实现了更复杂的前端交互应用，网站的用户体验得到了极大的提升。

扁平化设计最早是出现在IOS、Android等移动终端设备上，随着扁平化设计得到用户的快速认可，这种设计风格也影响着网站的设计。扁平化设计指的是去除渐变、阴影、高光等视觉效果，从而设计出一种看上去更“平”的界面。扁平化的一个优势就在于它可以更加简单直接的将信息呈现出来，减少认知障碍的产生。

优秀的门户网站必须适应各种屏幕分辨率，传统的CSS技术很难做到，随着Bootstrap、jQuery等JavaScript框架的流行，（Responsive Web Design）成为主流设计技术。通过响应式设计，网页可以在多种浏览设备（PC、移动终端）上阅读和导航，同时减少缩放、平移和滚动。

网页中每个元素（图片、按钮、表单等）都会对用户体验起着关键性作用，影响着用户的最终访问行为，从长远角度来看，开放大学门户网站需要专业的美工设计。优秀的设计可以使网站看起来更具有整体感，网页中每个元素也更加细腻，在一定程度上加深了网站对用户的吸引力。

3 门户网站建设实践

江苏开放大学门户网站（第一版）于2013年秋正式上线，网站首页如图1所示，按照扁平化述设计理念和设计风格进行规划与设计。

3.1 树立门户网站的宣传理念

在页面中，①③⑦是对学校有力的宣传。①是学校的校徽和校名，校徽是代表学校办学理念的图形化象征，有特殊的象征意义。③是滚动图片新闻，采用大图设计，极具视觉上的冲击力。滚动图片新闻代表的是学校最重大的新闻和事件，采用图文并茂的方式呈现给用户，高质量的图片新闻是宣传学校形象的最重要手段。⑦是地址和联系方式，用户在首页中就能获取学校的联系方式，拉近了用户和学校的距离，增强了亲近感。

3.2 访客细分的设计理念

页面中②是网站的主导航，将“学历教育”和“非学历教育”栏目设置在主导航最醒目、关键的位置，就是为了清晰区分开放大学两种教育类型，主要针对的用户是“学生”和“未来学生”。“学员服务”栏目中的内容贯穿学生的整个学习过程，包含“学习平台”、“数字资源中心”、“数字图书馆”、“虚拟实验室”等学习过程中必不可少的学习环境和资源。对学生最常用的平台和资源在⑤中进行了提取，设置成专门的“快速通道”区域，使处在各个阶段的学生都可以快速地获取相应的资源和信息。

针对教职工和下属办学点，④为他们提供了行政管理信息和教学教务信息。对这些信息也进行了分类，分为“学校新闻”和“教学教务”。一般情况下，高校门户网站的部门导航都会放在主导航中，但我们的主导航设计针对的是学生用户，所以将这些部门导航在⑦中提取出来，形成了公共栏目区域，在这里还可以链接到其他应用信息系统和专题网站，如一周会议、电话号码、办公系统等。对于未来学生（想要报名的学生），主导航②中提取了学校概况和招生信息，这些信息内容的设置偏重于针对学生，使未来学生感觉这些信息就是为他们定制的，从而加强了未来学生的报名和学习欲望。

3.3 专业美工设计

网站的视觉效果直接决定了用户体验，同时影响着用户的继续访问和后续操作。页面采用蓝色系作为颜色主基调，设计简单、快速，没有多余的花哨图片和内容。页面布局采用扁平化设计，从视觉效果上看分成七块，访客可以清晰地区分页面中每一块区域的范围和功能。 在页面元素的处理上，采用“响应式”设计，鼠标所到之处“一切皆有响应”，激励用户进一步操作，具有良好的用户体验。

4 基于热力图的网站优化策略

门户网站的设计是渐进式的，在网站上线初期，需要对网站用户群和用户感兴趣的信息做客观地统计和分析，然后做出科学的优化和调整。下面是通过网站分析工具（Heat Map），对江苏开放大学门户网站用户访问行为进行分析的实例：

1） 分析门户网站用户群

通过热力图中网站访问量的统计，我们可以大致分析出网站访问量：“学习平台”访问量占58%，"办公系统"访问量占8%，“新闻类和公共栏目类”累计访问量占34%。其中图片新闻、学校新闻、教学教务等新闻类栏目，每条新闻的访问量在1～2%左右，学校概况、职能部门等公共栏目几乎无人访问。我们可以大致认为，开放大学门户网站学生用户占60%，其他类型用户（教职工、社会人员）占40%，学生用户是门户网站的主要服务对象。

2） 根据访问量调整栏目设置

主页中栏目的设置涉及到学校各个部门，无论是职能部门还是教学部门都希望将信息

直接呈现在主页中。根据热力图中的访问量对栏目进行调整显得更有说服力，因为用户的访问行为统计是最客观数据。根据统计数据，需要有针对性的对访问量偏少的栏目进行优化和调整，对没有访问量的栏目进行重新设计或直接替换。

3） 提高信息质量

提高网站中信息的质量不仅方便了用户阅读，更能体现整个门户网站的宣传形象。根据热力图中“图片新闻”的用户访问行

为分析，大多数用户的操作行为的是点击“下一页”，而不是点击图片来进行信息阅读，这就促使我们对图片新闻中标题和图片的选取要更具有代表意义，让用户一目了然，看完标题和图片就知道这条新闻的含义。

4） 扩大链接响应区域

从热力图中红色区域可以看出，用户点击目标链接时，并不是仅点击文字，而是点击这一链接区域。因此我们需要扩大链接响应区域，将文字链接扩大为块状链接，合理地扩大页面链接响应区域在一定程度上提高了网页的易用性。

5 结论

作为从事远程教育为主的开放大学，门户网站的建设应该是网络和信息化建设的重点之一。在树立宣传和服务理念，对访客进行分类，采用主流设计风格之后，门户网站更好地发挥了其宣传功能，成为终身教育服务平台、远程教育的社会化门户服务平台。

参考文献：

[1] 裴蕾，杨李娟.我国高校中文门户网站建设调查分析——基于对国内20所高校中文网站的评测[J].现代情报，2013（10）：96-100.

[2] 罗菊兰.高校门户网站建设的问题与思路——从功能定位与设计原则角度[J].电子政务，2008（1）：99-102.

[3] 林帝浣，曾海标，关伟豪.高校门户网站建设探讨[J].中山大学学报：自然科学版，2003（S1）：264-266.

[4] 袁红.基于信息构建的高校门户网站外部用户可用性测评——以江苏省高校为例[J].图书情报工作，2009，23：77-80，60.

[5] 仲惠圣.浅谈高校门户网站建设的规范标准[J].中国教育信息化，2009，23：54-56.