基于用户认知的Web页面设计实证研究——以武汉大学图书馆网站为例

●邱均平，夏　琦（武汉大学．中国科学评价研究中心；．信息管理学院，武汉　430072）

基于用户认知的Web页面设计实证研究——以武汉大学图书馆网站为例

●邱均平a，夏琦b
（武汉大学a．中国科学评价研究中心；b．信息管理学院，武汉430072）

［关键词］用户认知；Web页面设计；武汉大学；图书馆

［摘要］本文将一系列基于用户认知的Web页面设计理论，包括以用户为中心的设计标准、认知心理学以及色彩学与Web页面设计实践相结合，以武汉大学图书馆网站的改版前后页面为对比，试图对基于用户认知的Web设计理论与实践的推广和深化有所帮助。

根据中国互联网络信息中心（CNNIC）发布的第34次《中国互联网络发展状况统计报告》，截至2014 年6月，中国网民规模达到了6.32亿，互联网的普及率则达到了46.9%。［1］如此庞大的用户规模使得如何维持用户忠诚度成为网站建设者需要思考的问题。要解决这个问题，就应该从用户浏览Web页面的信息获取过程着手，利用用户认知的相关理论，为用户提供更为符合使用习惯的Web页面设计。基于用户认知的理论包括以用户为中心的设计标准，认知心理学在Web页面设计中的应用以及色彩学在Web页面设计中的应用。对用户信息获取过程进行研究，不仅能够促进以用户为中心的Web页面设计水平，也能够为用户提供更好的个性化服务。因此，本文以基于用户认知的Web页面设计理论为指导，以武汉大学图书馆网站为例，试图对基于用户认知的Web设计理论与实践的推广和深化有所帮助。

1基于用户认知的Web页面设计理论

1.1以用户为中心的设计标准

创建一个吸引用户、能增强用户体验的方法被称作以用户为中心的设计。它是一种高效的、围绕用户为中心设计产品的方法。［2］简单地说，就是在进行产品设计之初就从用户的需求出发，站在用户的角度思考问题，以用户为中心来设计产品，而不是让用户去适应产品。以用户为中心的Web设计理念的兴起标志着关注点的转变，从过去对技术上高效率的关注逐渐转移至用户身上，让用户尽可能早地参与到设计过程中。［3］以用户为中心的设计主要从以下三方面展开。

（1）策略和用户分析。其主要任务和目的在于分析和收集用户需求，首先对目标用户进行特征分析和描述，进而收集用户需求并进行分析，在此基础上定义和规划网页目标，最后进行分析和确定。

（2）设计和测试。网页设计和网页编写的具体过程，包括对对象进行模型化和分析，然后对网页视图即交互界面进行设计，进行原型开发，最后进行用户测试以及专家的审阅。

（3）实施和评估。重点在于保持一个高真设计原型以及设计风格标准，并对其进行实施及评估。［4］而设计师的任务则是及时对用户需求进行反馈整理，进而将其运用到下一步的模型设计中去，在完成改进后进行下一轮的评估。

1.2认知心理学

认知心理学兴起于20世纪50年代中期，并且于70年代获得广泛的认同，它是一门研究人的认知行为的学科。［5］事实上，网页设计过程可以看作是一次信息传递与处理的过程。一个排版整洁、布局清晰、信息突出的网页可以成为人们认知过程中获取信息的一个快捷渠道，为了使用户能够更加快捷准确地获取网页传达的信息，网页设计者需要对用户的信息需求、认知过程及其规律有一个清晰的认识，并在这些规律的指导下应用到实际的网页设计中。［6］

网页设计中的感知觉理论告诉我们，作为整体的网站页面需要提供给用户一个能够强烈吸引注意力的第一印象，并针对不同用户群体应该对网页的整体风格做出相应的调整，如，网站的目标群体是儿童，网页可以大胆运用一些鲜艳的颜色，明快的布局以及轻松的音乐来吸引他们；而在设计交互界面的过程中则应该尽量减少用户不必要的眼球移动，使得使用网页成为一件省时省力的事情；另外还应设计易于浏览的格式布局，使得用户能够尽可能快地找到所需信息。［7］

此外，用户的认知是在一个有限的时间和注意力范围内的，因此，在网页链接与跳转的过程中也应该保持主题的醒目与一致性，将大批的信息按照其相互间的联系进行分类组织，使得用户能够通过最简短的步骤完成页面的跳转与所需信息的获取。［8］

1.3色彩学

任何一个网页界面都少不了色彩的存在，在网络界面设计中对色彩进行合理运用和搭配，利用色彩学中包括色彩对比原则、色彩调和原则以及人对相关色彩的心理效应（如色彩的好恶、色彩的表情等）等理论，更好地达到传达信息、吸引用户注意力的目的。

在网页设计过程中，运用色彩对比手法，利用冷暖色调之间的强烈对比，突出主题，使得网页呈现出一种更为立体、丰富的色彩效果。如，在设计网页底色和字体颜色的过程中应该注意两种颜色对比度和区分度的提升，用户在使用的时候，白底黑字自然比黑底绿字的页面设置易于阅读。［9］此外，为了突出网页的用户定位和主题特征，可以利用不同色块的面积对比来突出其特色。如，网站的用户群体为5～10岁儿童，可以大胆采用黄色、红色等活泼颜色的面积同时布局面积相等或类似的绿色、蓝色布局，这样可以达到色彩冲突的最高值，能更好地吸引用户的注意力。

色彩调和原则看起来与色彩对比原则相对立，实际是将有差别的不同颜色经过面积、纯度等方面的调整，获得一种和谐统一的整体风格及效果。［10］其方法包括利用面积法进行调和，即大面积冷对小面积暖；聚散调和法即冷聚热散以及利用黑、白、灰等中性色作过渡区间来加以调和。［11］根据哥德的面积理论，红色与绿色的面积比为1:1是最为恰当的色彩比例，但在实际应用中我们发现这样的色彩组合并不会带来一种和谐的感官享受，反而在配色时将红色的面积缩小为整体面积的四分之一左右、绿色占据剩下的四分之三时呈现出一种更为悦目的状态，这就是利用面积法使得大面积的冷色与小面积的暖色相对应，使得整体页面色调达到一个和谐统一的状态。

2基于用户认知的Web设计实践——以武汉大学图书馆网站为例

2.1导航可用性

在此次武汉大学图书馆网站改版过程中，一个非常明显的改变就是网站页面风格的变化以及各类各个版块的组织排列上的优化，突出了某些常用功能的链接，新增了讲座信息、图书馆新闻等信息滚动介绍，总之，是在确保保留网站主要功能的基础上根据用户的需求变化对网页布局设计做出一番调整，增强了网页的可用性和易用性，以优化用户的体验。下面就将针对新旧两个版本网站的导航可用性、信息易获取性以及页面的易用性做一个对比，探讨武汉大学图书馆网站在为满足用户需求、增强网站可用性方面所做出的努力。

导航的作用在于让网页使用者能够随时随地、清楚明确地知道自己位于网站的哪个版块、如何可以快速地回到刚访问的网页以及接下来可以访问哪些内容、如何访问那些网页等。由认知心理学可知，由于人的注意力和记忆力都是具有一定时效性的，这也就是说，为了使用户能够专注于某一任务或是掌握自己的使用规律，导航扮演着重要的角色，它能提醒用户在整个网站中的位置，也能帮助用户快速定位到访问过的页面。为了更好地完成这一任务，武汉大学图书馆网站在首页导航条的设计上做了一个较大的调整。

改版前的图书馆网站仅在页面上方提供一个导航条，其字体与页面正文字体大小一样，因此不能迅速、直观地指示读者：这是可以提供页面间跳转的导航条。此外，对于已经访问过的栏目以及使用者正在访问的栏目没有给予相应的颜色或大小上的变化予以反应，因此不具有鲜明的指向性。

而经过改版之后的导航条在呈现形式上更为丰富，以不同的颜色版块、不同形状的按钮以及不同大小的字体来划分不同层级、不同功能的指示性导航。这是根据色彩学中通过合理使用颜色对比可以突出重点的理论，因为注意具有选择性，用特定的设计手段对于某些板块加以美化能够起到吸引用户注意力的目的。除此之外，它在全局性的导航能力方面也有所提高。用户通过页面上部的语言指示可以清楚地看到自己是如何从首页来到当前页面，并且能明晰地了解整个系统间页面与页面之间的关系，这样的全局导航方式远比之前单纯的网站地图更易于理解，从而使得用户能够更好地对自己访问的网页进行定位，同时对首页以及之前访问过的页面添加链接，便于使用者在有需要的情况下迅速地返回网站首页或者是之前访问过的页面。新的全局性导航的调整就是帮助用户随时定位、明确使用目的。

2.2信息易获取性

用户访问网页的目的在于获取信息，因此网站界面的组织与信息的呈现方式在很大程度上影响着用户能否很好地完成其访问目的。［12］如，在旧版的图书馆网站首页，各种链接基本上是以一种杂乱无章的方式堆放在一起，如果用户想要找寻某一特定任务的链接，只能通过浏览的方式获取。另外，各处链接基本上以同样大小、同样颜色的相同字体来指示，这就让第一次使用或者是不熟悉图书馆网页的用户费时费力地一个一个地寻找。根据认知心理学的理论，在使用网页的过程中，大部分使用者都是用快速浏览的方式寻找信息，而一个用户最多只会花上四十秒钟去寻找所需信息，如果超过这个时间，他就会认为这个网站获取信息的难度要超过他所能接受的水平，因此对于网站的整体印象及使用效果就会大打折扣。

而改版之后的页面则在这一方面做出了明显的改善。首先一点是不同类别的资源导航通过阴影、版块之间的衔接确定了自己非常独特而清楚的版块，与其他类型资源相区别开来，有利于用户快捷迅速地找到自己所需资源所属的类别，继而找到该资源的链接；其次在了解用户需求以及常用功能的情况下将使用频率较高、需求较大的一些链接单独列出，如数据库、特色资源、学科服务平台等，便于用户能够根据自己的使用习惯更快地找到目标链接，而不用在一列外形类似的词语中寻找。

3经验与启示

通过对武汉大学图书馆网站Web页面改版前后的对比，一个非常明显的改变是网站页面风格的变化以及各类各个版块组织排列上的优化，突出了某些常用功能的链接，新增了讲座信息、图书馆新闻等信息滚动介绍。总之，是在确保保留网站主要功能的基础上根据用户的认知规律以及用户的需求变化对网页布局设计做出一番调整，增强了网页的可用性和易用性，以优化了用户的体验。

Web页面在设计过程中应贯彻以用户为中心的设计理念，通过战略层面的规划进一步精准定位及分析，获取关于用户需求的更为准确、深入的信息，对网页的呈现方式作出相应的调整，使得其在外观上更加时尚、和谐，布局上更为紧凑、合理，更符合用户的使用习惯和认知规律，让用户在使用过程中可以更加方便、迅速地找到所需信息。［13］

由于具有不同的网站建设目的，因此不同的网站有着不同的目标用户群体。在网站建设之初，一个重要且亟需探析的步骤就是明确网站的潜在用户群体，这样才能在接下来包括网站系统设计、内容提供以及界面设计等方面有的放矢，提供最为贴合需求的Web页面。网页设计者在进行规划时可以首先利用问卷调查法、现场采访法等多种方式获取不同用户的信息需求以及其访问网站的主要目的，这样可以时刻提醒自己将用户需求放在第一位，并且可以更加全面地考虑各种可能的相关情况，由此作出相应调整。确定一个正确的战略方向对于一个网页而言尤为重要。

如果说战略规划是一个后台的、不与用户之间接触的网页设计层面的话，那么Web网页的界面设计以及导航的设计好坏都直接影响到用户体验。无论是网站的界面设计还是导航设计都是网页给予用户最为直观的使用体验的一部分，导航设计时应该考虑到认知心理学规律，即网页链接与跳转的过程中应该保持主题的醒目与一致性，使得用户能够通过最简短的步骤完成页面的跳转从而获取所需信息；而页面设计则应该充分考虑色彩学理论的影响，通过提供一个整体色彩和谐、布局紧凑、重点突出的页面来促进用户良好的使用体验，此外应该考虑到的一点是由于注意具有转移性，因此在首页对于常用功能的突出显示以及形象化展示就具有吸引用户注意以及帮助他们快速达到使用需求的作用。

具体来讲，基于用户认知的Web页面设计实践主要从以下几个方面来进行。

（1）知觉方面。知觉是指用户在使用Web页面的过程中所感受到的页面设计、信息组织以及版式分布等直观信息，大脑在接收这种外部信息刺激之后产生了相应的知觉反应。在Web设计的实践过程中可以利用用户对排列有序以及具有整体性的对象具有较强的认知度这一特性，设计出一个风格统一的网页导航栏，使得用户能够更加快捷、全面地了解整个网站的结构。

（2）注意方面。在单位时间内用户的信息通道容量是有限的，用户会选择过滤功能来筛选对自己有用的信息，剔除次要信息，因此就要求在Web设计的过程当中突出重点信息，尽量减少与主题内容无关的画面、音乐等装饰性因素；在内容的呈现方式方面应该多采用文字和图像相结合的形式，避免多种多媒体传输的叠加，一方面会使整个页面变

得杂乱无章，另一方面也会使网页的加载速度减慢，应该以合理、平衡的页面分布来吸引用户的注意力，而不是多种信息板块的叠加。［14］在设计网页时应当运用人的注意力有限这一特点，避免过分强调Web页面呈现的视觉效果，而应该通过简洁的布局、清晰的导航以及动静结合的板块设计来完善用户的使用体验。

（3）记忆方面。人的记忆主要分为短时记忆和长时记忆，其中短时记忆主要反映的是用户对于Web页面的指示性信息的处理，其容量在单位时间内是有限的；而长时记忆则是用户经验、常识以及知识的积累，其容量是无限的。在Web页面设计的过程中保持界面风格以及命令的一致性可以帮助用户减少短时记忆的负面影响，让他们更好地感受到Web页面的易用性。

［参考文献］

［1］赵志华．WEB可用性设计研究及在校园网建设中的应用［D］．西安：西北大学，2009：56－61.

［2］Alan Cooper．交互设计之路［M］．Chris Ding译．北京：电子工业出版社, 2006：91－95.

［3］Mi Kim，Mary Maher．The impact of tangible user interfaces on spatial cognition during collaborative design ［J］．Design Studies，2008，29（3）：222－253.

［4］梁景红．设计师谈网页设计思维［M］．北京：电子工业出版社，2006：77－79.

［5］龚丽娜．探讨基于认知心理学的网站交互设计原则［J］．艺术与设计，2010（10）：155－157.

［6］Bekker M，et al．Analysis of gestures in face-to-face design teams provides guidance for how to use groupware in design［J］．The Symposium on Designing Interactive Systems，1995，157－166.

［7］Seichter，H，Kvan，T．Tangible interfaces in design computing［J］．eCAADe，2004，159－166.

［8］曹越旗.基于认知心理学的电子商务网站设计研究［D］．上海:上海交通大学, 2010：11－16.

［9］Rafal Michalski．Theinfluenceofcolorgroupingonusers’visual search behavior and preference［J］．Displays, 2014，35（4）：176－195.

［10］Jan L．Plass，et al．Emotional design in multimedia learning：Effectsofshapeandcoloronaffectandlearning［J］．Learning and Instruction，2014（29）：128－140.

［11］李向来．网页界面设计中的配色艺术［J］．濮阳职业技术学院学报，2007，20（1）：24－25.

［12］梁景红．设计师谈网页设计思维［M］．北京：电子工业出版社，2006：130－136.

［13］Robert Hoekman，Jr．瞬间之美: Web界面设计如何让用户心动［M］.向怡宁译．北京：人民邮电出版社，2009：103－110.

［14］钮玉.基于认知心理学的网页情感化设计研究［D］．昆明：昆明理工大学, 2011：106－110.

［收稿日期］2015－03－26［责任编辑］徐娜

［作者简介］邱均平（1947－），男，博士生导师，研究方向：信息计量与科学评价研究；夏琦（1992－），女，硕士研究生，研究方向：信息计量与科学评价研究。

［文章编号］1005－8214（2015）12－0001－03

［文献标志码］B

［中图分类号］G250.72；G258.6