梅州网页设计：设计原则之空间与图形与地面关系

2019.08.12 mf_web

194

设计是形状和空间的安排。为了更有效地利用太空，你必须首先意识到它并学会看到它 - 学会看到空间形态的形状和空间如何交流。这是初学者设计原则系列的第二部分。这篇文章将以格式塔原则为基础，并展示我们与设计师合作的基本原则有多少源于此。梅州网页设计

图 - 地关系

最适用于太空的格式塔原则是图形地面的原则。你的设计中的所有东西都将被视为一个或另一个，它们之间的关系是相互排斥的。除了相对于另一个之外，都不能被察觉，并且在不改变另一个的情况下改变一个是不可能的。

图形 - 地面关系也是互补的。图形和地面可以相互增强或减少，并且将两者相互组织是设计的一个更重要的方面。它为您的设计如何沟通以及如何解释提供了背景。

“白色空间应被视为一个活跃的元素，而不是被动的背景。”

- Jan Tschichold

形象关系 — 图 - 地关系（图片来源：“ 平面设计元素 ”，Alex White）

在第三个面板中，已删除了两条黑线。这激活了空间，使其看起来像坐在灰色的田野上。地面已成为人物，并为设计增添了更多深度。

稳定，可逆和模糊的人际关系。

图形 - 地面关系有三种类型：

稳定（左上方）
很清楚什么是数字，什么是地面。一个或另一个通常支配组成。
可逆（中心以上）
图形和地面均可吸引观众的注意力。这会产生张力，从而可以超越另一个，从而实现动态设计。
模糊（右上）
元素可以同时显示为图形和地面。它们形成了同样有趣的形状，观众可以在构图中找到自己的切入点。

根据您设置的关系以及如何平衡人物和地面，您可以引导观众查看设计的不同部分并解释他们在不同背景下看到的内容。

图形地面不是唯一一个空间起着重要作用的格式塔原则。另外两个是这些：

Proximity
Proximity通过将一些元素封闭在空间中来使用空间来连接和分离元素。我们可能认为理所当然的一个例子是页面上的文本段落。段落之间的空格大于段落中文本行之间的空格。
闭包
这使用空间作为元素之间的间隙。观众用他们自己的信息填补空白，从零件中完成整体。空间太大而且没有关闭。空间太小，无需关闭。只有空间和填充空间之间的正确平衡才能激活空间并导致关闭。

关闭。 — 关闭

空间作为设计元素

考虑一下音乐。如果每个音符或和弦同时播放，您将无法播放音乐。你有噪音。当声音与沉默形成对比时，音乐就会发生。改变声音和沉默的模式创造节奏和旋律。没有沉默，就没有音乐。

空间在视觉上执行相同的功能。它为积极因素提供了呼吸空间。它让眼睛自由地穿过设计并发现它正在寻找的元素。只有与消极相反才能看出正面。没有空间，你没有设计。你有视觉噪音。

除非噪音是你想要传达的东西，否则倾向于空间。人们不太可能抱怨太多空间而不是太少。

空间可以做到以下几点：

建立对比，重点和等级;
产生戏剧和紧张;
提供元素组之间的视觉休息。

如图形 - 地面关系所暗示的那样，只有在其中存在某些东西时才有空间。在添加正元素之前，空间是不确定的。在空间存在并开始沟通之前，必须建立人地关系。

空间的一个更重要的功能是提高可读性和易读性。宏空间使文本更具吸引力。微空间使其更清晰。

微空间
这是组中元素内的空间。它是字母，单词和段落之间的空间。
宏空间
这是主要元素之间的空间。它将元素或元素组分开，并提供眼睛跟随的途径和元素之间的休息位置。

空间与质量相关。更多的空间需要更少的元素或更少的元素。比较高端和折扣零售店。哪一个通常内部有更多空间，哪一个将产品打包到每个可用空间？这个空间与你沟通的是什么？

空间还可以传达质量以外的属性，例如：

成熟，
简单，
豪华，
清洁度，
孤独，
开放性。

当你没有考虑它时，你会浪费空间。你可以通过过度填充来浪费空间。您可以通过将其捕获到设计的元素内而不允许它连接到设计中的其他空间来浪费空间。

设计最终是形状的排列，包括由空间形成的形状。不要害怕使用空间。将其视为您可控制的重要设计元素。

网站空间的几个例子

为了更好地利用空间，首先需要有意识地意识到它。学会识别不同设计中的空间。注意它形成的形状，并思考空间的沟通方式。为此，让我们看看一些网站的设计，注意空间的使用方式。

老卫兵

汤姆约翰逊的旧卫队的设计使用了大量的空白空间，为文字和其他元素提供了呼吸空间。没有错误的是什么形象和什么是基础。

Old Guard使用大量的空白空间，为文本和其他元素提供呼吸空间。 — Old Guard使用大量的空白空间，为文本和其他元素提供呼吸空间。（大版）

信息被空间包含和分隔（回想起接近原则），区分元素组。您可以通过它们之间的空间轻松分辨一个帖子的结束位置和下一个帖子的开始位置。

主要内容略微偏离页面中心，两侧都有宽敞的空间。这个空间偶尔会被元素打断，激活空间和中断元素。这有助于引起对该区域的关注，尤其是其中的元素。

HEROKU的STAUS PAGE

下图显示了Heroku状态页面的一部分，主要是空间。我碰巧在一个特别好的日子抓住了网站，因为额外的积极因素意味着平台上报告的事件更多。在这里，更多的空白区域意味着更好的服务。

Heroku状态页面的一部分 — Heroku状态页面的一部分。（大版）

注意白色空间不需要是白色的。虽然页面空间过于宽松，但你不太可能抱怨它太多了。只有重要信息 - 在这种情况下，状态更新和事件报告 - 才会中断空间。

介绍小说

引入小说的顶部空间是不对称和活跃的。请注意左侧的大块空间如何直接引导您的内容。如果您点击进入网站并从顶部向下滚动，您将看到该空间也用于分隔和分组信息块。

引入小说的顶部空间是不对称和活跃的。 — 引入小说的顶部空间是不对称和活跃的。（大版）

细光线也用于分组和分离这些块。查看网站时，请注意线条并不总是触摸，允许空间围绕它们流动并连接到其他空间。这可以防止空间被困住。

艾略特杰伊股票

Elliot Jay Stocks的网站应该为大家所熟悉，因为他是这个网站设计的幕后推手。艾略特网站上的不对称空间再次引领了活跃的空间。

艾略特网站上的不对称空间再次引领了活跃的空间。 — Elliot Jay Stock网站上的不对称空间带来了活跃的空间。（大版）

此页面顶部的大图片可能会成为访问以下内容的临时块; 然而，图像旁边的大量空间为眼睛提供了充足而有吸引力的空间。如果左侧的侧边栏具有与主要内容相同的背景颜色，那么眼睛可能更容易在图像周围移动，但颜色的变化几乎不会使其变得困难。

与上面的网站一样，空间用于封闭和分离不同信息组，允许每个群体脱颖而出并允许眼睛找到它想要的东西并在其间休息。

菲尔科夫曼

Phil Coffman网站上的内容形成一个单独的形状，位于大多数空白区域。缺少许多积极因素会增加存在的那些因素的重要性。

08-菲尔 - 科夫曼 — Phil Coffman网站上的内容形成一个单独的形状，位于大多数空白区域。

即使在彩色矩形背景中，文本周围也有足够的空间，以便于阅读，不会被误认为页面上的其他类别的文本。

正形状（和空间的形状）响应于不同的浏览器宽度而调整，但是由空间围绕的单个大形状的图案保留。

有趣的是要注意的是左上角的图像和右边的主要内容之间的灰色圆形箭头。

这些箭头阻挡了空间的流动吗？因为它们不会触碰，并且因为每个都在中断空间的地方破碎，所以空间可以流过，尽管它在流动中显然更受限制。

浅灰色有助于。它可以防止箭头占主导地位，并且不难想象空间在线上流动。

公平地说，当我抓住截图时我的浏览器更宽，箭头不会与主要内容重叠。然而，大约1280像素到设计成为单列的位置，他们做到了。总的来说，它有效，但我想知道如果没有箭头，空间是否会更好地流动。

一些标志的例子

我将给你留下一些标志，其中空间被整合作为设计的一个组成部分。我不会指出每个空间的使用，而是会做一些一般性的评论然后让你自己探索一下这些空间。

请注意下面的徽标如何使用图形 - 地面关系。有些人，直到你看到人物和地面，你看不到完整的标志。两者都是沟通内容的必要贡献者。

其中一些徽标依赖于封闭原则。你应该看到的并不是真的存在，但你仍然看到它。这些徽标中的一些也可以用数字和地面来玩。当你将整个徽标放在它的背景上时，什么样的形象变成了一个较小的数字。这种可逆的图形 - 地面关系对于所传达的内容至关重要。

各种徽标，充分利用白色空间。

摘要

我希望你从这篇文章中删除两件主要内容。首先是设计中使用空间与图形地面的完形原理之间的联系。格式塔原则是我们作为设计师所做的大部分工作。

其次，也许更重要的是，努力花时间观察空间在设计中的使用方式。不要让空间成为积极因素的副产品。学习如何设计空间，如果不是多于正面元素。任何页面的布局最终都是空间组织。

有意识地分析那个空间，并刻意用它来创造一个更好的设计。不要让它成为剩下的东西。将其视为必不可少的设计元素，然后将空间和正元素之间的关系视为您塑造的设计元素。

梅州网页设计

相关推荐

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监