设计原则:空间与图形背景的关系(二)

如果你看到平面设计中是在一个画布上组织形态的过程,那就只看到它一半的工作,因为在画布上如果负空间能够被积极的利用,也是很重要的。

设计中包含着形态的变化和空间的布置,要使得空间更加高效的利用,首先就是要积极的意识到这一点,并从中观察它如何在形状、空间样式和空间与空间之间如何相互联系。这是一系列初学者需要掌握设计原理的第二部分。第一部分主要讲了对于形状的把控,而第二部分也是基于格式塔原则的,并很大的程度上获得设计基本原则的知识。

图形与背景的关系

最适合用于格式塔原则中的空间原理的就是图形与背景。在一切的设计之初都会视为彼此之间的关系是相互排斥的。既不能解除相互之间的关系,也不能改变彼此一方。

所以图形与背景的关系是互补的,它们可以通过相互之间的作用来增强或减少效果,并是有效的组织彼此之间的关系以达成设计目的的重要方法之一。在设置一个背景时我们应该仔细想想,如何联系设计?并且它们之间的原理又是怎样的?

“白色的空间会认为是一个很活跃的元素,而不是只是一个被动的背景。”— Jan Tschichold


从上面三个块的样式思考,在最左侧的块,我们看到一系列的黑线,它们之间有等量的空间,总之,黑线和白线的等量间隔会形成一种灰色的区域,也就是黑白间错形成的一种效果。在中间面板中去除白色就变成一块黑色的面板了,此时不仅看不到空间的样式,其他的各个元素都变成一个单一的元素。

在最右边的面板中,区域中有两条黑线已经被删除,这将会激活一个空间,使得这个区域是位于灰色区域的顶部,背景就成为图形,就可以进行更加深入的设计。


左边:稳定  中间:可逆的  右边:歧义


图形与背景之间有三种关系

(1)稳定:很清楚元素与背景,以及一个形状和另一个形状中谁是要突出的主要元素。

(2)可逆:这里的两个图形和背景能够深深的吸引用户,从而造成一种紧张感,因此无论其他的什么元素,可以使用类似的方法,营造一种动态设计效果。

(3)歧义:元素可以和背景同时置换使用,彼此之间可以形成有趣的形状,并让观众以自己的切入点组成。

根据上面的关系,如何设置和平衡图形与背景两者之间的关系,可以使得观众看到不同部位的设计,并结合上下文之间的彼此关系来解释理解它们。

图形和背景之间的关系不是它们在格式塔原则的最突出作用,另外这里还有两个:

(1)接近:接近通过一个封闭空间的元素来连接其他元素之间的关系。我们可以简单的理解:段落之间的间距要大于段内行与行之间的间距。

(2)封闭:这会使得空间中的元素存在差异。观众根据自己的以往经验会填补空白的信息来完成一个整体。如果有大部分是背景,那么封闭就没有必要了。空间太少了就不需要设置封闭了,只有保持空白和内容区域的平衡才会正确处理两者之间的关系。



将空间作为设计元素

现在想想音乐,如果说每一个音符或者是和弦被同时演奏,那么就不会产生音乐,此时会听到噪音。

当声音有一种此起彼伏的对比时才会出现音乐。而不同的音符的开始和停顿就会创建出节奏和旋律,如果没有停顿就没有音乐。

同理,空间也可以执行类似的功能,它对空间的有透气性提供了积极的作用。通过设计它会使得视线能够自由的来回移动,寻找元素。作为正负反差,如果没有空间就没有设计,就会产生视觉噪点,除非你的设计倾向于空间的设计。一般情况下访问者不会抱怨空白区域太多,而是太少。

对于留白区域,可以做到下面几点:

(1)建立对立的一面,突出重点和建立层次关系

(2)产生情感张力

(3)元素与元素之间有透气性

正如图形和背景的关系一样,意味着空间里面只需要存在一些基本的元素,加入太多的元素空间就显得不太明晰了,因此图形和背景之间应该建立某种关系,来保持彼此之间的联络。

其中对于空白区域最重要的功能应该是提高可读性和易读性。对于大片的留白,会使得文字部分更具有吸引力,而相对于比较局促的空间应该使得元素更加清晰。

微空间:就是在一组元素内的空间,这是字母、单词和段落之间的空间。

大空间:这是主要元素之间的空间。它们会是单独的元件或元素,并提供路径,眼睛能够在这些元素之间有足够的透气性。

空白区域可以传达品质,通常在大空间区只出现极少的元素。我们可以对比一下高端的和折扣的商品包装。哪一个会使用更大的空间呢?哪一个包装的空白区域会更加多一些,这些都是传达一些信息的。

空间可以传达信息比如质量等,例如:

(1)精致

(2)简单

(3)豪华

(4)干净

(5)个性

(6)开放度

当我们没有足够的空间使用时,可以使用填满的设计方式。另外还可以通过捕捉设计元素之间的相关联系来避免空间的浪费。

设计的最终形状结构中也包括所用的留白形状,因此不要恐惧使用留白。而是把留白看成自己完成设计的一个元素。

留白在网页设计中的几个案例

为了更好的使用留白,首先要有很强的这种自我意识到这一点,并熟悉识别不同的运用留白的设计。请仔细留意使用的形状,以及思考它们与画布元素之形成的相互联系。为此让我们看看一些网站中的设计,是如何使用这种留白的!

“保守派”

汤姆·约翰逊的设计保守派就使用了大量空白,使文本和其他元素存在呼吸空间,观众不会弄错什么是背景,什么是突出元素。



信息与信息之间,元素与元素之间进行相对应的隔开设计(可以回忆上一篇文章提到的就近原则),进行区分元素组。我们可以很清楚的知道什么时候开始什么时候结束,这就取决于它们之间的空间。

其最重要的内容是在页面的中心,两侧有较大的空白,而中间的元素时而间断,并且又存在激活两者之间联系的线段元素。这样就有助于提醒用户这个区域是特别要注意的区域。

Heroku的状态页面

下面图片显示了部分Heroku的状态页面。这个网站上有很多事件被报道。在这里,有更多的留白就意味着更好的服务。



值得注意的是页面的背景不一定要是白色的,虽然网页的默认是白色的背景空间,而且它也很实用,不过这里有一些很重要的信息需要提示,例如状态更新和最新报告,中间间断的空白区域。

Introducing the Novel

在顶部的空间中文字“Introducing the Novel ”处于不对称状态,并起到积极的作用。请注意页面的左边的大块空白区域直接导致眼睛看到内容。如果点击页面,从上向下滚动,就会发现页面的空白之间是彼此分离和组合。



浅色的线条用于区分这些分离和分组的块,当浏览这个网站时,会发现这些线条不仅起到区分块的作用,还保持块之间的透气性和流动性,以避免集中于一点。

Elliot Jay Stocks

这个网站对于其背后的设计相信很多人都熟悉,因为它使用一种不对称的空间设计出一种很有动感的效果。



在这个页面顶部大图片可以作为一个临时的模块,用于访问下面的内容。另外大图的周围又留下足够的空白,保持让人很舒服的透气性,如果在左侧的侧栏内容使用相同的背景,就很容易导致眼睛在两者之间移动,而且颜色变化也会的更加困难。

另外和上面的网站类似,空间上既可以用于组装和区分不同的信息,以及群体,还可以使得每个组从中脱引而出,从而在寻找信息的过程中有足够的留白可以让视觉放松休息。

菲尔·科夫曼

这个网站带给人的感觉就是单一的形式使用了大量的空白。尽管缺乏一些积极的效果来突出那些本来元素的重要性。



使用了彩色的矩形背景,文本间距留有足够的空间,使得周围变得很容易阅读,而不是被误认为在页面上其他文本。

重点元素需要适配不同浏览器窗口的宽度的,但单个形状包围仍然存在。

在网页设计中的新冒险

在2013年网站的New Adventures in Web Design会议上会看到很多类似这样的网站。空间中不同的信息块包含不同的信息,整体页面上显得那么的活泼。



有一些值得注意的地方,图像的左上方有一个带向右的灰色圆形箭头。这些箭头并没有遮挡了空间流动性,因为它并没有触碰到,每个虚线的地方有间断,强调这个区域可以流动的,另外也限制了其他区域的流动。借助较浅的灰色,防止箭头成为主导,以提高流动性。

总之,当我们的浏览很多页面时会截图,箭头不会和主要内容重叠。然而,大约1280px的宽度为主要的内容区域。总之而言,它的工作原理在于我们能否更好的流动性,而不是箭头。

一些logo

我将会使用一些logo来作为空间留白的经典案例。同时指出各使用的负空间,以及会做一些指导的意见,并能自己思考空白的应用。

其中一些标识依靠封闭原则。你会看到它们不会真正的存在,但是仍然能看到它们,这些logo就是使用了图形和背景的关系。当看到背景时,图形会是什么样的,整个logo也会发生一些变化。这种大量运用负空间的logo的核心就是让观众想到什么。



各种logo,有云和床的结合,黑猫、转换、海豚、牙科、森林等。

总结

我希望你们可以从这篇文章中收获到最重要的两点:首先是在格式塔原则中使用图形与背景进行设计并彼此之间建立连接关系,而格式塔原则也作为设计师的基本指导。

其次,也许更重要的是需要努力观察和花时间研究空间在设计中的应用。不要让空间成为优秀设计的辅助地位,应该好好利用这种空间来更高效的完成设计因为任何页面的布局都是空白区域的相互组织。能有意识的分析空白,有意为设计创建一个更好的环境。不要使得它成为附属品,而是作为一个重要的元素,然后思考并塑造的元素和空白之间产生积极作用的关系。

在接下来的时间里,我们将会增加更多一系列有关的格式塔原则,更重要的是带领我们如何应用到设计中,例如视觉重量和平衡关系。

作者:Steven Bradley

https://www.smashingmagazine.com/2014/05/design-principles-space-figure-ground-relationship/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,361评论 25 707
  • 2016年11月南航在乌鲁木齐乘务(安全)员招聘活动正在进行中,共有1600余人报名,其中1200多名符合...
    航空技能班阅读 798评论 0 2
  • 数年倾交,仍记得曾经小路徜徉? 时见微苦,常怨无语,难诉衷肠; 月华秋风,每念故交今样; 各奔理想,无怪物非,怎敌...
    寒扬阅读 460评论 0 38
  • 说明:1.平时做zip打包主要用到了java.util.zip下的ZipOutputStream、ZipEntry...
    有点站不稳阅读 5,338评论 1 4