01 / 点、线、面
一个小圆可以像一个点;拉长以后,它更像一条线;再加宽,就有了面的分量。这里说的是画面里的视觉角色。
先把宽度拉长,再增加高度,比较注意力怎样移动。
怎么构成
先看相对于整张画面的大小,再看长宽关系。
常见在哪里
图标、分隔线、标题底块。
如果让它动起来
让长度或宽度随时间改变,就能从小标记过渡到大色块。
容易弄混的地方
数学里的点没有大小、线没有宽度。屏幕上的点线面是对它们的可见表达。
图形怎么画,画面怎么组织。 STUDY / 01
一个圆、一段线、一点空白。
换个位置,换个规则,画面就不同了。
先拖一拖,再读解释。不必先懂公式;画面里的变化会帮你认出它。
01 / 33 视觉构成
参数可以自由调节;点“演示一遍”,会变化第一个参数。
横纵位置分别控制两个参数。拖动亮点可直接调节,播放时沿闭环反复行走。
手绘后自动闭合、平滑。虚线保留原笔迹;路线保留在当前页面。一个小圆可以像一个点;拉长以后,它更像一条线;再加宽,就有了面的分量。这里说的是画面里的视觉角色。
先把宽度拉长,再增加高度,比较注意力怎样移动。
先看相对于整张画面的大小,再看长宽关系。
图标、分隔线、标题底块。
让长度或宽度随时间改变,就能从小标记过渡到大色块。
数学里的点没有大小、线没有宽度。屏幕上的点线面是对它们的可见表达。
相同的单元按一定距离重复,会形成容易辨认的秩序。单元不必复杂,一个小圆就够了。
保持数量不变,只改变间距,看看一排点什么时候像一条线。
先固定形状,再决定间隔。
导航圆点、装饰边纹、列表节奏。
让相同单元依次出现,空间里的重复就变成时间里的节拍。
重复不等于每处都塞满。留出的间隔同样参与构成。
重复之中有一点变化,眼睛就会沿着变化的方向走。这里让一排圆的大小顺着波形起伏。
把起伏调到零,再慢慢加回来;换一个相位,观察高点移到哪里。
相同的规则,作用在不同的位置。
标题装饰、音乐图形、连续的步骤。
移动相位,就能把一张静态排列变成流动的波。
这里的“渐变”指尺寸渐变,不只指颜色。
沿一条轴折过去,两边能对上,就是镜面对称。只移动右侧的一部分,对称关系就被打破了。
先把右侧偏移设为零,再只移动右边,看看哪一处先显得不稳定。
关于竖轴镜像:x′ = 2c − x,y′ = y。
标志、成对图标、需要明确中心的封面。
对称的两边可以同向呼吸,也可以错开时间。
不对称也能形成视觉平衡。镜像相同不是好看的唯一条件。
把同一个单元绕着中心重复,就会出现向外散开或向内聚拢的感觉。花瓣、表盘和光芒常用这套结构。
增加单元数量,再改变长度。留意中心的空隙是否还清楚。
n 个等角单元,相邻角度为 360° / n。
加载图标、徽章、太阳与花形。
绕中心旋转,或逐个改变长度,都能得到不同的动感。
放射构成强调中心关系;它不要求所有单元都完全一样。
一群相似的图形里,较大或不同色的那个往往先被看见。重点来自它与周围的关系。
把中央圆调到和其他圆一样大,再增加尺寸或色差。
先建立相似,再让一处不同。
主按钮、数据中的重点、视觉入口。
放大、变色、短暂闪动都能强调;一次强调一处更容易辨认。
这不是可访问性对比度检测。正文颜色仍需要单独检查可读性。
同样多的点,挤在一起会形成一团,散开后就更像许多个体。间距可以帮助人看出分组。
先把两团点拉开,再让各自向中心收拢。
改变距离,数量保持不变。
分组、粒子图、信息层级。
疏密随时间改变,就是聚合与散开的基础。
点是固定生成的,拖动不会每帧重新随机,所以能看清位置关系。
画出来的区域是正形;周围和内部的空隙也是形状。这里从一个色块里留出圆孔,空处就成了主角。
移动圆孔并改变大小,看看空白怎样改变整块图形的重心。
同时看色块的轮廓,和没有填色的轮廓。
标志、字形镂空、图文留白。
扩大空白可以成为揭示;移动空白可以像一束光扫过。
负形不一定是白色,它是相对于主体留下的背景空间。
边一样长、角一样大的多边形,可以把顶点等角度放在一个圆上得到。旋转一点,同一个形状也会有不同的姿态。
从三边加到十二边,再打开辅助线看外接圆。
顶点角 θᵢ = θ₀ + 2πi/n。
图标、徽章、低多边形图形。
数量变化通常是离散换形;连续旋转则不会改变边数。
边数很多时看起来接近圆,但有限边数的多边形仍然有直边与角。
圆上的每个点到圆心距离相同。取其中一段是圆弧,再把两端连回圆心,就得到扇形。
先固定半径改变角度,再固定角度改变半径。
弧长 s = rθ;θ 在公式里用弧度。
进度环、饼图、光圈与仪表。
改变扫过的角度,可以画出进度或圆形揭示。
相同角度下,半径越大弧越长。半径和角度是两件不同的事。
椭圆上任意一点到两个焦点的距离之和相同。把圆沿一个方向压扁,也能得到椭圆。
把两条半轴调得一样长,看看两个焦点怎样重合。
x = a cos t,y = b sin t;本例 a ≥ b,焦距 c = √(a² − b²)。
轨道、透视里的圆面、柔和的围合线。
沿椭圆移动的点可以作为轨道动画,但参数等速不等于沿曲线等速。
a、b 是半轴长度,不是整个图形的宽高。
起点和终点决定曲线两端,两个控制点牵引中间的走向。绘图软件里的手柄,就是这种控制方式。
分别移动两个控制点的高度,观察端点处的方向。
B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃。
图标轮廓、插画曲线、运动路径。
点可以沿曲线行走;缓动曲线则把横轴当作时间,需要额外约束。
曲线通常不经过中间控制点。控制点是在“拉”它,不是在给它打必经点。
一边绕中心转,一边匀速远离中心,就画出了这条螺旋。相邻圈在同一方向上的间距相等。
增大圈距,再减少圈数。看它怎样从紧密纹理变成松开的线。
r = bθ;每多转一圈,半径增加 2πb。
唱片纹、旋涡线、连续的展开路径。
让角度随时间前进,就能逐步画出整条螺旋。
这里固定角度范围按圈数计算;不会把所有螺旋都称为黄金螺旋。
每转过同样的角度,半径按同样的倍数增长,外侧的圈就越走越开。它和等距螺旋的增长方式不同。
比较增长率小与大的情况,留意外侧圈距怎样变化。
r = a·e^(bθ);旋转 2π 后,半径乘以 e^(2πb)。
生长感图形、旋转构图、尺度渐变。
旋转和缩放结合,能表现这条曲线的自相似关系。
黄金螺旋只是对数螺旋的一种特殊情况。此处为便于比较,最外端半径保持相同。
一个点做匀速圆周运动,它在一条轴上的投影会来回振动。把这种起伏沿横轴排开,就是熟悉的正弦波。
只改变振幅,再只改变周期数,分清“更高”和“更密”。
y = A sin(kx + φ)。
波浪、均匀起伏、声音的简化示意。
让相位 φ 随时间增加,波形就像在移动。
真实水面和声音常由许多波叠加;一条正弦只是基础模型。
让横向和纵向分别做正弦运动,再记录同一个点的位置,就会出现环、蝴蝶结和编织般的曲线。
改变横向频率和相位。把横向频率设为 2,比较 0° 与 90°。
x = A sin(at + δ),y = B sin(bt);这里 b = 2。
示波图、轨迹图、抽象标志。
移动点或逐步描线,比只显示完整轮廓更容易理解来源。
这里选用整数频率,方便比较闭合轮廓。小数频率同样可以绘制;是否周期性重复,取决于频率比是否为有理数。
只跟着一个点走。它刚刚经过的地方还亮着,稍早的痕迹慢慢退去。横纵频率错开一点,原本重复的环就开始换一种走法。
先选 1.500,再选 1.530,等几秒。缩短余迹,追着亮点看;换成采样点,看看快的地方和慢的地方,点距有什么不同。
x = A sin φₓ,y = B sin φᵧ;φₓ 每秒增加 2π × 3rs,φᵧ 每秒增加 2π × 3s。r 为横纵频率比,s 为速度倍率(默认 1×),初始相位差为 90°。
示波器余辉、轨迹可视化、会慢慢改样子的线条装饰。
线条连接最近的采样位置;点迹每隔 1/30 秒留下一点。两种看法共用同一条运动轨迹,旧痕迹都按经过的时间淡去。速度只改变走得快慢,不改变余迹保留时间。
淡去的是痕迹,运动幅度没有衰减。频率比为有理数时会周期性重复,无理数比则不会精确重复。滑条上的有限小数仍是有理数,只是周期可能很长。
所有点移动同样的距离,形状和大小都不变。这是最直接的“从这里到那里”。
先只改一个方向,再同时改两个方向。虚线保留原位置。
x′ = x + dx,y′ = y + dy。
抽屉、提示条、页面进退。
让位移随时间变化,再决定匀速还是先快后慢。
平移不改变长度与角度;缓动只改变运动过程。
形状绕一个支点转动。即使角度一样,把支点换个位置,运动轨迹也会不同。
转到 60°,再把支点从中心移到外侧。
先移到支点坐标系,再用旋转矩阵转动。
指针、翻开的门、绕点运行的图形。
支点在图形内部像自转,在外部更像绕行。
二维旋转保留长度和角度,透视里的“翻转”则是另一种变化。
沿两个方向使用同样的缩放倍数,比例保持不变;倍数不同,图形会被拉长或压扁。
让两个倍数相同,再只改其中一个。看看圆何时变成椭圆。
x′ = sx·x,y′ = sy·y。
卡片展开、图标强调、图像适配。
从较小尺寸过渡到原尺寸,是常见的进场方式。
放大并不会自动增加图片细节。此处使用矢量图形。
每一横行按高度移动不同的距离,矩形就会倾成平行四边形。它和把整张图旋转一下并不一样。
让错切系数穿过零,观察上下边一直保持水平。
水平错切:x′ = x + ky,y′ = y。
斜体感、速度感、倾斜的标签。
少量错切可以强调快速切入的动作。
错切保持平行关系,但通常不保持角度和长度。
先平移再旋转,与先旋转再平移,通常落在不同的位置。两种颜色从同一个原点出发,可以直接比较。
把角度设为零,让两种结果重合;再慢慢转开。
通常 R(T(p)) ≠ T(R(p))。
嵌套动画、围绕目标旋转、组合布局。
父层与子层各自承担一个变换,动作更容易控制。
这里比较的是对点实际执行的先后顺序,不能直接照搬成所有软件里的书写顺序。
一组平行线向远处延伸时,在透视画面里会朝同一个消失点靠拢。远处的间隔也显得更小。
移动消失点,观察“道路”朝向怎样改变;增加纵深,看远处如何挤在一起。
针孔模型:屏幕坐标与 x/z、y/z 成比例。
空间背景、隧道、具有纵深的网格。
连续推进深度,会产生穿过空间的感觉。
这里是单点透视的示意,不是完整的相机或建筑测量模型。
两个区域可以合并,也可以只留下重叠处,或从其中一个挖掉另一个。许多复杂图标就是这样拼出来的。
改变两圆距离,再切换运算,看看哪些区域被保留下来。
并集 A∪B;交集 A∩B;差集 A−B。
标志、镂空图标、遮罩。
让参与运算的形状移动,轮廓便会自然重组。
这里只演示圆的区域关系,不把透明叠色当作真正的几何交集。
让两组一一对应的点走向彼此,就能在两个轮廓之间过渡。这里从圆走向一颗圆润的星。
先慢慢拖动进度,再增加星角数量,观察轮廓对应关系。
P(t) = (1−t)P₀ + tP₁,0 ≤ t ≤ 1。
图标切换、加载状态、液态感装饰。
进度直接由时间驱动,就是一段形变动画。
点的数量与排列顺序需要对应。任意两张图并不能直接得到自然的形变。
网格是藏在画面背后的坐标约定。元素可以占一格,也可以跨几格;共同的边线让内容看起来有联系。
改变列数和留缝,注意图块的边界怎样重新对齐。
先定列与间隔,再让不同大小的块共享对齐线。
网页排版、海报、卡片目录。
网格提供稳定起点,进场时可以按行、列或对角线错峰。
网格是帮助安排内容的工具,不要求每个格子都放东西。
一个区域被图形无缝覆盖,既没有空隙也没有重叠,就是镶嵌。这里把每个方格沿对角线分成两块三角形。
改变格子大小,再切换对角线方向,看看大图案怎样由局部规则出现。
共享的边必须对得上,局部单元才能连续铺开。
瓷砖、织物纹样、背景图案。
逐格旋转或变色,可以让静态纹样出现节奏。
这里的三角形是直角等腰三角形。不是任意正多边形都能单独无缝铺满平面。
正六边形在每个顶点处能由三个内角拼成一整圈,因此可以无缝铺开。它也是常见的蜂巢式结构。
把留缝调为零,再改变单元大小,看邻边怎样贴合。
每个内角 120°;3 × 120° = 360°。
地图网格、结构纹样、规则分区。
按离中心的距离延迟动画,可以让整片蜂巢像波一样亮起。
加上留缝以后是六边形阵列,严格说已不再是无缝镶嵌。
先放一些种子点,每个位置归给离它最近的种子,就形成一片片区域。相邻区域的边界到两侧种子等距。
增加种子数量,再挪动其中一个点,看看附近边界怎样联动。
区域 Vᵢ = {x:|x−pᵢ| ≤ |x−pⱼ|,对所有 j}。
细胞感纹理、服务范围、碎片分区。
缓慢移动种子点,整张分区就会持续重排。
本例用欧氏距离,区域裁剪在矩形窗口内。它不是细胞生长的生物学模拟。
把散点连接成三角形,要求每个三角形的外接圆内部不含其他种子点。它与最近点分区有密切联系。
移动活动点,留意某些边会突然换一条对角线。
空圆条件:三角形外接圆内部没有其他输入点。
地形网格、低多边形画面、散点插值。
移动点位会带来局部网格重组,适合表现有结构的流动。
多个点共圆时,剖分可能不唯一。此处点位固定生成,只有标出的点受控。
把一个等边三角形分成四个小三角形,去掉中间那块,再对剩下三块重复同样的操作。
从第 0 层逐步增加,找出每次都在重复的那一步。
第 n 层留下 3ⁿ 个小三角形;总面积是原来的 (3/4)ⁿ。
递归科普、镂空纹样、自相似图形。
按层展示比一下堆满细节更能看清生成过程。
屏幕上展示的是有限层近似。数学分形讨论的是不断迭代的极限。
把线段分成三等份,用一个向外凸的三角折角替换中间一份;随后对每段继续这样做。
从一条直线开始,逐层增加,看看长度怎样增长。
第 n 层有 4ⁿ 段,每段长为原始长度的 1/3ⁿ。
分形边界、雪花轮廓、递归讲解。
把前后两层叠着看,能看清新增细节的位置。
这里是一条科赫曲线;用三条这样的边围起来,才是科赫雪花。
两层接近的规则条纹叠在一起,只要角度或间距略有差异,就会出现更大的明暗纹带。
先把夹角降到很小,再缓慢转动;留意大纹带比细线移动得更明显。
大纹带来自两组小周期之间的差异。
印刷实验、网纹海报、光学感动态图。
很小的角度变化就可能带来明显的视觉运动。
这里是几何叠纹示意,不是光波干涉计算。屏幕缩放也可能带来额外的采样条纹。
不知道先看哪条?
构成原则是观察画面的办法,不是保证好看的配方。每次只改一个参数,比较前后,比一次记住很多名称更有用。