设计原理之空间与图形背景关系

由结构设计夹译者科学研究组核心成员核心成员Color译者，结构设计夹校订正式发布

书名相连：https://www.smashingmagazine.com

该文最终报名者线上架下公益活动：

【design+下的关键所在：HBAT技术创新结构设计首脑会议深圳主会场】

结构设计是对花纹和内部空间的协力精心安排。为的是更有效地在结构设计中博纳县，你具体来说要意识到它，并自学正确重新认识它——学着重新认识博纳县刻画的花纹，和博纳县怎样传递关键信息。这是给新手的一连串结构设计准则的第三部份。第三部份是对文件格式塔基本上原理的如是说；永古约省（主要包括责任编辑）将以那些文件格式塔基本上原理为依据，阐释我们结构设计中加进的基本上准则和它的起源地。

绘图－大背景亲密关系 

文件格式塔基本上原理在博纳县结构设计中利用最少的就是绘图—大背景亲密关系。你结构设计的小东西会有三种相同的观点，被看做某一类或是除此之外一类，它间的亲密关系是常量的。假如没有此种亲密关系的自已，这三分之一也难以充分体现，所以只发生改变两个而不发生改变另两个是不可能的。

绘图—大背景亲密关系与此同时又是优势互补的。绘图和大背景可以彼此间进一步增强或弱化，所以，科学合理二者间的亲密关系是结构设计中较为关键的各方面。它为结构设计的涵义和认知形式预设了两个主调。

“紫色内部空间要被视作两个积极主动的原素，而不是两个消极的大背景。”

 ——Jan Tschichold

绘图大背景亲密关系

思考上面的图片中的三个面板。在左边，我们看到一连串的黑色线条，它间有着等量的紫色内部空间。在一起，黑色的线条和紫色的内部空间形成两个灰色的领域，每两个贡献同样的结果。清除内部空间（在第三个面板中）完全发生改变了该字段，使其成为两个黑色的实体花纹。不仅是内部空间不见了，个别原素已成为两个单一的原素。在第三个面板中，两个黑色线条已被删除。这激活了内部空间，使它似乎是坐在顶部的灰色领域，并增加了更多的深度的结构设计。

稳定的，可逆的和不确定的绘图大背景亲密关系

这里有三种绘图—大背景亲密关系：

稳定（上图左）

什么是绘图，什么是大背景一目了然。两个或另两个通常占主导地位。

可逆（上图中）

绘图和大背景对观众注意力的吸引是一样的。这创造了张力，借此任何一方都可以领先另一方，形成两个富有变化的结构设计。

模糊（上图右）

原素可以与此同时出现在绘图和大背景上。它形成了同样有趣的花纹，而观众也可以在作品中找到自己的切入点。

根据你所建立亲密关系的类型，和平衡这绘图和大背景的形式，你可以直接指导观众去看做品的相同部份，并说明他们在相同的情况下能看到什么。

绘图－大背景亲密关系不是唯一的内部空间起关键作用的文件格式塔基本上原理。除此之外两个基本上原理是：

接近基本上原理

接近基本上原理使用内部空间相连和隔离各原素，通过空白把一些原素包围起来。我们可能会认为理所当然的两个例子是，页面上的文本段落。段落间的内部空间大于段落中的行间的内部空间。

闭合基本上原理

用博纳县作为原素间的间隙。观众用自己的关键信息填补空白，由各部份完成两个整体。间隙太大的话，闭合就难以形成。间隙太小的话，就没有闭合这个概念的必要了。只有博纳县区和填充区达到平衡，才能激活博纳县区，形成闭合。

闭合

空白作为结构设计原素 

想想音乐，假如每两个音符或每一根弦在与此同时弹奏，就不会是音乐，而是噪音。当声响与安静对比，才形成音乐，通过发生改变声响与安静的模式创造节奏和旋律。没有安静，也就没有音乐。

空白则是在视觉上有相同的作用。它为积极主动原素提供了呼吸的内部空间。它使眼睛自由地浏览两个结构设计，并发现它寻找的原素。积极主动原素只有在负内部空间的对比下才能被看到。没有空白，也就没有结构设计，得到的只是视觉噪音。

重视空白，除非噪音是你想要表达的小东西。人们不太可能抱怨空白太多，却会抱怨内部空间太小。

内部空间可以：

建立对比，强调和层级。

创造戏剧性和不安。

在每组原素间提供视觉间隔。

就像绘图-大背景亲密关系所揭示的，只有当内部空间里有内容存在，你才能得到空白部份。加入积极主动原素之前，博纳县是不明确的。绘图大背景亲密关系必须建立在内部空间存在和表达开始之前。

博纳县的两个更关键的功能是提高可读性和易读性。大内部空间使文本更诱人。小内部空间使它更清晰易读。

小内部空间

这是一组中各原素间的内部空间。它是字母、单词和段落间的内部空间。

大内部空间

这是主要原素间的内部空间。它分隔原素或原素组，并提供了视线引导和原素间的博纳县。

内部空间与质量相关。更大的内部空间需要更少的原素或极少的原素。较为高端店和折扣零售商店，哪两个总是有更多的内部空间，哪两个会把商品放进每两个可用的小内部空间？内部空间对你传递了什么？

内部空间也可以表达质量以外的属性，如：

成熟，

简单，

豪华，

清洁，

孤独，

开放。

假如你没有考虑到内部空间，那你就是在浪费它。把内部空间塞得太满是一类浪费，把内部空间束缚在各绘图间，且不让它和其它部份内部空间相联系也是一类浪费。

结构设计归根结底是对花纹的排列组合，这里花纹主要包括由内部空间形成的花纹。不要害怕使用内部空间，把它看做两个你能够驾驭的关键的结构设计原素。

空白在网页中使用的几个案例 

为的是更好的使用内部空间，你具体来说需要有意识地注意到它。学会识别相同结构设计中的内部空间。注意它形成的花纹，并考虑内部空间是什么。为的是这一点，让我们看看一些网站的结构设计，注意到怎样使用内部空间。

OLD GUARD

汤姆约翰逊的结构设计采用了大量的紫色内部空间，给文本和其他原素提供了呼吸内部空间，哪里是绘图哪里是大背景，一目了然。

 Old Guard使用大量的紫色内部空间，给了文本和其他原素的呼吸内部空间

关键信息被内部空间包含和隔离（回想接近基本上原理），区分组与组间的原素。仅通过它间的内部空间，你就可以轻易识别一篇该文的结束和下一篇的开始。

主体内容稍微偏离页面中心，两边有宽阔的内部空间。这个内部空间有时被一些原素打断，激活了内部空间和中断原素。这有助于把注意力吸引到该区域，特别是吸引到内部的原素上。

HEROKU’S STAUS PAGE

下图为是Heroku状态页面的一部份。我碰巧在两个特别好的日子访问该网站，因为增加的积极主动因素，将意味着平台上有更多的事件被报道。在这里，更多的紫色内部空间意味着更好的服务。

Heroku状态页面的一部份

注意紫色内部空间不一定非得是紫色的。尽管页面的过于慷慨，但大家并不会嫌内部空间太多。唯一关键的关键信息——此种情况下，状态更新和事件的报道——中断内部空间。

INTRODUCING THE NOVEL

Introducing the Novel 网页的顶部内部空间是非对称且积极主动的。注意看左边的大内部空间，是怎样将你的视线直接引向内容上的。假如你点击进入网站，并从顶部向下滚动，你会看到，内部空间也被用来把关键信息分离和打组。

Introducing the Novel 网页的顶部内部空间是非对称且积极主动的

那条细线也被用来打组和分离那些块。在浏览网站时，注意那些线条是怎样不总是接触，以便让内部空间绕着它流通，并相连到其他空间。这可以防止内部空间被束缚。

ELLIOT JAY STOCKS

Elliot Jay Stocks的网站大家应该较为熟悉，由于它在这个结构设计之后。 Elliot网页的非对称内部空间再次使内部空间变得活跃。

Elliot Jay Stock网页中内部空间的不对称使内部空间变得活跃

页面顶部的大图可能会是访问下面内容的两个临时阻碍，但是，图片周围宽阔的内部空间提供了足够的地方吸引视线绕过它移动。假如左边栏和主体内容有相同的大背景色，那眼睛可能更容易从图片周围绕过，但颜色的发生改变也并不会使这更难。

正如上面的网站，内部空间是用来封闭和分离各组相同的关键信息内容，让每个组突出，并让眼睛找到它想要的，并让它在各组内容间得到休息。

PHIL COFFMAN

Phil Coffman网站的内容形式两个唯一的花纹，位于空荡荡的大背景内部空间里，没有那么多分散的积极主动原素，彰显了现有内容的关键性。

Phil Coffman网站的内容形式两个唯一的花纹，位于空荡荡的大背景内部空间里

即使在多彩的矩形大背景里，文本周围有足够多的内部空间很容易阅读，而不会被误认为页面中其它组的文本。积极主动的花纹（和内部空间的花纹）根据浏览器的相同宽度而调整，但两个由内部空间包围的大花纹的格局依然不变。

NEW ADVENTURES IN WEB DESIGN

像这里许多网站，2013网站New Adventures in Web Design 一样用宽阔的内部空间包围原素。每个独立的关键信息组包含在内部空间中，在整个结构设计中，内部空间都是积极主动的。

用宽阔的内部空间包围原素

值得注意的是，在左上角的图像和右边主体内容间的灰色的椭圆形箭头。

那些箭头阻隔了内部空间的流动吗？由于箭头彼此间不接触，且打断内部空间的地方是虚线，内部空间刚好可以从虚线的间断处通过。尽管这里的内部空间流动相比其它地方还是明显地受到限制。。

较浅的灰色也是有其道理的。它防止箭头过于明显生硬，难以跨越，用浅灰色就不难想象内部空间在线条上通过。

坦白地说，假如我的浏览器较宽，在我抓取的截图中，箭头不会与主体内容重叠。然而，在宽度小于1280像素时，页面会变成一列，就会有重叠。总的来说还好，虽然我想知道没有箭头的话，内部空间是不是能更畅通。

几个Logo的案例

接下来我给大家留下一些logo，在那些logo里内部空间是结构设计的两个关键组成部份。这里我不再一一分析每个logo 中内部空间的利用形式，而是做一些大致的概括，然后让你自己去探索。

仔细分析下面的logo 是怎样利用绘图-大背景亲密关系的。其中有一些，只有当你能看到绘图也能看到大背景的时，你才能完整地重新认识这个logo ，绘图和大背景对内容的表达都起着非常关键的作用。

有些logo的结构设计利用了闭合基本上原理，你要表达的意思不会那么直观，但它最终会被观众发现。有些logo中，绘图和大背景的亲密关系不是绝对的，整个标志大大背景里的绘图，与此同时也是其自身内部包含的小内部空间的大背景，此种可逆的绘图大背景亲密关系是表达的核心。

充分利用紫色内部空间的各种标志

总结 

我希望通过这篇该文大家能学会两个关键的知识点。第两个是结构设计中内部空间的利用与文件格式塔绘图-大背景基本上原理间的联系。文件格式塔基本上原理是我们结构设计师进行创作的基础。第三点，可能也是更为关键的一点就是，努力去花时间科学研究内部空间在结构设计中是怎样应用的。不要让内部空间成为积极主动原素的副产品。

用心分析博纳县，刻意练习用它去创作更棒的结构设计。不要让它成为剩下的小东西。把它看做必要的结构设计原素，然后把博纳县与积极主动原素间的亲密关系当作你刻画的原素。下次，我们会增加更多文件格式系列塔原理，探索焦点基本上原理，联系基本上原理，协力命运基本上原理怎样引导我们认知诸如视觉重量和构图平衡等观念。

【design+下的关键所在：HBAT技术创新结构设计首脑会议深圳主会场】

——End——

以下是译者者Color微信

欢迎各位同学沟通交流~~

万千结构设计师众邀你分享干货啦~

添加微信sezign01

申请讲师，备注：讲师

原创投稿，备注：投稿

打开阅读书名访问让你丑哭的结构设计夹网站

更多书籍和软件等各位看官免费下载