网页设计中，如何有效利用负空间？

许多设计师为了设计一个丰富多彩的网页把产品设计的过于复杂、繁琐，这是犯了一个大错误。如果不是故意的，则应避免创建复杂的接口，而应使用更多空间。空间是Web设计中的基本方法，因为它可以为页面上的所有元素带来很大的不同。在这篇文章中，作者阐明了负空间的重要性，并分享了如何在网页设计中正确使用负空间的技巧。

一、什么是负空间？

在开始之前，我们首先要确切定义什么是负空间。负空间（或空格）表示网页上任何未使用的空间。在页面上没有引起用户注意的任何内容都是负空格。这并不意味着空格必须一定是白色的：它可以是任何颜色，图像或任何其他背景。

负空间有两个层次：微观和宏观。微负空间与线条、字符等小元素之间的空间有关，而宏负空间则是较大的模块或元素之间的空间。这两个级别对于网站设计的整体有效性都很重要。

让我们看一下以下使用负空间的网页设计。

1. 苹果

Apple一直非常重视设计，他们自己的网站也不例外。只要看看他们如何熟练地使用微观和宏观的负空间。该网站布局整洁，号召性用语（CTA）非常清晰。

您的注意力集中在核心功能，产品本身上，没有任何东西可以分散您对该页面的注意力。在页面中心仅查看一个对象是吸引用户注意力的理想方法。

2. 百度

百度可以说是中国网页负空间的鼻祖。搜索巨人利用了大量的负面空间和简洁的设计来吸引我们对搜索栏本身的关注。

百度只是将用户引导到页面中最具操作性的区域，即搜索栏。设计保持简洁明了，避免混淆。

3. Dropbox

Dropbox主页将完美的微观和宏观底片空间，自然的调色板和和谐的字体融为一体，营造出平静的氛围并提供流畅的用户体验。由于负空间的正确使用，该网站看起来很老练，从而带来了简洁和整洁。

4. 得物

得物（原毒物）电子商务平台的网站使用大量空白来实现其主要目的：引导访问者下载移动终端。得物将商品表单周围留有大量空白，以确保访问者在在浏览商品时被其他元素干扰。此外，他们明智地显示了网站导航，以免将注意力从页面的主要部分转移开。

你会看到负空间使用让用户在浏览网页时，更具有呼吸感。现在，让我们来看一下如何在您的网站上正确使用此负空间的提示。

二、如何使用负空间权？

1. 使用负空格来分页

破坏网页上的空间是设计中最重要的视觉组件之一。当网站上的信息太多而空间又太少时，访问者很难专注于主要信息。

负空间使用户有时间吸收他们在页面上看到的信息。有一些规则可以帮助设计人员在页面上创建对称的构图，并确保人们可以感知信息。构图各组成部分之间的均等空间可设置适当的设计结构，并帮助用户清楚地感知信息。根据网页设计的组成规则，这些微型块之间的空间应占据宏块之间的空间的三分之一。

有效的中断页面的结构，并突出重点

2. 进行内容理解

内容的可读性和可读性是网页设计中非常重要的方面。负空间可以同时优化它们。正确使用线条、字符之间的空间会使阅读理解提高几倍。

在优化内容理解时，应注意两个主要方面：页边距和行距。每行之间的间距，或只是行间距，可以增加正文的整体可读性，如以下示例所示：

3. 创建视觉层次

负空间不仅是页面上元素之间的空白，而且是构建视觉层次结构的必要工具。负空间可以组成或分离UI元素，因此它们可以创建有效的页面设计。

它提供了一个受欢迎的布局，可以使访问者在页面上停留更长的时间。此外，负空间会引起用户对重要元素的注意，并为眼睛提供休息。

4.澄清关系

格式塔心理学家在学习人们如何组织视觉信息的同时，制定了邻近定律。该法则规定，彼此相邻的所有视觉对象看起来都类似于人眼。

在网页设计中，适当的负间距是实现接近原理并使设计更具视觉吸引力的有效方法。例如，此原理非常适合博客架构。通过将大量文本和谐地分为段落和块，这样的布局更易让用户消化和愉悦。

底线

如你所见，负空间是Web设计中最强大的工具之一。通过遵循本文中给出的一些简单规则外，设计师可以创建一个完美的视觉吸引力设计，让用户赏析。

 

原文：https://speckyboy.com/negative-space-web-design/

作者：Anastasia Diachenko

编译作者：无尾熊，公众号：冬熊设计，欢迎关注，一起成长！

本文由@无尾熊  翻译发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。