极简主义网页设计中的负空间研究

王梓浈 朱 宏（上海大学 上海美术学院，上海 200444）

极简主义作为一个艺术派系最早起源于美国。现代极简主义作为一种新的生活方式正在全世界日趋流行。如今，大多数界面设计中非常流行扁平风格、隐藏式全局导航等，这些设计元素都源于极简主义对界面设计的影响。极简主义的实质是“简而不减”，虽然其提倡简化，但是是在不减少功能的前提下实行的。如何把握简化的度是极简主义网页设计中的一大学问。如信息过多，在页面中过度使用负空间，会出现浪费页面空间的情况，设计师在设计过程中应注重“简化用户任务”来运用负空间。目前极简主义的网页设计较一般网页设计来说也存在着很大的优势，例如更快速的网页加载速度、更好的设备兼容性等。

一、极简主义网页设计中的负空间

在极简主义设计中负空间的运用是最为重要的，负空间可以引导用户的视觉流向，使其注意被负空间包围的重要元素。换一种说法，即大片留白中间的元素信息会更容易引起用户的注意。

在网页设计中负空间包含所有网页内的空白区域，类似于画面中的留白。而被负空间包围的页面中的内容信息则是正空间。从网页设计的格局方面出发，运用负空间将所有元素区分开，可指导用户视觉流向，设计用户在网页信息的浏览路径。设计师可以利用负空间达成视觉审美与视觉引导之间的完美平衡。

1.大小负空间

（1）大面积负空间

大面积与小面积的负空间的合理运用可以平衡整个页面的视觉感受。大面积负空间主要运用于页面设计中独立的不同元素之间。负空间可以引导用户视觉流向，让用户将视觉停留在被包围元素上。元素被包围的负空间面积越大，则该元素越容易获得用户的第一关注。但是负空间面积过大，容易造成对象之间关系的削弱，容易割裂信息之间的关系，违背格式塔原则。某网站在网页标题“Digital art&Experiments”周围设计了大面积的负空间，使其尤为明显，其次注意到的是上方的导航栏和下方的其他信息元素。

大面积的负空间设计使该网站显得非常简洁，信息元素根据其重要程度安排大小，使得整个页面在信息浏览上简单明了。

（2）小面积负空间

小面积的负空间主要运用于页面设计中较小的元素之间，或是较大元素中的次级元素之间。例如排版时的列表、文字、段落、按钮和图标之间等。

在格式塔规律中，具有相同功能的元素在视觉上更为接近。小面积的负空间能在页面设计中起到空间层级的强化，且保持内容不被过于割裂且清晰易读的功能。例如文章中的排版，段落中的负空间面积要充分考虑文章的整体性审美与可阅读性。按钮间的小面积负空间需在整段文章的负空间基础之上考虑所留面积以及归属关系。可以说小面积的负空间运用是整个页面设计的精髓之处，从细分再到细分，每一个小面积负空间都需要思考与周围信息的关系。

2.被动负空间与主动负空间

（1）被动负空间

一个网站若没有足够的负空间，将会变得无法阅读从而让用户失去方向，大部分精力都在用于对抗混乱的视觉。用空白区域试着让网站易于理解就是被动的负空间的运用。

被动负空间相较于大面积负空间来说，意味着有足够多的空间层次去区分元素之间的不同。例如都在网页顶部的导航和注册信息，彼此间隔了一定的距离用以区分。被动负空间包括了对于小元素的留白，用以实现字符、文字、段落的最大可读性，以及当出现列表或下拉框菜单时，每行文字或每个选项间的独立性。被动空间的主要目的可以说就是不被注意地营造一块被动空间，使其看起来不引人注意，就简简单单，但又能区分出不同为最佳。

（2）主动负空间

主动负空间是运用负空间来实现注意力的吸引，或是将一堆重要信息在同一页面分散开来。除了大面积的负空间可以吸引注意力，巧妙运用小面积的负空间也可以使其实现主动的方式，例如使用主动负空间将重要的引言或者段落等形成一段文字独立出来而吸引用户的注意。

二、运用负空间定义网页视觉层次结构

1.使用分组进行理解

该网页的页脚设计是使用负空间创建组内容的非常好的例子。所有的页脚链接分成并排对齐的垂直列。

页脚中每一组链接之间的垂直行间距是相同的，表明了链接之间的并列关系。其次每个单独组列之间的间距也是相同的，表明了每一组导航列之间的并列关系。在色彩的运用中，用白色文本与下列灰色链接进行对比，迫使用户在仔细阅读每一条链接之前首先查看该链接的标题。

从白色空间垂直与水平的距离来看，水平空间远大于链路之间发现的垂直空间。间距与对比的结合使用户注意到白色的标题，同时用户会理解为所有的链接是相关的。不需要页脚标签或任何其他效果，这使得页面设计更为简约。如格式塔原则所指出的，更接近的元素似乎相关。该网站是一个响应式网站，当用户调整布局的大小时，页脚栏便会垂直下降。当用户查看较小的响应布局时，页脚列之间会创建更多的垂直空间来适应页面。因此，用户可以在该网页中看到一个列表的结束和另一个列表的开始。

2.空白和对比

空白和对比的效果在Geckoboard网站的页脚区域十分明显。该网站将链接分为3列，但第一列白色对比强烈的重要信息并不是标题，而是并列连接中较为主要的产品、收益和定价。

网站页脚中的负空间巧妙地利用了文本。页脚周围的负空间与链接文本水平和垂直间隔的负空间略有区分且恰到好处，给每组链接营造了一个单独的文本块易于区分。所有这些负空间在列、链接和单个字母之间的额外空间创造了一种宽敞的感觉。文字颜色的对比度定义出信息级别更高的文本，额外的负空间很好地向用户传达了链接组之间的关系。

标题、侧边栏以及页内内容都可以使用小面积的负空间和文字的高低对比度颜色来构建上下文关系和信息的不同层级。

3.导航栏中变化的空间

导航中的负空间区域会非常不同。网站会基于所有导航链接的内容密度将多个子链接对接到单个导航内。上文提到的示例只是简单的登陆页，有几个简单的信息链接。但是登录页上的内容越少，网页设计师在导航布局中可进行的创造性控制会越多，他可以将导航链接设计为大型的排版块或将该版块设计为隐藏式的弹窗链接。

图1 Microsoft的首页（来源：Microsoft官网）

以Microsoft网站的首页为例，该网站支持所有公司旗下产品的链接。微软公司旗下的产品范围非常广泛，从平板电脑到游戏机和各类游戏等，网站在设计时必须也要考虑到这一因素。该网站的设计运用负空间，非常微妙地使所有元素达到了一个平衡。网站的导航菜单具有一系列带有下拉菜单的链接，每个下拉列表使用具有第三产品链接的弹出式二级菜单。导航的大部分是使用精致的负空间，这使得二级菜单中的所有链接都像块级元素一样具有大量填充性。用户可以将鼠标悬停在链接区域的任何地方，弹出的链接会变为可点击，让导航网站顺利和容易。

结语

极简风格的网页能在用户从大量繁乱的信息中寻找所需时，为用户提供一个简单直接的界面，从而提高用户使用的效率，为用户节省时间。同时，负空间的运用使网页更具艺术感与层次感。国外的网页设计受极简主义影响较早，因此设计已趋于成熟。国内对于网页设计的认知度和关注度也在不断提高，目前负空间的运用已作为网页设计的大趋势之一，也在逐渐影响着国内的网页设计，一些知名国内网站，例如百度也在不断地学习和借鉴国外有关负空间与网页设计相结合的经验，在网页设计之路上不断前进。