视觉空间元素在网页设计中的应用研究

摘要：随着互联网的发展，越来越多企业意识到通过互联网发布企业网站可以大范围、低成本地宣传企业、提升产品知名度、与客户进行线上互动，及时解决客户问题，提高企业利润等。目前很多网页设计师只注重功能和实用性，忽视了网站的艺术性设计，往往给人一种枯燥乏味的感觉，缺乏吸引力，没有关注到浏览者的心理感受，从而使其功能大打折扣，而网页要给访问者留下深刻的印象，使网站信息易于被用户接收传播，应该做到美观与实用相结合，使网页构成合理有趣、色彩丰富，能在感官上迎合浏览者的心理，吸引其注意力，并带来愉悦感受。因此，掌握好视觉空间元素在网页设计中的应用是十分有必要的。关键词：视觉空间元素；网页设计；点、线、面中图分类号：G399文献标识码：A开放科学(资源服务)标识码(OSID)：文章编号：1009-3044(2019)29-0212-03Researchontheapplicationofvisualspaceelementsinwebdesign

LISi-Lan,GUOYa

(GuangdongInnovativeTechnicalCollege,Dongguan523960,China)

Abstract：WiththedevelopmentoftheInternet,moreandmoreenterprisesrealizethatreleasingcorporatewebsitesthroughtheIn⁃ternetcanpromoteenterprisesinawiderangeandatalowcost,improveproductpopularity,interactwithcustomersonline,timelysolvecustomerproblems,andimprovecorporateprofits.Manycurrentwebdesignersfocusonfunctionandpracticability,andig⁃noredtheartisticqualityofwebsitedesign,oftengivepeopleafeelingofdull,lackofappeal,noattentiontothevisitor'spsychologi⁃calfeeling,makingitagreatdiscountfunction,andwebpagestogivevisitorsleavedeepimpression,makeinformationeasilybytheusertoreceivespread,beautifulshouldbecombinedwithapractical,makeawebformreasonableinteresting,colorisrich,cancatertothevisitor'spsychologicalonsensory,attracttheirattention,andbringjoytoexperience.Therefore,itisnecessarytomas⁃tertheapplicationofvisualspatialelementsinwebdesign.Keywords：Visualspatialelements;Webdesign;Dot,line,surface高等职业院校是以提高人才培养质量、服务产业转型升级和创新驱动发展培养造就大批高素质技术技能型人才为目的。因此，提高学生专业技能在高职院校的整体教学中占据重要地位。

目前，很多高校计算机专业都有开设《网页设计》这门课程，它是一门实践性很强的学科。作为非艺术专业的学生，由于没有系统的学习平面构成课程，以致在网页设计过程中普遍存在对视觉空间元素的使用不恰当、色彩搭配不协调、布局不合理、专业技能和创新能力有待提高等相关问题。

1视觉空间元素在网页的艺术设计里，网页中的文本、图形、图像、音频、视

频、动画等，均作为视觉形式的语言，它们在网页设计师的眼中

都是最基本的视觉空间元素—点、线、面。网页设计的过程就是在特定的空间中设计和布局好这些点、线、面以及留白，使其准确传达出特定的信息，给人以艺术美的享受。20世纪初，俄国画家现代抽象绘画创始人瓦西里·康定斯基最先提出仅仅利用点、面、线、色等纯形式的因素，传达精神和情感的内涵，能带给人美妙的光彩。网页设计师从不同的角度观察优秀网站网页中的点、线、面的构成及变化规律，就可以发现，不同主题的网站，其点、线、面视觉元素的距离、位置、面积和视觉流程等均运用了平面构成规律，充分展现出视觉元素的魅力。

因此，在不同主题网站的设计里，网页设计师有必要对点、

收稿日期：2019-06-25基金项目：广东创新科技职业学院2018年校级科研项目，项目编号：2018XJYB024作者简介：李泗兰(1983—)女，广东梅州人，高级工程师，讲师，硕士，主要研究方向为计算机应用、网页制作和平面设计等领域的工作；郭雅(1980—)，男，广东信宜人，高级工程师，高级技师，实验师，主要研究方向为云计算与大数据、网络管理等领域的工作。212

多媒体技术及其应用本栏目责任编辑：唐一东

第15卷第29期(2019年10月)

线、面视觉元素的设计应用进行系统的了解，深入细致的研究。1.1网页的基础元素—点在平面构成中，点作为最基础的构成元素存在。点的构成存在两种形式，一是不规则的自由排列，一是按一定规律的秩序进行排列，无论采取哪种排列方式都需按照形式美的法则来进行。在实际的网页设计中，点是相对而言的，页面中任何相对小面积的元素都可以视为是一个点。例如在静态空间中，一张小图片、一个文字、一个小图标，都可被视为一个点；在动态空间中，一个音频、视频、动画，都可被视为一个点；在互动空间中，一个菜单、按钮、页面、超链接文本，甚至一个网站，都可被视为一个点。如图1所示。

图1点在网页中的应用1.2网页的互动元素-线线是点的移动轨迹。点的大小决定了线的宽度。点移动

的速度和方向决定着线的形态。线有两个作用，一是用于塑造形象，二是用于分割页面空间布局，线是页面布局的决定元素，使画面承载的信息规范、整齐、有条理，使浏览者清晰、明确地领会到网页设计师所要表达的信息。在互动空间中导航栏的设计上，按照导航栏内容的主次和内在关联性进行分类，根据不同浏览者进行需求互动点击，形成不同的虚拟线型网络。如图2所示。

图2直线在网页中的应用根据性质分，线有直线和曲线两种，不同的线条给人不同的视觉感受。在网页中，线有真实线和虚拟线之分，不同的线型带给人不同的感受。水平线,给人静止、安定、舒展、延伸的感受，容易让人联想到海平面；垂直线，给人以严肃、挺拔、上升、下降等感受；斜线，给人以速度、动感和活力的感受；曲线，给人以柔软和节奏美、优雅和理性的现代美；自由曲线则给人以一种富有变化的轻松自然美。如图3所示。

本栏目责任编辑：唐一东

ComputerKnowledgeandTechnology电脑知识与技术

图3自由曲线在网页中的应用1.3网页中的视觉韵律-面在设计视觉效果中，面是点的扩大与集合，线的宽度增加与集中、平移、翻转均可产生面的感觉。相对于点和线来说，面占据空间多，视觉冲击力强。面可分为真实空间面和虚拟空间面两类。面的量感和体积感特征在网页中起到稳定作用，4态，所示。此外，如图使之产生三维空间感，面可以用多种方法来表现二维空间中的立体形如图5所示。

图4面的量感和体积感在网页中的应用图5面产生三维空间感在网页Banner中的应用2视觉空间元素在网页设计中的综合应用作为一名优秀的网页设计师，首先要有一定的审美能力，

即具有一定的鉴别和领会事物或艺术品的美的能力；其次要具有一定的创意，创意是一个网页设计师的灵魂。网页设计师根据平时所积累的各种各样的生活素材在瞬间得到完美结合，所形成的一种美的创新，它是灵感与意境的结合，是完美与创新的化身。图6、图7、图8、图9为点、线、面在网页中的综合应用实例。

多媒体技术及其应用213

ComputerKnowledgeandTechnology电脑知识与技术第15卷第29期(2019年10月)

图6点线在网页中的应用图9点线面在网页中的综合应用3结束语通过对视觉空间元素点、线、面知识的学习与掌握，一定程度上提高了学生对网页元素的排版布局、色彩搭配能力，以及创新创意能力；同时，提高了学生对艺术的审美能力，从而设计出的作品具有美感、新颖、贴切企业和浏览者的需求，为将来成为一名优秀的网页设计师打下夯实的基础。

参考文献：图7点线在网页中的应用[1]张晓蕾.网页设计与制作教程[M].北京.电子工业出版社,2014.[2]张俊峰,朱巍,精通Photoshop网页美工设计[M].北京：清华大学出版社,2015.[3]于国瑞.平面构成[M].北京：清华大学出版社,2014.[4]张利平.网站主页中的点、线、面构成设计运用[J].美术教育研究,2014(10):88-89.[5]李翠轻,郭军城,董龄烨.平面构成在网页设计中的应用与嬗变[J].石家庄铁路职业技术学院学报,2014(3):77-78.[通联编辑：朱宝贵]

图8面在网页中的应用(上接第211页)

参考文献：[1]沈宏兴.多媒体教学服务的创新模式[J].现代教育技术,2015(10).[2]方向阳.多校区管理模式下的多媒体教室综合管理系统研究[J].软件导刊.教育技术,2017(3).[3]蔡娜娜,韩齐.提升高校多媒体服务水平的改革与实践[J].中国教育技术装备,2017(10).[通联编辑：唐一东]

3效果分析中心对整体故障更清晰的了解，通过对工系统的分析，如

图4所示，可以提前做好相应的应急保障和处理预案，根据故障分布情况和类型，及时做出人员调配，大大提高了处理故障时效，统一了报障的入口(校内电话80000号或邮箱80000@su⁃da.edu.cn)，也为广大师生提供了更加便捷的校园服务，提高了中心服务故障的效率和口碑。

214

多媒体技术及其应用本栏目责任编辑：唐一东