跳到演示与讲解
PEANUTISSIMO / 视觉笔记回到工作桌 ↗

图形怎么画,画面怎么组织。 STUDY / 01

几何与构成。

一个圆、一段线、一点空白。
换个位置,换个规则,画面就不同了。

先拖一拖,再读解释。不必先懂公式;画面里的变化会帮你认出它。

01 / 33 视觉构成

点、线、面

Point, line & plane
点、线、面的构成演示一个小圆可以像一个点;拉长以后,它更像一条线;再加宽,就有了面的分量。这里说的是画面里的视觉角色。
长宽比 3.06 : 1长度采用示意坐标单位

参数可以自由调节;点“演示一遍”,会变化第一个参数。

01 / 点、线、面

一个小圆可以像一个点;拉长以后,它更像一条线;再加宽,就有了面的分量。这里说的是画面里的视觉角色。

动手试一试

先把宽度拉长,再增加高度,比较注意力怎样移动。

怎么构成

先看相对于整张画面的大小,再看长宽关系。

常见在哪里

图标、分隔线、标题底块。

如果让它动起来

让长度或宽度随时间改变,就能从小标记过渡到大色块。

容易弄混的地方

数学里的点没有大小、线没有宽度。屏幕上的点线面是对它们的可见表达。

继续查阅 · Getty 艺术教育 ↗

02 / 重复与间隔

相同的单元按一定距离重复,会形成容易辨认的秩序。单元不必复杂,一个小圆就够了。

动手试一试

保持数量不变,只改变间距,看看一排点什么时候像一条线。

怎么构成

先固定形状,再决定间隔。

常见在哪里

导航圆点、装饰边纹、列表节奏。

如果让它动起来

让相同单元依次出现,空间里的重复就变成时间里的节拍。

容易弄混的地方

重复不等于每处都塞满。留出的间隔同样参与构成。

到《动效图鉴》里试试

错峰入场相同的单元先有空间排列,再把入场时间逐个错开。
继续查阅 · Getty 艺术教育 ↗

03 / 节奏与渐变

重复之中有一点变化,眼睛就会沿着变化的方向走。这里让一排圆的大小顺着波形起伏。

动手试一试

把起伏调到零,再慢慢加回来;换一个相位,观察高点移到哪里。

怎么构成

相同的规则,作用在不同的位置。

常见在哪里

标题装饰、音乐图形、连续的步骤。

如果让它动起来

移动相位,就能把一张静态排列变成流动的波。

容易弄混的地方

这里的“渐变”指尺寸渐变,不只指颜色。

到《动效图鉴》里试试

字浪尺寸或位置的有序变化形成节奏;字浪把上下起伏按字位错开。
继续查阅 · Getty 艺术教育 ↗

04 / 对称与破缺

沿一条轴折过去,两边能对上,就是镜面对称。只移动右侧的一部分,对称关系就被打破了。

动手试一试

先把右侧偏移设为零,再只移动右边,看看哪一处先显得不稳定。

怎么构成

关于竖轴镜像:x′ = 2c − x,y′ = y。

常见在哪里

标志、成对图标、需要明确中心的封面。

如果让它动起来

对称的两边可以同向呼吸,也可以错开时间。

容易弄混的地方

不对称也能形成视觉平衡。镜像相同不是好看的唯一条件。

到《动效图鉴》里试试

万花镜镜像决定两侧怎样对应,万花镜再把这一关系绕中心重复。
继续查阅 · Getty 艺术教育 ↗

05 / 放射与中心

把同一个单元绕着中心重复,就会出现向外散开或向内聚拢的感觉。花瓣、表盘和光芒常用这套结构。

动手试一试

增加单元数量,再改变长度。留意中心的空隙是否还清楚。

怎么构成

n 个等角单元,相邻角度为 360° / n。

常见在哪里

加载图标、徽章、太阳与花形。

如果让它动起来

绕中心旋转,或逐个改变长度,都能得到不同的动感。

容易弄混的地方

放射构成强调中心关系;它不要求所有单元都完全一样。

到《动效图鉴》里试试

翻牌涟漪格子仍排成矩形,启动时间却按离落点的距离向四周展开。万花镜把单元按角度分布在中心四周,再改变其中的图形。棱镜折返放射状扇区是分片的结构,转场时各片再发生偏转。工具扇开以开关为圆心,按角度安排三个工具,打开时沿各自的方向散开。
继续查阅 · Getty 艺术教育 ↗

06 / 对比与重点

一群相似的图形里,较大或不同色的那个往往先被看见。重点来自它与周围的关系。

动手试一试

把中央圆调到和其他圆一样大,再增加尺寸或色差。

怎么构成

先建立相似,再让一处不同。

常见在哪里

主按钮、数据中的重点、视觉入口。

如果让它动起来

放大、变色、短暂闪动都能强调;一次强调一处更容易辨认。

容易弄混的地方

这不是可访问性对比度检测。正文颜色仍需要单独检查可读性。

继续查阅 · Getty 艺术教育 ↗

07 / 疏密与聚散

同样多的点,挤在一起会形成一团,散开后就更像许多个体。间距可以帮助人看出分组。

动手试一试

先把两团点拉开,再让各自向中心收拢。

怎么构成

改变距离,数量保持不变。

常见在哪里

分组、粒子图、信息层级。

如果让它动起来

疏密随时间改变,就是聚合与散开的基础。

容易弄混的地方

点是固定生成的,拖动不会每帧重新随机,所以能看清位置关系。

到《动效图鉴》里试试

点阵退潮指针推开附近的点,改变的是局部疏密,点的总数没有增加。
继续查阅 · Getty 艺术教育 ↗

08 / 正形、负形与留白

画出来的区域是正形;周围和内部的空隙也是形状。这里从一个色块里留出圆孔,空处就成了主角。

动手试一试

移动圆孔并改变大小,看看空白怎样改变整块图形的重心。

怎么构成

同时看色块的轮廓,和没有填色的轮廓。

常见在哪里

标志、字形镂空、图文留白。

如果让它动起来

扩大空白可以成为揭示;移动空白可以像一束光扫过。

容易弄混的地方

负形不一定是白色,它是相对于主体留下的背景空间。

到《动效图鉴》里试试

从落点打开用圆形可见区域打开新页面,空处和实处的边界随半径改变。
继续查阅 · Getty 艺术教育 ↗

09 / 正多边形

边一样长、角一样大的多边形,可以把顶点等角度放在一个圆上得到。旋转一点,同一个形状也会有不同的姿态。

动手试一试

从三边加到十二边,再打开辅助线看外接圆。

怎么构成

顶点角 θᵢ = θ₀ + 2πi/n。

常见在哪里

图标、徽章、低多边形图形。

如果让它动起来

数量变化通常是离散换形;连续旋转则不会改变边数。

容易弄混的地方

边数很多时看起来接近圆,但有限边数的多边形仍然有直边与角。

到《动效图鉴》里试试

光圈穿孔带棱角的光圈边界扩大,决定第二段视频从哪里露出。
继续查阅 · Wolfram MathWorld ↗

10 / 圆、圆弧与扇形

圆上的每个点到圆心距离相同。取其中一段是圆弧,再把两端连回圆心,就得到扇形。

动手试一试

先固定半径改变角度,再固定角度改变半径。

怎么构成

弧长 s = rθ;θ 在公式里用弧度。

常见在哪里

进度环、饼图、光圈与仪表。

如果让它动起来

改变扫过的角度,可以画出进度或圆形揭示。

容易弄混的地方

相同角度下,半径越大弧越长。半径和角度是两件不同的事。

到《动效图鉴》里试试

点击涟漪以点击位置为圆心,让半径随时间增大,再逐渐淡出。
继续查阅 · Wolfram MathWorld ↗

11 / 椭圆与焦点

椭圆上任意一点到两个焦点的距离之和相同。把圆沿一个方向压扁,也能得到椭圆。

动手试一试

把两条半轴调得一样长,看看两个焦点怎样重合。

怎么构成

x = a cos t,y = b sin t;本例 a ≥ b,焦距 c = √(a² − b²)。

常见在哪里

轨道、透视里的圆面、柔和的围合线。

如果让它动起来

沿椭圆移动的点可以作为轨道动画,但参数等速不等于沿曲线等速。

容易弄混的地方

a、b 是半轴长度,不是整个图形的宽高。

继续查阅 · Wolfram MathWorld ↗

12 / 贝塞尔曲线

起点和终点决定曲线两端,两个控制点牵引中间的走向。绘图软件里的手柄,就是这种控制方式。

动手试一试

分别移动两个控制点的高度,观察端点处的方向。

怎么构成

B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃。

常见在哪里

图标轮廓、插画曲线、运动路径。

如果让它动起来

点可以沿曲线行走;缓动曲线则把横轴当作时间,需要额外约束。

容易弄混的地方

曲线通常不经过中间控制点。控制点是在“拉”它,不是在给它打必经点。

到《动效图鉴》里试试

拉断气泡用两条二次贝塞尔曲线连出气泡之间的细颈,控制点随拖动位置改变。线条长出贝塞尔确定曲线路径,描边动画决定这条路径怎样逐步显露。
继续查阅 · MDN 图形文档 ↗

13 / 等距螺旋

一边绕中心转,一边匀速远离中心,就画出了这条螺旋。相邻圈在同一方向上的间距相等。

动手试一试

增大圈距,再减少圈数。看它怎样从紧密纹理变成松开的线。

怎么构成

r = bθ;每多转一圈,半径增加 2πb。

常见在哪里

唱片纹、旋涡线、连续的展开路径。

如果让它动起来

让角度随时间前进,就能逐步画出整条螺旋。

容易弄混的地方

这里固定角度范围按圈数计算;不会把所有螺旋都称为黄金螺旋。

继续查阅 · Wolfram MathWorld ↗

14 / 对数螺旋

每转过同样的角度,半径按同样的倍数增长,外侧的圈就越走越开。它和等距螺旋的增长方式不同。

动手试一试

比较增长率小与大的情况,留意外侧圈距怎样变化。

怎么构成

r = a·e^(bθ);旋转 2π 后,半径乘以 e^(2πb)。

常见在哪里

生长感图形、旋转构图、尺度渐变。

如果让它动起来

旋转和缩放结合,能表现这条曲线的自相似关系。

容易弄混的地方

黄金螺旋只是对数螺旋的一种特殊情况。此处为便于比较,最外端半径保持相同。

继续查阅 · Wolfram MathWorld ↗

15 / 正弦波

一个点做匀速圆周运动,它在一条轴上的投影会来回振动。把这种起伏沿横轴排开,就是熟悉的正弦波。

动手试一试

只改变振幅,再只改变周期数,分清“更高”和“更密”。

怎么构成

y = A sin(kx + φ)。

常见在哪里

波浪、均匀起伏、声音的简化示意。

如果让它动起来

让相位 φ 随时间增加,波形就像在移动。

容易弄混的地方

真实水面和声音常由许多波叠加;一条正弦只是基础模型。

到《动效图鉴》里试试

摆的合奏每个点都做正弦往返;频率稍有差别,相位就会慢慢错开。
继续查阅 · Wolfram MathWorld ↗

16 / 李萨如曲线

让横向和纵向分别做正弦运动,再记录同一个点的位置,就会出现环、蝴蝶结和编织般的曲线。

动手试一试

改变横向频率和相位。把横向频率设为 2,比较 0° 与 90°。

怎么构成

x = A sin(at + δ),y = B sin(bt);这里 b = 2。

常见在哪里

示波图、轨迹图、抽象标志。

如果让它动起来

移动点或逐步描线,比只显示完整轮廓更容易理解来源。

容易弄混的地方

这里选用整数频率,方便比较闭合轮廓。小数频率同样可以绘制;是否周期性重复,取决于频率比是否为有理数。

继续查阅 · Wolfram MathWorld ↗

17 / 李萨如游丝

只跟着一个点走。它刚刚经过的地方还亮着,稍早的痕迹慢慢退去。横纵频率错开一点,原本重复的环就开始换一种走法。

动手试一试

先选 1.500,再选 1.530,等几秒。缩短余迹,追着亮点看;换成采样点,看看快的地方和慢的地方,点距有什么不同。

怎么构成

x = A sin φₓ,y = B sin φᵧ;φₓ 每秒增加 2π × 3rs,φᵧ 每秒增加 2π × 3s。r 为横纵频率比,s 为速度倍率(默认 1×),初始相位差为 90°。

常见在哪里

示波器余辉、轨迹可视化、会慢慢改样子的线条装饰。

如果让它动起来

线条连接最近的采样位置;点迹每隔 1/30 秒留下一点。两种看法共用同一条运动轨迹,旧痕迹都按经过的时间淡去。速度只改变走得快慢,不改变余迹保留时间。

容易弄混的地方

淡去的是痕迹,运动幅度没有衰减。频率比为有理数时会周期性重复,无理数比则不会精确重复。滑条上的有限小数仍是有理数,只是周期可能很长。

继续查阅 · Wolfram MathWorld ↗

18 / 平移

所有点移动同样的距离,形状和大小都不变。这是最直接的“从这里到那里”。

动手试一试

先只改一个方向,再同时改两个方向。虚线保留原位置。

怎么构成

x′ = x + dx,y′ = y + dy。

常见在哪里

抽屉、提示条、页面进退。

如果让它动起来

让位移随时间变化,再决定匀速还是先快后慢。

容易弄混的地方

平移不改变长度与角度;缓动只改变运动过程。

到《动效图鉴》里试试

甩开一张平移负责卡片离开的位置,少量旋转让拖动方向更明显。横向换页页面保持原来的形状,按前进或返回的方向平移。无缝走字重复的内容持续平移,首尾对齐后形成无缝循环。列表换位列表先排到新位置,再用平移补出前后位置之间的过渡。选中条游走同一块选中标记从一个标签平移到另一个,标签本身留在原地。
继续查阅 · MDN 图形文档 ↗

19 / 旋转与支点

形状绕一个支点转动。即使角度一样,把支点换个位置,运动轨迹也会不同。

动手试一试

转到 60°,再把支点从中心移到外侧。

怎么构成

先移到支点坐标系,再用旋转矩阵转动。

常见在哪里

指针、翻开的门、绕点运行的图形。

如果让它动起来

支点在图形内部像自转,在外部更像绕行。

容易弄混的地方

二维旋转保留长度和角度,透视里的“翻转”则是另一种变化。

到《动效图鉴》里试试

旋钮调频指示线绕旋钮中心旋转,角度被换算成同一个可调数值。碎片翻场每块网格片以自身中心转动,同时缩小,让底下的视频露出。
继续查阅 · MDN 图形文档 ↗

20 / 缩放与比例

沿两个方向使用同样的缩放倍数,比例保持不变;倍数不同,图形会被拉长或压扁。

动手试一试

让两个倍数相同,再只改其中一个。看看圆何时变成椭圆。

怎么构成

x′ = sx·x,y′ = sy·y。

常见在哪里

卡片展开、图标强调、图像适配。

如果让它动起来

从较小尺寸过渡到原尺寸,是常见的进场方式。

容易弄混的地方

放大并不会自动增加图片细节。此处使用矢量图形。

到《动效图鉴》里试试

靠近就放大根据到指针的距离改变缩放比例,点击区域则保持原位。借一只放大镜先把同一幅图放大两倍,再平移到观察点对齐,用圆形窗口显示局部。封面展开同一张封面的尺寸和位置从列表状态过渡到详情状态。镜头穿越围绕画面中心改变采样尺度,配合模糊产生推近感。
继续查阅 · MDN 图形文档 ↗

21 / 错切

每一横行按高度移动不同的距离,矩形就会倾成平行四边形。它和把整张图旋转一下并不一样。

动手试一试

让错切系数穿过零,观察上下边一直保持水平。

怎么构成

水平错切:x′ = x + ky,y′ = y。

常见在哪里

斜体感、速度感、倾斜的标签。

如果让它动起来

少量错切可以强调快速切入的动作。

容易弄混的地方

错切保持平行关系,但通常不保持角度和长度。

继续查阅 · MDN 图形文档 ↗

22 / 变换的先后

先平移再旋转,与先旋转再平移,通常落在不同的位置。两种颜色从同一个原点出发,可以直接比较。

动手试一试

把角度设为零,让两种结果重合;再慢慢转开。

怎么构成

通常 R(T(p)) ≠ T(R(p))。

常见在哪里

嵌套动画、围绕目标旋转、组合布局。

如果让它动起来

父层与子层各自承担一个变换,动作更容易控制。

容易弄混的地方

这里比较的是对点实际执行的先后顺序,不能直接照搬成所有软件里的书写顺序。

继续查阅 · MDN 图形文档 ↗

23 / 透视与消失点

一组平行线向远处延伸时,在透视画面里会朝同一个消失点靠拢。远处的间隔也显得更小。

动手试一试

移动消失点,观察“道路”朝向怎样改变;增加纵深,看远处如何挤在一起。

怎么构成

针孔模型:屏幕坐标与 x/z、y/z 成比例。

常见在哪里

空间背景、隧道、具有纵深的网格。

如果让它动起来

连续推进深度,会产生穿过空间的感觉。

容易弄混的地方

这里是单点透视的示意,不是完整的相机或建筑测量模型。

到《动效图鉴》里试试

空间隧道远近不同的尺度形成纵深,持续推进让静态空间像在向前延伸。
继续查阅 · Wolfram MathWorld ↗

24 / 图形的加减

两个区域可以合并,也可以只留下重叠处,或从其中一个挖掉另一个。许多复杂图标就是这样拼出来的。

动手试一试

改变两圆距离,再切换运算,看看哪些区域被保留下来。

怎么构成

并集 A∪B;交集 A∩B;差集 A−B。

常见在哪里

标志、镂空图标、遮罩。

如果让它动起来

让参与运算的形状移动,轮廓便会自然重组。

容易弄混的地方

这里只演示圆的区域关系,不把透明叠色当作真正的几何交集。

继续查阅 · Wolfram MathWorld ↗

25 / 形状插值

让两组一一对应的点走向彼此,就能在两个轮廓之间过渡。这里从圆走向一颗圆润的星。

动手试一试

先慢慢拖动进度,再增加星角数量,观察轮廓对应关系。

怎么构成

P(t) = (1−t)P₀ + tP₁,0 ≤ t ≤ 1。

常见在哪里

图标切换、加载状态、液态感装饰。

如果让它动起来

进度直接由时间驱动,就是一段形变动画。

容易弄混的地方

点的数量与排列顺序需要对应。任意两张图并不能直接得到自然的形变。

继续查阅 · MDN 图形文档 ↗

26 / 网格与对齐

网格是藏在画面背后的坐标约定。元素可以占一格,也可以跨几格;共同的边线让内容看起来有联系。

动手试一试

改变列数和留缝,注意图块的边界怎样重新对齐。

怎么构成

先定列与间隔,再让不同大小的块共享对齐线。

常见在哪里

网页排版、海报、卡片目录。

如果让它动起来

网格提供稳定起点,进场时可以按行、列或对角线错峰。

容易弄混的地方

网格是帮助安排内容的工具,不要求每个格子都放东西。

到《动效图鉴》里试试

揪住一张网网格先决定相邻关系,距离约束再让一个网点的移动传到周围。碎片翻场规则网格决定碎片如何分块,启动时间和旋转决定它们怎样离开。像素溶解格子定义最小单元,固定的阈值决定每格显露或消失的时机。从骨架到内容先用相同布局占住图形与文字的位置,内容到来时就不必重新挤动整个页面。
继续查阅 · Getty 艺术教育 ↗

27 / 三角与方形镶嵌

一个区域被图形无缝覆盖,既没有空隙也没有重叠,就是镶嵌。这里把每个方格沿对角线分成两块三角形。

动手试一试

改变格子大小,再切换对角线方向,看看大图案怎样由局部规则出现。

怎么构成

共享的边必须对得上,局部单元才能连续铺开。

常见在哪里

瓷砖、织物纹样、背景图案。

如果让它动起来

逐格旋转或变色,可以让静态纹样出现节奏。

容易弄混的地方

这里的三角形是直角等腰三角形。不是任意正多边形都能单独无缝铺满平面。

继续查阅 · Wolfram MathWorld ↗

28 / 六边形铺排

正六边形在每个顶点处能由三个内角拼成一整圈,因此可以无缝铺开。它也是常见的蜂巢式结构。

动手试一试

把留缝调为零,再改变单元大小,看邻边怎样贴合。

怎么构成

每个内角 120°;3 × 120° = 360°。

常见在哪里

地图网格、结构纹样、规则分区。

如果让它动起来

按离中心的距离延迟动画,可以让整片蜂巢像波一样亮起。

容易弄混的地方

加上留缝以后是六边形阵列,严格说已不再是无缝镶嵌。

继续查阅 · Wolfram MathWorld ↗

29 / 按最近的点分区

先放一些种子点,每个位置归给离它最近的种子,就形成一片片区域。相邻区域的边界到两侧种子等距。

动手试一试

增加种子数量,再挪动其中一个点,看看附近边界怎样联动。

怎么构成

区域 Vᵢ = {x:|x−pᵢ| ≤ |x−pⱼ|,对所有 j}。

常见在哪里

细胞感纹理、服务范围、碎片分区。

如果让它动起来

缓慢移动种子点,整张分区就会持续重排。

容易弄混的地方

本例用欧氏距离,区域裁剪在矩形窗口内。它不是细胞生长的生物学模拟。

继续查阅 · MathWorks ↗

30 / 把散点连成三角网

把散点连接成三角形,要求每个三角形的外接圆内部不含其他种子点。它与最近点分区有密切联系。

动手试一试

移动活动点,留意某些边会突然换一条对角线。

怎么构成

空圆条件:三角形外接圆内部没有其他输入点。

常见在哪里

地形网格、低多边形画面、散点插值。

如果让它动起来

移动点位会带来局部网格重组,适合表现有结构的流动。

容易弄混的地方

多个点共圆时,剖分可能不唯一。此处点位固定生成,只有标出的点受控。

继续查阅 · Wolfram MathWorld ↗

31 / 三角形里的三角形

把一个等边三角形分成四个小三角形,去掉中间那块,再对剩下三块重复同样的操作。

动手试一试

从第 0 层逐步增加,找出每次都在重复的那一步。

怎么构成

第 n 层留下 3ⁿ 个小三角形;总面积是原来的 (3/4)ⁿ。

常见在哪里

递归科普、镂空纹样、自相似图形。

如果让它动起来

按层展示比一下堆满细节更能看清生成过程。

容易弄混的地方

屏幕上展示的是有限层近似。数学分形讨论的是不断迭代的极限。

继续查阅 · Wolfram MathWorld ↗

32 / 一条线长出折角

把线段分成三等份,用一个向外凸的三角折角替换中间一份;随后对每段继续这样做。

动手试一试

从一条直线开始,逐层增加,看看长度怎样增长。

怎么构成

第 n 层有 4ⁿ 段,每段长为原始长度的 1/3ⁿ。

常见在哪里

分形边界、雪花轮廓、递归讲解。

如果让它动起来

把前后两层叠着看,能看清新增细节的位置。

容易弄混的地方

这里是一条科赫曲线;用三条这样的边围起来,才是科赫雪花。

继续查阅 · Wolfram MathWorld ↗

33 / 两层网纹的干涉感

两层接近的规则条纹叠在一起,只要角度或间距略有差异,就会出现更大的明暗纹带。

动手试一试

先把夹角降到很小,再缓慢转动;留意大纹带比细线移动得更明显。

怎么构成

大纹带来自两组小周期之间的差异。

常见在哪里

印刷实验、网纹海报、光学感动态图。

如果让它动起来

很小的角度变化就可能带来明显的视觉运动。

容易弄混的地方

这里是几何叠纹示意,不是光波干涉计算。屏幕缩放也可能带来额外的采样条纹。

到《动效图鉴》里试试

摩尔纹两层周期图案已有叠纹,缓慢改变角度就能看见纹带移动。
继续查阅 · Wolfram MathWorld ↗

不知道先看哪条?

沿着一个问题往下找。

构成原则是观察画面的办法,不是保证好看的配方。每次只改一个参数,比较前后,比一次记住很多名称更有用。