说到网格的应用，我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则，将比例标准定为人的拳头，一个站立的人物从地面到头顶测量为 18 个拳头。
公元 1040 年，首次在中国出现活字印刷，主要采用的是泥活字。在西方，金属活字印刷术在 1450 年左右出现，而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。
到了 1917 年，网格在荷兰风格派运动中最为明显，由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。
1919 年，德国的包豪斯学校成立，他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋，它的棋子都是正方形和长方形等简单的几何形体，可以紧密地组合在一起，以便紧凑地存放。
1950 年代，一种崭新的平面设计风格终于在瑞士形成。这种风格的设计，力图通过简单的网络结构和近乎标准化的排版方式，达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。
随着第二次世界大战的结束，一种新的消费主义出现了。经济快速发展，广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家，他以企业品牌标志设计及商业广告设计而闻名，网格在这种新的广告形式中发挥了重要作用。
今天我们要聊的是关于网页设计的网格系统。说起来很简单，但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪？每个元素之间的间距是多少？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前，我们需要先普及一些概念。
页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列，可以建立元素间的关系，从而更好地引导用户体验。作为网页设计的关键组成部分，布局决定了页面哪些元素最受关注，以及页面的视觉整体平衡。总之，一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上，然后按照重要性顺序阅读余下部分。
要实现良好的页面布局，最好的办法就是应用网格系统。网格是设计的骨架，可以帮助我们对齐，有序组织页面内容。通过正确使用网格，我们不会随意地把元素放到页面里，而是明确地知道将这些元素放到哪些合理的位置上，有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计，通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。
网格由几个部分组成，分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。
接下来通过几个图例来详细解释下。
列(Column)是跨越内容区域的垂直部分。在网页设计中列越多，网格就越灵活。列的宽度由设计师自己来决定，传统做法是在 PC 端网页上使用 12 个，Pad 端使用 8 个，移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。
槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备，可以通过更宽的槽去拉开页面的间距，使页面信息展示的更加舒展。
边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕，因为它们会在内容的周边创建更多的空白。
介绍了以上 3 个概念，我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统，使用 8 的增量来调整页面元素的大小和间距。也就是说，页面中的高度或宽度、边距或填充都是 8 的倍数。
有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板，但我们的显示设备却非常大？
比如，我们用 375×812 的尺寸来进行设计 iphone X，但其实 iphone X 的实际尺寸是 1125×2436，是我们设计尺寸的 3 倍。
因为设计尺寸会以 2 倍或 3 倍的像素进行渲染，比如 iphoneX 就是以 3 倍尺寸进行渲染，iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计，以适配到不同设备的不同尺寸。因此，1pt 可以分别转换为 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。
所以我们设计一个 16pt 的图标，导出@2x 或者@3x 的尺寸应该是 32px、48px
使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇数来定义元素尺寸或间距，就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8，也是因为大部分的屏幕尺寸是可以被 8 整除的，这样就很容易适配。此外在 PC 端没有使用 2 或 4，是因为其颗粒度太小，不便于设计师进行操作；用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。
基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸，但它们的行高要尽量是 8 的倍数。
在网页端设计时，很少会遇到几倍尺寸的输出，所以通常情况下都以像素为单位，这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。
例如：
small = 8px
medium = 16px
large = 24px
x-large = 32px
……
普及了上述概念后，我们一起进一步了解下页面的布局，页面布局大体分为几类：固定布局、流动布局、自适应布局、响应式布局。
固定布局，顾名思义就是页面的整体宽度是固定的，不会随着浏览器的拉伸变化而变化。这种页面相对死板单一，但对于设计师来讲相对容易设计，也易于开发。
流动布局，它会随着浏览器窗口的大小而变化，但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少，流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽，内容可能会被拉伸得太长，单个文字段落可能会在单行上贯穿页面。相反，小屏幕上的多列布局也可能对内容来说过于拥挤。
自适应布局可以理解为是固定布局的一个升级版，举个例子，当页面内容为 960px，此时页面无论再往多宽拉伸，页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时，比如 960px 以内，页面就会缩小到它的第二个宽度，假设是 640，以此类推。这个临界值我们称之为断点。
响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少，响应式布局将像流动布局一样进行变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么页面布局也会发生改变。通常，响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的，这样会给用户带来更好的浏览体验。
最后用图例展示下如何利用网格系统在网页设计上进行页面布局。
在 figma 上的设置如图：
我们可以设置好列数，定义好列宽和槽宽来决定页面的实际宽度。
在网页设计上使用网格系统浅层价值是为了让页面布局有章可循，使页面看起来更加统一，深层价值其实是为了做自适应布局，让页面在不同宽度下适配到不同的设备上。
这里我也创建了 4 种不同尺寸的网页端网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。
https://www.figma.com/community/file/1076073453929437640/8pt-web-grid
最后推荐一款 sketch 智能布局网格的插件，喜欢的同学附件进行下载。
切记，在实际项目中，尽可能灵活的使用网格，不必拘泥于 8pt 的单位，但尽量保持在偶数范围。
参考文献：
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
配图取自文章《以B端产品为例，帮你深入浅出掌握「设计系统」》
设计系统 = 设计价值观和原则+设计规范+场景定义+工具包
设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产，是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案，能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发！
问题 1:
随着业务的拓展，产品和项目数量不断增加，发展中期设计和交互上不一致性的问题浮出水面，需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验，以满足用户预期并向其传达统一的品牌认知。
问题 2:
无统一的设计规范和交互原则，没有统一的 UI 组件库和代码库，各团队设计和前端需花费大量资源陷入低质量沟通协作和重复造轮子，拖慢产品和项目设计和开发节奏。
问题 3：
产品项目数量 vs 产品设计师，人员配比严重不足的情况下，团队的设计师们无法从杂/乱/急的日常需求中剥离出来，影响构建产品壁垒的质量和速度。
产品侧：
保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。
设计侧：
把设计师逐渐从不必要、重复性劳动中解放出来，节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘，如果每个设计师都具备产品用研、交互、组件化等一条龙能力，才能体现 tob 产品设计师的价值，才不会被别人称作是拖拽组件的“工具人”。
开发侧：
形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同一个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发。做到开箱即用。
测试侧：
标准化的设计规范，是测试人员最喜欢看到的。1 是 1，2 是 2 的设计准则，提升了测试效率。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。
主流设计系统-他山之石可以攻玉！
无需犹豫，直接基于现有的优秀的开源设计系统。
设计系统的打造不必从 0-1 构建， 例如：Ant Design 业界优秀的开源设计系统，我们完全可以站在前人的肩膀，最终生产出符合达观品牌、业务特性的设计系统。
1. 原子理论设计介绍
首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost 提出的，他从化学元素周期表中得到启发，发现在化学世界中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。根据他的理论，设计体系主要包含 5 个层面：原子、分子、组织、模板、页面。
原子理论设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个概念哦～
2. 原子层(Atoms)：
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、间距、阴影等。
简单概述下来就五个字：色、形、质、构、质；
3. 分子(Molecules)层
在界面中，分子就像是一个由 UI 元素组成的相对简单的组织。如：按钮、弹窗、搜索框等。
以按钮为例，它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联组合成一个分子，图标和文字互相配合传达意义，颜色定义了按钮的特性，间距为按钮定义了一个尺寸和规范。
4. 组织(Organisms)层
分子+原子组合成更复杂和可扩展性的模块，这个称之为组织（区块组件），如：列表操作区块、列表展示区块、表单区块、数据统计卡片区块。
以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。
5. 模板(Templates)层
由原子+分子+组织构成的更复杂更具拓展性的模块，如：分组表单页、页面级表单、详情页、列表页、异常页、dashborad。
本质就是线框图，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构，页面中的信息是占位作用，而不是页面的最终内容。
6. 页面(Pages)层
带业务逻辑的场景案例如：标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板；
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的带交互逻辑的「视觉稿」即为高保真原型图，将占位符替换为有代表性的真实内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。
误区 1：设计体系就是设计规范或者组件库吗？
许多人认为设计系统就是单个代码库、组件库、设计规范，但实际上他们不是一个层次的东西，准确来说设计体系包含设计规范，组件库也是建立在设计体系内的，组件库是记录和共享设计模式的工具，就是设计体系工具化和表现层的部分；
误区 2：设计体系的存在扼制了组织内创造力，会替代掉设计师？
抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点，我个人是很难认同这个的，对 design system 的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；
好的设计系统可以通过流程和机制促进创造力的，而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来，当然也不能过度依赖过往的沉淀资产，把自己定位为设计系统的创造者，而不是使用的工具人，不断的创造和贡献好的解决方案被整个组织采用，就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师，反而是一个企业内部尊重设计师价值的开始！是企业对设计文化的认可！
误区 3：设计系统是一劳永逸的吗？
设计体系是动态的，永远是随着组织需求和用户需求而变化的，一切说自己已经完成了设计体系的建设的人都是错误的，都是将静态的设计规范曲解成了设计体系。
误区 4：设计系统由少数人员生产，我们负责用就行了？
正确管理机制：少数人负责管理，多数人参与贡献；避免你做、我用模式，这种生产消费模式非常内卷；避免如：我一个设计师为啥要用你的规范；这规范做的太垃圾用处不大，我才不用，用你做的规范；我苦逼做业务，你晋升拿结果的负面心态；
设计系统也不是简单的靠少数的人 1-2 个月用爱发电就能完成的，设计系统是一群人，对一种做设计文化的认可，每个与之相关的人都应该是设计体系的贡献者与布道者！
当然设计体系也容易出现一些缺点，这些问题需要设计体系的构建者们去摸索去克服；
尽管有一系列潜在的问题，但总的来说设计体系带来的收益是大于这些投入的，总的来说方向是没错的，下一个关键问题是：我们如何去建立一个更优秀的设计体系。
今天就跟大家分享到这了，一点拙见，设计系统的话题这个我们分三期跟大家进行交流，如有兴趣，铁子们可以加个关注
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
