网页设计中的空白：定义和实践

islammstsumaiya

空白不仅仅是网站上元素之间的空白空间。事实上，它是一个强大的工具，可以智能地用来为用户提供喘息的机会，集中他们的注意力，让他们的旅程更轻松。了解如何。 网页设计有许多不同的方法——从极简主义到平面设计，再到材料设计和对比的创造性运用。网页设计中另一个极其重要的工具是空白。 白色空间鼓励极简主义和平衡。它还可以通过创建段落分隔符和空格等来改善用户体验，以提高可读性。 然而，空白的使用必须负责任且正确。使用太少，可能会极大地损害网站的易读性和可用性。使用太多，您可能会冒着传递有关品牌的错误信息的风险。 在本文中，我们将讨论什么是空白，它的不同类型，解释为什么应该使用它，更重要的是，向您展示良好的空白实现的示例。 通过在网页设计中利用对比来创建独特的网站 目录 什么是空白？ 空白从何而来？ 您应该了解的不同类型的空白 微观与宏观空白 被动与主动空白 为什么应该在网站上使用空白 这是一个经典 它带来了更具吸引力的界面 它使网站更易于使用 它可以提高注意力 这对于组织很有用 它提高了内容的易读性和可读性 网页设计中 11 个鼓舞人心的空白示例 1. 匹兹堡动物园和 PPG 水族馆标志 2. Circa 1886的英雄形象画廊 3. Florian Schulz Productions 的照片 4. 积压导航链接 5.Udemy行距 6. Meetup 的组织 UI 7. Maison De La Luz 的边缘 8.苹果产品重点 9. 平静的 CTA 10. Flywheel 的定价模块 11.Salesforce 表单布局 什么是空白？ 空白（也称为负空间）是网页上内容和元素周围的空白空间。 它用于平衡页面设计、组织内容和元素并改善用户的视觉体验。

如果您查看《纽约客》网站的主页，您会看到到处都是这 波兰 WhatsApp 号码 样的示例： 纽约客网页设计 2021 《纽约客》标志的大空间： 纽约客头条 分隔每个导航链接的等距空间： 纽约客导航 围绕主页的每个内容块构建的缓冲区： 纽约客内容间距 甚至设计师对排版的字距调整、行距和跟踪的选择也显示了空白在网站设计中的有用性。 看一下 2008 年的网站，您就会发现空白带来了多么巨大的差异： 纽约客网页设计 2008 虽然存在一些空白，但它并不像我们今天在网站上看到的那样优雅或具有战略意义。 空白从何而来？ “空白”一词有些误导。虽然一些空白示例确实是白色的（例如上面的《纽约客》示例），但通常情况并非如此。 为了理解空白为何得名，我们需要看看它的来源。 虽然没有人提到创建空白或给它命名，但我们可以将其归因于以下各方： 首先是20世纪中国美术家、书法家。他们所处理的白色宣纸上的空白空间并没有被视为浪费空间。他们在空虚中找到了意义，并相信它有助于对整个画面的整体理解。 他们将此称为“设计白色”。 卡罗尔·道格拉斯 (Carol Douglas)解释了中国艺术中留白的价值： “在中国艺术中，空白的空间被期望通过其缺乏图像来传达信息。



空心形状的大小和轮廓创造出节奏和统一。实心的形状赋予空的意义，反之亦然。” 由于现代主义注重极简主义、结构化网格和负空间，留白后来成为印刷设计的主要内容。 因此，我们也可能将其称为空白，因为现代主义者在白纸上书写或在白色画布上作画。 您应该了解的不同类型的空白 通常，我们将空白分为两个不同的类别： 微观与宏观空白 微观和宏观空白不仅仅根据大小来定义空白。 微空白是指围绕内容构建的较小间隙和缓冲区。例如，微空白可以出现在： 信件 字 段落 导航链接 网格中的图像或内容 表单字段 微空白的目的是提高内容的易读性和可读性。 另一方面，宏观空白是指没有内容的较大区域。例如，可以找到宏空白： 在网站的边缘 标题中徽标周围 页面上的各部分之间 在英雄形象中 将主要内容和侧边栏分开 在图像中 CTA 按钮周围 宏观空白的目的是改善网站布局并使其更易于理解和导航。