海报 网 格 系统

暂无优惠 永久SVIP免费

当前隐藏内容需要支付

15RMB

已有33人支付

支付查看

视频资源大小：5.19 GB

01 流传了几个世纪的排版方法，为什么还好用.mp4

01.【先导片】设计师，你为什么要懂网格系统.mp4

02.【先导片】 流传了几个世纪的排版方法，为什么还好用.mp4

02.当我们谈论网格系统的时候，究竟在说什么？.mp4

03 这些中文排版的坑，你怎么还在踩.mp4

04 适合汉字的网格，是什么样的.mp4

05 中文排版里的标点，被你忽视了吗.mp4

06 来，带你围观一个版面是怎样建立的！.mp4

07 这些分栏的小技巧，你竟不知道.mp4

08 问答测试(上).mp4

09 这个方法，竟然能科学的计算美学.mp4

10 黄金比例是真的美，还是一个古老骗局.mp4

11 文字到底该放多大这下彻底有谱了！.mp4

12 字号对比这5个方法，拿去用！.mp4

13 只懂裁图还不够你不得不学习的图片知识.mp4

14 问答测试(中).mp4

15 你设计的企业画册真的靠谱吗.mp4

16 信息量多的海报，怎么用网格规范.mp4

17 活用网格系统做海报.mp4

18 如何通过作品集高效的展现自己.mp4

19 作品集这样做，何愁拿不到好offer.mp4

20 让文案变包装，设计师都做了什么.mp4

21 超实用的名片整理术.mp4

22 没素材就不会设计了来试试标点吧！.mp4

23 《导视系统的法则，谁懂谁专业》.mp4

24 《响应式网页，用的什么网格》.mp4

25 《问答测试(下)》.mp4

网格系统全攻略直播答疑.mp4

第十一节：课后作业.zip

资料.rar

网格系统是现在排版时常用到的一种设计工具，特别在画册、书籍领域，网格系统是不可或缺的。我们在接触海报设计的时候，也经常会被告知最好使用网格来安排画面中的各项元素，因为这能让海报的版面看起来更加清晰有条理，易于阅读；并且横平竖直的参考线让排版有规律可循的，让我们可以避免无用的排版试错，提升设计效率。

对网格系统还没有概念的朋友可以看这里↓

虽然使用网格系统进行海报排版好处颇多，但是刚接触海报设计的你在用网格的时候是不是感觉束手束脚？不知道网格的行列数量设置成多少比较好、排版的时候元素无法完全没有契合网格或、用了网格但是海报做出来还是不好看等等，都是我们使用网格系统的时候容易出现的问题。

想要在海报设计中熟练且正确使用网格，我们需要正确理解网格对于海报设计的意义。

网格系统只是一个有效的辅助工具

首先网格系统只是众多辅助海报设计的工具之一，而非必不可缺的部分，毕竟海报不是有网格系统之后才有的。以往的设计师在实践中发现使用网格能更好更快地进行排版，所以提倡使用，但没有网格我们也有其他办法设计出好看的海报，完全不使用网格进行排版的优秀海报也是非常多的。

没有遵循网格的海报设计

海报设计中最重要的是正确清晰的信息层级

海报设计最终为了清晰准确地传达信息，对海报的信息层级进行正确排序是第一位的。做好这一步，我们才能确定每个层级在海报中的版面占比大小，再结合网格系统进行的排版，自然事半功倍。如果你连海报中信息的重要程度都没有分清就到网格中进行排版，最终效果是不会理想的。

如下图，两版海报虽然都是用了网格，但是由于左边的海报信息层级排序错误且区分不明显，导致最终的排版效果并不好。

还需要注意的是，海报设计中的网格系统没有书籍排版中要求那么严格，不用苛求排版要完全按照网格来。在利用网格进行海报排版时，如果感觉元素大小调整到了视觉合适，但是没有契合网格，那也没有关系，只要保证信息层级是对的就可以了。如果你不确定一个元素的位置和具体尺寸，那就按照网格来，整体完成后再进行微调。这就是网格辅助设计的意义。

使用斐波那契数列设置网格

了解以上两点之后再来看网格的设置，你是不是觉得这个问题也没有那么复杂了？页边距留多宽、网格设置成多少行多少列、间距设置多宽并不是定死的，而是以你的海报内容或者你自己的习惯为主。如果你用心分析过一些优秀的海报，就会发现它们的网格设置非常灵活多样。

关于海报设计中网格设置的问题我也请教过优设平面设计实战训练营的全蛋老师，全蛋老师表示网格设计没有定则，以自己的需求为准。如果刚刚接触海报设计没有把握的话，可以使用斐波那契数列作为参考。

斐波那契数列又称黄金分割数列，数字排序为 0、1、1、2、3、5、8、13、21、34……由之前的两个数相加得出第三个数，以此类推。我们在设置网格的时候，行数和列数就可以用其中相邻的2个数字为准。如3行5列、5行8列，或者5行3列、8行5列等。但这也只是仅供参考的网格设置方法，在设计中还是要以你自己的实际需要为准。

总结

海报设计中的网格并不复杂高深，它是一个有效的辅助工具，需要我们在理清正确的海报信息层级后再使用，网格的行列数及间距宽度设置都以海报内容和个人习惯为主，可以灵活调整。弄清楚了这些，再用网格就会觉得轻松顺手很多。

前言：在设计中，很多人会用到网格， 网格可以为设计创建一个基本结构，一个骨架；可以把设计元素在一个整体的系统中联系在一起，合理地支持你的构图。正确的使用网格可以使设计显得周到、有组织性、整洁且结构合理。没有什么比一致的网格线更能有效地将各种形式的内容捆绑在一起了。所以今天准备了一篇网格干货满满的分享。

第一：什么是网格？

在掌握网格的设计方法之前，咱们得先知道，到底什么是网格？为什么会有网格系统这一说？网格系统的存在，是为了解决设计什么样的问题？

实际上，说到网格的历史，得追溯到文艺复兴时期。为了达到美的极致，艺术家从绘画中找到了完美的比例分布图，并尝试以辅助线来实现 「完美」 构图的方法。

△ Masaccio, ‘The Tribute Money,’ Brancacci Chapel, 1425.

在13世纪，法国的建筑设计师 Villard de Honnecourt 将网格系统及黄金比例进行了结合，创建了一个这样的图表，固定版面中内容的结构及边距，来实现完美的布局。而这套方法，直到至今都仍在使用，大量的杂志排版、书籍排版都能看到这套方法的影子。

所以，网格的存在，最主要就是为了解决设计美感的问题，通过网格让杂乱无章的信息能通过一个较好的结构来进行约束，保障信息高效传达的同时，充分提升版面设计的美感。

1. 网格的结构

网格实际上，是一种结构，通过线的垂直或者相交，来构建一个参考界线。通过这个参考界线，我们可以在一个单一的容器中，把容器里的内容，以参考线进行对齐，来有秩序的布局组织并罗列分布。从而实现一个较好的视觉秩序感，提升阅读效率的同时增加美感。

因为网格是一种结构，所以网格本身是不一定可见（少部分作品会使用网格做装饰），但这种结构会映射到内容元素的布局，影响信息的排列美感及阅读效率。所有在有确定了网格的边界和约束后，设计师就可以根据网格，来对内容的位置比例，进行调整约束元素的坐标，达到一个比较理想的版式设计。

环顾我们的生活周围，实际上也能看到很多网格的运用场景。比如我很喜欢的这套宜家网格柜子~

不过网格目前运用的最为广泛的场景，还是在书籍、杂志的版式设计中。实际上，网格系统诞生的初衷也是为了解决印刷制版的问题。所以从印刷术的兴起，网格就开始诞生了 ，并演绎的越来越丰富，越来越系统。

2. 网格的制版

在平面设计中，网格系统更常见，特别是用于书籍的装帧及印刷场景。所以如果有从事平面设计或者是从事视觉相关行业的同学，我推荐有机会也可以读读下面这本书。

这本书是由瑞士的设计师约瑟夫·米勒–布罗克曼 编写的《平面设计中的网格系统》，文中主要介绍了在平面设计中，网格的功能和使用方法，旨在为平面和空间的设计师们提供一个实际的工具，让他们可以从概念、组织结构和设计上更有效、 自信地处理和解决视觉问题。

书中很多方法及版式，基本上可以现学现用，掌握起来也非常方便。

「事实上，绝大多数的设计师都不知道、也不理解为什么要建立这样的一个秩序系统。所以，如果想要合理、功能地运用网格系统，那就必须仔细地研究网格的所有原理。只要不嫌麻烦，任何研究网格的人都会发现，在网格系统的帮助下，他都能更快地解决设计中的问题，并让设计更具功能性、逻辑性和视觉美感。

——约瑟夫·米勒－布罗克曼 」

当然，我更推荐大家阅读浏览纸质版本，更利于查阅。而且这本书的纸质版，手感相当不错，我自己也在某东上买了本，日常没事的时候翻翻看，提升审美的同时，顺便提升自己的版式能力。这里也给大家附上我的购买地址，贴心吧~~

第二：网格的组成部分

讲了网格的历史，接下来咱们就开始讲正式的网格使用方法啦。

目前网格设计主要运用在两大场景，一个是印刷读物，比如海报、书籍、封面等，而另外一个就是电子设备的荧幕，比如 iPhone、iPad、Windows 等，常见于 APP 设计、H5设计及 Web 设计中。

在这些不同场景的网格设计中，都会有一些很通用的基础组件部分，如边距、列宽、水槽、以及交叉的模块，正是这些基础的元素组成了复杂的网格系统。所以在使用网格设计方法做图之前，我们需要先了解每个元素的具体含义以及其具体用法。

1. 网格边距

网格边距指的是内容外部边缘距离容器的空白距离，在纸质设备中，容器就是纸张的大小，在界面设计里，容器就是设计稿的尺寸分辨率。这个边距，一方面是为了信息不超出安全距离，二方面也主要是为了让内容看起来，能更加的聚焦在中心区域，以防信息太过于贴边导致的不利于阅读。

在APP设计中，也会用到边距这个概念。基于@2x尺寸，很多APP内容到屏幕的边距，都采用的是24px，比如淘宝、支付宝、微博等。但也有不少的APP采用的是32px的边距，比如微信、QQ、知乎等，这个大家可以截图，缩到750的宽度，自行量~~当然，文章后面也会详细讲这块怎么定比较好

2. 列宽及水槽

除去边距，在内容区域的中心部分，网格主要由列宽及水槽组成，列宽就是每列中间的宽度，水槽就是每两列的中间预留区域。列决定网格的复杂程度，而水槽决定内容的疏密程度。

3. 交叉模块

这个指的就是网格中的交叉区域，实际上是一个空间单位。我们可以把固定的图片或者是段落，直接填充在这个模块里。当然，后面也有案例来解读。

所有的网格，基本上都是由上面的基础元素组成。正是这些，组成了庞大且复杂的网格系统 Gird System

第三：三种常见的网格

在我们的设计当中，目前这三种网格最为常见，且这三种也能满足我们日常的大部分需要。

1. 单列网格

在咱们目前设计中，其实最常见的，就是这种单列的网格。这种单列的网格大多数以水平，或者是垂直的形态出现。比如你看到的现在咱们发的这篇文章，实际上它就是一种以水平形态的单列网格所组成，文字与文字中间的距离，就组成了水渠，它也是目前最简单的一种网格。

这种其实我们用文字的行高，就可以控制了，不需要设置特别多的信息。保证每一列的距离是一样的即可。

2. 多列网格

多列网格，顾名思义就是有多列的网格，会包含交叉关系。实际上，创建的列数越多，你的网格在使用过程中覆盖面会越广，能对齐的内容也会越多，不过处理不好的话，信息也会越碎。

咱们根据这个网格，简单排一些文字，看看效果

再把线去掉，顺便加点颜色看看，再修饰一下细节~~

其实还是比较的简单，当然，我这个只是随意拼凑，小伙伴们可以在收藏本文后，抽时间自己动手试试~~相信肯定会比我这个好

3. 交叉网格

交叉网格也比较好理解，其实就是基于水平及垂直领域的交叉网格。这种网格的节奏感非常好，适合在海报、杂志、封面版本中使用。包括在部分App以及Web的场景中，也可以使用这种布局方式。

比如：

是不是明白许多啦，再强调一句，光看是不行的，这里我鼓励各位小伙伴们，多动手进行练习尝试，只有动手了，这些知识才能转化成你自己的能力！加油，奥利给！

第四：界面设计中，如何使用网格布局

那么在界面设计当中，如何使用网格来约束版式，让设计看起来更整齐、更规律、更美观？其实方法一样的，无非只是容器的不同。

1. 先定边距

在规划网格之前，咱们的第一步实际上是需要先定内容到容器的边距，这个边距定好了后，咱们才能开始后面的网格制定。

通常在APP设计中，常见的边距有24、32、40，这3个单位，信息比较密集的，通常会使用24这个单位，而信息比较宽松，偏工具型的产品，则会使用40的这个单位。当然，也有很多产品，选择了比较中立的32。

△ 图中 ③ 绿色区域为边距，② 蓝色区域为水槽，① 红色区域为边距

在Web或者是PPT的封面设计中，由于屏幕本身就是横向的，所以咱们的边距可以定的更大一些，通常为100、200、300不等，这个可以根据个人风格喜好来定。

2. 确定列数

在确定了边距之后，很重要的一步就是需要确定列数了。定义使用多少列，这个直接会影响到页面的信息疏密以及灵活程度。在APP设计中，比较流行的有 4-6 列，而在Web设计中，10-12 列则是非常的主流

在做PPT或者是网页的时候，我最喜欢还是使用12列，因为它其实最灵活，而且大小不大不小，刚刚合适~~大家可以对应下面这张图（基于@1x），来决定自己设计稿中，列数的数量是多少。

3. 设定水槽宽度

边距及列数都确定下来了后，咱们其实需要定的，就是水槽的宽度了。

在移动端设计中，我建议水槽的距离，最小尺寸为16，其次以4为单位往上递增，比如16、20、24、28、32、36，可以根据产品的类型来定义这个水槽的宽度。如果你的屏幕信息密度很高，那么我建议使用20、24这种小距离的，如果密度非常低，整个屏幕里都没什么内容，那么可以使用32、36等大水槽边距。