Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

纸雕层叠风

Papercut

加入比较 +

把画面拆成若干张平涂色纸、逐层叠放并用柔和投影分隔前后的图形语言:每一层边缘干净、像刀刻出的轮廓,层与层之间靠阴影与镂空露出下层,形成浅而清楚的纵深,常用于插画、横幅与动效中的视差。

示意图 · 编辑插画,尚无可操作示例
一张名为 FIELDNOTES 的虚构网页横幅:灰蓝、赤陶与米白的几层色纸像山丘一样前后叠放,层间有柔和投影,最前一层上的米白卡片里排着灰色占位文本条与一个按钮形状。
一张名为 FIELDNOTES 的虚构网页横幅:灰蓝、赤陶与米白的几层色纸像山丘一样前后叠放,层间有柔和投影,最前一层上的米白卡片里排着灰色占位文本条与一个按钮形状。

识别特征

  • 画面由 3–6 层平涂色块叠成,每层只用一种颜色
  • 层边缘是干净的曲线或锯齿轮廓,像刀刻或剪出的边
  • 层与层之间用短而柔和的投影分隔,镂空处露出下层颜色

概念边界

本词条只讨论在界面与品牌画面里模仿"层叠剪纸"的数字图形语言,不概括剪纸作为手工艺与民俗传统(如中国剪纸、日本切り絵、德瑞的 Scherenschnitte)的技法、题材与仪式功能,也不把这种风格当作对这些传统的再现。判定标准是"平涂色层 + 刀刻轮廓 + 层间柔和投影 + 镂空露出下层"的组合,而不是"颜色是纸的颜色"。它与拼贴不同:拼贴拼合来源各异的碎片并保留接缝,纸雕层叠风的各层通常出自同一套色板与轮廓语言;它与拟物化也不同:它借的是纸的层次感,不借某个实物去解释界面功能。

什么时候考虑它

  • 品牌需要温和、手作感、但仍然整洁的插画语言
  • 横幅、空状态或引导页需要一层浅纵深与轻微视差
  • 内容层级可以对应到少数几层前后关系

什么时候慎用

  • 信息密集的表格、表单或仪表盘,层叠投影会和真实的控件层级混淆
  • 把文字直接压在多层投影交错的区域上
  • 借用某一民俗剪纸的具体纹样与吉祥符号,却与内容和语境无关

取舍

平涂色层加柔和投影能用很少的颜色做出清楚的纵深和亲切的手作感,代价是每一层都要单独绘制与维护,层数一多就难以改版,而且装饰性的层叠阴影容易与界面真正的可交互层级混淆。

条件规则 · 编辑建议

当文字或可点击控件放在层叠插画之上必须为文字铺一块与其下层无关的纯色底,并按最不利的背景层核对对比度,确保满足 WCAG 对正文与非文本对比度的要求。
当层叠插画要配合滚动做视差动效建议把视差位移限制在少数几层、幅度保持较小,并在用户设置减少动态效果时改为静态层叠。
当设计中借用某一民俗剪纸的纹样或吉祥符号建议先确认纹样的含义与使用场合,与内容无关时改用原创的抽象轮廓。

相关词条

拼贴风格 ↗条件替代 · 需要一种带纸张手感的画面语言

拼贴拼合来源各异的碎片并保留接缝与尺度跳跃,纸雕层叠风用同一套色板与轮廓逐层叠放,追求的是整齐的纵深而不是异质并置。

扁平化设计 ↗相关但不同 · 色彩以平涂方式呈现,但仍需要少量纵深

每一层本身都是扁平的平涂色,纸雕层叠风只在层与层之间重新引入投影,可以看作扁平化之上加了有限的纵深。

图形与背景 ↗提供解释 · 用层叠关系区分前景主体与背景

层间投影与镂空让哪一层在前一目了然,图底关系原则说明了这种前后分离为什么能被快速读懂。

对比与可读性 ↗条件冲突 · 文字跨越多层投影与镂空边缘

文字背后的颜色在层与层之间跳变,实际对比度由最不利的那一层决定。

来源与支持范围

Wikipedia · Papercutting ↗

该条目说明剪纸是在多种文化中独立发展的纸面设计艺术,通常从单张纸上剪出而不像拼贴那样由多片拼合,并列举中国剪纸、日本切り絵/切り紙、瑞士与德国的 Scherenschnitte、斯拉夫 wycinanki 等传统,其中 wycinanki 被描述为色彩鲜明的多层作品;本词条据此划定"手工艺传统"一侧的边界,数字纸雕层叠风的手法建议属编辑意见。

检索日期:2026-10-20
UNESCO Intangible Cultural Heritage · Chinese paper-cut ↗

该页面记载中国剪纸于 2009 年列入人类非物质文化遗产代表作名录,说明剪纸可用剪刀剪或用刀刻、可上色也可素色,用于装饰窗户等室内空间,并在婚礼、寿辰等庆典与祈愿中承担功能;本词条据此说明民俗剪纸带有仪式与社会意义,界面中借用其纹样时需尊重语境。

检索日期:2026-10-20 · 快照待确认

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意,其中的层叠轮廓均为原创抽象形状,不复制任何传统剪纸纹样。应用到产品前仍须确认层叠投影没有与可交互元素的层级混淆,并实测文字区域的对比度与减少动态效果设置下的表现。

{
  "tokens": {
    "surface": "#f4ecdc",
    "ink": "#2f3a45",
    "accent": "#c4653f",
    "radiusPx": 0,
    "shadow": "0 2px 6px rgba(47, 58, 69, 0.18)"
  },
  "tokenScope": "本样例配方:米白纸色底、灰蓝墨色与赤陶强调色,加一层短而柔和的投影示意层间距离;只是一种取向,实际项目需按层数重新定义每层颜色与投影强度,并验证文字所在区域的对比度。"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。