首页

注意页面中看不到的那些东西:留白空间和图底关系

蓝蓝设计的小编

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

如果你见过平面设计在画布上绘制图形的过程,那么你紧紧是见到你工作的一部分内容。画布上的负空间和我们在画布上绘制元素的正形空间同样重要。

设计就是处理形状和空间两者之间关系。为了更有效的利用空间,首先你必须意识到它,并且学会看它。就是学会如何看空间中的图形,空间的形式和空间与空间之间是如何交流的。这是初学者要学习和了解的系列设计原则的第二部分。第一部分就是之前介绍的格式塔,而剩下的文章(包括这篇)都是在格式塔原则的基础上构建的,并且表明我们设计工作中用到的所有基础原则都是有来源的。


图底关系原则

格式塔原则在空间中用得最多的就是图底关系。你设计中的所有元素都会被看作是一个图形或者是另一个背景,并且它们之间的关系实现互排斥的。两者都不会被感知的,除了涉及到另一个,并且只改变其中一个不改变另一个也是不可能的。图底关系也是互补的。图形和背景的关系可能对比强烈或是对比减弱,并且在组织这两个彼此之间的关系是设计重要的方面之一。因此设立了这么一个情景,——如何沟通你的设计和如何解读你的设计。


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

图中(从左到右):

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

图2 : 去掉空间后,图形占主导地位,并且我们看到了一个实心的黑色的区域。

图3 : 两行黑色的线被去掉后,空间变得活跃了,并且似乎位于灰色区域之上。

小编语:图片来源Alex White写的《The Elements of Graphic Design》这本书中,亚马逊有卖,大家可以购买


考虑上面图片中的三段话。左边的,我们看到一组黑色的线,在黑色线中间是等距的白色空间。黑色线条和白色空间一起形成了一个灰色区域,每一个都对结果有影响。删除白色空间,正如第二个图一样,完全改变了区域样子,它变成了一块纯黑色的图形。不仅空间消失了,而且可视的独特的多元素变成了一个单一的元素。第三个图形,去掉了两行黑色线。这一行为激活了这个空间,使它看上去好像在灰色区域的上面。背景变成了图形并且添加了更深入的设计,丰富了设计效果。

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


有三种类型的图底关系:

1稳定形(上面左图示例)

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


2可逆性(上图中间的图片)

这两个图和底关系是一样的,同样吸引观众的注意力。这就创造了张力,它们中的任何一个都可以压倒对方,从而产生动力设计。


3模棱两可暧昧的关系(上图中最右边的)

元素可以同时是图和底。它们形成同样有趣的图形,和观众在这个构成作品中会找到他们自己的切入点。

这取决于你设置的关系和你怎样去平衡图和底二者的关系,你导向观众来看设计的不同部分,并且解释在不同环境下他们看到了什么。



图和底并不是唯一一个格式塔原则在空间中扮演的重要角色,还有两个分别是:

接近原则(proximity)

接近原则是使用空间来连接元素和通过空间中闭合一些元素来分离元素。我们可能会想到的例子是页面上的文本段落。 段落与段落之间的空间大于一个段落中文本的行间距。

闭合原则(closure)

闭合原则是利用元素之间的间隙空间。观众用自己的信息来填补空白从而完成一个整体的部分。

大量的留空间和留空间太少都是闭合原则的忌讳。只有已有的空间和需要被填充的空间之间保持正确的平衡关系,才会使空间灵活并且产生闭合原则。

闭合原则


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

考虑一下音乐。如果音乐中的每个音符和和弦同时出现,音乐就不会产生。你有的只是噪音。音乐是在声音和安静对比中产生的。不同的声音和静音创造出了节奏韵律和歌曲。没有安静就没有音乐。

空间在视觉上执行者同样的功能。它给元素提供呼吸的空间。通过设计它让眼睛自由移动,并且来发现它要找的元素。正形和负形形成对比。没有空间,就没有设计。你的视觉就会混乱。(也就是我们通常说的留白。)

除非噪音是你想在空间中试着用来交流的。与空间太小相比,人们不可能抱怨空间太多。


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

建立对比,重点和层次;

形成戏剧性和视觉张力;

(小编语:大家可以看些平面设计中视觉张力,和利用留白增强海报设计的视觉张力)

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


只有一些东西出现在你的空间中时,图底关系才会蕴含其中。在加入正形和空间是没有定义的。图底关系是必须建立在之前的空间的中间,是存在的并且在开始就是可交流的。一个更重要的空间功能是提高可读性和易读性。宏观的空间使文字更引人注目,微观的空间使文字更清晰易读。

微空间

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


宏观的空间

这是主要元素之间的空间。它区分元素或者是元素组和提供眼睛跟随的的路径和元素之间休息的地方。

空间与品质相关。更多的空间需要更少的元素或极少的元素。比较一下高端店铺和折扣零售店。在商店里面哪一个有更多空间,哪一个利用空间中的每一个角落来包装产品?空间要传达给你的是什么?


空间还可以传达出除了品质以外的属性,例如:

精致高雅

简单

奢华

干净

孤独

开放,开阔

你在设计时没能考虑它,你就是在浪费空间。你可以通过溢满的方式浪费空间。你可以通过阻断它内在元素的设计和不允许它在设计中连接另一个空间的方式来浪费空间。

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


在网站中有关空间的一些例子

为了更好地利用空间,你首先需要自觉的意识到这一点。学会识别在不同设计中的空间。请注意,它形成的形状,考虑什么是空间要传达的。最后,我来看看一些网站的设计,并且注意怎样使用空间(留白)。


保守派

Tom Johnson的保守派设计使用了大量的留白,给文字和其他元素之间以呼吸。对于什么是图和什么是底没有混淆误解。

信息包含由空格分隔(记得就近原则),区分元素组。你可以很容易地区分一个帖子的结束和下一个的开始,仅仅是通过它们之间的空间。

页面上的主要内容是稍微偏离中心的,也就是一边会有更大的空间。这个空间偶尔被元素打断,激活了空间和被打断的元素。这有助于吸引注意力到这个区域,特别是这个区域的内在元素。


HEROKU的状态页面

下图展示了Heroku的部分状态页面作为主要空间。在特别好的一天我碰巧看到了这个网站,因为附加的正面元素意味着更多的事件在这个平台上报道。在这里,更多白色空间意味着更好的服务。

注意空白空间并不需要总是白色的。当页面大量的留白时,你不可能抱怨说空间太多了。只有重要的信息在这种情况下,状态更新和事件报告——打断空间。


小说简介

在小说简介的顶部空间是不对称的和灵活的。注意左边的大块空间直接导致让你的眼睛注意到内容上。如果你点击网站链接,并从顶部向下滚动网页,你会看到空间用来分离和组块的信息。

分割线也用来组合和分离这些块。当浏览网站,注意到并不总是碰这些行,允许空间流动在它们周围,并且链接到另一个空间。这可以防止该空间受限制。


ELLIOT JAY STOCKS(这是个设计师)

Elliot Jay Stocks的网站为我们所熟知,这个就是他背后设计作品之一。在Elliot的网站上不对称的空间设计再次起到了活跃空间的作用。

在此页面顶部的大图片可能作为临时块用于访问下面的内容; 然而,在图片旁边大量的空间提供丰富和引人注目的地方让眼睛在他周围移动。如果在左边的侧栏有相同的背景颜色作为主要内容,那么它可能会更容易让眼睛移动到图片周围,但颜色的变化很那很难。

正如上面的网站,空间用来包围和区分信息明确的组,让每组都凸显出来,并且让眼睛找到它们想要的和在内容之间能够停留休息。


PHIL COFFMAN(这也是一位设计师)

Phil Coffman的网站内容形式是单一的形状 ,位于大部分都是空的空间中。缺乏许多正面的元素来增加那些已经存在的元素的重要性。

实际上在有颜色矩形的背景中,文本周围有足够的空间可以容易阅读,而不是误认为在这个页面上其它类别的文本。

正形(空间的形状)响应调整到不同的浏览器的宽度,但是一个单一的大的形状这种模式周围被剩下的空间包围。

网页设计的新冒险

像这里的许多网站,该网站2013年的网页设计的新冒险大会中在元素周围留了大量的的空间。不同信息组之间被空间包围,并且空间让整个设计都活跃了起来。

有趣的地方要注意的是在左上角图片右边主要内容之间的灰色圆形箭头。这个箭头阻断了空间的流动?因为它们不碰及和因为每个虚线的地方中断了空间,空间可以通过虚线的缝隙流动,尽管它的流动明显受到了限制。浅灰的颜色是有用的。它阻止了箭头成为主导,且不难想象空间流过这些线。

凭心而论,如果我的浏览器更宽当我在屏幕截图时,箭头不会与主要内容重叠。然而,在1280像素下他们把这个设计变成了单行索引。总的来说,这就是它的工作原理,尽管我好奇如果没有剪头的存在,空间流动会不会更好。


一些logo设计的例子

我会留些logo设计的空间组合,作为设计中必不可少的一部分。不是指出每个使用的空间,而是我会做一些普通的评论,且然后让你们自己探索空间。

注意下面的logo怎样使用图底关系。在一些中,直到你看到图和底两者,你看不到一个完整的logo。对于所要传达什么内容两者都是必要的贡献者。

这些logo中有几个是依赖于闭合原则。意味着你看到的并不是真正的存在,尽管如此但你还是看看吧。一些 logo也在玩弄图底关系。什么是图,当你在看整个 logo时,相反它的背景变成了底,在里面成了一个更小的图。这种可逆性图底关系是要传达什么样内容的核心。

各种标志,以充分的利用留白。

云床

黑猫休息室

移动

海豚和海豹标志设计

种植牙指南

Wineforest


总结

我希望你从这篇文章中能明白并掌握两件事。首先是设计中使用的留白和格式塔原则图底关系之间的联系。格式塔原则之下许多都是我们设计师要做的事。

第二,也许更为重要的是,作出努力,花些时间观察在设计中怎样使用空间,也就是所谓的留白。不要让空间成为你正面元素的附属产品。尽可能的了解学习设计空间,不亚于主要元素的设计学习。任何页面的布局基本上都是空间的排布。

有意识的分析空间,且故意使用它来创造一个更好的设计。不要让它成为遗留下来内容。把它看作是一个必要的设计元素,作为你图形的设计元素。在下次的文章中,我会添加更多格式塔原则来混合和完形原则,探索焦点,延续和共同命运给我们带来思想如视觉重量和构成的平衡。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务 

 

设计过不了稿怎么办?

蓝蓝设计的小编

每当设计工作过不了稿时我会很痛苦,会寝食难安,即而是一种坚决要尽快过稿,解脱痛苦,达到客户和自己满意的信念,同时也有一定不服的气愤。为使自己远离痛苦,我会尝试多种方法:


1.主动,多次,沟通,迅速改稿。

多问为什么,清楚页面交互和每一个元素的由来,探讨好如何做的种种尝试,再定一两种先做出来。同创,与客户及客户的客户共创。

加班,快速迭代。


2.自己反复看,顺眼了,对了,再给别人看。

要想顺利,自己先做好,有毛病,一看就有漏洞的不要拿出去。人都是有自尊心的,为了自己的自尊,为了自己那份的责任心。


3.尽可能快,多的,掌握更多的此行业的知识、理论,根据,找到目前运作双方的不足,有了强有力的武器,披荆斩棘,旁征博引。

请教高手。


4.能听得进去意见,并有同理心。

当客户不认可自己作品时,连带基本上是不认可设计师这个人的。这时候百口莫辦,唯有行动来说明自己。

消极应对,推一推动一动,或回报以不满或不认可的情绪化,显然是不可取的。如果每次栽在这里,只能说自己的能力和水平有限,处世不够成熟。

详解 javascript 的类

蓝蓝设计的小编

前言

生活有度,人生添寿。

Javascript从当初的一个“弹窗语言”,一步步发展成为现在前后端通吃的庞然大物。javascript的受欢迎程度也是与日俱增,今年编程语言又是花落javascript,这实在是一个充满了活力的语言。如今,随随便一个网页javascript代码量都不下数千行,要是node后端那更不止几千行了。(WTF)代码量的增加给编程带来的首要的问题就是如何去编写和维护如此庞大的代码呢?答案就是模块化思想,其实就是面向对象(OOP)编程,如今比较流行的三大前端框架(angular,react,vue)基本都实现了组件化编程,但组件化和我们所说的模块化又有所不同,应该可以这么理解,组件化是模块化的升级版,模块化是组件化的基础。那么,问题来了,javascript怎么面向对象编程呢?我想这很多老鸟也不定说的清楚吧,前端杂而活跃的各种社区,很多前端er一度依赖各种插件,根本不需要去了解这些深层的东西却照样能完成任务。但我想作为一个有追求的前端er还是很有必要去学习这些看似用不着的东西的,别的不说,就单单因为我们是前端er,只会用jquery一个稍微厉害的后端都能代替你。好吧,废话不多说,到底如何面向对象coding呢…..

很不幸,es5中并没有给出明确的定义‘类’的概念,所以传统的面向对象编程似乎是行不通的,那么又该肿么办呢?值得庆幸的是,前辈们通过不断探索总结,成功的用javascript模拟出了“类”。那么,javascript的类又该怎么定义呢?

在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称”实例”)共有的属性和方法。

总说“吃亏是福” “福”到底在哪?

蓝蓝设计的小编

永远不要亏欠来到我们身边的任何人,只要有这个思维,坚决不亏欠。不管是什么原因都不亏欠别人,因为一旦亏欠就亏欠了我们的前途,所以宁愿吃亏也不亏欠。


深入了解font-weight

蓝蓝设计的小编

1.jpg

问题提出

font-weight的属性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder,它们的区别是?
另外,在实际开发中,我们应该使用数值表达还是文字表达呢?

认识font-weight

根据W3C Fonts节章的规范标准,可知:

Facebook产品设计总监:我在管理工作中的八大教训

蓝蓝设计的小编

如果团队中所有成员都能理解什么是重要的事情,那么事情也会按照正确的轨道运转,砖块会砌在正确的位置,康庄大道会迅速的浮现出来,到时候,每个人心中所构想的光明城堡的景象将会从一片尘埃中闪耀地升起。

一个有见识的管理者能看到你看不到的东西,并且能推动你去完成你本认为不可能完成的事。

做管理虽然和为人父母一样是一种没有什么现成教条和既定规则的工作,但还是有优秀管理者和糟糕管理者之分。优秀管理者能带来更好的结果,这个结果可能在一周、一个月、甚至好几年都没法衡量,但总有一天它的影响会像黎明的曙光一样浮现出来。


设计师绩效访谈有感

蓝蓝设计的小编

设计师绩效评价主要来自几个维度:设计产出、项目结果、工作态度、专业技能、能力成长、设计展现、用户满意度、客户满意度、业务方满意度等。所以业务方满意度是设计师绩效评价的一个输入项。

针对业务方满意度这个输入项,最近几周我做了比较详细的设计师绩效访谈,和数十位与我们团队设计师直接合作的业务方同事进行了认真讨论。访谈的业务方同事包括:SE、设计师、开发、项目经理、产品经理、技术专家、主管、一线代表、SA等。访谈的内容包括对设计师这些维度的评价:工作态度、专业技能、特殊价值、优点、进步点等。

1,工作态度
工作态度已经不是优势竞争力,因为大家都很认真。从访谈结果来看,大家的工作态度都得到了业务方同事的高度肯定。工作态度好,响应快,积极,基本是每个设计师都得到的评价。
所以工作态度已经成为一个基准。如果工作态度都不好,那起步都没有了。

一起理解Virtual DOM

蓝蓝设计的小编

前言

React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清。

让我能够有所开窍(自认为)的,是这篇文章:


Change And Its Detection In JavaScript Frameworks
Monday Mar 2, 2015 by Tero Parviainen


作者看问题的角度很棒,从数据变更与UI同步的角度来介绍各个典型框架,特别是对于 React 的 Virtual DOM,从这个角度理解起来更容易些。

当设计师面对批评的时候,这些批评和责备呢?

蓝蓝设计的小编

三、建立过滤与保护机制,让批评为己所用


过滤与保护机制听起来也很简单,但其实没那么容易。但你可以通过以下 5 个步骤,来帮助自己建立这样一个机制。


第一步:你要意识到,没有批评是 100% 正确的。如前面所说,批评微妙而复杂,且常常基于某些立场之上。因此,在你接受某些人的批评之前,先暂停,花时间处理一下这些批评中所携带的信息。


第二步:批评者所批评你的每一句话,其实也都映射了批评者本身。每个人都是通过自己的视野和经验来观察世界的,没有人能够 100% 地做到完全基于事实和真相做出评判。


第三步:当批评袭来时,在它伤害到你之前阻止它。你需要问一些问题,来帮助自己处理这些批评。


  • 这个批评者是谁?他有多了解我?他有多值得信任?


  • 批评者的目的是什么?他们有没有要故意伤害你的缘由?他们是在愤怒吗?


  • 还是在试图帮助你?他们是不是度过了很糟糕的一天?他们是不是有夸大事实的嫌疑?


  • 批评者有没有遗漏哪些信息?而这些可能是会改变他们观点的?


  • 批评中的某些信息是不是要比其他的更准确?


  • 在回答上述这些问题时,你是否需要更多的信息?

陈幼坚:好设计为品牌注入生命力

蓝蓝设计的小编

那么您认为一个好的跨界设计师都需要具备怎样的素质?

首先不要刻意去把跨界当成一个成功的途径,想要依靠跨界吸引眼球博得注意力,毕竟这不是长久之计。跨界应当是你跟随自己的内心慢慢的、自然的从一个地方走到另一个地方,你因着对另一个领域某个元素的喜爱受到吸引和启发,然后将两者做一个完美的融合。不要怀着很大的目的。


在您与各个品牌的合作当中,设计带来的竞争力是否等同于产品竞争力?这两者分别要如何进行评价和分析?

这个问题我没有特别想过。一般都是客户来找我然后我做产品的包装,这两者是否等同,很难说。当然对于我们来说是希望通过包装设计将这个产品做一个更好的呈现。但是这两者之间是相辅相成的关系,很难去做一个比较。如果产品不好,设计怎么做都没用。


您对好的设计与好的设计师,是否有自己的定义和衡量标准?

我觉得永远都要怀着儿童的心态,很纯净,对生活永远充满好奇。因为如果希望产品跟够跟消费群体产生共鸣,这个关键点无疑是需要通过设计的观察来创造和开启。另外还要永远保持幽默感,再就是要有包容性,要做一个“花心”男。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档