UI设计：形状和空间两者之间的关系.pdfVIP

UI设计：形状和空间两者之间的关系--第1页

UI设计：形状和空间两者之间的关系

设计就是处理形状和空间两者之间关系。为了更有效的利用空间，

首先你必须意识到它，并且学会看它。就是学会如何看空间中的图形，

空间的形式和空间与空间之间是如何交流的。

图底关系原则

格式塔原则在空间中用得最多的就是图底关系。你设计中的所有

元素都会被看作是一个图形或者是另一个背景，并且它们之间的关系

实现互排斥的。两者都不会被感知的，除了涉及到另一个，并且只改

变其中一个不改变另一个也是不可能的。图底关系也是互补的。图形

和背景的关系可能对比强烈或是对比减弱，并且在组织这两个彼此之

间的关系是设计重要的方面之一。因此设立了这么一个情景，——如

何沟通你的设计和如何解读你的设计。

“白色空间被认为是一个活跃的元素，而不是一个被动呆板的背

景”

图中（从左到右）：

图1：等距的黑色线创建了一个灰色区域。图和背景的关系是稳

UI设计：形状和空间两者之间的关系--第1页

UI设计：形状和空间两者之间的关系--第2页

定的。

图2:去掉空间后，图形占主导地位，并且我们看到了一个实心的

黑色的区域。

图3:两行黑色的线被去掉后，空间变得活跃了，并且似乎位于灰

色区域之上。

左边的，我们看到一组黑色的线，在黑色线中间是等距的白色空

间。黑色线条和白色空间一起形成了一个灰色区域，每一个都对结果

有影响。删除白色空间，正如第二个图一样，完全改变了区域样子，

它变成了一块纯黑色的图形。不仅空间消失了，而且可视的独特的多

元素变成了一个单一的元素。第三个图形，去掉了两行黑色线。这一

行为激活了这个空间，使它看上去好像在灰色区域的上面。背景变成

了图形并且添加了更深入的设计，丰富了设计效果。

稳定的，可逆转的，和模棱两可的图底关系

有三种类型的图底关系：

1、稳定形（上面左图示例）

什么是图和什么是底的关系很清晰。它们其中一个会作为主导成

分。

2、可逆性（上图中间的图片）

这两个图和底关系是一样的，同样吸引观众的注意力。这就创造

了张力，它们中的任何一个都可以压倒对方，从而产生动力设计。

3、模棱两可暧昧的关系（上图中最右边的）

元素可以同时是图和底。它们形成同样有趣的图形，和观众在这

UI设计：形状和空间两者之间的关系--第2页

UI设计：形状和空间两者之间的关系--第3页

个构成作品中会找到他们自己的切入点。

这取决于你设置的关系和你怎样去平衡图和底二者的关系，你导

向观众来看设计的不同部分，并且解释在不同环境下他们看到了什么。

图和底并不是唯一一个格式塔原则在空间中扮演的重要角色，还

有两个分别是：

接近原则（proximity)

接近原则是使用空间来连接元素和通过空间中闭合一些元素来分

离元素。我们可能会想到的例子是页面上的文本段落。段落与段落之

间的空间大于一个段落中文本的行间距。

闭合原则（closure)

闭合原则是利用元素之间的间隙空间。观众用自己的信息来填补

空白从而完成一个整体的部分。

大量的留空间和留空间太少都是闭合原则的忌讳。只有已有的空

间和需要被填充的空间之间保持正确的平衡关系，才会使空间灵活并

且产生闭合原则。

闭合原则

作为一个设计的元素——空间

考虑