高校门户网站Banner的设计应用研究

祝晓铭，王艳平

（1.山东理工大学，淄博　255049；2.山东省淄博第十七中学，淄博　255033）

高校门户网站Banner的设计应用研究

祝晓铭1，王艳平2

（1.山东理工大学，淄博255049；2.山东省淄博第十七中学，淄博255033）

0　引言

Banner部分（以下简称Banner）是高校门户网站主页面中所占比重最大的图片元素。图片是一种参与深层语义过程的信息，人们在一个清晰的视觉回忆任务中，对文字和图片的信息记忆是不同的，人们更倾向于记忆图片信息［1］。

很多高校把有关于校园风景、人像的图片直接运用在Banner以作页面装饰，形成网站视觉展示效果单一、内容诉说信息缺乏的弊端。如何在高校门户网站主页面的视觉主体位置，创新运用Banner“广而告之”的宣传功能，使之成为新的视觉信息传播焦点，是网站设计者对于Banner进行设计应用研究的新课题。

1　分析和启示

《设计的法则》中提到：“用图像优势效应来提高对关键信息的认知和记忆。用图像和文字的结合来确保对关键信息的强化，已获得最佳效果［2］。有鉴于此，少数高校门户网站对主页面的Banner设计进行了改进和创新行为，赋予了Banner新型的“图说”功能。以“清华映像”为例——栏目以大幅图片配合精炼文字的方式向关注清华大学的网络用户和社会大众介绍清华大学在教学、科研、社会服务等方面的成就及师生生活中的亮点［3］。

通过研究可以看出，“清华映像”将主页面Banner作为一个专门的“图文”专题进行应用，充分发挥其“图说”功能，将学校各方面的图片素材，配以简练精彩的标题文案，或辅以一定程度上的平面图形创意，设计出兼具信息传递和广告展示的精美图片。充满视觉张力的图片极易引起受众的注意力和浏览兴趣，刺激受众主动点击、阅读图片链接指引的主题采写信息，完成了前端图片展示和后端信息读取组成地完整的内容传递过程。

2　方式和方法研究

2.1主题的确立

Banner作为图文专题使用后，在前期选材和后期设计方面，要有明确的主题性。只有做到主题鲜明突出，一目了然，才能达到页面设计的最终目标。而主题鲜明突出，是设计思想的最佳体现［4］。具体来讲，Banner不只要起到页面装饰作用，也需要发挥更多的信息传递功能。因此，要优先选取那些包含更多内容性和叙事性的图片素材进行使用。同时，在进行设计深加工的过程中，也要围绕采写信息的内容进行创意，力求深扣主题，避免盲目炫技。

主题是Banner设计的灵魂，一定要表达出明确的主题诉求。在其素材的选取上，可重点围绕以下方面进行选择。

（1）教学和科研

教学和科研是高校最基本的两项职能，其信息受到校内师生和社会大众的普遍关注。Banner设计的主题来源可以包括学校的课堂教学、实习实训、名师访谈、专家报告、机构简介、项目动态、获奖作品等诸多方面。

（2）大学文化

大学文化的本体功能是育人，其在不同精神、制度、行为、环境间的文化显现是大学之间相互区别的重要标志和特征。Banner设计的主题来源也可以包括学校的校史档案、名人名家、模范师生、诚信教育、职业操守、文体活动、团队风采等诸多方面。

（3）社会服务

社会服务是人才培养和科学研究以外的高校的又一基本职能，在开放性办学的环境要求下，及时展现科学技术发展作用于经济社会进步的推动力和影响力，是高校不容推辞的历史使命和社会责任。Banner设计的主题来源还可以包括学校的服务地方、校企合作、成果转化、帮扶支教、社会实践等诸多方面。

（4）其他主题

国家规定的节假日、纪念日和重要节气，特别是对于学校发展具有特殊纪念意义的时间节点，都可以作为Banner设计的主题来源。

在主题确立方面，要把主题与内容加以深层次的联想，然后通过具体的形象符号表达出网页丰富的感情色彩，最后运用视觉审美体系的各构成元素，把技巧和情感与各种视觉符号融为一体，转化为生动精彩的网页视觉形象［5］。网站设计者不必固执拘泥于条条框框的限制，而应灵活机动、系统规划，力求把与学校和师生密切相关地积极的信息源加以整合推送，形成信息发布专题，广泛传递网络“正能量”。

2.2形式的划分

对于Banner形式的划分，主要取决于其信息源的采集数量和更新时效。具体来讲，一般高等院校和著名高等院校在办学历史、科研教学、文化建设、服务地方等方面存在着明显的情况差异，信息供给来源与数量的稀少，直接影响了Banner“图说”功能的发挥。同时，不同高校间对于信息化建设的认知水平和从事信息化工作人员的技术水平，也直接影响着高校门户网站的建设水平。

基于此项实际，目前Banner的表现形式主要可以分为“时间轴”效果下的静态单幅图片展示和固定秒数切换效果下的动态多幅图片展示。

（1）“时间轴”效果下的静态单幅图片展示

此类展示效果Banner为静态单幅图片，其特点是Banner只有一幅图片，但其日间更新速率快，使其网站主页面具备了“日日新”的展示效果；同时，其以日（月）历标签的形式可以呈现固定时间段内的多个主题图片信息，又使其具备了类似“年鉴”功能的展示效果。具备此类Banner展示效果的高校门户网站数量极少，代表即为清华主页的“清华映像”栏目，其精美的视觉展示效果和丰富的信息传达效果，是Banner“图说”功能运用的典型成功案例。“清华映像”专业的运维团队和完善规范的运维机制，则为其成功提供了完备的支撑保障。

（2）固定秒数切换效果下的动态多幅图片展示

此类展示效果Banner为动态多幅图片，其特点是Banner包含多幅图片，图片间依据JS语句控制下的时间参数，进行不同动画效果的动态切换。这种运用，可以使Banner形成一个信息集群，对学校一定时期内的多个来源信息进行集中展示，丰富了主页展示效果，扩大了信息传递数量。目前绝大多数具备“图说”功能的高校门户网站主页面的Banner都是此类展示效果，即是方便了受众在信息源展示方面进行自主多选，彰显了网站的人性化设计；也是减小了一些高校由于Banner信息来源的限制，造成的主题数量稀少和更新停滞带来的负面影响。Banner采取动态多幅图片展示效果，应注意控制图片的数量，以三至五幅为佳，太多则易造成受众的视觉混乱；还应综合平衡整个网站主页面的JS动态图像的使用数量和面积大小，因为其它JS动态图像太多或太大都会和Banner造成视觉抵触，影响受众的观感。

2.3设计的技巧

网站设计者进行Banner设计应当遵循平面设计的形式美法则，既要注重画面元素间的和谐，在对比中求得统一；也要讲求Banner视觉重心的塑造，同时又不破环画面的均衡比例；还要营造画面的主题氛围和联想意境，以充满节奏和韵律的构造实现Banner的“图说”功能。

（1）关于整体设计观的运用

网站设计者要以整体设计的观念做指导，明确Banner是作为主页面的个体元素存在，避免“跳出整体做局部”的孤立设计效果出现。具体来讲，Banner仍然要放在网站首页面的效果图中进行设计。出于对文件质量大小影响软件操作速度的考虑，可以将主页效果图做好备份后，把其它图层做合并处理；分切Banner的上部（一般为Logo和导航部分）和下部（一般为内容部分）为单一图层；然后以Banner作为中间图层区域，方便时刻观察其在整个主页面中的构成关系和色彩关系；对于Banner的画面组成元素，其大小、位置和色彩关系的确定，都要做到双向兼顾，同时服务和满足Banner与主页面的视觉效果。

（2）关于图片元素的使用

网站设计者要以如何充分展现Banner的主题，作为选择和使用各种图片素材进行设计的首要依据。通常情况下，可分为两种情况加以不同的设计处理。

一种情况是Banner所用素材为人像、风景 （风光）、场景（实景）等图片，以选取高质量（高分辨率）的兼具视觉美感和影响力的图片（照片）文件为先，这样可以方便裁剪图片的适当部分进行应用。此类应用不需要进行复杂、特殊的图片效果设计，可以利用简单基础的调图软件（例如美图秀秀等）进行图片修饰，调整其色彩、明度和饱和度，使之与主页面色调融合后即可应用。

另一种情况则是根据Banner的主题进行图片设计。网站设计者依据如何表现主题来构思Banner的创意效果和设计风格，并围绕于此寻找相应素材，然后利用Photoshop等专业制图软件对各项素材进行图片设计。在此过程中，要注意利用平面设计的规律与技巧，将最能够表达主题创意的主体素材应用在画面布局的重心位置，借以构建视觉焦点；要平衡其它素材和主体素材之间的各种比例关系和虚实关系，使用蒙版技术处理好各项素材之间合理有序的图层衔接；要通过色相、明度、饱和度、透叠模式和透明度的变化调整，促使风格和色系不同的素材趋于统一融合。

需要注意的是，文字是信息的主要载体和表达手段，具有思维向导和图形表意的作用［6］。作为Banner中的一项重要元素，网站设计者应根据不同的图片主题、画面氛围和设计风格来选取和使用不同的字体。

3　结语

网站设计者应广泛扩大Banner的信息采集来源，系统规划和构建Banner的主题内容，精心创意和设计Banner的图片形象，使之以强大的视觉展示效果和信息传达功能，成为高校门户网站主页面中的传播焦点和典型应用。

［1］［2］林欢，谭浩，赵江洪.图片优势效应在网页设计中的应用［J］.包装工程，2014，9：13-16.

［3］清华大学.清华映像介绍［EB/OL］.http://www.tsinghua.edu.cn/publish/newthu/9362/index.html.

［4］严晨.网页设计中的功能性与艺术性关系研究［J］.科技与出版.2011，6：59.

［5］章望圆，唐姣.插画艺术在网页设计中的运用［J］.作家，2012，10：247.

［6］王萍.浅谈中国元素在当代网页设计中的应用［J］.中国美术，2014，1：127.

College Portal Site；Homepage Design；Banner Theme；Picture Design

Research on Banner Design and Application in College Portal Site

ZHU Xiao-ming1，WANG Yan-ping2
（1.Shandong University of Technology，Zibo Shandong 255049；2.Shandong Zibo Seventeenth Middle School，Zibo 255033）

1007-1423（2015）33-0034-04

10.3969/j.issn.1007-1423.2015.33.010

祝晓铭（1977-），男，山东青州人，硕士，工程师，研究方向为计算机网络和网站建设

2015-11-10

2015-11-20

高校门户网站主页面Banner设计的关键在于主题的确立，Banner图片设计一定要表达出明确的主题诉求。网站设计者应着重围绕教学与科研、大学文化、社会服务等方面来规划和构建Banner的主题；要根据Banner的主题内容确定其表现形式和创意风格；要依据整体设计的观念对不同类别的主题素材进行统一融合的艺术化处理。Banner是高校门户网站主页面新的视觉信息传播焦点，是集聚视觉展示效果和信息传达功能的典型应用。

高校门户网站；主页设计；Banner主题；图片设计

王艳平（1977-），女，山东青州人，教师，从事领域为艺术教育

The key to the homepage Banner design in college portal site is the establishment of a theme.Banner picture design must be able to express explicit themes.Website designers should plan and construct Banner themes emphatically on teaching and science research，college culture，social service，etc.The displaying form and creative style should match Banner's subject matter.Materials of different themes should be integrated and dealt with artistically.Banner is a focus of new visual information transfer on the homepage of college portal site，as well as a typical application with functions of displaying visual effects and conveying information.