摘  要：在网页设计中，视觉元素影响着内容表达和风格展现。为在网页设计中实现视觉元素的合理运用，使视觉元素功能得到充分发挥，文章对网页设计中视觉元素的分类组成进行了分析，并对视觉元素具备的心理呼应、信息导向、辅助传递等功能进行了探讨。结合高校网页设计实践，对视觉元素在界面布局、人机交互等方面的运用进行了探究，对网页设计中视觉元素选择和应用提出了建议，为网页中的视觉元素设计提供参考。

关键词：网页设计;视觉元素;信息传递;审美特征

Abstract：In web design，visual elements affect content expression and style presentation. In order to realize the rational use of visual elements in web design and make the functions of visual elements give full play to，the classification and composition of visual elements in web design are analyzed，and the psychological response，information orientation，and auxiliary transmission functions of visual elements are carried out. Combining the practice of college webpage design，the application of visual elements in interface layout and human-computer interaction is explored，and suggestions are made for the selection and application of visual elements in web design，and it provides a reference for the design of visual elements in web pages.

Keywords：web design;visual elements;information transmission;aesthetic characteristics

0  引  言

在互联网得到普遍应用的背景下，网站页面成为了新兴的大众信息传播方式，通过网页设计对文本、声音、图像等视觉元素进行综合运用完成信息传递。所以想要做好网页设计，还要重视视觉元素功能发挥，通过合理组合、编排呈现良好视觉效果。不同网页设计在内容和主题表达上存在明显差异，因此想要实现高校网页合理设计，还要对网页设计中视觉元素的功能与运用问题展开研究，进一步了解网页视觉要素构成，提出有效运用视觉元素传达信息的网页设计方法。

1  网页设计中视觉元素分析

作为可视化表达形式，视觉元素实际为视觉对象中心集合点，是人们用于信息传递接收的媒介。在网页设计中，包含的视觉元素主要可以划分为二维平面和视听两类。其中，二维平面视觉元素包含文字、图形、色彩、版式等，通过实现各种元素组合来承载信息与表现风格。视听元素主要包含动画和视音频等流媒体，能够在视觉与听觉上对用户产生强烈吸引力，传递丰富信息。网页设计需要对多种视觉元素进行堆积，基于一定视觉表现形式，立足信息传达，使各种元素相互协调，最终形成能够符合人们视知觉习惯的网页。

2  网页设计中视觉元素的功能

2.1  加强心理呼应

浏览不同风格的网页获得不同的感受，与视觉元素被赋予的情感有关。对于用户来讲，网页传递的信息包含理性和感性两类。理性信息主要通过文字传递，能够表达主题。而感性信息可以通过色彩、图案、版式等传递，与视觉元素运用密切相关。如在色彩运用上，红色给用户带来喜庆、兴奋的感受，但也容易引起视觉疲劳;蓝色可以给用户带来平和、冷静感受;紫色可以给用户带来神秘、奇妙的感受[1]。在网页设计中，设计者需要利用各种视觉元素使页面呈现出视觉流动的效果，在心理上与浏览者形成呼应，确保用户能够享受浏览过程。用户在观看网页时，视线会不停地移动，遵循人的视线移动规律进行视觉元素组合，能够建立心理上的联系，使用户感到轻松。合理进行视觉元素组合，能够使浏览者主动接受网页传递的信息。

2.2  提供信息导向

对于不同浏览者来讲，想要从网页上获取的信息只有一少部分，其余信息则为无用信息，不值得花费过多时间阅读。因此在页面设计上，需要运用视觉元素提供信息导向，体现页面的指示性，确保用户能够迅速找到需求信息，排除无关信息干扰。搜索網页会同时跳出多条相关或无关信息，不同于传统报纸排版依靠文字提示，网页需要在适当位置添加图片类的视觉元素，及时吸引浏览者目光，使信息浏览速度加快。相较于文字，图片能够将信息更直观地展现出来，并凭借独特风格产生视觉烘托效果，发挥引导阅读的功能。此外，考虑到网页中图片较多，为避免浏览者受到视觉干扰，需要保证页面整体构图清晰。因此运用图片提供信息导向，需要突出重点的同时，保持页面风格统一，确保浏览者获得指示后迅速完成信息搜索。

2.3  辅助信息传递

网页主体部分主要由文字、图片等二维平面视觉元素构成，使传递的信息量受到了限制。运用视听类视觉元素，能够在浏览者产生信息深入获取需求时辅助网页完成信息传递。根据个人的需求，用户可以通过点击网页有顺序的观看信息，保证信息内容得到完整、全面展示。在网页设计中，灵活运用视觉元素能够突破屏幕二维空间局限性，借助各种动态的视觉因素赋予网页三维的结构和形态，给用户的大脑带来强烈的刺激感[2]。如运用动画使页面更富动感，能够在视觉上给人带来更加愉悦的感受，在完成信息阅读后依然能够产生回味。正因为如此，相较于报纸、书籍，网页可以传递更多的信息，在网络时代更容易被人们接受。视觉元素的合理运用可以使浏览者在阅读过程中，获得更多的趣味，对网页内容产生更深刻的记忆。

2.4  体现审美特征

网页设计需要体现审美性，其中视觉元素就带有审美特征，无论是文字还是图片都需要按照视觉审美规律进行运用，在保证各元素相互协调的同时，还需要保持风格特色统一。在网络融入日常生活后，人们浏览网页不仅仅希望获得信息，更希望能够得到审美上的满足。在网页排版中，更需要从审美角度进行字体大小调整、图案搭配等各种元素间的协调，同时考虑内容和审美需求完成网页配色，保证整个页面清晰、内容有序，能够给用户带来美的感受。对各种视觉元素进行梳理的过程中，设计者还要在自身审美与浏览者审美间寻求平衡，在体现网页审美风格的同时，迎合受众需求，以便从审美上给用户带来良好印象，从而提高网页点击量。如美妆、服饰等页面浏览者主要为女性，通常搭配紫色、轻粉等受女性欢迎的色调，带有明显审美特征。

3  网页设计中视觉元素的运用

3.1  在界面布局上的运用

在网页设计中运用视觉元素，还要做好界面布局。在网页中包含大小各异、形态不同的文字和图片，无序排列将给人杂乱无章的感受，因此需要遵照一定秩序美感实现布局，使界面有机结合，提高整体性。学校网页设计多采用上下“T”型布局，符合人自上而下、自左向右的视觉习惯，确保浏览者能够快速获取需要的信息。“T”型上部主要为校园风景图和学校标志，属于宣传区域。下半部划分为两个区域，右边为学校新闻，左边为互动、查询服务。

广州大学松田学院图书馆网页在下方设置读者服务、相关下载等多个专题和链接区域，形成了上中下“国”字布局结构，如图1所示。实际“国”字型布局中间空间较大，约占60%，接近黄金分割比例，能够使视觉在信息集中区域得到汇集，同时又给用户留下了一定自由浏览空间[3]。但图1在图界面布局中间空间与上、下空间占比接近，主次不够分明。在后续优化中，还应突出重点，以便在布局上给用户带来较好心理体验。在页面中央偏上位置，主要安排重要文章和图片。学校网页多采用规范文字，给人带来庄重、典雅、古朴等感受，整体风格优美、清新。以文字和图片为主导，在页面上凸显重点，能够较好传达网页主题，树立高校形象。

3.2  在人机交互上的运用

为提供信息导向，网页设计需要重视人机交互视觉元素运用。学校网页多采用导航和链接的方式实现资源共享和信息交流，确保用户能够完成信息快速搜索，及时进行影像资料交换。导航设计风格需要与网页整体风格一致，保证色彩搭配能够做到和谐统一，在视觉上引起关注的同时，不能过分突出。

导航设计可以采用有底色独立模块，点击栏目时将跳出不同色块，多为纯色、渐变或半透明，能够在视觉上起到引导作用。导航栏实际就是列表，多采用图形化视觉表达方式，可以采用下拉式，不占据页面过多空间，通过进行功能展示。此外，也可以采用无底色文字与网页共用背景，但点击栏目会出现颜色不同的字体，引导用户做出选择。为给浏览者带来更好的交互式体验，部分重点区域也会运用动态FALSH插画，给用户带来有趣的感觉，如图2所示，广州大学松田学院独立学院发展研究中心页面在校园风景图设计上就采用了动态设计形式。在文字运用上，也可以在正常文字中穿插一些装饰性字形，使导航带有一定美感。考虑到页面能够展示的新闻、资讯等信息有限，后续还应通过设计超链接满足用户深入阅读需求，点击对应栏目后可以跳转至相应页面，进行文章阅读或视音频浏览。

3.3  在语言传递上的运用

实现语言的顺利传递，关键在于视觉元素的良好运用。在网页设计过程中，网页所显示的文字还应完成易读性编排。学校网页作为标题和链接的集合，应将文字作为主体，需要从大小、色彩上增强对比效果，确保重点信息、标题能够得到突出。在图片选择上，还需要先对页面底色进行确认，保证图片色彩与背景颜色能够很好地区分，同时能够与字体颜色形成有机搭配。从视觉上来看，文字和图片应形成相互补充效果，文字过多将造成页面死板、沉闷。因此长标题的内容需要保持一定距离，应通过长短错落排列，使内容更加易读，确保信息能够有效传递，如图3所示，广州大学松田学院网络中心网页设计就实现了标题文字的长短错落排列，使内容更加易读，确保信息能够有效传递。

从视觉平衡角度来看，文字多采用左对齐，右侧布置颜色明亮的图片。但在各个区域间，文字排列超出区域范围，显得较为密集，后续还应增加空白区域，使页面显得简洁，避免给浏览者带来过大心理压力。目前的网页设计大多采用Web 2.0技术进行页面设计，栏目通常使用方块的圓角边框，图标带有光滑反光效果，色彩的纯度较高，字形较大，这样的设计能够使页面特色鲜明[4]。但由于高校官网的曝光度较高，同时高校需要一定的社会认同，所以应避免所设计的网页与其他高校过于雷同，结合学校网页各自风格特色进行各种视觉元素的合理组合，尽量选用给用户带来高雅感觉的色彩和规范文字，使内容区、标签区文字、图片等拥有各自的辨识度，保证主题风格得到精练展示。

3.4  在效果呈现上的运用

在网页视觉效果呈现方面，还应重视审美功能的发挥。在色彩运用上，应对标识性、引导性和功能性的色彩进行区分，在引导用户操作的同时，保证色彩搭配统一，避免给用户造成眼花缭乱的感受。在学校网页设计中，主色调多采用蓝色、紫色、绿色等清新、高雅色调，与学校代表色相呼应，需要在各级界面中得到贯穿使用，确保形成的视觉形象辨识度、统一程度较高。在辅助色层上，也需要选择色调一致的颜色，增加色层，体现画面层次感的同时，保证风格一致。相较于主色调，辅助色颜色应适当降低饱和度，保证画面主次分明。从用户角度来讲，图片色彩应避免带来强烈视觉刺激，同时需要展现学校文化底蕴，因此需要尽量选用温和颜色。此外，网页还应适量添加动态元素，给用户带来一定视觉冲击力和亲和力。如添加视频影像资料让浏览者解放双手和双眼，在短时间内获得身临其境的感受，获取有价值的声音和影像信息。设计含有动态元素的网页，还应从辅助信息传递角度进行搭配，依然以文字和图片为主体，保证网页风格得到较好展现。

4  结  论

在网页设计中运用视觉元素，还应通过合理排版、配色带来愉悦和舒适体验，引导浏览者快速获取关键信息，保证信息得到有效传递的同时，满足用户审美需求。在实践设计时，还应遵循视觉传达规律完成界面布局，确保视觉要素组成能够起到互动和信息传递作用，尽可能呈现完美视觉效果，进而给浏览者留下深刻记忆。

参考文献：

[1] 李泗兰，郭雅.视觉空间元素在网页设计中的应用研究 [J].电脑知识与技术，2019，15（29）：212-214.

[2] 孙聪妮.视觉元素在网页设计中的应用与研究 [J].卫星电视与宽带多媒体，2019（19）：56-57.

[3] 张颖.平面视觉元素在网页设计中的应用 [J].电子技术与软件工程，2019（5）：59.

[4] 王晓俊.基于用户体验的网页界面视觉元素设计研究 [J].吉林工程技术师范学院学报，2019，35（1）：71-73.

作者简介：杨凯澜（1981—），男，汉族，陕西咸阳人，助理实验师，本科，研究方向：网站开发、Web前端设计、计算机硬件技术。