Zine / Collage 独立杂志拼贴（Zine / Collage）
Zine / Collage treats the interface as a photocopied, hand-cut magazine spread: pieces of paper are torn or trimmed, layered at odd angles, and taped into place with masking tape; text alternates between handwriting, typewriter, and clipped headlines, all sitting on a grainy, high-contrast, DIY surface. It is not polished — the scissor slip, the tape wrinkle, and the over-copied halftone are the whole point. The look migrated from punk fanzines and Riot Grrrl photocopies into web portfolios and editorial sites looking for warmth outside the SaaS grid.
独立杂志拼贴把界面当成一份复印过、手工剪贴的杂志内页：纸张被撕下或裁开，以奇怪角度层层叠放，再用胶带固定；文字在手写、打字机和剪报标题之间切换，全部落在粗糙、高对比、DIY 质感的表面上。它不精致——剪歪的边、皱起的胶带、复印过头的网点就是全部看点。这种风格从朋克 fanzine 和 Riot Grrrl 的复印件一路走进网页作品集和编辑型站点，寻找 SaaS 网格之外的手作温度。
Scope: This entry covers the visual language of cut-and-paste, self-published zines translated into UI. It overlaps with risograph printing and Memphis-style pattern energy, but zine collage is specifically paper-first: torn edges, tape, handwriting, and photocopier artifacts. Corporate illustration systems and clean mood boards are not zine collage.
范围：本条覆盖「剪贴独立杂志」视觉语言被转译成 UI 的部分。它与 Riso 印刷和孟菲斯风格的图案能量有交集，但独立杂志拼贴必须是「纸张优先」：撕边、胶带、手写、复印机痕迹。企业插画系统或干净的情绪板不属于这个风格。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Torn or irregular paper edges撕裂或不规则的纸边 geometry defining定义特征
Surfaces are not clean vector rectangles; edges look torn, scissor-cut, deckled, or clipped from another page, often exposed as a 1–2px ragged silhouette.
表面不是干净的矢量矩形；边缘看起来是撕破、剪刀裁切或从另一页剪下来的，常常露出 1–2px 的锯齿状深色轮廓。
-
Visible masking tape hinges可见的胶带固定点 surface defining定义特征
Strips of translucent tape — usually beige or washi yellow — hold pieces down at corners or seams; they are rotated a few degrees and often overlap the layer beneath.
半透明胶带——通常是米色或和纸黄色——贴在角落或接缝处把纸片压住；它们会旋转几度，而且常常压在下层纸张之上。
-
Photocopied halftone grain复印网点颗粒 surface defining定义特征
High-contrast black-only or limited-spot images show dot halftone, xerox streaks, and paper fiber texture; gradients are replaced by grainy black dots.
高对比的黑色-only 或有限专色图像呈现网点、施乐复印条纹和纸张纤维纹理；渐变被颗粒感的黑点取代。
-
Handwriting meets typewriter meets clipped type手写、打字机与剪报字体混排 typography defining定义特征
Labels appear in marker handwriting, monospaced typewriter, or all-caps cutout letters — never one slick font family carrying the whole page.
标签用马克笔手写、等宽打字机或全大写剪报字母——绝不让一套 slick 的字体家族贯穿整页。
-
Layered cutouts with paper shadows带纸张阴影的层叠剪贴 depth defining定义特征
Pieces overlap at slight rotations (-3° to +4°), each casting a soft, low offset shadow that reads as physical paper thickness rather than elevation.
纸片以轻微角度（-3° 到 +4°）互相重叠，各自投下柔和的低偏移阴影，读出的是纸张厚度，而不是数字高程。
-
DIY imperfection as ornament把 DIY 不完美当装饰 layout defining定义特征
Misalignment, wobbly hand-drawn rules, glue smears, and visible scissor slips are retained on purpose; symmetry and pixel precision signal something else.
错位、歪歪扭扭的手绘分隔线、胶水痕迹、明显的剪刀滑口被故意保留；对称和像素级精确意味着别的风格。
-
Limited spot-color palette有限专色板 color supporting辅助特征
Black ink plus one or two flat accent colors — hot pink, mustard, cyan — on off-white newsprint; the palette mimics cheap riso or xerox duplication.
黑色油墨加一到两种平涂强调色——艳粉、芥末黄、青色——印在米白色新闻纸上；调色板模仿廉价 Riso 或复印效果。
-
Source material on paper纸上的素材来源 imagery variable可变特征
Magazine photos, ticket stubs, receipts, stamps, and doodles can decorate the surface; what matters is that each piece reads as found and pasted.
杂志照片、车票、收据、邮票和涂鸦可以装饰表面；关键是每一件都要读出「被发现并贴上去」的感觉。
-
Digital glass or blur数字玻璃或模糊 surface avoid避免
backdrop-filter blur, translucent panels, and lens-like gloss dissolve the paper-and-tape materiality — that look is glassmorphism or Liquid Glass, not zine.
backdrop-filter 模糊、半透明面板和透镜式光泽会瓦解纸张加胶带的材质感——那是玻璃拟态或液态玻璃，不是独立杂志。
Often confused with: Anti-design最容易混淆：反设计 / Dada Web
Zine / Collage独立杂志拼贴（Zine / Collage）
Anti-design / Dada Web反设计 / Dada Web
This is Zine / Collage because the artifacts are physical paper things — torn edges, masking tape, photocopier grain, handwriting, and layered cutouts. The imperfection comes from scissors and glue, not from digital conflict.
这是独立杂志拼贴，因为它的痕迹是实体纸张——撕边、胶带、复印颗粒、手写和层叠剪贴。这种不完美来自剪刀和胶水，而不是数字冲突。
It would become Anti-design if the paper, tape, and grain vanished and were replaced by digital chaos — clashing neon gradients, broken grids, overlapping glitchy type, and deliberate usability hostility with no DIY materiality left.
如果纸张、胶带和颗粒都消失，换成数字混乱——冲突的霓虹渐变、破碎网格、重叠的故障字体、故意制造可用性敌意——并且不再有任何 DIY 材质感，那就变成反设计了。
In code — optional starting points代码写法 —— 可选起点
Torn paper card with tape hinge
background: #f4f1ea;
border: 1.5px solid #1a1a1a;
clip-path: polygon(0 2%, 98% 0, 100% 97%, 2% 100%);
box-shadow: 2px 3px 0 rgba(26,26,26,.15);
&::before { /* tape */
content: '';
position: absolute;
top: -10px; left: 18px;
width: 44px; height: 16px;
background: rgba(232,215,139,.78);
transform: rotate(-12deg);
border: 1px solid rgba(26,26,26,.18);
}Photocopy halftone texture overlay
background:
radial-gradient(circle, rgba(26,26,26,.55) 1.2px, transparent 1.4px) 0 0 / 4px 4px,
linear-gradient(#fff 0%, #e8e4da 100%);
filter: contrast(1.25) grayscale(1);Hand-lettered heading stack
font-family: 'Bradley Hand', 'Chalkboard SE', 'Comic Sans MS', cursive;
letter-spacing: .02em;
text-transform: uppercase;
color: #1a1a1a;Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the interface as a Zine / Collage (zine-collage). Defining signals: every card or panel should read as torn or scissor-cut paper, not a vector rectangle — use irregular clip-path polygons or jagged border-radius and expose a 1–2px dark silhouette; attach pieces with visible masking tape hinges (#e8d78b at ~78% opacity, 40–50px wide, rotated -12° to +10°) overlapping corners; apply photocopied halftone grain to images and surfaces using a radial dot pattern (#1a1a1a dots on #f4f1ea paper), then boost contrast and grayscale; mix typography so headings use a handwritten marker family ('Bradley Hand', 'Chalkboard SE', 'Comic Sans MS', cursive), metadata uses a monospaced typewriter ('Courier New', 'Courier Prime', monospace), and accents look like clipped magazine all-caps. Layer pieces at slight rotations (-3° to +4°) with soft paper shadows (2px 3px 0 rgba(26,26,26,.15) or 0 2px 5px rgba(0,0,0,.18)), and keep deliberate DIY imperfection — wobbly rules, misalignment, and scissor marks. Palette: black #1a1a1a on off-white #f4f1ea newsprint, plus one or two flat spot accents such as hot pink #ff4f87 or mustard #f2c94c. Avoid digital glass, backdrop blur, gradients, and clean centered symmetry; those kill the paper materiality. Keep body text at least 14px and on solid paper fills so the rough edges do not sacrifice readability.
按独立杂志拼贴（zine-collage）创建这个界面。决定性信号：每张卡片或面板都应读出被撕破或剪下的纸张，而不是矢量矩形——用不规则的 clip-path 多边形或锯齿状 border-radius，并露出 1–2px 的深色轮廓；用可见的胶带固定点把纸片贴住（#e8d78b、约 78% 不透明度、宽 40–50px、旋转 -12° 到 +10°），让胶带压过角落；给图像和表面加上复印网点纹理（#1a1a1a 网点落在 #f4f1ea 纸张上），再提升对比并去色；混排字体：标题用手写马克笔字体族（'Bradley Hand'、'Chalkboard SE'、'Comic Sans MS'、cursive），元数据用等宽打字机（'Courier New'、'Courier Prime'、monospace），点缀用剪报式全大写。以轻微角度（-3° 到 +4°）层叠纸片，并加上柔和的纸张阴影（2px 3px 0 rgba(26,26,26,.15) 或 0 2px 5px rgba(0,0,0,.18)），同时保留刻意的 DIY 不完美——歪歪扭扭的分隔线、错位和剪刀痕迹。配色：#1a1a1a 黑色印在 #f4f1ea 米白新闻纸上，再加一到两种平涂专色，如艳粉 #ff4f87 或芥末 #f2c94c。避免数字玻璃、backdrop 模糊、渐变和干净居中对称，这些都会毁掉纸张材质感。正文至少 14px，并放在实心纸色填充上，别让粗糙边缘牺牲可读性。
Accessibility & misuse可访问性与误用
Handwriting and torn edges are decorative, but they become risky when used for body text or labels. Keep paragraph text in a clean typewriter or sans-serif at 14px or larger, and reserve marker handwriting for short headings or tags that do not need to be read at speed.
手写体和撕边是装饰，但用于正文或标签时就有风险。正文段落请用干净的打字机或无衬线字体，大小至少 14px；把马克笔手写留给短标题或标签，不需要快速阅读。
High-contrast photocopy and busy collage backgrounds can wreck text contrast. Place readable text on solid paper fills (#f4f1ea or a flat accent block) and check that black ink on those fills passes 4.5:1; never float small text directly over halftone imagery.
高对比复印和繁杂的拼贴背景会严重破坏文字对比度。可读文字请放在实心纸色填充（#f4f1ea 或平涂强调色块）上，并确认黑色油墨与这些填充达到 4.5:1；绝不要把小字直接浮在网点图像上。
Overlapping cutouts and decorative tape must not hide interactive elements or trap focus. Make controls reachable by keyboard, show a clear focus indicator (a thick dashed marker outline works well), and honor prefers-reduced-motion by turning off rotation/shake transitions.
层叠剪贴和装饰胶带不能遮挡交互元素或困住焦点。控件必须能用键盘到达，显示清晰的焦点指示器（粗虚线马克笔轮廓很合适），并在 prefers-reduced-motion 下关闭旋转/抖动过渡。
Origin起源
Modern zines descend from 1930s science-fiction fanzines; the word 'fanzine' was coined by fan Louis Russel Chauvenet around 1940. The cut-and-paste visual identity took shape in the 1970s UK punk scene with photocopied zines like Sniffin' Glue (1976), then spread through the network zine directory Factsheet Five, launched by Mike Gunderloy in 1982. The 1990s Riot Grrrl movement — including the Bikini Kill zine — pushed the DIY collage aesthetic into feminist punk publishing. As a named UI look, Zine / Collage surfaced in the 2020s as a reaction to the sameness of polished SaaS grids, with designers borrowing torn paper, tape, halftone, and handwriting to make screens feel physically assembled.
现代 zine 脱胎于 1930 年代的科幻 fanzine；「fanzine」一词约 1940 年由粉丝 Louis Russel Chauvenet 创造。剪贴视觉身份在 1970 年代英国朋克场景中成形，代表作是复印 zine《Sniffin' Glue》（1976），随后通过 Mike Gunderloy 于 1982 年创办的 zine 目录《Factsheet Five》扩散网络。1990 年代的 Riot Grrrl 运动——包括 Bikini Kill zine——把 DIY 拼贴美学推进女性主义朋克出版。作为具名的 UI 风格，独立杂志拼贴在 2020 年代出现，作为对千篇一律的 SaaS 网格的反击，设计师借用撕纸、胶带、网点和手写让屏幕看起来是 physically 组装出来的。