用途:面向数字设计,提供背景纹理、图案、噪点叠加与表面处理的做法,用于丰富界面质感与层次。
主要能力:列出多种纹理类型及其效果与适用场景。噪点/颗粒带来有机温暖与纵深,适合主视觉背景和深色表面;圆点图案提供结构与节奏,适合微妙背景和装饰;线条图案表达方向与运动,用于强调和分区;几何纹样体现秩序与精确,适合技术/开发者产品;有机纹样带来温暖与亲和,适合生活方式与创意品牌。
使用方式:可用 CSS 伪元素叠加噪点,示例中 .textured 设为 position: relative,.textured::after 覆盖 inset: 0,以 background-image 引用内联 SVG 图案,opacity 设为 0.03,并配合 pointer-events: none。
规则与限制:纹理应几乎难以察觉,若产生干扰就说明过强;多数纹理透明度建议降至 2% 至 5%;要确保纹理背景上的文字仍可读;性能上优先使用 CSS 图案或极小的可平铺图片,而非大文件;同一表面上不要混用多种纹理类型。