用户体验视角下的高校门户网站再设计研究

孙 荣，王 菊

（1.江苏师范大学，江苏徐州221116；2.江苏省徐州财经高等职业技术学校，江苏徐州221008）

用户体验视角下的高校门户网站再设计研究

孙 荣1，王 菊2

（1.江苏师范大学，江苏徐州221116；2.江苏省徐州财经高等职业技术学校，江苏徐州221008）

文章通过调查与分析，将影响当前高校门户网站用户体验的要素归纳为用户身份类别多样、终端浏览环境复杂、视觉界面同质化、导航形式单一等四个方面，并以这四个要素为切入点，提出改善高校门户网站用户体验的有效策略。

用户体验；高校门户网站；响应式Web

高校门户网站，也称为高校官方网站，是高校品牌战略、文化战略天然的网络载体。一个设计优秀，有着优良用户体验的门户网站，将有助于高校品牌形象的推广，有助于高校软实力的提升。本文将从用户体验视角出发，分析当前影响高校门户网站用户体验的要素，为高校门户网站重新设计过程中如何改善用户体验、提升网站品质、策应学校的发展战略，提供有益的思路。

一、用户体验设计与网站

用户体验（User Experience，简称UX/UE）是上世纪90年代中期由唐纳德·诺曼提出的概念，指用户在使用产品或接受服务过程中的纯主观感受，涉及到通过产品和服务提供给用户的理性价值和感性体验[1]。用户体验设计是一个范围很广的跨学科交叉概念，涉及到心理学、社会学、计算机科学、人体工程学、美学等多个领域[2]。简而言之，用户体验设计是终极一切技术的、艺术的手段，以用户为中心的设计。

网站是一种提供特定服务的互联网产品，用户体验对于网站比其他任何产品更为重要，因为网站是一个没有说明书庞大的信息系统。现在用户体验设计贯穿整个互联网产品开发流程——从品牌定位到用户研究，从内容需求到信息架构，从交互设计到视觉设计，设计师们需要模拟用户的使用环境、揣摩用户的使用心理，不断调整与完善产品的开发，力求为用户提供超出预期的完美体验[3]。

二、影响高校门户网站用户体验的要素

用户体验是诸多特定要素的集合体。笔者通过对国内诸多高校门户网站的访问与调查，认为目前影响高校门户网站用户体验的要素主要可归结为以下四个方面。

高校门户网站用户的身份类别多样，且所关注的内容也不一样。经过分析，我们将用户类型及其关注的栏目进行归纳，如图1所示。很明显，不同类型用户所关注的内容虽有交叉但没有完全重合，网站上存在着许多与用户无关的内容。试想用户经过重重的选择与过滤，才能找到所需信息，那么这样的访问体验必定是平淡的，缺少归属感的。

图1 高校门户网站的用户类型及其需求示意图

近几年，终端的浏览环境变得越发复杂，成为影响高校门户网站用户体验的重要因素之一。现在终端屏幕分辨率从1920×1080 Full HD，至800×600 SVGA，有近20种之多。与此同时，随着移动互联网的兴起，小屏幕移动终端访客成倍增加。面对这么复杂的终端环境，高校门户网站设计者们该采用哪种分辨率来设计网站？据笔者统计，39所“985工程”高校中，有33所高校采用的是固定的1000像素宽度以内的设计。在宽屏与超宽屏成为主流的今天，这无异于放弃了诸多用户的屏幕空间与视觉美感。对于移动互联网用户，这样的设计更为糟糕——受限于屏幕的尺寸，网站内容微小到几乎无法阅读。

当前国内高校门户网站的视觉界面设计有同质化的趋势，缺少艺术风格与特点，毫无个性可言。

在网站色彩搭配上，国内高校门户网站的主色调以蓝色、红色居多。据笔者统计，39所“985工程”高校中，有一半高校采用了蓝色作为主色调。雷同的色彩运用，很难给用户带来深刻的印象。从网站的辅助色、对比色运用方面来看，许多高校门户网站整体色调统一有余，对比不足，视觉界面色彩关系普遍沉闷，缺少生机与活力[4]。

在网站布局设计上，国内高校门户网站的版面多由带网站标识的页眉，通栏的导航栏，带有图片新闻、公告列表等内容的主体，带有专题链接的侧边栏，以及带有版权声明的页脚所构成[5]，版式以网格化三栏式布局为主。总体上网站的布局结构呆板，缺少灵动的美感。多数高校网站还存在着内容过“满”的缺陷，用户在浏览时会产生无趣、压抑甚至厌烦的心理。

在网站图片选择上，国内大多数高校门户网站以校园风景、环境设施、领导合影、会议活动等类型的图片来展示学校的风貌[5]。总体来说，图片题材的选择上过于拘谨，很难给用户留下深刻的印象。

导航在网站用户体验的塑造中扮演了重要的角色，提供了用户获取信息的主要途径[6]。国内高校门户网站导航的形式比较单一，用户在访问过程中可能因此冒着“迷途”的风险。形式单一的导航会影响网站的可用性，削弱品牌的可信度。

三、用户体验视角下的高校门户网站再设计

再设计，也就是重新设计，以全新的理念重新审视我们习以为常的事物。高校在门户网站重新设计的过程中，应当摒弃以设计者为中心、以领导为中心的设计理念，从用户体验的视角出发，解决影响用户体验的各种要素，改善网站的用户黏性，提升网站的品质。

高校门户网站再设计过程中，可通过调查问卷、采访与观察等方式去研究用户，明确每种类型用户的需求。根据不同用户的实际需求，在网站的信息架构中将所有的信息进行分类整合，形成针对用户群特定需求而设的信息汇总平台。在主页的显著位置，按照未来学生、学生、学生父母、教师、工作人员、校友、访客等用户类型的访问入口，为用户带来贴心的服务。

面对复杂的客户端浏览环境，我们不可能为不同的设备去定制不同版本的网站。怎么办?“响应式Web设计”的理念应运而生。响应式Web设计是Ethan Marcotte于2010年提出的概念，其内容的核心是一个网站或网页能够兼容多个终端——而不是为每个终端定制一个特定的版本。设计理念是页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，以适应于不同屏幕空间用户的浏览[7]。如图2所示，运用响应式Web设计的网站在PC、Pad、智能手机等设备上均有良好的视觉呈现效果。响应式Web设计具有开发、维护、运营成本较低，兼容性强等优势，是未来网站技术发展的趋势之一。

图2 响应式设计网站

高校门户网站再设计过程中可运用响应式Web布局设计。目前访问高校门户网站的客户端设备仍以电脑大屏为主。因此，响应式布局的设计采用大屏优先，兼顾移动设备的原则[8]。在普通大屏幕上，采用传统的固定分辨率设计。在全高清屏幕上，利用设备高分辨率的特点，运用高质量大图“平铺自适应”或“中心定位，两侧自适应”的方式，为用户带来强烈的视觉震撼与冲击力，中国人民大学主页就是采用此种方式，如图3所示。在小屏幕上，采用单列式布局，便于移动端阅读。插图采用宽度百分比，高度自适应的方式，以取得良好的视觉效果。

图3 中国人民大学主页

视觉界面设计在网站开发周期中是至关重要的一步，正如苹果电脑Mac机之父Jef Raskin所说：“对于消费者而言，界面就是产品”。

（1）色彩搭配

色彩是传递品牌识别的一个最为有效的方法。用户访问网站，给其留下第一印象的一定是色彩。高校门户网站再设计过程中，色彩的选择与搭配应当遵循适合性、一致性、可读性原则[9]。

高校门户网站主色调的选择首先应当遵循高校VIS（视觉识别系统）的规范标准，确保在互联网上也能传达一个统一的品牌形象。当然，目前大多数高校并没有统一的视觉识别系统，那么网站主色调的选择就需要经过深思熟虑，挖掘学校的历史与特色，考虑合适的色彩方案，而不是随大流。清华大学门户网站数次改版，均使用象征高贵的紫色作为网站的主色调，具有很高的辨识度。北京航空航天大学网站，如图4所示，采用蓝色深邃的宇宙星空为背景，其意义不言而喻。

图4 北京航空航天大学主页

高校门户网站色彩搭配应遵循整体一致性原则，整个网站从首页到栏目页，再到内容页，都应使用同样的色彩方案，这样的网站页面才具有整体美、韵律美。

高校门户网站色彩运用上需要遵循可读性原则。文字的色彩纯度不能太高，文字与背景的色彩不能过于接近，否则会使用户产生视觉疲劳。

（2）版式设计

网格设计当前流行的网站版式设计方式，可为网站增添秩序美、连续美、和谐美。但是网格设计的缺陷也是明显的，严格遵循网格设计的版面也容易给用户带来呆板和枯燥的感觉。高校门户网站的版式设计在运用网格设计的基础上，应该敢于创新，适当越出网格的边界，会使页面更加生动与流畅。暨南大学门户网站布局设计也是典型的网格设计，如图5所示。网站页眉部分，以校徽中象征“文化载体、交流桥梁”的帆船图形为主，打破网格的束缚，强化了学校的办学理念，成为整个页面设计的亮点。

版式布局中合理留白，也很重要。在内容块、段落、图片、按钮等元素留出空隙，可增强内容的可读性。留白可使内容层次分明，减少了界面的复杂程度，用户感受到的视觉层次感越好，网页上的内容就越容易被获取[10]。

图5 暨南大学主页

（3）图片选择

庄子说：“不精不诚，不能动人”。经过精心拍摄或挑选，富有内涵的图片能抵千言，感动人心。高校门户网站再设计过程中图片的选择应该摆脱纯粹的官方色彩，更多地关注与网站相关的各类用户群体。清华大学在其主页头版位置推出的“清华映像”栏目，如图6所示，使用通过精心挑选与优良设计大幅的图片配合精炼文字的方式向关注清华大学的网络用户和社会大众介绍清华大学在教学、科研、社会服务等方面的成就及师生生活中的亮点。“清华映像”栏目具有与用户沟通情感的作用，每次更新都会给用户带来一种感动，充满人文主义关怀。

图6 清华大学主页

“网站可用性的80%在于导航”——这样说并不为过。良好的导航系统就是用户在互联网海洋里正确航行的指南针。国内高校门户网站在再设计过程中，应当考虑建立具有多维度、立体的导航形式。除了常规的主导航、局部导航、当前位置导航外，还可考虑安排网站地图、A-Z字母索引、标签云、分类检索等形式的导航，以满足用户实际需求，为用户获取信息提供多种途径，改善用户体验。

四、结束语

用户体验是一种以人为本，追求极致的互联网思维。尽管用户体验是不可被设计的，但我们可以不断改进。相信只要从用户体验视角出发，遵循以用户为中心的理念，对高校门户网站从网站定位、信息架构、视觉风格等方面进行再设计，必定能够提升学校的网络形象，策应学校的发展战略，为师生、校友、考生等各类用户提供更好的服务。

[1]吴江,黄晟青,蔡骏.互联网购物网站用户体验设计研究[J].包装工程,2012,33(8):68-71.

[2]李志义,义梅练.基于用户体验的网站优化研究综述[J].情报科学,2013,31(11):150-154.

[3]单筱秋.浅议人机交互界面研发中的用户体验设计[J].南京艺术学院学报(美术与设计版),2013(6):181-183.

[4]孙荣,王菊.高校门户网站视觉界面色彩运用探析[J].中国教育信化,2012(19):27-30.

[5]刘欢,卢蓓蓉.中美高校门户网站的比较与思考[J].中国教育信息化,2012(3):4-6.

[6]James Kalbacb.Web导航设计[M].北京:电子工业出版社,2009.

[7]杨叶,陈琳,董启标.响应式Web移动学习资源的技术实现与设计研究[J].现代教育技术,2012,23(6):107-111.

[8]刘欢,卢蓓蓉.使用响应式设计构建高校新型门户网站[J].中国教育信息化,2013(9):71-74.

[9]王勇,董轩志.基于用户体验视角下的网页视觉传达设计研究[J].包装工程,2012,34(24):14-17.

[10]Smashing Magazine.众妙之门——国际顶级Web设计师成功法则[M].北京:人民邮电出版社,2013.

（编辑：杨馥红）

G443

：A

：1673-8454（2015）09-0073-04