设计原则:空间与图形-背景关系

如果你看到的图形设计作为安排形状的画布上的一个过程,那么你只能看到你有工作的一半 。 该负空间的画布是一样,我们把画布上的积极因素同样重要。

设计是两个形状和空间的布置。 与空间更有效地工作,您必须首先意识到这一点,并从中看到它 – 学习地看到,空间形态和空间是如何通信的形状。 这是一个系列的设计原则,对初学者第二部分。 第一部分包括介绍完形 ; 本系列(包括这篇文章)的其余部分将建立在这些格式塔原则,并显示我们与作为设计师有他们的起源有怎样的基本原则很多工作

图 – 地关系

这适用于大多数空间的格式塔原则是数字地面。 在你的设计都将被看作是一种或另一种,以及它们之间的关系是相互排斥的。 既可以感知但对于其他的,并且改变其中一个是不可能不改变其他为好。

该图地面的关系也是相辅相成的。 图和地面可以加强或相互削弱,并在相对于彼此组织2是设计中较为重要的一个方面。 它设置一个背景下如何设计沟通以及如何进行解释。

“白空间将被视为一个有源元件,而不是被动的背景。”

考虑到三板上面的图片中。 在左侧,我们看到了一系列的黑线,它们之间的空白等量。 总之,黑线和白空间形成一个灰色区域,同样的结果,每个贡献。 去除空间(在第二面板)完全改变了场,渲染它作为一个纯黑色的形状。 不仅是空间消失,但​​是个别元素已经成为一个单一的元件。

在第三个面板,两个黑线已被删除。 这将激活空间,使得它似乎是坐在灰色区域的顶部。 地面已经成为数字,并增加了更深入的设计。

有三种类型的图底关系:

  • 稳定 (左上图)
    很显然,什么是数字的,什么是地。 一方或另一方通常占主导地位的组成。
  • 可逆 (以上中心)
    这两个数字和地吸引观众的注意力一样。 这就造成紧张,从而要么可以超越其他,从而导致动态设计。
  • 暧昧 (右上图)
    元素可以显示为两个数字和地面同步。 他们形成同样有趣的形状和观众留下来找到自己的切入点组成。

根据这关系你设置了,你怎么平衡这两个数字和地面上, 你直接观众要看设计的不同部分 ,并解释他们在不同环境下看到的。

图地面不是唯一的格式塔原理在空间中起着突出的作用。 另外两个是这些:

  • 接近
    接近使用空间连接和封闭空间中的一些元素单独的元素。 我们可能想当然的一个例子是在页面上的文字段落。 段落之间的空间大于文本的段落中的行之间的空间。
  • 关闭
    这使得利用空间作为元素之间的差距。 观众填补空白,用自己的信息从部分完成一个整体。 太多的空间,并没有关闭发生。 空间太少,没有封闭是必要的。 只有空间和填充的空间之间的正确平衡将激活空间,并导致关闭。

空间作为设计元素

想想乐了一会儿。 如果每一个音符或和弦被演奏了在同一时间,你不会有音乐。 你不得不噪音。 当声音对比对音乐的沉默发生。 不同的有声和无声的模式创建的节奏和旋律。 如果没有沉默,没有音乐。

空间在视觉上执行相同的功能。 它提供了积极因素呼吸的空间 。 它给人的眼睛自由移动,通过设计,并发现它在寻找的元素。 正被认为是只有在与阴性对照。 如果没有空间,你没有设计。 你有视觉噪音。

除非噪音你想要传达的内容,倾向于空间。 人们不太可能抱怨太多空间比约太少了。

空间可以执行以下操作

  • 建立相比之下,重点和层次;
  • 产生戏剧和紧张;
  • 元素组之间提供可视化的休息。

随着数字地面关系意味着,你有足够的空间,只有当东西存在里面。 在加入正元件,空间是不确定的。 图中地面的关系,必须建立之前的空间可以存在和它的沟通开始。

其中的空间,更重要的功能是为了提高可读性和易读性 。 宏观空间,使文字更吸引人。 微空间使它更加清晰。

  • 微空间
    这是在一组元素内的空间。 这是字母,单词和段落之间的空间。
  • 宏观空间
    这是主要的元素之间的空间。 它分隔元素或一组元素,并提供和途径,让眼睛跟随的地方元素之间休息。

空间关联到质量。 更多的空间嗣继承较少的元素或元素的一个罕见的。 比较高端和折扣零售商店。 其中一个典型的有更多的空间里面,哪一个包产品进入的可用空间每一点? 什么是空间连通到你?

空间也可以传达的属性比质量,如其他:

  • 精致,
  • 简单起见,
  • 豪华,
  • 清洁度,
  • 孤独,
  • 开放性。

当你失败时要考虑它,你浪费空间。 您可以通过它溢出浪费空间。 您可以通过捕获它设计的内部元素,而不是允许它连接到其他空间在设计中浪费空间。

设计的最终形状的安排,这包括所形成的空间形状。 不要害怕使用空间 。 查看它作为你的操控下一个重要的设计元素。

几例空间在网站

为了更好地利用空间,你首先需要成为自觉地意识到这一点。 学会识别空间中不同的设计。 请注意它形成的形状,并想想的空间通信。 为此,让我们来看看一些网站的设计,取空间的使用通知。

宿卫

汤姆·约翰逊的设计宿卫采用大量的白色空间,让文本和其他元素呼吸的空间。 有没有弄错什么是数字的,什么是地。

信息包含由空格分隔(记得就近原则),区分一组元素。 你可以很容易地分辨其中一个职位的结束和下一个开始,完全由它们之间的空间。

其主要内容是微客页面上中心,两侧宽大的空间。 这个空间是由元素偶尔间断的,激活两个空间和断路元件。 这有助于提请注意该地区,特别是在要素。

Heroku的居留制页

下图显示了部分对Heroku的状态页面作为多空间。 我正巧赶上在网站上特别好的一天,因为额外的积极因素将意味着平台的更多报告的事件。 在这里,更多的空白,标志着更好的服务。

请注意白色的空间并不需要是白色的。 而页面过于慷慨的空间,你不可能抱怨有太多太多。 唯一重要的信息 – 在这种情况下,状态更新和事件的报告 – 中断的空间。

引入新

在顶部的空间介绍小说是不对称的和积极的。 请注意空间左边的大块直接导致你的眼睛到的内容。 如果您通过点击该网站,并从顶部向下滚动,你会看到,空间也用于分离和信息组块。

薄轻线也用于分组和分隔这些块。 当浏览网站,请注意线条不要总是碰,使空间流动身边并连接到其他空间。 这可以防止空间被困住。

埃利奥特周杰伦股票

网站埃利奥特周杰伦股票应该是大家都熟悉的你,因为他是这个设计背后。 在艾略特的网站不对称的空间再次导致活动空间。

在本页面顶部的大图像可能站在一个临时块访问下面的内容; 然而,空间图片旁边大方量提供了充足而温馨空间,让眼睛四处移动它。 如果左边的侧边栏有相同的背景色为主要内容,那么它可能会更容易对眼睛移动影像,但颜色的变化几乎就很难。

与上面的网站,空间是用来附上双方和不同的信息,不同的组,让每个组中脱颖而出,并让眼睛找到它想要的东西和休息之间。

菲尔·科夫曼

在内容菲尔·科夫曼的网站形成了一个单一的形状,它位于大部分是空的空间。 没有很多积极的因素会增加那些存在的重要性

即使在彩色矩形背景,文字周围有可以很容易地读出足够的空间,不会被误认为是其他类别的页面上的文字。

正面形状(及该空间的形状),响应地调节以适应不同的浏览器的宽度,但一个单独的大的形状的空间所包围的图案仍然存在。

在网页设计新的冒险

像许多在这里的网站,2013年网站的新的冒险在网页设计发布会上叶周围的元素大方的房间。 的信息不同的组所包含的空间,空间是活跃在整个设计。

一些值得注意的是在左上和右主内容的图像之间的灰色圆形箭头。

难道这些箭头挡住的空间流? 因为他们不碰及,因为每个被虚线的地方中断了空间,这个空间可以流过,虽然它显然更受限制的流量。

较浅的灰色的颜色有所帮助。 它可以防止箭从支配,它是不难想象的空间流过线。

凭心而论,如果我的浏览器是更广泛的,当我抓住的截图中,箭头不会重叠的主要内容。 然而,大约1280像素下到那里的设计成为一列,他们做的。 总体而言,它的工作原理,但我不知道空间是否会更好地流动不存在的箭头。

几例徽标

我将离开你的一些标志在空间结合作为设计的一个组成部分。 而是指出了使用中的每个空间,我会做一些一般性意见,然后让你探索的空间给自己。

请注意下面的标志如何利用数字地面的关系。 随着一些,直到你看到这两个数字和地面,看不到完整的标识。 两者都是必要的贡献者什么被传达。

几个这些标志都依赖于封闭的原则 。 什么你的意思,看看是不是真的存在,但你仍然看到它。 这些标志的少数也玩弄数字和地面。 什么是数字,当你把整个徽标针对其背景变为地面在一个较小的数字。 这种可逆数字地关系的核心是什么被传达

  • 云床
  • 黑猫休息室
  • 海豚与海豹标志设计
  • 植牙指南
  • Wineforest

总结

我希望你从这篇文章拿走两个主要的东西。 首先是在设计中使用的空间和数字地面的格式塔原则之间的连接。 格式塔原则underly不少是我们做的设计。

其次,也许更重要的是, 尽量花时间观察空间的使用设计 。 不要让空间成为你的积极因素的副产品。 学习设计的空间尽可能,如果不是,积极因素更多。 任何页面的布局最终是空间的组织。

有意识地分析了空间,并故意用它来创建一个更好的设计。 不要让它成为什么遗留下来的。 认为这是一个非常重要的设计元素,然后查看空间和积极因素之间的关系,你塑造一个设计元素。

Comments are closed.