APP下载

基于Web前端开发技术的视觉效果研究

2021-03-24朱双双

电脑知识与技术 2021年2期
关键词：视觉效果用户体验优化

朱双双

摘要：随着Web前端开发技术的不断发展，实用性和美观性兼具的网页才能吸引大众的视线。通过研究Web前端开发技术的视觉表现形式，将Flash动画和轮播图技术应用于网页，增强网页的视觉效果，同时通过前端开发技术的优化措施提升网页的性能，提升浏览者的用户体验度。

关键词：Web;前端开发;视觉效果;优化;用户体验

中图分类号：TP393.092      文献标识码：A

文章编号：1009-3044（2021）02-0217-03

Abstract： With the continuous development of Web front-end development technology， the webpage with both practicality and aesthetics can attract the public's attention. By studying the visual representation of Web front-end development technology， the webpage applies flash animation and carousel technology to enhance the visual effects. At the same time， improve the performance of the webpage and enhance the user experience of visitors through optimization measures of front-end development technology.

Key words： web; front-end development; visual effects; optimization; user experience

1 背景

隨着互联网技术的飞速发展，人们开始越来越关注Web页面的设计、美工。众所周知，网页是接触浏览者的第一入口，因此，视觉效果出色的网页能吸引大量的浏览者，而Web前端开发技术作为网页制作中一项不可或缺的技术，能够设计网页的排版布局，动画效果，文字样式等，网站开发者通过这项技术呈现视觉效果出色的网页界面，提升浏览者的用户体验度。

2 Web前端开发技术

Web前端开发技术有HTML、CSS和JavaScript三种主要语言，它们在前端开发中各司其职，发挥不同的作用[1]。HTML（英文全称：Hyper Text Markup Language ）是网页制作的超文本标记语言，通过各类标记标签将文字、图片和动画等内容展示出来。HTML5技术是HTML不断发展的成果，不仅包含了HTML的技术，还拥有强大的绘图功能，能呈现惊人的视觉效果。CSS（英文全称：Cascading Style Sheets）是修饰网页的层叠样式表，能够精确控制网页中各种元素的排版。CSS3是CSS技术升级的最新版本，它增添了多种CSS的样式属性，丰富了CSS的样式设置[2]。JavaScript是一种用于网页开发的高级脚本语言，能够增加HTML页面的交互性，为用户浏览网页提供美观的视觉效果。

3 WEB前端开发技术的视觉表现形式

3.1 网页布局

网页布局在网页设计中起到非常重要的作用。只有设计了合适的网页布局才能进行后续的开发工作。优秀的网页布局能对用户进行视觉引导，通过合理的页面布局，引导浏览者快速获取网页的主要信息，提升浏览者的用户体验度。DIV+CSS是使用最广泛的网页布局技术，DIV负责划分网页的各个内容区域，构建页面的框架，CSS负责网页的样式设计，美化网页[3]。

3.2 色彩运用

合理的色彩运用是网页设计的重要条件之一。色彩具有强力的视觉影响作用，色彩基调突出的网页能快速抓住浏览者的眼球，使其留下深刻的印象[4]。色彩也具有视觉区域划分的作用，通过多个色彩标记不同的信息内容，可以区分信息之间的主次，突出网页中的重要内容。网页的色彩可分为主色彩、辅助色和强调色。主色彩是网页的主基调，在网页中具有主导作用。辅助色和强调色的运用可增加网页的层次感，增加页面的视觉效果[5]。

3.3 文字风格

文字是网页中不可替代的重要元素。文字的字体、字号和颜色的设置都能影响网页的视觉效果，所以需要合理设计。生动地文字风格不仅能增强网页的视觉效果，还能清晰地传达网页信息。文字风格设计需要遵循三个原则[6]：1）文字编排需要具有条理性，避免杂乱，影响浏览者阅读;2）文字风格需与网页的整体风格相统一，根据不同主题的网页设计特有的文字风格;3）文字的设计不能脱离易读性与可读性，可读的和易于识别的文字才能传递网页信息。

3.4 网页交互性

网页具有交互性是网页与用户互动的最基本要求，用户通过和网页交互，能快速找到相关信息，提升用户接收网页信息的主动性和积极性。目前，在前端开发技术中，JavaScrip是最常用的交互技术。为了增加网页的交互性，吸引用户的视线，主要通过以下三种方式实现[7]：1）突出网页中的按钮和链接的设计，促使用户点击按钮和链接，完成页面跳转;2）设计结构清晰的导航，合理清晰的导航帮助用户快速找到所需信息;3）适当加入Flash动画元素，生动形象的动画不仅能美化网页，还能很好的传递网页信息。

4 Web前端开发技术的视觉效果应用

为了让网页增加趣味性和活泼性，下面两种技术的应用将为网页的视觉效果增色不少。

4.1 Flash动画

当鼠标点击图1，Flash动画的效果从图1至图3渐变，效果图如下所示。

实现渐变Flash效果的核心代码如下：

4.1.1 HTML代码

4.1.2 CSS代码

.box {

width： 800px;

height： 500px;

position： relative;

}

.box img {

width： 800px;

height： 500px;

position： absolute;

left： 0;

top： 0;

}

.show1 {

transition： all 3s;

}

.show1：hover {

opacity： 0;

}

4.2 轮播图

轮播图的效果图如图4所示。

实现轮播图效果的核心代码如下：

4.2.1 HTML代码