Constructivism 构成主义（Constructivism）
Constructivism translates early Soviet avant-garde graphic language into UI: razor-sharp diagonals, red-and-black slabs, clipped industrial photography, and blocky sans-serif type locked into dynamic, poster-like layouts. It still reads as propaganda energy rather than decoration — every element looks arranged to shout a message across a noisy square. A modern app borrowing the look usually wants urgency, solidarity, or editorial punch.
构成主义把早期苏联先锋派的图形语言转译成 UI：锐利的对角线、红黑块面、裁剪过的工业照片，以及被锁定在动态海报式排版中的粗黑无衬线字体。它读起来仍然是一种宣传能量，而不是装饰 —— 每个元素都像是在嘈杂广场上高声喊话。现代 App 借用这种外观，通常是为了传递紧迫感、集体感或编辑式冲击力。
Scope: This entry covers the graphic style that migrated from Soviet posters and book design into digital UI. It is not the later Constructivist architecture of poured concrete, nor the abstract sculpture of Tatlin's Monument to the Third International; those are siblings, not signals.
范围：本条覆盖从苏联海报和书籍设计迁移到数字 UI 的图形风格。它不包括后来塔特林「第三国际纪念塔」那种构成主义雕塑，也不包括浇筑混凝土的构成主义建筑；那些是近亲，不是本条的识别信号。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Diagonal composition对角线构图 layout defining定义特征
The layout is built from slashed rectangles, chevrons, and bars that run at 30–60°; horizontals and verticals feel like exceptions, not the rule.
版面由 30–60° 的斜切矩形、人字条和斜杠构成；水平和垂直反而像例外，而不是规则。
-
Red-and-black slabs红黑块面 color defining定义特征
The palette is almost always a loud red (e.g. #D3191C), stark black (#0A0A0A), and a muted off-white or newsprint grey (#E8E4D9); color sits as flat planes, not gradients.
配色几乎总是 loud red（例如 #D3191C）、纯黑（#0A0A0A）和褪色的米白或新闻纸灰（#E8E4D9 / #B8B2A2）；颜色以平涂面出现，不用渐变。
-
Clipped photomontage裁剪的照片拼贴 imagery defining定义特征
Industrial or mass-culture photos are cut into sharp geometric panels with hard edges, often overlaid by red bars or black shapes, never softly rounded.
工业或大众文化照片被裁成边缘锋利的几何画板，常常被红条或黑色形状压住，绝不带柔和的圆角。
-
Industrial and mass icons工业与大众符号 imagery defining定义特征
Gears, smokestacks, loudspeakers, fists, aeroplanes, and crowds appear as silhouettes or high-contrast halftones, signaling collective production and modernity.
齿轮、烟囱、喇叭、拳头、飞机、人群以剪影或高对比半调出现，暗示集体生产与现代性。
-
Bold grotesk type粗黑 grotesk 字体 typography defining定义特征
Letterforms are heavy, condensed sans-serifs — equivalents of Helvetica/Impact/Arial Black — set in all caps with tight leading and often tilted or stacked.
字重很大、偏窄的无衬线体 —— 接近 Helvetica / Impact / Arial Black —— 全大写、行距紧，常被倾斜或堆叠。
-
Dynamic tilt动态倾斜 geometry defining定义特征
Headings, buttons, and image panels lean at the same diagonal angle (typically skewX(-8°) to skewX(-15°)), so the whole card feels like it is moving forward.
标题、按钮和图像画板以相同对角角度倾斜（通常是 skewX(-8°) 到 skewX(-15°)），让整张卡片感觉在向前冲。
-
Poster density海报密度 layout supporting辅助特征
Text and shapes butt against edges and overlap; generous padding and centered symmetry are avoided because the page is treated as a single propaganda sheet.
文字和图形紧贴边缘并互相交叠； generous padding 和居中对称被回避，因为页面被当作一整张宣传海报处理。
-
Static orthogonality静态正交网格 layout avoid避免
Calm, centered cards with equal white space and right-angle grids immediately kill the style — that territory belongs to De Stijl and Swiss minimalism.
平静的居中卡片、均等的留白和直角网格会立刻扼杀这个风格 —— 那是 De Stijl 和瑞士极简主义的领地。
Often confused with: De Stijl最容易混淆：风格派（De Stijl / 新造型主义 / 蒙德里安风格）
Constructivism构成主义（Constructivism）
De Stijl风格派（De Stijl / 新造型主义 / 蒙德里安风格）
This is Constructivism because the layout is kinetic — diagonals, skewed typography, photomontage, and a red-black-industrial palette drive the composition.
这是构成主义，因为版面是动势的 —— 对角线、倾斜字体、照片拼贴，以及红-黑-工业的配色在推动构图。
It would become De Stijl if every diagonal were straightened into a right angle, the photographs were removed, and the palette swapped to red-yellow-blue on white static grids.
如果把每条对角线都拉直成直角、去掉照片、再把配色换成白底上的红-黄-蓝静态网格，就变成 De Stijl 了。
In code — optional starting points代码写法 —— 可选起点
Diagonal red-black slab construction
background: #E8E4D9; border: 3px solid #0A0A0A; transform: skewX(-10deg); box-shadow: 6px 6px 0 #D3191C;Tilted bold grotesk heading
font-family: var(--font-sans), 'Helvetica Neue', 'Arial Black', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; transform: skewX(-8deg); color: #0A0A0A;Clipped photomontage panel
clip-path: polygon(0 0, 100% 12%, 92% 100%, 8% 88%); filter: grayscale(100%) contrast(1.25); background: linear-gradient(135deg, #999 0%, #222 100%);Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create this surface in the spirit of Soviet Constructivism. Defining signals: a red-and-black slab palette — use #D3191C for the loud accent, #0A0A0A for black, and #E8E4D9 or #B8B2A2 for the off-white / newsprint ground. Build the layout from diagonals: slashed rectangles, chevrons, and bars at 30–60°; headings, buttons, and image panels should share a single skew angle (transform: skewX(-8deg) to skewX(-12deg)) so the whole composition leans forward. Use heavy, condensed grotesk type — 'Helvetica Neue', 'Arial Black', Impact, or system heavy sans — in all caps with tight leading and 0.03–0.06em letter-spacing. Images must be clipped into sharp geometric panels and treated as high-contrast grayscale photomontage (filter: grayscale(100%) contrast(1.2)), overlaid by red bars or black shapes; choose industrial/mass icons such as gears, smokestacks, loudspeakers, or fists. Hard black borders (2–3px solid #0A0A0A) and flat color planes are required; zero gradients, zero rounded corners, zero soft shadows. Keep the specific iconography and exact angle flexible, but keep the diagonal energy and propaganda density. Do not drift into De Stijl — the decisive difference is motion: straighten the diagonals to right angles, replace photos with flat primary color blocks, and add white space, and you have left Constructivism. Preserve text contrast: black on red/off-white usually passes; red on black needs careful sizing. Honor prefers-reduced-motion by removing skew/translate transitions and keeping static diagonal geometry.
按苏联构成主义（Constructivism）的精神创建这个界面。决定性信号：红黑块面配色 —— 用 #D3191C 作高声部，#0A0A0A 作黑色，#E8E4D9 或 #B8B2A2 作米白 / 新闻纸灰底色。从对角线开始构建版面：斜切矩形、人字条和 30–60° 的斜杠；标题、按钮和图像画板应共享一个统一的倾斜角度（transform: skewX(-8deg) 到 skewX(-12deg)），让整个构图向前倾斜。使用厚重、偏窄的 grotesk 字体 —— 'Helvetica Neue'、'Arial Black'、Impact 或系统粗黑无衬线 —— 全大写、行距紧，letter-spacing 0.03–0.06em。图片必须裁成锋利的几何画板，并以高对比度黑白照片拼贴处理（filter: grayscale(100%) contrast(1.2)），再用红条或黑色形状压住；选择工业 / 大众符号，如齿轮、烟囱、喇叭或拳头。硬黑边框（2–3px solid #0A0A0A）和平涂色面是必需的；不要渐变、不要圆角、不要柔和阴影。具体符号和精确角度可灵活调整，但对角线动势和宣传海报密度必须保留。不要滑向 De Stijl；决定性区别在于「动」：把对角线拉成直角、用平涂三原色块替换照片并加入留白，你就已经离开构成主义了。保证文字对比度：黑字在红底 / 米白底上通常能过；红字在黑底上要谨慎控制字号。响应 prefers-reduced-motion：移除 skew / translate 过渡，保留静态对角几何。
Accessibility & misuse可访问性与误用
The tilted type and dense overlapping panels raise real readability risks: skewed letterforms are harder to parse for dyslexic readers and screen-magnification users, so keep body text untilted and reserve skew for short headings and labels.
倾斜字体和密集交叠的画板会带来真实的可读性风险：倾斜字形对阅读障碍和屏幕放大用户更难辨认，因此正文保持不倾斜，只把 skew 留给短标题和标签。
Red-black graphics often fail non-text contrast for meaningful UI boundaries; add a secondary indicator — a thick black outline or a clear focus ring — and test icons/buttons against the off-white ground.
红黑图形往往满足不了有意义 UI 边界的非文字对比度；要加辅助指示器 —— 粗黑轮廓或清晰的焦点环 —— 并在米白底色上测试图标 / 按钮。
Honor prefers-reduced-motion by disabling diagonal transitions and translate effects; the static layout should still communicate the style without animation.
响应 prefers-reduced-motion：禁用对角线过渡和位移动画；静态排版本身就应能表达风格，无需动态。
Origin起源
Russian Constructivism crystallised around 1915, led by Vladimir Tatlin and Alexander Rodchenko, and gained momentum after the 1917 Revolution through propaganda posters, book design, and agitprop — figures such as El Lissitzky, Lyubov Popova, and Gustav Klutsis shaped its look of photomontage, bold sans-serif type, and dynamic diagonals. The movement was effectively suppressed in the early 1930s as Socialist Realism became state doctrine, but its graphic vocabulary remained a reference for poster and editorial design ever after.
俄国构成主义约于 1915 年成形，由 Vladimir Tatlin 和 Alexander Rodchenko 引领，并在 1917 年革命后通过宣传海报、书籍设计和 agitprop 迅速发展 —— El Lissitzky、Lyubov Popova、Gustav Klutsis 等人塑造了照片拼贴、粗黑无衬线和动态对角线的视觉面貌。1930 年代初，随着社会主义现实主义成为国家正统，这一运动被基本压制，但它的图形语汇从此成为海报和编辑设计的重要参照。