# Elaine Kits-网格系统 By [Elaine](https://paragraph.com/@elaine) · 2022-05-23 --- 今天来讲讲页面布局，Layout。之前做产品经理用Axure画图的时候，只会注意左右对齐，并没有认真考虑过页面布局这件事。 如今用figma画图，发现网格系统Layout grid非常好用，今天就用一个Token price页面带大家看看网格布局。 ### 什么是网格 网格由一系列垂直或者相交的线组成，这些线将页面划分成列或模块。 这种结构有助于设计人员在页面上安排内容，帮助管理页面上的元素之间的比例。 网格将用作页面布局的框架，将其视为一个骨架，设计师可以在上面以易于吸收的方式组织元素。 ### 网格的历史 网格与排版密切相关，从书籍的早期开始，网格就帮助设计师安排页面布局，以帮助用户阅读。 从印刷术到工业革命，报纸、海报、传单的大量兴起，对印刷设计师的需求量很大。设计师必须解决两个问题：如何向不同的人群传达不同的信息；防止不同的部分竞争读者的注意力。 后来在第一次世界大战期间，印刷出版物必须使用三种官方语言-德语、法语、意大利语，设计师需要一个新的网格系统来实现这一点。Jan Tschichold 和 Herbert Bayer 等排版师采用模块化方法解决了这个问题。空白空间第一次被用作布局设计中的动态组件，这导致了复杂网格系统的发展。 ### 网格基本理论 无论是复杂的网格，还是简单的，都有一些共同的部分：Format、Margins、Alleys、Columns、Modules。 ![](https://storage.googleapis.com/papyrus_images/d72bd7bfb029aa635546f9ae791606d513717fe768705beb4c624e7bcc2ce8cb.png) 四种基本的网格：Manuscript grid、column grid、modular grid、baseline grid。 ![](https://storage.googleapis.com/papyrus_images/829e7e8c306cb4d4418e3d9d41a54973c6408301520893725ebf3589e6c338c3.png) Manuscript grid是最简单的网格，也被称作单列网格； Multicolumn grid，多列网格，当你创建的列越多，你的网格越灵活。多列网格对于包含不连续信息的布局非常有用，当你使用多列网格时，可以为不同类型的内容创建区域； Modular grid，模块化网格将页面垂直和水平细分为模块。列和行和Alley创建了一个单元格或模块化矩阵。当你需要对更加复杂的页面进行设计时，模块化网格非常有用。模块化网格为页面提供灵活的格式，允许创建复杂的层次结构，网格中的每一个模块都可以包含一小块信息，或者可以将相邻的模块组合成块。 Baseline grid，基线网格是指导设计中垂直间距的底层结构，它主要应用在水平对齐和层次结构。使用这种类型的网格，可以确保每行文本的底部与垂直间距对齐。 ### Token price案例 首先让我们看看页面的网格布局，区分顶部和弹框。 ![](https://storage.googleapis.com/papyrus_images/749422084237aa3f6c4dfc10382db53205dfd610c98e098188be745160b65b51.png) 再来看看弹框的网格布局，每个元素的都会对齐网格。 ![](https://storage.googleapis.com/papyrus_images/bee5314c9ecb5671277bfd0827b56b34708e650ac4f57500d91a23ff044fa375.png) 最后让我们看看最终呈现图 ![](https://storage.googleapis.com/papyrus_images/a72522f42c886dbe210202ee9535297736101524beab7e009f297ab9c4b0d372.png) 实话实说，这是我有史以来最工整的设计稿了！小声说句，产品经理的线框图就是帮助设计师理清页面元素的，然后根据元素内容创建不同的网格，这样设计稿看起来就会非常工整舒服啦！ 查资料的过程中，发现国外的Product design会有一道在纸上画草稿图的流程，其实这部分工作在国内就是被产品经理替代了。这步骤还是蛮重要的，我在设计token price页面的时候，就迷惑了我到底应该用几行几列，最后元素全部设计完了，再重新创建网格去对齐，可能还是不太专业，后面我也会要继续学习，加油🌟 --- *Originally published on [Elaine](https://paragraph.com/@elaine/elaine-kits-2)*