摘要：高校门户网站的页面样式主要可以概括为“简约式”、“图片式”和“俱全式”三大类。不同的网站页面样式，具有不同的特征、特点，需要网站设计者根据网站设计要求灵活选择和运用。设置“分角色浏览”、“Banner图说”和“自适应网页设计”，是优秀高校门户网站页面样式的特色功能设计，也是其页面样式设计的亮点之处和成功所在。
关键词：高校门户网站；页面样式设计；分角色浏览；Banner图说
Abstract： In the portal sites of universities， page style design can be summarized as three styles “simple ”， “picture” and “mixture”. Different page style design owns different feature and characteristic. Setting “browsing in roles ”、“banner of picture speaking” and “responsive web design” is not only the feature of outstanding page style design in the portal sites of universities， but also the highlight and the success of the page style.
Key words： Portal Sites of Universities； Page Style Design； Browsing in Roles； Banner of Picture Speaking
“高校门户网站”通常被称为高校的网上“门面”或“名片”。它既是高校对外宣传或展示自己“办学实力、办学水平、服务能力”的重要窗口，又是高校服务师生的基础信息平台，也是高校传递大学文化的有效载体。因此，创建优秀的门户网站是高校进行信息化建设和大学文化建设的重要内容。其中，网站的页面样式设计起关键性作用。
1 综述
我们知道，一个网站的主页面通常由Logo、导航、Banner、内容、链接、版权这六部分元素组成。网站设计者通常会根据网站的总体规划设计要求，对这六部分组成元素进行版面设计和位置定位，其最终呈现的视觉效果也不尽相同。
有研究认为，网页布局包括传统“T”型布局、上下对照式布局、“上中下”“三”字布局、左右对称型布局、“回”字形布局、文字型布局、氛围式布局、“杂物箱”布局、“人物风格化”布局、封面型布局、简约型布局、综合型布局和瀑布流式布局，[1]这是基于对网页结构“形式”的划分。
通过对国内近1400所高校网站进行页面样式的归纳分析，对其存在的共性特点和个性特色进行概括研究，笔者认为，高校门户网站的页面样式主要可以概括为“简约式”、“图片式”和“俱全式”这三大类。每一类型的页面样式都具有统一的构成元素，但彼此间又有自己独特的布局特点，因而呈现出不同的网站视觉效果和网页设计风格。
2 页面样式的分类特征
1）“简约式”
“简约式”的特征是布局简洁精炼、页面主体“一屏显示”。
“一屏显示”是指在主流显示分辨率①下，网站浏览者不再需要上下、左右的拖动鼠标，即可实现页面主要内容的相对完整的浏览效果。这样做可以使网站浏览者对于网站传递的整体信息一目了然，既缩短了浏览时间，又增强了传达效果。对此，要求网站设计者要做到导航分类科学严谨，栏目设置标准规范，布局结构简洁精炼。
“简约式”的代表为“北京理工大学”网站和“内蒙古师范大学”网站。“北京理工大学”网站的页面布局完全按照网站组成六元素的排列顺序进行设计，Banner部分图片的分辨率（2000*376 pixels）适应主流显示分辨率下满屏显示的要求，图片贯穿显示器的左右两端，具有通栏显示的效果。而“内蒙古师范大学”网站的页面布局将Banner部分包含于内容部分，图片面积相对较小，与文字新闻内容版块左右平行排列，位置下边沿暗合对齐，构成内容部分的完整一栏，使页面布局结构更显紧凑。
2）“图片式”
“图片式”的特征是布局简洁明晰、页面图片感强烈。
图片是文字以外最早引入到网络中的多媒体对象，它传达信息的直观性与寓意性远远超过文字，而且图片的引入也大大美化了网络页面。[2]随着网络带宽提升和网络速度加快，超大图片的应用成为网页设计的趋势之一。把照片用作网站的背景，这样可以让网站页面形成强烈的视觉效果，大号图片的应用也是简洁设计的一种体现，清晰而明确的图片内容能够让网站诉求更加明确。[3]
3）“俱全式” “俱全式”的特征是布局规整秩序、版块众多、“多屏显示”。
“俱全式”的代表为“清华大学”网站和“青岛滨海学院”网站。“清华大学”网站页面的六部分组成元素，区间划分明确，布局结构清晰，信息传达直观，视觉呈现形式感极强。内容部分众多的信息版块按照通栏分列样式进行布局设计，结构样式极其简洁，除却正文文字、配发图片以及起分割作用的单色线条，再无其他外设图标。只以字体的大小对标题文字与正文内容加以区分，区别于以往栏目图标的复杂显示效果，具有“扁平化”的设计特点。纵观整个页面布局，留白空间处理得当，含蓄蕴藉，格调高雅。“青岛滨海学院”网站的突出特点是页面营造出的良好秩序感，其组成元素之间，既错落有致，又和谐统一，画面紧凑而饱满。虽然内容版块数量众多且版块内信息含量大，但网站设计者讲求页面空间秩序的有效利用和合理划分，空间留白发挥效用突出，所以版块间或版块内并不存在元素抵触或视觉拥挤。
3 页面样式的特色功能
不同分类的页面样式除去明显的区分特征，还具有一些特色功能设计，主要包括“分角色浏览”、“Banner图说”、“自适应网页设计”等。
1）“分角色浏览”
“分角色浏览”是指网站设计者主观上假定网站浏览者为在读学生、教职员工、考生、校友、访客以及“粉丝”等不同角色，再按照不同角色的浏览需求，对网站综合信息进行分类和聚合，来方便不同网站浏览者的访问行为。有研究认为，如果网页能够创造一种温暖的、与人接触的感觉，那么网页就能够建立一种与用户的心理连接。[4]“分角色浏览”正是网站设计者以个性化、人性化设计来提升网站浏览者对网站的体验好感度、黏度的重要举措。
2）“Banner图说”
“Banner图说”功能可以看做是Banner②在高校门户网站中“广告”效果的实现和扩展。Banner在高校门户网站的页面设计中，大多以校园的风景图片或人像图片出现，只是起到单一的画面装饰作用，而欠缺其“广而告之”的宣传效果。《设计的法则》中提到：要增加人们的辨识力，让人回想起重要信息，就可以利用“图片优势效应”。用图片加上文字，并且确认两者强调的是同一信息，以便达到最佳效果。[5]有鉴于此，网站设计者将“Banner”作为一个专题栏目进行使用，充分利用其“图说”功能，将学校教学、科研和生活的不同主题内容以图文并茂的方式贯穿其中，在实现其突出视觉装饰功能的同时，也发挥其强化信息传达效果的作用。
“清华大学”网站Banner部分设计成为“清华映像”专题，以精美图片配合精炼文字的方式向关注清华大学的网络用户和社会大众介绍清华大学在教学、科研、社会服务等方面的成就及师生生活中的亮点。它以日（月）历标签的形式呈现多个主题图片，并辅以简洁文案作为内容标题或图片说明，网站浏览者进行点选后可阅读此主题图片的专题采写文字，从而完成整个信息内容的传递。Banner标签包含的图文内容，更新速率频繁，网站浏览者可以根据时间进行自主选择，又使它具有了“年鉴”功能的展示效果。“清华映像”专题的设立和运用，是“清华大学”网站页面样式设计的显著特点，是 “Banner图说”功能在页面样式设计中的精彩应用，做到了“以图引人，以文感人”，实现了“黄金位置”的“黄金”应用。
3）“自适应网页设计”
现今，网络使用环境复杂而多变，除去传统意义上的台式机和笔记本电脑，又有了智能手机、平板电脑、智能电视等各类浏览器终端。浏览者对于网络阅读具有方便、快捷和舒适的要求，如何将日新月异的网络技术应用于高校门户网站，使网站浏览者在各类浏览器终端上，尽可能获得良好的用户体验，是网站设计者思考和努力的方向。
鉴于智能手机和平板电脑等移动浏览器终端的普及，一些高校门户网站，利用先进网络技术，创新设计页面样式，来适应和满足各类移动终端的浏览需求。以“清华大学”网站为例，网站采用“自适应网页设计”③（Responsive Web Design）技术，可以侦测不同类型的浏览器终端的屏幕宽度，自动调整页面布局结构，提供相对应的样式、内容、功能和交互方式，使网络浏览者获得最优化的页面视觉效果。
除去“自适应网页设计”，设计开发“独立手机版（App Store）”和“网页触屏版”，也能适应各类浏览器终端的显示要求。
4 结语
优秀高校门户网站是信息技术和大学文化在网络媒介平台的融合与呈现，网站设计者切不可一味“炫”技，抛弃文化，丢失特色，“陷”于模仿；要做到内容为主，用户至上，融古铄今，“意”新“形”美。设计者应对网站设计进行系统把握，对其页面样式进行规律探析，形成更多系统化、理论化的设计经验和技巧，以此指导设计实践活动，收获成功作品。
注释：
② Banner可以作为网站页面的横幅广告（又称为“网幅广告”、“旗帜广告”等），是网络广告的主要形式。一般使用GIF格式的图像文件，可以使用静态图形， 也可用多帧图像拼接为动画图像，位于网页顶部、中部、底部任意一处，是横向贯穿整个或者大半个页面的广告条
③ 2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计
参考文献：
[2]董海斌，王丽梅，孙浩章.网页界面设计中的平面视觉元素[J].包装工程，2010（4）：89-91.
[3]林欢，谭浩，赵江洪.图片优势效应在网页设计中的应用[J].包装工程，2014（18）：13-16.
[4]姚海娟.基于眼动记录技术的网页视觉吸引力研究[J].包装工程，2013（10）：4-6.
