- 人人都是设计师:视觉设计的原则和方法
- 董子源编著
- 2898字
- 2024-11-04 15:33:33
1.1 点、线、面
在很多情况下,视觉设计中的多种视觉元素之间的关系是错综复杂的,所以有时为了方便理解,我们可以将视觉元素分解为点、线、面,再进一步分析它们之间的关系。反过来,深入理解点、线、面的构成和属性,可以让我们在视觉设计中更好地把握视觉元素,并对其进行组织和解构。
点
点在几何学上只有位置,没有大小。但在视觉设计中,所有的点都有形状、大小、色彩、轻重甚至方向等属性。视觉设计中的大部分视觉元素都可以理解为点,由此我们可以更好地理解其构成。下图所示,视觉主体由文字组成,每个文字都有复杂的轮廓和边界,但在视觉构成上我们可以将它们解释为点。

点的形状
虽然放大来看,点都是一小块具有不同形状的面,但从远处看,这些小块的面都会被理解成点。所以点也有不同的形状,不同形状的点会表现出不同的情感和风格。
这是点

这是点

这也是点

点的大小、色彩、轻重
点在视觉设计中有不同的属性,这些不同的属性可使点与点之间形成对比、平衡、主次等各种视觉关系。对这些不同的视觉关系按照统一、平衡、节奏、主次等原则进行适当的处理,就会形成所谓的美感,形成好的设计,能让人感觉到美和愉悦。
点的大小

点的色彩

点的轻重

点的关联
一个点能成为视觉焦点,但是当出现两个点时,基于眼睛在画面里搜寻目标时具有的连续性,目光会自动移动到另一个点上,所以点与点之间会形成视觉关联。两个点会形成一个视觉关联,多个点会形成多个视觉关联,而且一般来说根据视觉距离的远近不同,形成的视觉关联的强度也不一样。
这是一个点

这是两个点可能会形成的视觉关联

这是3个点可能会形成的视觉关联

用圆形来描述点的关联可能说服力不强,可以换成文字试试 ,一个字就是一个点,当出现两个点甚至多个点时,点就无法孤立存在,彼此之间就会形成视觉关联。所以下图中的两个字或多个字会被连起来读,至于哪个字先读哪个字后读,则取决于字的位置、大小、轻重等。
一个点

两个点

3个点

点的应用
视觉设计中的点是无法孤立存在的,会自动与画面中的其他视觉元素产生关联。例如,同一种风格的点由于具有一致性,因此会产生较强的视觉关联,形成统一感。点的规律排列可形成节奏和韵律。相对于线和面来说,点是排列最灵活的视觉元素,也是最容易形成视觉节奏和韵律的视觉元素。

我们需要了解点的基本概念和属性,是因为视觉设计中大多数元素都可被视为点,掌握点的基本概念和属性对我们处理视觉设计中大多数点状视觉元素有非常重要的意义。视觉设计的更多原则和方法会在后续章节逐一介绍,目前仅需要了解点的一些基本概念和属性即可。
线
大多数人对于线的最初体验,是刚上学时老师第一次发下来的崭新的作业本,如单线本、双线本和田格本。线给我们留下的较深刻的印象是它界定了写字的方向,框定了写字的区域。线天生具有界定方向和划分区域的能力。
线在几何学上只有方向,没有大小。但在实际的视觉设计中,线不仅有方向,更有长短、粗细、色彩等不同的属性。由于线具有极强的方向性,非常容易引导视线,因此线成了在视觉上较容易识别的元素。换句话说,线极易吸引眼球,是一种富有表现力的视觉元素。稍微改变一下线的方向、长短、粗细等属性,其表现出来的情感就完全不一样了。
视觉设计中的线并非只有方向没有大小。由于采取的视角不一样,因此很多长条状的视觉元素都具有线的属性。例如下图中的视觉元素,就可以理解成线。线的属性在视觉设计中应用十分广泛,深入理解线的属性对视觉设计来说十分重要。
虽然排列的文字可以看作长条状的面,但从某种角度看,所有的面都具有线的属性

线的属性
在几何学上,线是由点排列和移动形成的,点的移动能形成线。在实际的视觉设计中,很多具有线的属性的视觉元素本质上都是由点构成的。点经过重复和规则排列,慢慢就具有了线的属性,即方向、长短、粗细、色彩等。
一个点

两个点

多个点排列成线

线的方向
方向是线具有的重要的属性之一,线天生具有引导视线的功能。线的方向统一能形成视觉上的秩序感和统一感。
线的方向

方向统一

方向无序

线的长短
线有长短之分,利用线的长短变化可使各视觉元素之间形成统一、平衡、节奏、主次等多种视觉关系。
长短统一

长短变化(一)

长短变化(二)

线的粗细
视觉设计中的线有粗细之分,粗的线通常比细的线具有更大的视觉重量。利用线的粗细变化和位置变化可以灵活营造图形的节奏和韵律。
线的粗细

线的渐变

线的主次

线的节奏

线的韵律

线的色彩
线是图形的一种,所有图形都具有色彩属性。色彩也是用于调节线与线之间的视觉关系的重要属性。
线的色彩

线的色彩对比

线的色彩变化

线的性格
视觉设计旨在传达信息,视觉的情感和氛围其实也是信息的一部分。不同类型的点、线 、面具有不同的性格,可以传达不同的情感和氛围。了解线的基本性格特征,对我们以后了解信息内容中的情感和氛围有非常重要的意义。线在情感的表达上比点更加灵活、更富有表现力。稍微改变一下线的方向、样式,就能让线传达不同的情感,例如平静、粗犷、曲折等。
平静的

弯曲的

升腾的

欲言又止的

曲折的

温婉的

粗犷的

面
点的重复和移动可形成线,线的重复和移动可形成面。面是视觉设计中用得最多的视觉元素。基本上所有组成视觉设计作品的视觉元素都可视为面。点放大之后,有具体的形状、大小、色彩、轻重等属性,可以理解成面积很小的面。线具有长短、粗细等属性,某种程度上也是面。而且,点的积累和阵列可形成面,线的积累和阵列也可形成面,并具有面的功能和属性。
在实际的视觉设计中,很多元素的组合都会形成一个个面,面的大小、轻重(这里表达的是视觉重量)对比等又能形成主次、平衡等视觉关系,如下图所示。深入理解面的大小、轻重等属性对以后理解视觉设计中元素的构成和关联有非常重要的意义。
单个文字都可视为一个点,多个文字组合和排列之后的图形已经形成了面,在视觉设计中要考虑该面的属性,包括面的大小、色彩等。

前图中的视觉元素本质上是由文字构成的,单个文字就是一个点,多个文字排列在一起就形成了一个个面。所以点的阵列可以形成面,并具有面的功能和属性。事实上,点的排列可形成线,线的排列可形成面。
这是点

点的排列形成线

线的排列形成面

下面将文字当作点。文字是在视觉设计里用得最多的视觉元素之一,单个文字往往可视为点;多个文字排列成行,从图形的角度来看可视为线,具有线的属性;多行文字则可视为面,具有面的属性。
这是点

这是线

这是面

面的形状
面一般有明确的宽高、轮廓和大小。并非只有矩形才是面,面具有不同的形状和大小。
这是面

这是面

这也是面

面的大小
面有大小之分,一般来说,越大的面具有越大的视觉重量,就越能吸引观众的注意力。灵活地调整面的大小,可以形成主次、平衡、节奏等视觉关系。
面的主次

面的平衡

面的节奏

面的色彩
面是图形的一种,而色彩是图形的基本属性,所以色彩是面所具有的属性之一。面的色彩的对比变化可形成统一、节奏等不同的视觉关系。
面的色相

面的不透明度

面的亮度

面的风格
面有不同的形状,不同的形状往往能表现出不同的风格和情感。下图中爆裂的面经常用于促销活动和广告的视觉设计中。
规则的

爆裂的

柔软的

在实际的视觉设计里,面的处理相比点、线会更加繁杂。通过上面的案例,我们能够了解面的一些基本属性,而更多的关于面的应用会在后面的视觉原则部分进行详细讲解。