我们只做互联网+的高阶培训 拥有好作品才会拥有好工作 咨询热线:13671165726
中文 | English

UI设计中的网格布局解析

承辉学院2016-09-20

    说起网格布局,那可以追溯到最早期的UI设计,但是在今天还有网格布局么?在这个我告诉大家,网格布局依然存在的,并且经常被应用,只是如果没有相关知识的学习和涉及,我们会很难意识到这些网格之间的规则并活学活用,或者说是打破其中的规则,重新设计布局。

F8029179-5B0F-41E7-B336-C60E52958F89.png

    首先,网格布局并不是专门给打印啊,数码啊量身定制的。这种设计和布局的方式目的只有一个,用多种元素传达一个信息。自然,想要排列好这种元素,就要考虑人类眼睛和大脑配合的工作流程。要点在于,要让大脑在努力解读信息的同时,不至于忽略布局。


    网格布局的误会

    这里有一堂简单而又有好的网格布局分享,告诉大家如何使用网格,这种声音和说法可是艺术学校不会交给大家的哦!其中涵盖了许多网格阵列布局,比如三分法,黄金比例等。这不是老生常谈的那些玩意,而是解释了为什么有些设计师牛逼万丈,有些设计师就路人局一辈子。

    设想一下,每个设计师都开始从上面那个网址学习网格布局,接下来我们都会因为学有所成而出一些相同的设计。那些条条框框的网格放在那里,好嘛,看起来就像个死板的书呆子,好像除了它其他就没得可用~


    是不是很多人想要跳出这个框架?

    可是不得不说的是,如果其他人也学会了这种技法,那意味他们可以做出不错的作品。

    上文用最简单的方式解释网格布局似乎是有很多可能性的,当然它也会让你在思考过程中觉得有点崩溃,似乎就像是FaceBook那种“你能看出多少个方格”的测试。所以有多少方格呢?你能够数清楚是有四个还是有八个长方形吗?方形套方形,各种各样的方形,许许多多的方形……您瞅准了没错,这就是网格布局。


    如何且为啥

    作为一个设计师,我们对瑞士设计学院和101设计班会比较熟悉的。有些人将其称之为现代设计的奠基石。或者认为他是设计风格中极为重要的一环。这两种说法都是有道理的。

    我阅读了Muller-Brockmann写了文章,他和他的同事们所开发的设计规范仍在继续影响着我们:

    Muller-Brockmann(1914年5月9日—1914年8月30日)被认为是在瑞典设计圈里极具分量的人物。他经历了很多事情,第二次世界大战、冷战,欧洲的影响力变化等等……同时,他极其了解设计,他的设计风格很快引领了世界潮流。

    他不仅仅是一个设计师,更是瑞士设计学院的一个标签:构建主意,De Still,至上主义,包豪斯……他的设计打开了一个新的方向,创立了新型的图像表达方式。在他同龄人中,他是其中的佼佼者。

    1950开始,他立志于设计一种能够与大众沟通的海报。这是一个不小的壮举,在那个时代,瑞士处于多语种混杂状态,要跨越语言的障碍,和大众沟通,谈何容易。所以这些作品必须简单而和谐,并且要对战时流行“中央民族主义”产生影响。Muller-Brockmann很快就成为这种“瑞士风格”的主要实践者和理论家,他想通过网格样式的设计来表达很多信息,并努力排除插图所带来的那种主观感觉。

    网格布局将排版,色彩,布局是有全盘考虑的,会根据以上元素设置一个表面秩序,基于:从左到右,从上倒下。以下是维基百科的网络资料:

    一个二维结构内容页,需要由一系列的纵向,横向交叉的内容组成。网格在布局中就像是中枢,设计师可以根据网格,有效的组织文字和图片的排布,简单且易于管理。

    现在,看来我们所了解的网格页面布局和设计,传统而言,似乎都是从左到右,自上而下。把每一个元素都封装在方盒子里,计算好精度。但是看看Muller-Brockmann,他的作品将设计图和说明性元素成功的结合在了一起,并且跟你看的那种网站布局完全不同。虽然都是从左到右,从上到下,都封装在盒子中,但是总有不一样。


    【鸡叔说明:作者的意思是,看看网格布局的祖宗是怎么玩网格的。就像鸣人在修炼螺旋丸的时候,要知道四代火影是怎么放大招的。】

02c2e755a74fae00000177a074c93d.jpg

02b0f655a74fb000000177a0edfdc5.jpg

    他的作品,尽管你认为大的主体依旧是网格布局,但是很少有人能够娴熟的驾驭和堆砌这些元素,并进行实践。他的作品中,不是所有的东西都是横平竖直的,也不是所有的线条和色彩都是具备关联性的,只有强调和被强调的关系。

    网络时代里,这种WordPress 主题的基础,再加上它本体的设计进化,为开发者提供开发基础。报纸风格已经在移动端变成杂志界面布局,并辅助以运动,滚动翻页和一些动效。网络发生变化,设计也必须随之而改变,因为网页的那些方形界面框是基础,是延续,正是那些大小不一的方形框架将所有元素绑定在一起。当然,它们也会求新求变。


    【鸡叔说明:实际上就是说,早期的网格布局,为现在的互联网界面做了铺垫了基础。但是互联网本身会不断的变化,设计也要随之变化。二者彼此关系很密切。】

    Piet Zwart ,生于1885年5月28日在Zaandijk,北荷兰(1977年9月27日去世,享年92岁)。从1920年到1907年,他在阿姆斯特丹的艺术应用学校学习工作,在那里,绘画,建筑,应用艺术并无明确区分。Piet Zwart和他的学生们开发了很多自己的项目,好像那里根本没有老师一样。

    因为缺乏传统课堂训练,所以使得他有了自己的设计套路,尤其是那种鲜活而又不拘一格的印刷排版。1940年—1950年之间,纯粹而轻利的横纵网格布局设计已经在瑞典设计学院的引领下风靡世界,但Piet Zwart则通过感觉来做设计,自成一派。

    就像所有的天才一样,他有自己的学习方法,跟传统方式截然不同,就我而言,我怀疑他啥也不关心,就想怎么打破规则。他尝试将摄影纳入他的设计,引领出了蒙太奇风格。不过呢,虽然他总是打破规则,但是他还是很注重可读性,排版的清晰性和功能性的。如果有些东西必须予以体现,他就会利用构建主义的基本原则和“De Stijl”(风格化),将其付诸于自己的商业作品。

0214bd55a7503c00000177a07ea986.jpg

02d9cf55a7503c00000177a0d31819.jpg

    Zwart 作为设计界的反叛先锋,他却仍旧需要遵从一些设计上无法被推翻的规则。他的大多数商业作品中,他对线条做了不同尝试,利用网格布局组织元素,从而更容易打动目标受众。

    在界面中,布局和设计通常都会被文字信息抢了风头。这里有一篇关于Z形布局的文章,讨论了关于社会性的阅读习惯,比如从左到右阅读,再从上到下。这种约定俗成的规矩让你没得可选,除非你想打造一种信息混乱的设计风格。所以吧,在设计中充满了局限,可在局限中又有着无限的可能性。

02597c55a7510c000001a210a7cf68.jpg

    之前我的老师曾经用一种行之有效办法,给我演示如何在平面内制造焦点。首先,画一条从左上角到右下角,过中心的对角线(如果那个国家阅读顺序相反,那你就也反着画)。接下来,从未连接的两个角向对角线做垂线。最后,线段交汇点就是最容易引起注意的区域。

    Ed Fella ,设计师兼教育家,他声称自己的工作就像是“摆烂”。他对工作很执着,自觉,且具备权威性。他从印刷、设计理论中汲取精华,不断尝试新的布局,最后他似乎总能够找到一条正确的路线。他有一段非常激励人心的话语:

    “我对平面艺术非常感兴趣,”他说。“这是一种实践性艺术,我们将表格,图形,插图,文字,所有的东西混合在一起,制造出了一种属于20世纪的艺术形式。曾经如毕加索作品一般的那种混排,目前正在被每一个设计师进行着使用。我是一个插画家,所以你会从我的世界中,看到无穷无尽的风格。在我已经过去的30年绘画生涯中,绘画已经变成了一种生活形式。这是我的专业,是我每日的职责所在。我将自己完全投入其中,现在我觉得自己似乎已经再难有作为,只是在利用自己的经验和技术在做东西,觉得自己像个缺乏产能的机器,只不过还在运转罢了。但我爱这一切,我爱这精细而又美丽的一切。”

024eba55a75169000001a2106e1853.jpg


    诚然,Fella他是一个打破规则的人,但是他也是个严守自己设计规律的人,利用最前沿的信息,利用网格,让它的作品更进一步。

    网格布局不是一些过时的设计,不管是在印刷领域还是在互联网上,这是都是一种设计力量,它强大的足以抵住时间的消磨,影响当下的一切。这是所有设计建立基础。

    我从来不是一个遵守规则,但老师和伟大的艺术家有一些难忘的台词。“打破规则之前,你必须知道规则”和“创建自己的世界,你必须首先理解真实的世界。”

    如果你要尝试打破规则,那你就要看到已有世界的规则,知道什么是基础,什么是进阶。了解什么是基本的布局、类型、元素的颜色、摄影、插图等等……了解眼睛如何看待他们,了解大脑如何解读这一切。


承辉教务01
承辉教务02