略论如何在“网页界面设计”教学中展开点线面的概念

姜希　姜金仲

摘 要：网页界面设计是数字媒体专业《版式设计》课程的重要内容。点、线、面是网页界面设计的基本要素，直接影响网页界面的最终呈现效果。本文以笔者的切身感受阐述了在网页界面设计课堂教学中如何向学生展开点、线、面的概念，并结合网页界面设计实际案例，详细分析了点、线、面在网页界面设计中的作用及运用形式。

关键词：版式设计；“网页界面设计”；点、线、面

我们处在快速发展的信息化时代，网络已经渗透到世界的各个角落。网页作为网络信息的强大载体，以文字、图片、视频的形式集中展示给大众并得到迅速的发展。人们已经不再仅仅满足对网页的技术追求，网页的外观设计、排版形式越来越受到重视。因此，网页界面设计也就成了《版式设计》课程的必讲内容。网页界面设计是在屏幕的有限空间内进行各种视觉元素的有序排列组合，它决定了网页设计的整体风格、色彩倾向以及视觉传达效果，因此版式设计是网页界面设计的根本。在网页中，无论怎样的版面，最终可以简化概括成点、线、面。研究版式设计基本构成元素的点、线、面可以更好地体现设计主题、突出网页中图片、文字、影音等元素之间的主次关系，最终呈现较好的版面视觉效果。由此可见，点、线、面在网页界面设计中有着重要的作用，同时也是网页界面设计的教学难点。

1 网页设计的基本要素——点

点在几何学意义上是以圆点为最基础的形态，它是具象的点。在网页界面设计中，点是以抽象形式存在的，它的效果取决于与之共存的其他元素相互之间的比例。网页中的一个图片、一个企业标志等以单独姿态呈现的视觉元素，都给人以点视觉印象。点存在的形式很多，可以单独存在点缀网页版面，也可以组合形式进行密集、朝向排列形成较强视觉牵引力，还可以线化、面化使网页版面更加灵活和凸显凝聚力，最终起到突出网页界面设计主题、平衡、填补空间、活跃网页画面的作用。

网页界面设计中点单独存在，往往以突出某个产品或者突出企业形象等形式出现。这种情况下，该元素往往会成为整个网页的主体物，通过这种形式达到加强人们视觉印象的目的。例如，苹果官方网页，主界面有四个滚动画面，每个画面都在中间位置放置主要内容或者是产品，搭配纯色简单背景，很好地衬托出以点元素形式存在的主体物。而多点形态存在时，可以进行疏密混合排列或者以聚集分散的形式进行组合。以密集形式组合排列网页中的点元素，可以给人以充满紧凑的膨胀感，进而集中对人进行视觉冲击，形成强烈的印象感。以分散形式组合排列的网页中的点元素，存在于网页的各个位置，使整个网页画面饱满感更强烈，如国外很多服装类网页，各个模特的不同服装展示或者不同的服装类型，会以多个点元素的形式分散排列在网页主界面，让人对该品牌的当季热销类型一目了然。

2 网页设计的空间强手——线

线由无数点的运动汇集而成，在几何学中，它只是长度的代表。在网页界面设计中，线被赋予粗细、材质等特定的形态，以直线、曲线实际的线条；文字、图片形成的虚线或者通过位置的编排引导形成的视觉流程线应用于网页的编排设计中，在整个网页中起到装饰、分割、界定空间，并有效地组织好网页中各种元素复杂关系的作用。

不同线的形态和类型可以带给人们不同的心理情感。例如，水平垂直线会给人一种稳定、严肃的感觉，比较适用于体现严谨、认真主题的网页界面设计；斜线则会给人带来很强烈的失衡感，比较适用于个性或者想要突出某样主体内容的网页界面设计，通过较强的视觉冲击力加深人们的印象；曲线常见的类型有弧线、圆形等几何曲线和自由曲线，给人柔和、舒缓、流畅等心理感受，能使散乱的版面变得集中，较适用于给人柔软口感的饮品、食物类的网页设计。尤其是自由曲线，可以形成引导浏览者的视觉流程线，使读者能按照设计师的设计意图去浏览网页，加强版面的可视性。

在网页界面设计中，通过不同类型线对网页版面空间的有效组织和划分，可以使整个网页保持良好的视觉秩序，形成统一和谐的视觉效果，同时带来丰富的层次空间感。对网页空间划分可以采用等量分割或者图文的直接分割：等量分割的网页秩序感强，但也会有呆板、形式单一的感受。因此，要注意主体对象是否合适，或者使用等量不等形的分割形式来打破单一感。图文分割可直接采用线条切割的方式，使图片和文字以独立形象存在以提升辨识度。但是用线进行空间划分要注意划分的比例及被划分元素之间的主次关系，以保证整个网页版面具有一个良好的秩序感。

3 网页设计的视觉呈现——面

面作为点或线的延续，在网页界面设计中占据最大的空间面积。相对于点和线来说，它具有更实在的质感和更形象的视觉表现力。面的形态多种多样，具体可以划分为规则形体的面和不规则形体的面。规则形体的面如几何形体、有机物体形成的面，样式简单且与我们的生活较为接近，容易与其他元素相协调，具有简洁、直观的表现效果。在进行网页界面设计时，可用几何形体的面体现严谨、规整的主题，提升网页版面的专业感；用有机形体的面增强网页的亲和力，拉近与浏览者的距离。不规则形体的面没有固定的形态，可以是生活偶然发生事件得到偶然形体的面，如物体掉落形成的喷溅形态等，也可以是对图像的复制或者手绘得到的自由形态的面。人们把这些形态运用到网页界面设计中，以自由、随性的形态呈献给浏览者，打破规整、单一的版面形式，加深浏览者的视觉印象。

网页中面的表达形式很多，可以把某个图片、字母进行放大处理，来形成突出显示面的效果；可以通过不同线的空间划分，以形成不同规格形状的面来强调各个板块的内容；可以根据主题风格通过颜色变化形成主次分明的版面结构，丰富视觉与网页本身的需求；也可以通过背景的面或留白处理衬托网页中的各个元素，以突出网页的信息，增加空间想象感。除此之外，网页的设计对象各不相同，有企事业单位、产品娱乐等，应有针对性地对面的形态类型进行调整。例如，一些企事业单位要呈现的是严谨、专业，应尽量减少网页中的面形态类型，以塑造出符合对象的务实感，增强网页内容的真实性。

4 结语

点、线、面作为网页界面设计的基本元素，它们相互影响、相互协调，通过合理的搭配最终形成完整的网页界面。点、线、面是相对而言的，由它们之间的比例关系而定，并且可以根据需要相互转化，组合成各种形态的网页版面。在设计时，应结合各个元素之间的特点，利用各元素之间的联系，合理编排最终形成具有自己特点、美观、信息传达明确的网页界面设计。因此，在网页界面设计教学过程中，必须结合实际案例，透彻分析、阐述三者之间的关系，让学生真正理解三者在网页界面设计中所发挥的作用，才能够收到理想的教学效果。

参考文献：

[1] 张磊.版式设计——点线面的艺术[J].石家庄职业技术学院学报，2013（01）.

[2] 张晶.网页设计中平面视觉元素的应用[J].中国管理信息化，2011（17）.

[3] SE编辑部.新版式设计原理[M].曹茜，译.中国青年出版社，2013.

[4] 邓勇.浅谈网页设计的布局及原理[J].渝西学院学报（自然科学版），2004（03）.

作者简介：姜希（1990—），女，贵州师范大学大数据与计算机科学学院助教。

姜金仲（1958—），男，贵州师范学院化学与生命科学学院教授。