网页视觉元素的人性化设计探索

李　艺　李世国

摘要：本文从人性化设计的角度，总结了影响视觉元素人性化设计的因素，对网页中的文字、图形图像、动画、色彩等基本视觉元素的人性化设计方法进行了分析探讨，为网页的人性化设计进一步深入研究提供参考依据。

关键词：网页视觉元素人性化设计

网页是互联网进行信息传播的载体。是人们利用互联网进行工作、学习、生活必不可少的重要媒介。人们每天都会浏览大量的网页，有些网页人们流连忘返，有很高的访问量；有些网页人们匆匆掠过，无人问津。那么，到底什么样的网页才是人们所乐于接受和喜爱的?

网页给人的第一印象来自视觉印象，可以说，网页中起着视觉传达作用的视觉元素，其设计的人性化与否将直接影响着网页的访问量。如何使网页的视觉元素符合人性化设计的标准，满足人们的视觉需求，是网页设计师们需要不断深入研究和探索的重要课题之一。

人性化设计的概念及特点

首先，什么是“人性化”?百度百科里这样解释：人性化是指厂家在设计产品时力求从人体工程学、生态学和美学等角度达到完美，从而真正实现科技以人为本的目的。一位设计师将人性化设计归纳为：以人的心理为圆心，人的生理为半径，建立一种人和物的最佳和谐关系，来达到保护人的健康，挖掘人的潜能，提高人和物的工作效率。

人性化设计不是产品的造型如何新颖夸张、功能如何丰富强大、视觉效果如何绚丽多姿，而是产品上的每一个元素和功能都有其存在的理由和用途，并且能够使用户在使用过程中安全合理、有效便捷、舒服自然地完成各项操作。只有站在用户的角度审视和理解人的心理特点及行为属性，才能在产品的设计中更加准确地把握用户的生理、心理及思维方式的特点，设计出更贴近用户人性本质需求的产品来。

网页视觉元素进行人性化设计需要考虑的因素

首先，人性化设计的核心是人。人性化设计是为了满足人的各种需要而存在的。人的需要是进行人性化设计首先要考虑的因素。网页主要是通过视觉元素的引人注目而实现信息内容的传达功能。视觉元素的人性化设计一定要考虑人的视觉需要。视觉需要指的是人们对网页元素的大小、颜色、形式等因素的视觉需求。由于用户年龄的不同，对网页视觉元素的类型及大小方面要区别考虑。在人性化设计时，只有调查分析不同用户的需求，针对性地解决和满足不同用户的需求问题，才能设计出真正符合“人性化”的网页来。

其次，机的因素影响并制约着网页人性化设计的深度和广度。机的因素主要是指网络传播信息的输出设备——计算机以及网络的技术因素。对网页产生直接影响的机的因素主要是显示器屏幕尺寸、Web安全色以及网络传输速度等方面的因素。例如：在网页设计时，要首先确定网站界面的尺寸。网站界面的大小尺寸的确定要按照市场显示器分辨率使用率占市场最大比例的分辨率尺寸决定。从W3Counter于2006年11月12日发布的全球统计数据得出：1024×768分辨率的使用率占了绝大部分。因此网页尺寸的界定，就需要按照1024×768分辨率大小来进行设计，这样网页才能符合大多数用户的机的因素，满足大多数用户的视觉需要。

网页视觉元素的人性化设计

在网页发展初期，网页只是由一些文字组成的文本格式供人们浏览。经过几年互联网技术的快速发展，图像、声音、动画、视频等多媒体元素开始在网页中出现。现阶段，网页中的视觉元素主要包括文字、图形图像、动画、视频、色彩等。

文字元素的人性化设计。文字是网页进行信息传达的最基本的视觉元素。在网页中，文字仍是其他视觉元素所取代不了的，在视觉传达方面仍然占据着主要位置，发挥着较大的作用。文字的人性化设计主要从文字的几个方面的属性人手，文字元素的属性包括字体、样式、字号、色彩等。

(1)字体：默认的IE浏览器定义的标准字体是中文宋体和英文times new Ro-ma字体。也就是说，如果你没有设置任何字体，网页将以这两种标准字体显示。同时，这两种字体也可以在任何操作系统和浏览器里正确显示。Windows另外自带了40多种英文字体和5种中文字体。凡是使用Windows操作系统的浏览器都可以正确显示这些字体，但在其他操作系统里，如unix则不能完全正确显示。为保证网页的信息能够正常地呈现在每一个用户的面前，通常情况下，宜采用宋体、黑体、楷体这三种字体或各种操作系统都能正常显示的字体。

(2)样式：文字的样式有四种，即正常体、斜体、粗体、粗斜体。在网页的设计中，根据文字内容需要，在需要突出、有变化的文字信息部分，可采用斜体、粗体等样式予以区分，会引起浏览者的视觉注意，达到传达的目的。但是这种样式上的变化越少越好，毕竟斜体使人难以阅读。

(3)字号：字号是表达文字大小的专业术语。在网页中选用大字号会产生视觉上的强烈冲击，而小字号则造成视觉上连续的吸引。避免因字号大小选用不当而造成浏览者的视觉疲劳，影响网页信息传达的功能。

随着电脑技术的不断提高，显示器的尺寸在逐渐变大，分辨率也在逐步提高。在分辨率大于1024×768的显示器上浏览网页时，浏览者会发现大部分网页上的文字看上去越来越小，人的正常视力都无法轻松地识别出信息内容来了。如何使每一位浏览者都能轻松自如地阅读文字，是较费脑筋的一件事情。目前，大多网页多增加阅读信息文字的增大与缩小字号的功能，在一定程度上方便了不同用户的阅读需求。

(4)色彩：文字的色彩通常根据网页的整体色调或标准色来定，选用色彩的标准是满足人眼的可视需要。一般情况下，为了让浏览者对某一信息产生视觉注意力，常把该信息标题文字的色彩选用饱和度高、视觉跳跃率高的色彩。内容文字的色彩多采用与背景色形成对比数值较大的色彩，使文字与背景有比较大的对比以利于文字内容的阅读。尽管在深色背景上使用亮些的字可以让文字容易阅读些，但实践及事实证明，在深色背景上阅读色彩明度对比度较大的文字会让眼睛非常疲劳，不符合“人性化”的设计原则。通常，大部分网站都采用在浅色背景上常用黑色或深色的文字。比如：新浪网、搜狐网、中国教育网等著名网站都使用白色背景，黑色、深蓝色等深色字体作为内容字体，红色、橙色作为热点信息的标题，等等。

图形图像元素的人性化设计。相对于文字来讲，图形图像由于传情达意更为直观、醒目，没有语言障碍，更易被用户所注目。

在对图形图像元素进行设计时，要根据网页对图像的不同要求进行尺寸或色彩饱和度的优化。比如：大的图形图像容易形成视觉焦点，感染力强，传达的情感较为强烈；小的图形图像常用在文字内容的配图上，显得简洁而精致，有点缀和呼

应页面主题内容的作用。图像的大小不仅决定着主从关系，也控制着页面的均衡与运动。大小对比强烈，给人跳跃感，使主角更突出；大小对比减弱，则页面稳定、安静。这是因为访问者在浏览页面时，首先会注意到大图像，然后再看到较小的图像，这种由大到小的视觉引导，会使浏览者的视线在页面上流动。

由于网络传输速度的限制，网页中的图形图像需要对图像的格式大小进行优化设计。目前网页通常使用两种图像格式：GIF和JPEG。除此以外，还有两种适合网络传播但没有被广泛应用的图像格式：PNG和MNG。这几种图形图像格式压缩比例比较高，下载速度快，具有跨平台的特性，使用户在浏览图形图像时不需要安装插件即可直接浏览。

动画元素的人性化设计。动画极具变化性的特点，对视觉有极强的冲击力。在网页中，动画多应用到广告、形象展示、导航、图标及按钮设计上。动画的人性化设计能提高人们的视觉注意力，增添网页的趣味性，加深用户浏览网页的兴趣。

比如静态的图标平淡无奇，若将图标处理为动态效果，如发光、变色、抖动等动态效果，将会使它成为闪烁的“亮点”，吸引用户视觉注意，增添网页的趣味性。在做动态处理时，也应当注意到：动态与静态部分要有密切关系，搭配和谐；动态变化不能过多，否则会削弱网页的整体视觉美感，分散浏览者的注意力。

同样，导航条和按钮动画效果也会使用户增添浏览的兴趣。目前，有许多网站将页面的导航条做成了Flash动画，视觉效果很理想。但是值得注意的是，尽量不要使用Flash形式的导航条，如果有些用户没有安装Flash插件，他们就不能快速而正常地浏览你的网页。

视频元素的人性化设计。视频在网页中比静态图像表现更灵活、生动和深刻，在表现形式上可以做到集时间与空间、视觉与听觉、表现与再现于一身，使浏览者如身临其境一般地获得视觉和艺术的享受。但是在网页中应根据需要来使用视频，因为过多地使用视频会以牺牲网页浏览速度为代价。随着互联网流媒体技术的日益成熟，当网络速度不再是问题的时候，视频在网页中的应用也越来越普及。

视频元素的人性化设计主要体现在对视频的尺寸、压缩、位置布局上。通常情况下，为不影响视频流畅的视觉效果，视频的尺寸要控制在500px×500px之内，视频的格式也要经转换或压缩成网络通用的视频格式，如ASF、WMV、RM、RMVB以及当前网络上最流行的FLV视频格式。这些格式的视频在网页上的播放比较清晰流畅。一个网页最好只布局一个视频窗口，在位置的布局方面，通常位于视觉注意度高的网页中上部区域，这样才能使用户不受干扰地欣赏他所需要的视频，获得最大的视觉享受。

色彩元素的人性化设计。无论是平面设计还是网页设计，色彩永远是最重要的环节之一。色彩是一种对浏览者有强烈情感影响和心理暗示作用的视觉因素。色彩设计在营造视觉冲击力、吸引用户注意力上起着重要作用。马克思说：“色彩的感觉是一般美感中最大众化的形式。”色彩被分为冷色调、暖色调和中间色调。心理学研究表明，冷色调会减缓人们的感知反应时间，从而使人们对事物的知觉注意力得到持续；反之，虽然暖色调容易引起视觉注意，但是由于其加快了人们的时间知觉，长时间注意容易使人们产生视觉疲劳；而中间色调具有比较稳定的情绪特征。

色彩是丰富多彩的，但在网页的色彩设计方面却不能随心所欲。我们通常所用的计算机显示设备能够显示出24位真彩色，并不能保证所有显示设备都能正常显示出来，而使用216种网页安全色进行网页配色可以避免色彩失真问题。216种网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，也就是说，这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。如果网页中没有使用网页安全颜色时，有的显示设备系统就会自动对超出216种范围的颜色进行相应的处理，系统会选择两个类似的网页安全颜色进行交叉显示，而此时的色彩影像效果常常是比较模糊的，不利于图形图像的视觉传达。

目前由于显示设备技术的不断提高，Web安全色不再是唯一的选择，但由于图片中包含的色彩越来越影响其存储的大小，建议仍应根据需要选用色彩。在色彩元素的人性化设计中，应分析不同社会背景用户的心理特征，合理地选用及搭配网页色彩的色相、明度和纯度，使色彩能够充分地展现出网页的特色，获得用户情感和心理上的认知。

结语

总之，人性化设计是要注重人的需求，运用多学科知识，对网页功能的内涵加以扩展，使网页更具生命力。呈现“人性化”的视觉效果。所以，网页视觉元素的人性化设计需要网页设计师从人的视觉特点和心理需要出发，在网络技术因素支持的情况下，细致入微地考虑到每一个设计环节，关注人的内心感受，设计出人们所真正需要的人性化的网页产品来。无论社会和科技如何变化和发展，对于人们所使用的任何产品来说，人性化的设计理念是始终不会改变的。

编校：郑艳