“扁平化设计”成为默认和主流设计风格至今已有十余年——这并非偶然。经历了“Web 2.0”时期各种光鲜亮丽的表面和阴影效果之后，我们都需要能够在全新的响应式布局中保持清晰易读的设计元素。

然而，这种扁平化的色彩设计很容易显得千篇一律。与其添加新的颜色或字体，不如尝试加入一些纹理，这有时反而能让你的UI设计焕然一新。让我们来看一些精彩的例子。

要点总结

• 纹理可以为用户界面设计增添深度和多样性，防止其显得过于扁平或千篇一律。一些微妙的纹理，例如谷歌“人工智能的AZ”项目中使用的纸张纹理，可以在不引起用户过多注意的情况下提升设计效果。

• 传统媒介的纹理，例如颜料和铅笔，因其自然质朴的外观，在数字设计中格外引人注目。然而，这些纹理的运用却颇为复杂，新西兰设计公司Resn为Airbnb广告活动复刻中国传统水彩风格便是一个很好的例证。

• 复古纹理能够唤起人们的怀旧和熟悉感。Hypebeast 在其设计中运用了“发光电视扫描线效果”，让人联想起 80 年代的街机游戏，营造出一种独特的复古感。

• 使用半色调和本戴点可以赋予设计一种粗糙的点描效果。这项技术最初是印刷过程的副产品，可以用来为平面彩色插图增添深度和纹理，正如日本岛根县美里村的网站上所展示的那样。

添加纸纹

2019年，谷歌发布了一个名为“ AI的AZ ”的酷炫附属项目，旨在解释人工智能的基本概念。其风格现代而友好，采用大面积的色块、简洁的儿童绘本插图以及醒目而富有表现力的衬线字体。

但仔细观察平涂区域，你会发现纸张般的颗粒感。我在下图放大了一小块区域，但你可能需要查看实物才能充分体会这种纹理。它非常细微，我怀疑大多数用户都不会有意识地注意到，但我认为它与简洁的儿童绘本风格完美契合。

谷歌 AZ of AI 项目的设计师们为这种原本扁平化的设计注入了温暖而富有触感的元素。

那么，他们是如何达到这种效果的呢？

我必须承认，我花了不少时间仔细检查 background-image所有大型平面面板区域的 CSS 属性，寻找平铺图形——但一无所获。这真是令人费解。

直到第二天我才恍然大悟。如果他们不是给每个面板都添加颗粒感，而是创建一个几乎看不见的“颗粒滤镜层”覆盖整个网站呢？你可以把它想象成Snapchat的颗粒滤镜。

找到了！我一直找错地方了。

如果您检查 HTML 代码，您会发现一个 :after 带有附加 CSS 的伪元素：

._3rV4LQ0BePEq9V1dxEjhEF::after {
    background: url(/static/noise.jpg);
    content: "";
    height: 100%;
    left: 0;
    opacity: .05;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 201;
}

:after 伪元素可以创建一个几乎透明的纹理层。

该图层使用颗粒图像（noise.jpg）作为平铺背景，并将其定位以覆盖整个屏幕（ ，，，， width:100%和 ） 。height: 100%top:0left:0z-index:201

正如我们所料，透明度几乎设置为透明（opacity: .05），因此只留下淡淡的颗粒感。用这个“镜头层”（即使它是透明的）覆盖屏幕的唯一潜在问题是，它会阻挡光标访问其下方的所有链接、输入框和其他用户交互元素。

幸运的是，这个问题很容易解决，只需添加一个 pointer-events: none，即可使该镜头层对用户的光标不可见。

我认为这真是一个非常实用的技巧。它只用一张小小的图片和十几行CSS代码，就能给整个网站带来震撼的视觉效果。性价比超高。

颜料、铅笔和其他传统媒介

电脑的设计旨在实现精准和干净，与大多数传统媒介不同，数码色彩不会意外晕染、污渍、渗色或模糊。这固然有利于保持桌面整洁，但也意味着，当找到合适的设置时，像颜料和铅笔这样真实、自然、有机的媒介能够真正脱颖而出。

Airbnb 中国的“少即是多”营销活动将中国水彩画带入了数字世界。

尽管上面提到的应用程序已经过期，但新西兰代理公司 Resn为我们提供了一个完美的近期案例，真实地再现了中国传统水彩画风格，以推广中国农村的 Airbnb 体验。

这种水彩风格渗透到应用程序的每一个像素，从推拉动画序列到全屏背景，使其成为一项巨大的工程。

褪色的记忆

当 Obys Agency以数字方式向一级方程式赛车王牌尼基·劳达致敬时，他们的设计方法大量借鉴了尼基职业生涯中大量的精彩档案照片和视频资料。

Obys 向尼基·劳达致敬。

那些泛着沙砾感的红褐色照片赋予了网站一种温暖而略带怀旧的氛围。人们很容易过度追求复古主题，以至于模仿旧书或旧报纸的风格。令人欣慰的是，Obys 巧妙地避免了这种俗套，它以一种动态的网页布局展示了档案图像，而这在传统书籍中是根本无法实现的。

数字复古风

复古灵感来源：《创战纪》（1982）、《战争游戏》（1983）和《银翼杀手》（1982）。

当然，“复古”从来都不是一个特定的时间点，而是一种视角，Hypebeast用他们极具 80 年代风格的复古主题作品就证明了这一点。他们作品中旋转的漩涡、双色线条和闪亮的扫描线，让人联想到《创战纪》中的光轮摩托、 《战争游戏》中 的指挥中心以及 《银翼杀手》。

Hypebeast 将 1982 年的元素大量融入到他们的音乐和街头服饰中。

虽然 Hypebeast 使用 HTML5 canvas 来渲染动画，但这种“发光的电视扫描线效果”非常适合我们在本章前面分析过的镜头层技术。

半色调和本戴点

如果你曾经仔细观察过旧漫画书、报纸或杂志，你可能会注意到图像中构成色调的点阵图案。

从技术角度讲，印刷中有两种网点图案。 半色调网屏使用由微小透镜组成的塑料网格，将黑点烧蚀到下方的感光胶片上。光线越强，网点越大。

下图第一格显示的是 安迪·沃霍尔 1964 年壁画的半色调样本。

沃霍尔的波普艺术、报纸广告和漫画作品中运用了半色调和本戴点阵。

本戴点略有不同。漫画——例如上图所示的超人漫画——通常以黑色线条勾勒出轮廓，然后在上面点缀大小均匀的本戴点，以模拟额外的墨色。在白色纸张上绘制一排红色小点，就能廉价地得到粉色。

虽然这些技法的粗糙、点状外观最初是印刷过程中不可避免的副产品，但最终它本身就成为了一种艺术表达——并且至今仍然以这种方式被使用。

日本岛根县三里村 是我近期最喜欢的运用这种技法的例子。他们的网站以插图地图的形式呈现，让用户可以进行虚拟游览。插图生动有趣，大多采用平涂色彩，但巧妙地运用了一些半色调技巧，增添了层次感和质感。

岛根美里运用粗犷的半色调，赋予扁平的彩色插图以深度和冲击力。

DIY半色调

有很多 Photoshop 滤镜可以模拟图像的半色调效果。它们……还不错，但如果我们打算通过将照片转换为半色调来消除图像细节，那么将其转换为矢量图形——理想情况下是 SVG 格式——才是更合理的选择。为此，我非常乐意推荐HalftonePro。

HalftonePro 可以相对轻松地将任何位图转换为 SVG。

HalftonePro允许您上传任何位图并应用一系列半色调设置，包括：

• 网格尺度

• 网格图案（圆形、正方形、三角形等）

• 点状图形（圆形、方形、三角形等）

• 对比

• 颜色输出

以下是我制作优质SVG半色调图像的一些小技巧：

1. 并非所有图片都适合这种风格。通常来说，醒目、高对比度的图片效果会更好。

2. 如果选择非常精细的网格，文件大小可能会变得很大且难以管理。接受这种粗糙感吧。

3. 先使用预设选项，帮助你了解哪些设置有效。

4. 使用类似Jake Archibald 的 SVG Optimizer之类的工具来压缩文件大小。

对地下丝绒乐队的安迪·沃霍尔封面进行了四种不同的半色调处理。

请注意，HalftonePro并非免费软件。目前售价为 15 美元，但这是一次性 付费即可 终身使用——在这个充斥着月度或年度订阅计划的世界里，这显得尤为难得。我付费购买了它，并且仍然认为物有所值。

隐藏的颗粒

最近我见过的最巧妙运用纹理的例子，或许要数 哈佛电影资料馆的网站了。打开网站，你可能会想：“什么纹理？这网站简直就是一片平淡无奇。”

哈佛电影资料馆将动画胶片颗粒效果应用于图像。

然而，仔细观察这些图像，你会发现其中蕴含着一种微妙的能量——类似于胶片闪烁的效果。前端设计师在所有图像表面添加了一层细腻的动态胶片颗粒。（不过需要注意的是，在我的手机上，移动视图中并没有这种效果。）我估计很少有用户会刻意注意到这一点，但我认为它确实让这些静态照片有了 胶片剧照的感觉。

他们是怎么做到的？

胶片颗粒效果的特写镜头。

对于那些对技术细节感兴趣的人来说，开发者使用 JavaScript 在每张图片上创建了一个HTML5 canvas图层。每个 canvas 图层都会播放一段几乎透明的随机噪声动画。尽管这个想法非常巧妙，但它的复杂性反而让我更加钦佩之前 Google AI 纸张纹理的简洁性。

引领纹理潮流

正如我们前面所见，纹理对人们对设计的感知有着巨大的影响。紧跟当前的网页设计趋势对于打造高效的现代设计至关重要，但了解互联网发展史之外的过往设计模式，将有助于你建立自己的风格并创作出独具匠心的作品。

最终，客户想要建立的形象以及他们设定的沟通目标，应该是决定你使用多少纹理以及使用何种纹理的决定性因素。

摘自《优美网页设计原则》（第4版）。

关于用户界面设计和纹理的常见问题

纹理在用户界面设计中的重要性是什么？

在用户界面设计中，纹理是至关重要的元素，它能为整体设计增添深度和细节。纹理可以用来区分屏幕上的不同元素，使用户更容易与界面交互。此外，纹理还可以用来营造特定的氛围或情绪，从而提升用户体验。例如，粗糙的纹理可以传达一种粗犷的户外感，而光滑的纹理则可以传达一种时尚现代的感觉。

如何在用户界面设计中有效地运用纹理？

要想在用户界面设计中有效地运用纹理，你需要考虑整体设计美感以及想要传达的信息。纹理应该用来增强设计效果，而不是分散注意力。同时，设计的易用性也至关重要。过多的纹理会使界面难以操作，因此找到平衡点非常重要。尝试不同的纹理，看看哪种最适合你的设计。

在用户界面设计中使用纹理时，有哪些常见的错误需要避免？

在用户界面设计中使用纹理时，一些常见的错误包括过度使用纹理、使用与整体设计美学不符的纹理，以及使用使界面难以导航的纹理。此外，还必须考虑纹理对加载时间的影响。高分辨率纹理会减慢加载速度，从而对用户体验产生负面影响。

您能否提供一些在用户界面设计中有效运用纹理的例子？

在用户界面设计中，纹理的有效运用有很多绝佳的例子。例如，在网站背景中使用细腻的木纹纹理可以营造出温馨舒适的氛围。又如，使用粗糙的纹理则可以营造出一种粗犷的户外感。关键在于如何巧妙地运用纹理，从而提升整体设计效果并改善用户体验。

如何才能在用户界面设计中找到运用纹理的灵感？

有很多资源可以帮助你找到在用户界面设计中使用纹理的灵感。像 Dribbble 和 CollectUI 这样的网站展示了各种各样的用户界面设计，其中许多都以富有创意且有效的方式融入了纹理。你也可以从周围的世界中汲取灵感。观察自然界、建筑、时尚等等领域的纹理。

有哪些资源可以帮助我找到可以在用户界面设计中使用的纹理？

有很多资源可以帮助你找到用于 UI 设计的纹理。像 Textures.com 这样的网站提供了各种各样的高质量纹理，你可以下载并在设计中使用。你也可以使用 Photoshop 等工具创建自己的纹理。

如何测试我在用户界面设计中使用的纹理的效果？

您可以通过用户测试来检验UI设计中使用的纹理效果。这包括收集用户对设计可用性和美观性的反馈。您还可以使用分析工具来跟踪用户与设计的交互方式，从而深入了解纹理的有效性。

我如何才能更多地了解如何在用户界面设计中使用纹理？

有很多资源可以帮助你学习如何在用户界面设计中使用纹理。像 SitePoint 这样的网站提供了关于这个主题的文章和教程。你还可以找到一些关于用户界面设计的书籍和在线课程，其中也涵盖了纹理的使用。

纹理会影响我的用户界面设计的加载时间吗？

是的，纹理会影响用户界面设计的加载时间。高分辨率纹理会减慢加载速度，从而对用户体验产生负面影响。因此，优化纹理以确保快速加载至关重要。

我可以在网页和移动端UI设计中使用纹理吗？

是的，纹理可以用于网页和移动端UI设计。但是，必须考虑这两个平台之间的差异。移动设备的屏幕较小，网络连接速度通常也较慢，因此，使用纹理时，必须既能提升设计效果，又不会对用户体验或加载速度产生负面影响。