江苏龙网

  1. 首页 > 资讯 > 科技 > >

『』手把手教你做规范：布局规范


好多小伙伴对栅格都是迷迷糊糊的 ， 知道栅格的概念却不知道怎么用、为什么用 ， 每次提到都很头疼 。 其实栅格没那么难 ， 栅格是是为了辅助设计、减少设计工作量、使设计更理性、更规律的一种方法 。 屏幕端对不同尺寸页面响应式时更省时省力对一种方法 ， 是让减轻我们工作量对方法 ， 看到这里是不是心动了 ， 那就往下看看～
『』手把手教你做规范：布局规范
本文插图

一、什么是栅格
1. 栅格的由来
栅格就是网格 ， 就是这种有规律的格子 。
『』手把手教你做规范：布局规范
本文插图

哈哈 ， 这样一说是不是就很接地气了 。 英文翻译过来就是网格 ， 至于现在为什么叫栅格就不得而知道 。
『』手把手教你做规范：布局规范
本文插图

栅格最早是应用于平面设计中 ， 产生于二十世纪初的西欧 ， 完善于五十年代的瑞士 ， 通过有规律的网格来指导版面布局 。
栅格设计的在屏幕端的应用也十分广泛 ， 不光为设计服务 ， 对响应式开发也起到了很大的作用 。 虽然开发小哥说的栅格和我们理解的不太一样 ， 但也减少了沟通成本 。
2. 网格Grid
网格是构成页面栅格系统的最小单位 。 PC端我们一般用8作为网格的最小单位 。
『』手把手教你做规范：布局规范
本文插图

为什么用8？
尽量保持单位是偶数 ， 这样在页面放大或者放大或者缩小时还能保持清晰 。 在保证偶数的前提下 ， 使用“ 2、4、6、8、10、12… ”作为最小单位都是可以的 。
通常情况下PC端横向是固定的 ， 纵向是可以滚动的 。 根据2019年中国PC端分辨率端统计 ， “4、8”只有不能被1366整除 ， 其他都可以 。 由于4过于小 ， 普通用户从视觉上不容易分辨差别 ， 所以我们选用8作为最小单位 。 之后所有的数值都使用8的倍数 。
3.栏Columns和槽Gutters
栏（Columns）是呈放内容区域 。
PC端通常有12栅格或24栅格 ， 意思就是纵向有12栏或24栏 。
槽（Gutters）是两个栏中间的间距 。 槽的数量比栏的数量少一个 。
假设是栅格宽度是W、栏的宽度是C、槽的宽度是G 。 有N个栏 ， 就有N-1个槽 ， 则可以推断出算出W=N*C+（N-1）G 。
忘掉 栏+槽=列的概念（个人感觉没有作用 ， 有不同见解的欢迎讨论 。 ）
『』手把手教你做规范：布局规范
本文插图

为什么用12或24栏？
12栏和24栏都是PC端较常用的 ， 移动端用4栏的居多 ， 分的越细可变化的内容越丰富 。 但过于细也会使页面变得很碎 ， 差异感和韵律感降低 。 12或24栏可以被2等分、3等分、4等分、6等分、12等分 ， 还能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割 ， 提供了足够丰富的变化 。
以下是京东首页的截图 ， 应该是采用了12栅格 ， 并且分别采用了2等分、四等分、六等分、2:6:2:2 、 2:10。
『』手把手教你做规范：布局规范
本文插图

4. 边距Margin
栅格宽度外的边距 ， 通常做自适应的距离 ， 例如：小屏和大屏之间做响应 ， 就会改变边距 。
『』手把手教你做规范：布局规范
本文插图

5. 栅格宽度 Container
栅格宽度是需要栅格设计区域的宽度 ， 不是显示器宽度 。
『』手把手教你做规范：布局规范


推荐阅读


上一篇：「iPhone」关于iPhone订阅一连串问题，苹果官方长图解疑

下一篇：「伊隆·马斯克」让马斯克“低头”的国货之光：不是世界第一，我们没有存在的价值