通用设计知识—点线面 (全面学习)

预警：文章很长

在视觉设计领域中，点、线、面，是一个画面中最基本的构成元素，是画面的骨架。

无论创作怎样的设计作品，运用怎样的表现手法，其中最基本的元素点、线、面是一直存在的。

举例来帮助我们更好的理解点线面的概念：

眯起双眼去观察一副作品，会发现所有视觉元素都被轮廓化了，我们只能看到简单的线条和色彩，同理，点、线、面其实就是把所有图像、图形和信息等视觉元素概括之后提炼出来的产物。

如画面中的一只眼睛可以看做一个点、一行文字可以看成是线、一个人物可以看成是一个面等等。

设计师学习和理解点线面的目的，就是要做一个化繁为简的动作，习得一种概括性的思维，将作品中出现的视觉元素和信息全部看做是点、线、面之间的编排。

而点、线、面每个基本元素都具备自身的属性特点，在画面中起着各自不同的作用，这时我们再利用这些规律和作用再进行画面的空间布局，就会让作品更具备合理性和构成美感。

如果可以理解上述关于点线面的基本概念，则对学习点线面知识有很大的帮助。

点

一、点的基本概念

我们可以将任何画面都看做是由无数个点聚集而成的，通过点的大小、疏密关系决定画面的视觉感受。

（点越密集图像越清晰、点越稀疏，图像的识别性越低，越接近图形的感觉，也增加了陌生感。）

可以说，点元素是构成图像的最基本单位。

在现实生活中我们会将很小的或者离我们很远的物体当成一个点来看待，同理根据人们的视觉经验投射到平面作品当中，很自然的就将画面中较小的视觉元素概括成一个点元素来看待。

通常、画面中越小的形状或图案，作为点的感受就越强烈。

单独姿态出现的视觉元素，也能在形式上给人“点”的印象。

但也不能单纯的以事物的本身大小去判断它是否是一个点元素，而是要考虑它与周围事物及空间的对比关系。

△如图，左侧logo在画面中以单独姿态出现，具有点的感受，但右侧logo相比旁边的白色圆形来说，白色圆形此时更具备点的感受。

二、点的形态

我们是将画面中出现的体积较小的视觉元素概括性的看成一个点元素，因此点元素不会有固定的形态。

它可以是任何形状，一个字母、一个标点符号都可以称为点，只要它在画面比例中呈现出较小的体积。

我们也可以将视觉元素交错排列后形成的交叉点也看做点元素的一种隐性形态。所以此时可总结出关于点元素的两个属性，即点具备大小和形状的属性。

三、点的功能作用

点线面在设计过程中承担着一定的功能作用，帮助设计师编排出更合理舒适的版面。

1、视觉焦点

○单点形式

想象一下在空白画面中，一个主体以点的形态摆放在版面中，我们的视觉是不是就很自然的落在了这个主体身上？

这就是点的第一个作用——视觉焦点。

空白画面没有任何信息，视觉找不到落脚点呈现游离状态，而此时出现点元素，正好让我们找到了视觉的落脚点，就很自然的把目光聚拢在此。

当然不一定非要空白画面才能达到这个作用，只要背景信息在不干扰主体物的情况下，点元素便会突显它视觉焦点的功能。

当遇到结构复杂的版式时，也可以利用一些特殊的编排手法来突显画面中唯一的主体物，从而形成单点的表现形式。

△如图阿迪达斯中国奥运创意广告，利用配色关系上的区分，突出主体人物

视觉元素相互交叉的部分也可以视为一种点的状态，比如棋盘上的交叉点，我们将这种存在于交叉处的点称为隐性点，即使排列杂乱的版式结构，这种交叉形式的点也能有效地引起观者的注意。

当然视觉焦点出现在画面上的空间位置不同，也会对观看者的心理产生一定影响。

这就是点元素的第三个属性，即点元素位置的属性。▽

①居上

焦点聚集在画面的上方，这是一个符合人们视觉阅读顺序的位置，也是一个很自然的落脚点。

②居中

焦点聚集在画面的中心位置，位置近乎对称，所以会产生平稳、稳定、向内集中的感觉。

③居下

焦点聚集在画面偏下方的位置，会产生沉淀、安静、低调、不易察觉的心理作用。

④黄金分割点

指的是视觉聚焦的位置刚好处在版面的黄金位置，更容易吸引人的注意，构图的形式感更强。

但这只是排版建议，不可生搬硬套，一切已实际情况判断。

2、视觉引导

○多点形式

单个点可以引起人们的高度注意。

那么多个点朝着统一的方向进行排列，则可以在版面中形成强烈的视觉牵引力，引导观者顺着这个方向滑动视觉。

① 画面中两个等大的点同时出现，此时信息重量处在等同的位置，视觉会徘徊在两点之间，如果换成一大一小的两个点，那么较大的点则会首先吸引人们的注意力，之后才会顺势看向较小的一点，从而产生视觉先后顺序。

② 利用视觉经验中的“近大远小”“近视远虚”的关系，制造空间感，让点与点之间出现视觉的先后顺序，起到引导作用。

③ 我们也可以根据主题需求决定集中或分布编排这些点，产生一种聚拢或分散的动势。

△左图的不同大小的圆点，影响着我们对信息的阅读顺序，右图自下而上的指引也是通过点来完成

④ 另外跳出引导作用，以多个点角度来说，多点聚集排列可形成密集型的编排样式，利用充满紧凑与局促感的版式，在视觉上给观者一种膨胀或拥挤的感觉。

△除了多点排列带来的紧凑感，右图还有很明显的视觉引导方向

分散式的多点，指的是将多个点元素以散构的形式分布在版式的各个角落，使画面产生扩散饱满的视觉效果，不过值得注意的是点与点间的关联性，避免过于散乱的版式影响主题传达的准确性。

△左图星光也是一种点的形式，分散的点促进画面的饱满完整,点和点之间的关联性可避免版面的混乱

3、占据空间

点占据画面空间，在画面中寻求平衡，是一种很常见的做法。

△请观察碎落的黄色方块和左图的黄色x符号

4、烘托氛围

随机分布的多个点的出现、可以起到烘托氛围的作用，让画面丰富热闹，同时也是占据空间作用的一种形式。

△左图中的羽毛，右图中人物周围的物品，都可以看做是点元素占据空间的同时帮助画面烘托气氛

点元素在烘托氛围的同时，它本身的形态会对画面的感受有一定的影响。不同的形态产生怎样的心理感受，则来源于人们的视觉经验。

△拿这两张图举例，羽毛和鸟都有烘托氛围的作用，但我们日常生活中对羽毛的印象是轻盈柔软的所以左图氛围有安静的感觉，而鸟儿的叫声是很吵闹的这么多鸟儿在一起，我们自然感受右图的噪音。

如羽毛的轻盈、鸟儿的吵闹，同样是利用点元素在烘托氛围，但因为元素与视觉经验的对应产生了不同的感觉。

5、对比、指引作用

对比是指当我们想要突显主体画面的张力时，可选择较小的元素排布在其周围，用点元素的小去衬托主体的大。

在一些版式设计中，点的出现也起到一定的指引作用。

被放大的数字作为点的一种形态，指引和区分不同区域的内容。

四、点的线化、与点的面化

点、线、面之间没有明确的界限，一个点沿着一条轨迹移动也会形成一条线，多点聚集或一个点足够大的时候就会形成面的感觉，多条线的聚集也会形成面，线的不断加粗也会有面的感受。

所以当画面中出现两个或多个相邻的点，观看者在潜意识中会自然将他们连成一条线，从而增加画面的灵活性。

点元素有规律的重复排列，形成面视觉元素聚集在一起，从而打造出紧密，局促的版式结构，也可体现凝聚力。

线

一、线的基本概念

任何形状沿着一条既定的路径重复排列就具备线的感觉。

在构成中的线有长度、宽度、厚度，虚实等表现形式，纸张和笔触的不同又使线产生种类繁多的样貌和气质。

足够细的线元素，更具备线的感受，是否具备线的感受同样也需要观察它与周围元素的对比关系。

在设计工作中一段文字，或几个字母的排列，同样可概括的看做成线元素。

二、线的形态

1、线的粗细

①细线

线的粗细，是经过对比而得出的结果，在同一画面内，宽度上相对较窄的一类线条就是细线。细线条具有纤细的形态和柔软之感，给人细腻的印象。

②粗线

粗线与细线相对，宽度值相对较大的一类线条。

在同一个画面中，相对细线来说，粗线具有更鲜明的视觉形象，给观者更直观的印象。

由于粗线能在画面中留下明显的视觉痕迹，设计师常会利用这种线条来进行视觉引导，完成对版面有效的信息浏览。

③粗细线对比

细线与粗线同时出现在一个画面里，形成细腻与豪放之间的对比，长短交错能增强版面节奏感。

△如果把海报中的文字看成是一排排的线段，那么粗细错落的排放会给人一种节奏感。

2、线的虚实

虚实可以理解成有形与无形两种形态，这类线条没有明确的视觉形态，常潜在视觉元素中，如地平线、具有规律性排列的点元素，因为虚线没有直观的可视性，因而需要经过一定的观察与思考才能发现。

3、线的长短

①短线画面中出现大量短线，会有局促、紧张的感觉，画面中少量的短线则会在视觉上给人精致、细腻的感受。

②长线长线给人视觉感受往往是洒脱直率的，设计师可利用线条外形的修长感打造出具有延伸性的版式效果。

③长短线结合长短线的结合可表现空间的延伸感或版面结构的韵律感，产生张弛有度的视觉印象。

三、线的功能作用

1、线的不同路径不同角度在版面中起到的作用

①按角度划分：斜线、垂直线、水平线

斜线：按照倾斜方向延伸的一类直线在视觉空间上造成失衡感因此会让观者感到内心产生忐忑不安。

方位上产生向上或向下的运动感，充满视觉活力。同时斜线也是具备青春活力的。

垂直线：垂直方向上进行延伸的直线。

笔直坚挺的结构很容易让人产生端庄、庄重、严肃的感受。还能增强版面视觉表达的肯定感。

水平线：直线沿着水平方向进行延伸，如地平线、海平线给人辽阔的感觉，水平线的稳定性还能营造出安宁、平静、平和、寂静、稳重之感，不过也容易产生审美疲劳。

② 按路径划分：折线、几何曲线、自由曲线

折线：自然界最常见的折线是闪电，也意味着折线强烈的不确定性。

几何曲线：比较有规律的一类线，具有相对严谨的结构，如S、O形的线，在版式中这类线有约束感，一方面线条有紧张局促的感觉，另一方面能使版面整体比较饱满、圆滑。

自由曲线：形态不固定随机性强，动感、流动性强，富有弹性、充满张力。

2、线在设计中的功能作用

① 方向、引导、连接

线段具有方向性，可以起到视觉引导的作用、也可在不同视觉元素之间进行连接。

② 分割画面

线可以帮助版面进行分割与规划，打造规范的版面结构（区隔元素、划分版面空间信息），同时对图片、图像等视觉元素进行合理的切割，完成艺术改造。

③占据空间

线也有占据空间、点缀装饰的作用，可以丰富整个版面，寻求版面稳定平衡。

④加强版面信息的表现力

通过为某个视觉元素加上边框从而得到突出强调或点缀的作用，线条对某个图像直接进行切割，表现不完整的视觉效果。

四、线的面化

利用线的面化，可以表现具体事物，给人独特新颖的感觉。

面

一、面的概念

在平面构成中，面占有最大的空间面积，同时孕育着强烈的情感表达，相对于线和点来讲，面具有更实在的质感和更形象的视觉表现力。

二、面的形态

面是设计中的主角，有不同的种类和印象，它可以是整篇文字也可以是一张图片。

1、规则的面形态、给人清晰明朗的感觉。

规则的面包含直面、斜面、几何曲面

直面：给人平稳、安定、静止、寂静、也存在秩序感，严肃、庄重。

斜面：边缘的斜面带来了速度、紧张、锐利之感，也很简洁明快也因为边缘是不同角度斜线组成，兼具斜线所有心理感受（动感、不安定、青春活力）

直面和斜面，从结构特征上来说，整体外轮廓规整，内部结构严谨，运用在版面中时也会有专业务实感。

几何曲面：以纯曲线构成的曲面，常见的曲面有圆、椭圆，给人严谨、规整的视觉印象，完美、有弹力，易亲近，相较于直面更加柔软，但由于圆形过于完美会有呆板缺少变化之感，稍作修改可弥补这个问题。

2、不规则的面形态，使版面具有抽象化的艺术效果。

不规则的面包含、自由曲面、随机面自由

曲面：面的形状相对自由，因为随机不对称少了秩序感，但可以表现出个性，所以更能吸引人的兴趣，触发联想。

随机面：类似于墨水滴到水中形成不规则状态和肌理，有很强的自然感，偶然性，未知性。具备艺术美感，不可复制的意外形态。

三、正负空间

面积大小上来说，较小的面更容易看成图，较大的面则看做底，当图底面积相等时，二者不容易分辨，运用好图底关系，就会让设计更加添彩。

这就是正负空间的利用。

四、面的积极性与消极性

1、积极的面

在平面构成中，那些利用点或线元素的移动或放大所形成的面定义为积极的面，也称之为实面。

实面的特征主要表现在，给人充满整合感的视觉印象，并且与虚面相比，实面在情感表达上具有更强的诉求能力。

2、消极的面

在平面构成中，那些由点或线元素聚集而成的面定义为面的消极性，也被称为虚面。

虚面主要由零散的元素组合而成，因此在视觉上常给人以细腻感，此外，过分密集的面结构还能在视觉上产生视觉的厚重感，同时使观赏者产生压抑的心理，从而进一步对版面产生深刻印象。

点线面的综合表现

作品图案变化多样，表现手法不只限于点、线、面的个别运用，往往是由点、线、面综合运用的形式构建出层次丰富的作品。通过各种形的对比、变化，形成特征鲜明、丰富生动的画面。

△平面设计中点线面结合运用

总结

点、线、面、是通过对作品中出现的视觉元素进行概括所得出的基本形态。

通过点、线、面各自的特点作用，让版面科学合理。

学习过程中重点记忆点、线、面各自在版面中所起的作用。

在实际工作当中，点像调味料多为点缀元素、线的分割指引作用利用的较明显、面区分板块内容，表达核心内容。

以上涵盖构成中点、线、面的大部分知识点，内容较多，如有纰漏请联系本人。

我会以设计通用知识入手、继续写作相关教程，与设计师们共同进步，同时降低尽可能降低大家的学习成本。更多教程可以关注“03号设计师”这个公众号。