基于人机工程学的网页界面设计浅析

齐玲玲　房慧

摘 要：探讨了网页人机界面中字符文本、色彩搭配、菜单导航等设计内容对用户体验的影响，提出了网页中的文本、图形与图像、動画及流媒体、色彩等界面设计要素的人机工程学设计要求，为网页的人机设计提供了借鉴和参考。

关键词：网页设计；人机界面；人机工程

网页是在计算机技术和网络发展的基础上应运而生的。网络的出现催生出网站的出现，也预征着网页设计的开始。1991年，Tim Berners博士创建出世界上第一个网站http：//info.cern.ch。虽然它只是一个纯文字型的网页，并且限于当时的技术条件，网页设计缺乏艺术美感，但是它却标志着网页设计时代的到来，具有划时代的意义。以计算机为平台的网页设计最初被归类到计算机学科而非设计艺术学下，这使得网页设计的研究多集中在技术性而缺少艺术性。

网页艺术设计的实质是将网络多媒体信息元按照不同的设计标准、合理的位置布局组合而成，这些信息元包括文本信息、图形信息、动画及视频、音频等。而科学合理的网页设计就必须满足工效学基本要求，符合人们的审美和认知习惯，因此，有必要对这些信息元的工效学设计要求进行分析研究。

1文本设计

文本中的信息是网页设计中最基本的元素，也因其直观明了的特点，成为网页信息最主要的传递者。而且文字所占用的存储空间小，每个英文字符只占用1Bytes，每个汉字占用2Bytes，打开一个纯文字的网页只需1到2秒的时间，这是其他网页设计元素无法比拟的优势。但是，在网页设计中，文字的运用并非越多越好，文字过多会让浏览者感到厌烦，而太少又无法传递足够的信息，因此，文本元素的设计就应该受到足够重视。

1.1文字的字体

字体没有统一的格式要求，可依据网页的风格和排版的要求具体而定，但总原则是使网页和谐统一，美观舒适。例如政府网站等庄重正式的网页标题可使用黑体；博物馆等与历史有关的网站标题偏向于魏碑体；其他内容则选择宋体、楷体即可。一般来说，一个页面的字体种类最多不宜超过四个，字体太多易使浏览者感到杂乱无章，难以找到重点信息。同时，页面上的字体需要本地计算机的字体库提供支持，采用一些特殊字体可能在其他计算机上无法识别，因此设计时尽量采用常用字体。如果非要使用特殊的字体或者手写体，可通过将其转化为图片的形式在网页上显示。

1.2文字的字号

字号大小需要根据页面的主题以及版面布局而定，文字越大给浏览者的视觉冲击越强，一般用于需要强调的地方，如标题等；文字越小越显得精致细腻，容易形成面，整体性较强，但易使浏览者产生视觉疲劳，因此一般可用于页脚等地方，起辅助作用。有研究表明，网页页面最适合的字体大小为12磅左右，如果需要显示的文字内容较多，也可采用9磅左右的字号。

2图形与图像设计

网页设计中的图形与图像既包括主题图，如新闻图片、人物照片等，也包括辅助图，如小图标、标志、导航图标、banner（横幅）图形等。由于人们对直观的图形图像的兴趣往往大于对文字的兴趣，因此在网页设计时应注重多考虑图形与图像的运用，以丰富网页版面的趣味性，吸引浏览者的注意力。

2.1图形与图像的设计原则

首先，确定页面图形图像与其他设计元素的面积比例。通常情况，浏览者视觉最先注视到最大的图像，然后才是其它元素。因此，主题图像的大小应居于领导地位，其它图像应处于从属地位，起辅助功能，这样主次分明、大小穿插的组合形式才能构成最佳的视觉效果。

其次，注意图像的大小和数量对浏览速度的影响。人们在浏览网页时最不愿意的就是过多的等待时间，而图像的大小和数量是除了网络传输速度外，影响网页打开速度最主要的因素。因此，合理的图像数量和大小就是设计者应着重考虑的要素。

最后，图形与图像的使用应使页面整体风格统一，具备良好的审美性。图形与图像是页面设计的点缀，应以最直观的形式向使用者展示网页的思想内涵，传达设计者所要表达的意思。

2.2图形与图像格式的选择

在网页设计中，最常用的图形与图像的格式是GIF和JPEG，其次是PNG。它们都是经过压缩后的图片格式，根据设计场合选择格式。

GIF格式是使用最多的网页图像格式，是经过无损压缩而得到的，压缩的原理在不降低图像质量的前提下，减少色彩显示的数量，最多可支持256种颜色的显示。这种格式还可实现图像背景透明的功能，方便图像与页面更好的融合。此外，这种格式还可将静止的图像转化成动画图像，在网页的标志等处使用较多。

JPEG格式是使用非常精确的算法对图像进行压缩，虽然它是一种有损压缩形式，但是由于它的压缩程度低，因此色彩还原性好，大约可呈现1670万种颜色。因此，对于色彩丰富且又不想影响浏览者访问页面的效率，JPEG格式是一个很好的选择。

PNG格式是一種无专利限制的格式，其中，PNG-8最多支持256种颜色，与GIF相当；PNG-24支持RGB模式，可呈现品质较高的画面；PNG-32在PNG-24的基础上，可根据需要增加了alpha通道，设置透明的效果。在以往的网页设计中，PNG格式使用并不广泛，主要是因为IE6及以下版本的浏览器对PNG的兼容性不强，但后来的IE7和IE8浏览器中已经全面支持PNG格式。PNG格式既有GIF的图像背景透明的功能，也有JPEG清晰度高，效果好的特点，因此在未来的网页设计中，PNG格式潜力很大。

3动画及流媒体设计

动画及流媒体是多媒体网页与其他平面印刷媒体最大的区别。网络带宽的扩大和计算机显示技术的发展，使得网页上的动画及其他流媒体的呈现成为可能。人们生活水平的提高和娱乐需求的增长也促进了多媒体网页的发展，目前，国内比较大的多媒体视频网站有优酷网，土豆网，六房间等。

网页动画最初出现过GIF动画、Applet动画等，但都由于一些自身的不足而没有成为主流，直到Flash动画的出现，网络动画才开始广泛的应用。网页Flash动画可用于网页形象设计、功能导航按钮、网页广告等地方，在网页设计中起画龙点睛的作用。从功能上讲，Flash动画的设计应该最大限度给用户提供便捷的操作界面和功能按钮；从审美角度上讲，Flash动画应该遵循平面设计的基本原理，符合人们的审美需求，根据网页的风格有针对性的进行设计，使得网页中图像的“静”与Flash的“动”相结合，体现出网页的空间层次感和艺术性。

流媒体是指数据在网络上按时间先后顺序传输并播放的连续视频和音频数据流。由于它包含了声音及视频信息，导致它数据量大，对带宽要求较高，所以，在设计时，应考虑网络传输速度这一主要因素。除此之外，流媒体网页中设计元素可分为两类：一是需要用户手动点击方可执行文件的被动式流媒体文件；二是打开网页即可激发文件运行的自发式流媒体文件。在网页设计时，应充分考虑访问者的浏览习惯，因为强迫式的让用户浏览自动弹出的广告或者其它内容可能会使用户产生厌烦情绪，不利于网页与用户之间的交互。

4色彩设计

色彩是视觉传达的重要手段和途径，也是网页设计中重要的组成部分。色彩如果运用合理，能使网页设计锦上添花，更具吸引力。因此，在网页设计时，要注重色彩对网页设计的影响，遵循“总体协调，局部对比”的总设计原则，具体可从以下方面考虑：

4.1要与网页主题相协调

网页设计要突出主题，运用色彩设计突出网页主题。例如：餐饮企业的网站多以橘红、橙黄色系为主，目的是使人產生食欲，加深对企业的印象。

4.2体现出网页的风格特点

网页色彩只有与众不同、突出自身独有的风格特点，才能在众多的网页设计中彰显个性，给用户留下深刻的印象。例如：可口可乐公司的主色调一贯是红色，给人一种激情的感觉。

4.3符合浏览者的心理行为习惯

色彩与人的心理感受和行为习惯都有一定的关系，不同的色彩对于浏览者有不同的情感象征，因此，網页色彩设计应充分考虑浏览者的心理行为习惯。红色代表激情、活力、吉祥和温暖等，容易引起人们的注意。但使用过多则容易使人视觉疲劳。灰色代表谦虚、中庸和平凡等，属于中性色彩，能被大多数人接受，一直是流行的主要颜色等。

5结语

科学、合理的网页人机界面设计既要体现时代的审美特性，也要符合人机工程学的设计原则。本文重点对文本、图形与图像、动画及流媒体、色彩等网页界面设计要素进行研究，从人机工程学的角度提出了详细的设计要求，具有较强的操作性和借鉴意义。

参考文献：

[1] 柯和平.Web网页基本元素的设计原则与技巧[J].中国电化教育，2001（8）：64-67.

[2] 张思望.网页设计中视觉元素的功能与审美性研究[D].西安：西北大学，2006.

[3] 吴昊晨.网页中的文字设计浅谈[J].黑龙江科技信息，2010.

[4] 陈丽霞，黄卓顺.浅谈校园网网页色彩的设计[J].湖北广播电视大学学报，2010，30（4）：97-98.