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

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

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

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

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

图底关系原则

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

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

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

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

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

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

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

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

景”

图中（从左到右）：

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

定的。

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

黑色的区域。

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

色区域之上。

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

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

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

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

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

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

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

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

有三种类型的图底关系：

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

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

分。

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

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

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

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

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

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

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

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

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

有两个分别是：

接近原则（proximity)

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

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

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

闭合原则（closure)

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

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

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

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

且产生闭合原则。

闭合原则

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

考虑一下音乐。如果音乐中的每个音符和和弦同时出现，音乐就

不会产生。你有的只是噪音。音乐是在声音和安静对比中产生的。不

同的声音和静音创造出了节奏韵律和歌曲。没有安静就没有音乐。

空间在视觉上执行者同样的功能。它给元素提供呼吸的空间。通

过设计它让眼睛自由移动，并且来发现它要找的元素。正形和负形形

成对比。没有空间，就没有设计。你的视觉就会混乱。（也就是我们

通常说的留白。）

除非噪音是你想在空间中试着用来交流的。与空间太小相比，人

们不可能抱怨空间太多。

空间中可以做到以下几点：

建立对比，重点和层次；

形成戏剧性和视觉张力；

在元素与元素之间提供视觉休息的空间。

只有一些东西出现在你的空间中时，图底关系才会蕴含其中。在

加入正形和空间是没有定义的。图底关系是必须建立在之前的空间的

中间，是存在的并且在开始就是可交流的。一个更重要的空间功能是

提高可读性和易读性。宏观的空间使文字更引人注目，微观的空间使

文字更清晰易读。

微空间

这是指在一组中元素的空间。是字母之间，单词之间和段落之间

的空间。

宏观的空间

这是主要元素之间的空间。它区分