基于用户体验的高校档案网站设计

张菲菲

摘要：为了改善现有高校档案网站的普遍问题：档案特色欠鲜明、重点亮点欠突出、细节考虑欠周全、网页设计欠美感等问题，以现有用户体验统计数据及网站提升提议为依据，借助色彩心理学、眼动仪网页浏览相关研究结论、格式塔理论等相关研究经验，提出以用户体验为核心的高校档案网站设计原则和具体设计思路。在以人为本，资源为主，提升特色，网上办展的设计原则下，从总体布局、主要模块、修饰细节等展开细致论述。

关键词：用户体验 档案网站 高校

中国分类号：TB47

文献标识码：A

文章编号：1003-0069（2019）02-0140-03

一、高校档案馆网站建设现状及问题

高校档案网站作为高校面向社会服务的一个窗口，需要充分发挥其宣传教育、信息服务和网上办事、交流等功能。目前，通过查看网站，交流访谈等形式调研了几所高校档案馆的网站，发现存在一定的不足，总体说来可以概括成以下几点：（1）档案特色欠鲜明。俗话说，人如其名，对于网站也是一样，应该以专业的态度突显档案工作的特点，让初次浏览网站的人能从视觉或文字上对档案工作或者档案部门有一个清晰了解。但众多高校档案馆网站无法分辨出这是一个档案馆网站还是其他部门网站（如图1）。（2）重点亮点欠突出。对于用户重点需要的板块内容在首页中无专门模块设置，需要用户通过菜单栏一级级展开才能找到;对于能起到宣传作用且展示学校文化底蕴或特色的，本应作为亮点，有的高校只以简单的文字描述展示。（3）细节考虑欠周全。如信息服务和交流等功能没有具体的操作说明，对于特殊情况说明更是无从谈起。（4）网页设计欠美感。有些高校档案网页内容信息也比较全面，但是对于信息内容以EXCLE表格的形式呈现，背景为纯色，因为信息量较大，容易引起视觉疲劳，且用户不能快速准确找到想要的信息。

二、用户体验的概念

用户体验（User Experience，简称UE或ux）的概念最早由唐纳德·诺曼提出和推广，是指用户在使用产品、服务或系统过程中的建立起来的主观心理感受，这种心理感受发生在与产品或服务接触或使用的全过程中，解决的是产品或服务应用环境的综合问题[1]。在“以人为本”的社会中，“用户体验”则在实践中真实地诠釋了该理念。高校档案网站的用户主体是高校师生，包含在校和毕业的。通过对高校档案网站的统计数据和对用户的访谈可以看出：（1）用户点击率最高的是对档案的查询利用，以及对档案馆馆藏资源的了解;（2）用户目前对档案网页的较多提议是查询板块的易用可用性，以及对网站整体特色提升的提议。

三、基于用户体验的高校档案网站设计原则

在设计基于用户体验的高校档案网站中，需要遵循的是以用户为核心，从用户的需求、环境视觉、心理感受等各个方面考量网站的设计，主要是做好以下几个方面。

（1）凸显服务，以人为本。档案资源只有为用户所用时才能发挥它的第二价值作用，所以在档案网站设计时应突出用户重点关注的服务，如档案的信息服务查询、利用、交流。

（2）总体布局，提升特色。档案对于人们应该是具有历史性、权威性。那么高校档案网站应体现这么一种环境：稳重、权威，但又不显沉重、古板。在总体布局上，要兼顾个性和整体，求同又存异，简约不简单，在这些原则下让整个网页和谐，特色和层级鲜明，突出艺术领域的节省率即“效法自然”[2]。

（3）深度利用，资源为主。档案资源是档案的生命线，具有其他部门无法企及的权威性和全面性[3]，突出资源的价值，深度挖掘和开发现有的资源是档案网站区别与其他网站的最大优势，也是用户能够体验高校文化底蕴、了解学校历史变革的直接途径。

（4）信息时代，网上办展。在“互联网+”时代，档案网站也需要积极利用信息化环境宣传学校档案资源，档案文化，最大限度地做好爱国主义教育基地的工作，所以，将档案馆中馆藏通过信息化手段如拍照、摄像、VR等技术在网上办展，让用户能更加直观形象地了解高校档案和档案文化。

四、基于用户体验的高校档案网站具体设计方案

在基于用户体验的高校档案网站设计中，以上述设计原则为导向，具体采用从总体到局部再到细节的设计方案。

（一）总体布局

（1）结构层次。高校档案网站结构层次应条理清晰，让用户感受直接易用，通常一级类目不应超过8个，每个一级类目下结构层次不宜过深，通常不超过5层，一般所需要的操作步骤控制在3-5步之内。主要界面尽量不超过浏览器高度的200%，大量信息内容尽量不超过浏览器高度的500%[4]。

（2）色彩色调。色彩色调应结合高校本身特色和档案特色，为用户产生一种良好的色彩氛围。一般说来，建议采用暖色色调为主，因为暖色色调较冷色色调给人一种稳重感，且对于服务性部门，暖色色调容易让人产生一种温暖亲近感。当然，对于深蓝色、灰色等颜色也可以搭配使用，这些颜色在心理学中易产生权威性、可靠性的感觉。在色彩明度上选择适中，明度太低易产生强硬质感，而明度太高则易产生轻质质感[5]。

（3）字体字号。字体应与网站风格一致，目前一般高校档案网页都是偏向稳重型的，字体上尽量也选用如宋体、仿宋、黑体、楷体等显庄重或有中国风的字体，且同一级目录或模块需采用同样的字体。对于字号，一级目录字号一般在四号及以上，网页上显示的最小字号不小于10，行间距应大于单倍行距。

（4）板块区域设置。已有通过眼动仪研究网页浏览的相关研究表明：用户在浏览两栏网页时，用户首先浏览网页的顶部，然后从左侧开始阅读，并用一种F型的模式一行接一行阅读剩下的网页;在浏览三栏网页时，用户同样先注视顶部，然后阅读中间栏，最后再用和两栏阅读相同的模式浏览网页。位于网页中部和上部内容的注视时间更长，注视次数更多。对于尺寸大小，尺寸幅度较大的更容易引起注视[6]。同时根据格式塔心理学理论，在网页设计中还需要注意网页设计的惯例网站的标志会放在页面的左右上角、网站的版权所有会放在页面的最下面等[7]。所以根据这些研究结果，从用户体验角度出发，在高校档案网页设计中，档案馆的标记可以放在页面的左右上角，在网页较上面部分或左侧部分，应该设计最受用户关注的内容，如档案查询利用，由于查询利用需要做一些业务上的指导说明，建议可以用链接展开二级界面，但是不论直接展开还是在二级界面中展开，在首页上的区域不能过小;在网页上部右侧，可以放置一些用户比较关注的，或者时效性较强的板块，如信息动态或通知等;在网页的中部则可以做馆藏信息或者网上展厅，因为网上展厅的内容会比较多且分级，在此可以分模块，切割成多个专题点。对于平常档案管理的一些规范操作因为涉及面较窄，利用率不高，则可以放在网页的下部。

针对以上思路，设计了某高校的档案网站，具体（如图2）。

（二）主要模块的具体设计

（1）查询利用模块。根据实践中的档案利用，可以将档案利用模块划分成档案利用前的说明（包含查询流程和手续等需要事先了解或准备的资料）;利用预约（预约后用户可以在相应时间去实地取回所需档案）;利用查询（参见图2中查询利用模块）。以上三个模块因为信息量较大，建议做链接以二级页面的形式展开。查询界面应简洁，操作简单，并在选项或者输入框边上加以辅助说明。对于查询反馈结果，应条目清晰，且横向上不易采用滑动条，不然尾端信息容易被用户忽略，造成信息遗漏。

（2）网上展厅模块。对于网上展厅，可以分成多个主题，如果主题模块太多，可以采用横向滚动式展开，速度不易过快，一般呈现不能少于5秒。对于用户而言，网上展厅最重要的是体验学校的办学特色和校园文化，所以应结合学校实际合理分类主题，如在宁波大学宁波帮主题是一个典型，挖掘档案中宁波帮事迹和文化，以及其背后的真实故事，让展厅主题更加丰富，内容更加贴近用户。在主题模块的链接图片选择上，可以借鉴学校典型的建筑或者地标作为链接国标，增加用户校园怀旧情怀（参见图2中网上展厅模块）。做好整体网页与主题网页之间的统一性，又要兼顾主题网页的个性化，不同的主题可以用不同的主色调，如学校历史沿革，可以采用高校教学楼的主色调，有利于增强用户的熟悉感，并产生回忆;如海洋相关主题，采用蓝色色调，使用户自然联想到海洋相关方面的内容。当然，虽然不同主题的色调不一致，但是各主题之间必须存在一定的相似性，如在页面布局上一脈相承，网页菜单栏引导界面及标志性引导修饰上保持一致。同时，网上展厅应该拓展不同的信息技术手段，照片、录像已经成为遍及的档案记录方式，虚拟现实技术也开始被青睐，可以尝试将高校中不太对外开放的场馆及馆藏通过虚拟技术表现出来，让用户有一种身临其境的感觉。

（3）工作动态模块。工作动态是反映高校档案馆目前主要工作的窗口，通知、公告、公示等，由于内容较多但区域有限，一般采用滚动播出，滚动的速度可以根据区域的大小来设置，一般人每分钟阅读400字左右，对于有时效性或者特别重要的，对文字颜色加以区分，但也要注意该文字颜色与总体颜色的协调性，不显突兀（参见图2中工作动态模块）。

（4）临时性主题模块。对于临时性主题模块，建议采用悬浮式窗口，并且根据心理学视觉原理，应挂在上端左侧，并且在保持网页整体一致性的基础上用较醒目的颜色或对比色加以突出。如在灰色基调的页面上，可以采用深蓝色，整体协调感较好，又较能突出主体。参见图2中悬浮窗口。

（三）细节之处的设计

为了增加用户体验的历史感，在网页设计模块边界等细节之处需要加以修饰。国内高校档案馆一般以古典或中式的元素加以修饰，如区域间的分割线，可以采用（如图3）[8]。在图片边缘处理上，可以根据网页整体需要采用羽化边缘、浮雕效果等，一般说来羽化能产生柔和的感觉，浮雕、阴影产生的质感比较强烈（如图4、5）。

结语

基于用户体验的高校档案网站设计是根据现有的用户体验及需求而提出的设计，在实践中，随着用户体验的转变，网站设计也应随之转变提升，它是一个动态的过程，所以需要定时地对用户进行分析，根据用户体验适时地改变设计方案和细节，实现动态式的基于用户体验的高校档案网站设计。

参考文献

[1]乔红月，蒋晓.用户体验视角下MOOC移动学习平台设计趋势[J].设计，2018 （9）：32-33

[2]阿恩海姆·鲁道夫.艺术与视知觉[M].滕守尧，朱疆源，译.成都：四川人民出版社，2006

[3]张江珊.基于“互联网+”的档案网站建设[J].山西档案，2018（1）：47-50

[4]浙江省档案局.档案工作实务[M].杭州：浙江大学出版社，2014： 226-227

[5]阿恩海姆·鲁道夫.艺术与视知觉[M].滕守尧，朱疆源，译.成都：四川人民出版社，2006

[6]陈晨.眼动技术简介及其在广告心理学中的应用[J].中山大学研究生学刊（自然科学、医学版），2014 （4）：1-5

[7]胡爽基于格式塔的网页信邑设计的美化研究[叨包装工程，2010 （11）：111-115

[8]QQAAB78280.中式古典边框海报设计元素[EB/OL]. http： //weili.ooopic.com/weili_16307867.html

[9]钱程，唐德红.微交互在B2C网站设计中的应用与研究[J].设计.2016，29（9）：150-151