高职院校门户网站界面设计理念与技巧

周书林

摘 要：高职院校门户网站是高职院校信息化建设的窗口，优质的门户网站界面设计能提升学院的品牌价值，树立良好的社会形象。文章以南通航运职业技术学院网站界面设计为例，分析和论述了高职院校门户网站界面设计时应考虑的理念与技巧。

关键词：高职院校；网站；界面设计；理念；技巧

在当今这个数据化信息需求日益增长的时代，大部分人获得信息的主要来源是互联网。无论个人或是企事业单位、组织的发展，信息的发布交流等，同样大部分是通过互联网来实现的。互联网的普及应用，也让高职院校门户网站日渐成为高职院校日常信息管理和信息交换最重要的平台之一。高职院校门户网站是高职院校信息化建设的窗口，它由多媒体元素组成，以网络传播的方式展示高职院校的信息资源，它带动了高职院校的信息化建设持续深入推进。而内容丰富、条理清晰、使用便捷、赏心悦目的门户网站界面设计则迅速扩大学院的影响力，提升学院的品牌价值。因此，在这个信息化时代，高职院校树立良好的社会形象，加强门户网站界面的设计与规划显得非常重要。南通航运职业技术学院（以下简称“学院”）是一所立足交通，围绕水上运输产业链设置专业，办学特色鲜明的全日制高等职业院校，下面笔者就自己在学院门户网站界面设计中的实际操作体会，来谈谈高职院校门户网站界面设计时应考虑的理念与技巧，以期能给其他院校带来一定的借鉴作用。

1 高职院校门户网站设计的必要性

在这个高度信息化社会，高职院校门户网站是最能宣传学院文化、塑造良好学院形象的一种手段，让外界深入了解学院，传播具有鲜明特色、个性突出的学院品牌。高职院校门户网站可以营造一个共同讨论、共同分享的环境，加强教师与学生之间的交流。丰富的网络资源，提供给学生一个先进的学习平台，增添学生对学习资源获取的浓厚兴趣，充分发挥自己的内在潜力。高职院校门户网站成就最佳的教学研究室，学院网站与教育类专门网站的有效链接，给学院教学研究带来一片新天地，各种优秀教案、专家论坛、网络观摩课、各科素材、多媒体课件制作等内容为教师教研提供了极佳的平台，有效地降低教研成本、提高效率。综上所述，高职院校门户网站的建设与设计是十分必要的。

2 前期网站功能策划与设计定位

网页良好的视觉展示，能向浏览者充分展示个人或企事业单位、组织自身的个性特征和企业文化。进行个性化的网页设计，首先必须了解自己要做网站的内容，只有抓住网站内容的个性化特征并且视觉化，然后从网页的界面、导航条、交互方式、文字、图片、色彩、声音、视频等元素入手，才能设计出精彩且个性化的网页。高职院校门户网站的前期网站功能策划与设计定位，需要根据高职院校的办学特色与理念、网页的服务对象、提供人性化的服务（便捷性）等方面进行综合分析，在目标明确的基础上，完成网站的构思创意即总体设计方案，对网站的整体风格和特色做出定位，规划网站的组织结构，制作出栏目结构关系图等。门户网站的整体设计风格要符合学院的整体对外形象，结合我院实际情况，学院网站首页设计的重点将突出功能性和使用便捷性，重新设置了网站结构，完备相关使用功能。在设计过程中，严格遵循四个网页排版原则，即：对比、对齐、重复和亲密性进行设计。

3 网页的个性化设计

高职院校门户网站界面设计思路要遵循简洁实用、使用便捷、整体性强、网站形象突出等方面进行。在网络的特殊环境下，尽量以高效方式将用户所想要得到的信息传送，去掉所有冗余的信息。在满足使用者的要求下，网页做得越适合使用，就越能显示出其功能美。网站设计最终强调的是一个整体，只有围绕一个统一目标所做的设计才是成功的。[1]当然，网页艺术设计绝不仅仅是对网站中界面各构成要素的简单叠加，它还需要设计师从艺术构成和欣赏角度把各个要素有机结合起来，这其中包含了文字、图形图像、色彩、版式等等，协调好形、声、色、动画以及音频等诸多元素之间的微妙组合关系，使之达到浑然一体的结合。高职院校门户网站界面以页面精美化设计为目标，使用PS、AI等设计软件进行设计深化。

3.1 统一的界面风格

目前，网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。根据设计网页的目的不同，应选择不同的网页界面设计。高职院校门户网站属于信息型网站设计，需要采用浏览导向清晰的网页界面，使得电脑终端的浏览者看到一个完整的页面。网页界面设计作为一种视觉语言，首先讲究的是页面布局，布局是以最适合浏览的方式将图片和文字排放在网页的不同位置，以求最佳视域。网页布局大致可分为“国”字形、拐角型、标题正文型、左右框架型、上下框架型、综合框架型等多种布局方法。选择哪种布局类型需要具体问题具体分析，要从网站内容、页面结构和表现形式等多方面进行综合考虑。

根据我院的综合情况，门户网站首页总体结构布局采用的是采用上、下、左、右结合的综合型框架，再结合F1ash、GIF动画，使页面形式更加多样，视觉冲击力更强。上部是学院基本信息区，主要包括学院名称及标志、校训（中英文）、搜索栏、设为首页栏等。中部是学院展示区，主要包括大幅面的学院形象图片（校园风景/各类重大活动图片等进行动态切换）、导航栏、临时公告信息栏。下部则为主要功能区，采用左、中、右的布局，其中左边是新闻图片展示（动态切换）和校内导航，中间为学院新闻、公告浏览，右边则是快速登录、专题网站（动态切换）、友情链接等功能栏目。整齐划一的界面风格，图文结合的疏密位置关系所产生的空间层次富有弹性，给人以简洁大气的视觉效果。

网络资源的优势之一是多媒体功能，要吸引浏览者注意力，网页的内容可以充分调动Gif、FLASH等动态图像来表现。在我院网站首页界面设计中，中部学院展示区、新闻图片展示区等局部区域采用大幅面的学院风景、新闻图片进行动态循环切换，这样既可以多角度呈现丰富的学院信息，也可以吸引浏览者注意力。endprint

3.2 合理的色彩搭配

色彩是艺术设计中重要的视觉元素之一，好的色彩搭配能够给人以强烈的艺术感染力和视觉冲击力，会给用户留下深刻的印象。[2]在网页色彩设计中，要充分利用色相、纯度、明度、远近、冷暖等对比关系丰富网页的视觉效果，设计中首先要确定该网页的主色调及辅助色，以及文字、配图的色彩效果。为了做到主题鲜明突出、要点明确，应该使配色和图片应围绕预定的主题，调动一切手段充分表现门户网站的个性和情趣，办出门户网站的特点。

南通航运职业技术学院是一所立足交通，围绕水上运输产业链设置专业，办学特色鲜明的全日制高等职业院校，在其门户网站的色彩搭配设计中充分考虑学院的办学特色、形象定位、网站访问用户的文化背景、视觉显示终端对网站界面色彩呈现的影响等方面因素，最终网站界面主体色采用大面积的海洋蓝与点缀其中的高雅灰进行穿插搭配。蓝色象征着大海，也象征着知识、逻辑、一切的客观存在的精神，象征了理想、梦想、未来这些令人憧憬的事物，与学院的办学理念及特色不谋而合。灰色，在色彩学上属于中间色，意即是既非暖色又非冷色，而是介于二者之间的色调。灰色象征着理性、智慧、诚恳、沉稳，是一种稳重而高雅的色彩，对于中间色来说，在色彩搭配上可以跟任何一种颜色进行搭配。在学院门户网站界面设计中，大面积海洋蓝与高雅灰的色彩搭配，穿插大小不一的彩色动态新闻图片，整体界面在视觉显示终端能呈现出稳重而不单一的色调。

3.3 便捷的操作浏览

高职院校门户网站界面的设计，应尽量将更多丰富的学院信息资源及相关内容展现给浏览者，方便浏览者使用。因此，浏览者进入界面之后，应保证界面导向清晰明确、交互式强、快速下载时间等设计因素，使其过程操作简单，方便易读。

网站的界面设计发挥网络的优势，让每个使用者都参与到其中来，体现其强大的交互性，这样的设计才能算成功的设计。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。因此，建议在高职院校门户网站界面的设计中尽量避免使用过多的图片及体积过大的图片，主要页面的容量应确保普通浏览者页面等待时间不超过10秒以保证其快速地下载时间。非图形的内容在必要时适当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。

4 网页的后期推广、更新、安全与维护

高职院校门户网站界面的设计制作好启用后，需及时跟踪所有使用者，收集其使用反馈意见，及时进行页面设计调整，以达到最优效果。因为网页制作需要时时更新，而维护更新的工作更需要专人专做，要及时更新信息，并把网页上已经作废的链接及时删除。

5 结语

优质的高职院校门户网站界面设计，是各高校的一张无声名片，更是提高教学管理、网络化服务，院内外各系部适应教育信息化发展趋势的必然途径。紧紧抓住各高职院校的办学特色与理念、网页的服务对象等方面因素，设计出符合当代浏览者审美和实用功能需求的优质界面，为使用者提供便利服务，以此提升学院品牌形象，实现信息服务的可持续发展。

参考文献：

[1] 周畅.高校门户网站界面设计视觉形象优化研究[D].合肥工业大学，2013.

[2] 岳俊杰.浅析网页色彩设计的原则与方法[J].改革与开发，2010（12）.endprint

3.2 合理的色彩搭配

色彩是艺术设计中重要的视觉元素之一，好的色彩搭配能够给人以强烈的艺术感染力和视觉冲击力，会给用户留下深刻的印象。[2]在网页色彩设计中，要充分利用色相、纯度、明度、远近、冷暖等对比关系丰富网页的视觉效果，设计中首先要确定该网页的主色调及辅助色，以及文字、配图的色彩效果。为了做到主题鲜明突出、要点明确，应该使配色和图片应围绕预定的主题，调动一切手段充分表现门户网站的个性和情趣，办出门户网站的特点。

南通航运职业技术学院是一所立足交通，围绕水上运输产业链设置专业，办学特色鲜明的全日制高等职业院校，在其门户网站的色彩搭配设计中充分考虑学院的办学特色、形象定位、网站访问用户的文化背景、视觉显示终端对网站界面色彩呈现的影响等方面因素，最终网站界面主体色采用大面积的海洋蓝与点缀其中的高雅灰进行穿插搭配。蓝色象征着大海，也象征着知识、逻辑、一切的客观存在的精神，象征了理想、梦想、未来这些令人憧憬的事物，与学院的办学理念及特色不谋而合。灰色，在色彩学上属于中间色，意即是既非暖色又非冷色，而是介于二者之间的色调。灰色象征着理性、智慧、诚恳、沉稳，是一种稳重而高雅的色彩，对于中间色来说，在色彩搭配上可以跟任何一种颜色进行搭配。在学院门户网站界面设计中，大面积海洋蓝与高雅灰的色彩搭配，穿插大小不一的彩色动态新闻图片，整体界面在视觉显示终端能呈现出稳重而不单一的色调。

3.3 便捷的操作浏览

高职院校门户网站界面的设计，应尽量将更多丰富的学院信息资源及相关内容展现给浏览者，方便浏览者使用。因此，浏览者进入界面之后，应保证界面导向清晰明确、交互式强、快速下载时间等设计因素，使其过程操作简单，方便易读。

网站的界面设计发挥网络的优势，让每个使用者都参与到其中来，体现其强大的交互性，这样的设计才能算成功的设计。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。因此，建议在高职院校门户网站界面的设计中尽量避免使用过多的图片及体积过大的图片，主要页面的容量应确保普通浏览者页面等待时间不超过10秒以保证其快速地下载时间。非图形的内容在必要时适当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。

4 网页的后期推广、更新、安全与维护

高职院校门户网站界面的设计制作好启用后，需及时跟踪所有使用者，收集其使用反馈意见，及时进行页面设计调整，以达到最优效果。因为网页制作需要时时更新，而维护更新的工作更需要专人专做，要及时更新信息，并把网页上已经作废的链接及时删除。

5 结语

优质的高职院校门户网站界面设计，是各高校的一张无声名片，更是提高教学管理、网络化服务，院内外各系部适应教育信息化发展趋势的必然途径。紧紧抓住各高职院校的办学特色与理念、网页的服务对象等方面因素，设计出符合当代浏览者审美和实用功能需求的优质界面，为使用者提供便利服务，以此提升学院品牌形象，实现信息服务的可持续发展。

参考文献：

[1] 周畅.高校门户网站界面设计视觉形象优化研究[D].合肥工业大学，2013.

[2] 岳俊杰.浅析网页色彩设计的原则与方法[J].改革与开发，2010（12）.endprint

3.2 合理的色彩搭配

色彩是艺术设计中重要的视觉元素之一，好的色彩搭配能够给人以强烈的艺术感染力和视觉冲击力，会给用户留下深刻的印象。[2]在网页色彩设计中，要充分利用色相、纯度、明度、远近、冷暖等对比关系丰富网页的视觉效果，设计中首先要确定该网页的主色调及辅助色，以及文字、配图的色彩效果。为了做到主题鲜明突出、要点明确，应该使配色和图片应围绕预定的主题，调动一切手段充分表现门户网站的个性和情趣，办出门户网站的特点。

南通航运职业技术学院是一所立足交通，围绕水上运输产业链设置专业，办学特色鲜明的全日制高等职业院校，在其门户网站的色彩搭配设计中充分考虑学院的办学特色、形象定位、网站访问用户的文化背景、视觉显示终端对网站界面色彩呈现的影响等方面因素，最终网站界面主体色采用大面积的海洋蓝与点缀其中的高雅灰进行穿插搭配。蓝色象征着大海，也象征着知识、逻辑、一切的客观存在的精神，象征了理想、梦想、未来这些令人憧憬的事物，与学院的办学理念及特色不谋而合。灰色，在色彩学上属于中间色，意即是既非暖色又非冷色，而是介于二者之间的色调。灰色象征着理性、智慧、诚恳、沉稳，是一种稳重而高雅的色彩，对于中间色来说，在色彩搭配上可以跟任何一种颜色进行搭配。在学院门户网站界面设计中，大面积海洋蓝与高雅灰的色彩搭配，穿插大小不一的彩色动态新闻图片，整体界面在视觉显示终端能呈现出稳重而不单一的色调。

3.3 便捷的操作浏览

高职院校门户网站界面的设计，应尽量将更多丰富的学院信息资源及相关内容展现给浏览者，方便浏览者使用。因此，浏览者进入界面之后，应保证界面导向清晰明确、交互式强、快速下载时间等设计因素，使其过程操作简单，方便易读。

网站的界面设计发挥网络的优势，让每个使用者都参与到其中来，体现其强大的交互性，这样的设计才能算成功的设计。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。因此，建议在高职院校门户网站界面的设计中尽量避免使用过多的图片及体积过大的图片，主要页面的容量应确保普通浏览者页面等待时间不超过10秒以保证其快速地下载时间。非图形的内容在必要时适当使用动态“Gif”图片，为减少动画容量，应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。

4 网页的后期推广、更新、安全与维护

高职院校门户网站界面的设计制作好启用后，需及时跟踪所有使用者，收集其使用反馈意见，及时进行页面设计调整，以达到最优效果。因为网页制作需要时时更新，而维护更新的工作更需要专人专做，要及时更新信息，并把网页上已经作废的链接及时删除。

5 结语

优质的高职院校门户网站界面设计，是各高校的一张无声名片，更是提高教学管理、网络化服务，院内外各系部适应教育信息化发展趋势的必然途径。紧紧抓住各高职院校的办学特色与理念、网页的服务对象等方面因素，设计出符合当代浏览者审美和实用功能需求的优质界面，为使用者提供便利服务，以此提升学院品牌形象，实现信息服务的可持续发展。

参考文献：

[1] 周畅.高校门户网站界面设计视觉形象优化研究[D].合肥工业大学，2013.

[2] 岳俊杰.浅析网页色彩设计的原则与方法[J].改革与开发，2010（12）.endprint