本文写于2022年8月24日，后来我给忘了，周六给一个孩子讲设计想起来了，找了好半天，原来是写在一个回帖里了，把它挪出来单独发一个贴子吧
9.0 预览版试了，新建页面时的页面模板太好用好，而且用页面模板创建的页面，列宽和行高是32，大笑，这是官方明确表达支持32栅格系统了，我把这个回贴重贴一遍。
早在平面设计开始之初，就有对“栅格”的使用记录了，不过那时不叫栅格，而叫网格。其实网格这个概念你一定见过：
这是 Word 的段落设置。那这个文档网格在哪儿呢？
早在1692年，内年是清圣祖康熙三十一年，小玄子那年都三十九了，韦爷那年也有三十六七了。说这年新登基的法国国王路易十四，是14啊，上断头台内位爷是16号，这位爷是14号——法国人全按编号排大小个儿——今日乳法完成。
说这位爷不满于法国当时印刷水平，命人成立了管理印刷的皇家特别委员会。旨在设计出科学的，合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，你注意啊，这里头这个数字，64，这个数可是2的倍数。然后，在64个基本方格单位的基础上，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的排版，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。
你看，先分64，再分36，最后得到了2304个小格子——这不就是活字格的页面嘛？
再后来，20世纪初，平面设计师们发现通过维持视觉秩序，能使版面更加清晰有效地传递信息，由此便逐渐演变出一种平面设计的方法，直到20世纪40年代后期，第一次出现了使用网格进行辅助设计的印刷作品。
这里给大家推荐一本书，由瑞士设计师大师Josef Müller-Brockmann（约瑟夫·米勒-布罗克曼）所著的《平面设计中的网格系统》一书，自1961年出版以来畅销至今，对设计界有着深远的影响。史称瑞士新浪潮平面设计运动（Swiss Typography Movement），后来成为风靡全球的国际主义设计风格（International Typographic Style）。
布爷1996年就过世了。这本书2016年上海人民美术出版社出版了，现在应该还能买得到，电子版网上也有，有心的可以找找看。
说了这么多，可能大家还是对网格系统没有一个认识。我问你，你做过 PPT 吗？好，你做PPT的时候，封面页上一般都会有一个 LOGO 吧，可能是你企业的标，或者你学校的校徽，或者是产品的 LOGO，对吧？然后我问你，这个 LOGO 标志，你要放在什么位置上呢？这个 LOGO 要多大呢？
可能很多小伙伴们就说了，差不多就得了呗，哎，你听，差——不——多，咱干什么事儿都是这态度吗？都差不多吗？
那不差不多又能怎么样呢？一个标，放哪儿，多大，那不就是看着办吗？那不看着办还能怎么办啊？
能啊，有办法啊，只不过老师没教过啊，这就是前面说了这么多的——网格系统，我放一张图你一下子就明白了：
我在页面上放了一个 12 × 8 的网格，然后，标志的大小，标题的大小、位置就都很方便地确定了，要么放到行列当中，要么对齐到一个交点上。
这就是网格。
让我们来做个游戏。
左边是一张纸，我在上面点了一个红点。如果我不给你左边的这个原版的样张，你要怎么才能精确地在右边的白纸上把我这个红点复制出来呢？
现在呢？
只需要借助一个小小的工具，而这个工具，就是网格。其实你想想，还有个我们常见的东西用了网格，那就是地图，经纬度就是网格。这个思路一旦打开就好办了，疫情常态化后我们是怎么控制疫情的？网格化管理对吧？
设计本身都是相通的，有了网格的概念后，其核心思想用在图标设计、网页设计、B端设计当中都有着明确的指导意义了。
而在设计一些诸如网页端、桌面端的产品时，对于空间上的理解，一直以来都是令人头疼的问题。为什么这么说呢？因为我们要适应的是屏幕，而屏幕的长宽比和书籍的长宽比刚好是反的。
屏幕中的设计空间天然的就可以分为 横向 与 纵向 两个维度：
首先说横向上的事儿。
由于大多数显示器都是宽屏的形式，这导致了一个结果，就是我们在排版时，不得不分列排版，而不是从左至右贯通。
那么这是为什么呢？其实很简单，行太长，人会看串行。为了保证不看串行，人眼和人脑要分出一部分处理时间来不断进行修正，而这严重影响了阅读的效率，而且导致阅读起来人会更容易疲劳。因此，横版的，也就是宽 > 高的屏幕，我们在排版时都会分成若干列来排布内容。
既然横屏分列排版，那么为什么竖屏没有分行排版呢？要看串行都会看串行啊，竖着排就不需要也分成一节一节的吗？
不需要啊小傻子。为什么不需要呢？有自然段啊，自然段就帮我们“分行”排版了呀，你弄1万字不分段在手机上滑屏试试看，滑几次你就看背过气去了。这就是为什么鼠标滚轮只能控制屏幕内容垂直滚动，不是没有水平滚动的鼠标，但是为什么没有成为主流呢？不是没有人想到，而是大家不接受。因为有段落的存在，因此垂直方向天然的就有阅读的换气点，而水平方向上则没有，因此，横屏必须要分列排版。
然后我们横屏的尺寸还特别多，常见的有1920、1440、1366、1280等等，而怎样将如此多的尺寸，摆放不同的元素，这才是设计的难点。
而在纵向上，屏幕的纵向的空间同样十分关键，当内容在横向无法满足时，则会增加屏幕纵向的内容量。但是我们可以通过浏览器的特性，纵向的内容通过滚动条进行收折，进而实现兼容。
所以，在网页排版上，横向和纵向的困难点是不同的。差别在哪儿呢？横向上，我们要想着怎么切，怎么切才能让人看着舒服。纵向上，我们要想着怎么堆，怎么堆才能有逻辑，让人顺畅地读下去。
你看，一个切，一个堆，要解决的其实是视觉的问题，是不是这个问题和前面说的 PPT 的问题很像了？一个是多大？一个是放哪儿？这不也是视觉的问题吗？既然网格能解决多大和放哪儿的问题，我们能不能试着用网格来解决切和堆的问题呢？
于是，能够适应屏幕的栅格就孕育而生了。
那栅格到底是什么呢？咱们前面说了，名不正，则言不顺，咱得给栅格下个定义。
简单来说：栅格是通过规则的网格阵列，形成稳定的基础框架，来规范界面中模块的布局与信息元素的分布，辅助设计师组织信息的工具。
这个意思是说，栅格是一个工具。
看到这儿可能有的格小新就看迷糊了，你说的这个栅格，咱不是有吗？用活字格新建一个页面，这不就是栅格吗？活字格天然就有栅格啊，可是我还是不会做页面排版啊，我排出来的版就是不如超哥排的好看啊，这是为什么呢？
这是因为，有栅格，无系统。有格无统，一盘散沙。你得把格“统”起来呀，“统”起来不就形成系统了嘛，所以呀，栅格和栅格系统，是两回事。
那什么是栅格系统呢？
栅格系统是用于规范化信息布局，辅助设计人员组织信息的工具，且能够尽可能保证设计与开发过程的规范高效，并提高布局视效的一致性、韵律感、秩序严谨、比例良好等方面。
这俩有什么区别呢？栅格系统源于栅格，但是栅格系统规范的是布局，而栅格仅仅是一个阵列，是一个基础框架。虽说这俩都是工具，但栅格是“器”，栅格系统在“器”的基础上，开始论“道”了，二者的层次不一样。栅格是一个具体的工具，能够解决元素的对齐、排列等简单的视效，而栅格系统跳出了基础元素的层次，开始考虑元素集了。你这样想象，栅格是二维的，栅格小人只知道长和宽，只认识长方形和正方形，而栅格系统是三维的，栅格系统小人比栅格小人多了一个维度，所以栅格系统可以用上帝视角来看栅格小人。
这可真叫掰开揉碎了一口一口喂了啊，再听不明白我也没辙了。
我们说栅格系统是从平面网格系统中发展而来，栅格与网格的本质其实是相通的。那么有同学会问，两者区别在哪呢？
在平面设计中，网格应用的媒介一般为固定的纸张规格，宽度和高度都是固定的，网格的划分方式是一个个等分的方格。
而在UI设计中，栅格宽度受设备宽度变化而变化，高度由内容多少来决定。因此设计时只需制定纵向的分割规则，以规范纵轴方向内容的对齐、间隔等元素的排布，这也是我们看到栅格往往都是一列一列呈现的原因。
好了，栅格系统的基本概念我们就说这么多，下面，我们要聊的就和前端的栅格系统不太一样了，因为我们要聊一聊活字格的栅格系统了。
的确，活字格天然就带栅格，官方的栅格是 20 × 20，单位是像素。但是，这真的是一个好的选择吗？2021年12月，顶着疫情到西安参加了活字格的研讨会，会上欣喜的发现，夏超总——我们敬爱的超哥的页面，行高和列宽是 32。为什么说是欣喜呢？因为我用活字格开发时，也把默认页面的行高和列宽设置为了 32。
这不是巧合。
为什么是 32 呢？当然还是因为屏幕的关系。PC端——这时候我们要说端了，因为移动端和PC端真的完全不一样——的屏幕分辨率，水平方向主要有以下几种：
800，1024，1280，1366，1440，1600，1680，1920，2048，2560（2K屏），4096（4K屏）
带鱼屏没有列进去。我们的栅格系统，要能适配这么多种分辨率，那要怎么定义栅格呢？20像素真的是一个好选择吗？
我们会发现，很多屏幕的水平分辨率都是2的若干次方，那么最好我们的栅格的基数也是2的几次方才最容易适配。而官方的 20 像素，虽然是偶数，是2的位数，但是不是2的幂数。你别跟我说你把幂忘了啊，幂是指数运算的结果。
那我们找一个2的幂好了。2，4，8，16，32，64，128，256，512，1024，2048，4096……
和官方的20像素最接近的是16，但是为什么超哥和我不约而同地选择了 32 呢？
那我反问一句，为什么不是 8 呢？你可以自己试试看，在活字格设计器的一个页面上的左上角单击，把页面全选，然后分别在行号和列标上点右键设置行高和列宽为 8，在100%显示比例下，你试试看是什么效果。
我们是要做一个栅格系统，不是拌饺子馅，我们要取“整”，不是要剁“碎”。
32 像素向下切分，可以切分为 16 像素，还可以再向下切分，再切成 8 像素，而官方的 20像素向下切分，可以切出10像素，但是如果从10像素再向下切分，就会切出 5 像素来，而 5 像素你在100%显示比例下，这一列你是选不中的，不信你就试试。
所以，32 像素可以向下切分2次，而 20 像素只能向下切分一次。
可是，我为什么在强调向下切分几次呢？
因为在网格 / 栅格系统中，只有三件事：排列，对齐，间距。
在前端设计语言中，间距被称为亲密性。如果把 32 像素定义为栅格标准，那么 32 像素就是标准间距；而如果要表示内容间更密切的联系，我们可以在32 的基础上缩小一半，用16像素来表示亲密性关系；如果比亲密性还密切，我们还可以再向下切一级，把间距设置为 8 来表示紧密，而行高和列宽设置为8像素时，我们仍然可以在活字格设计器中的 100% 显示比例下单击列行号和列标来选中行或列。
此外，我要没理解错的话，我们页面上的一个单元格，生成网页后会是一个 div，格子越多当然div也越多。而 32 做为基础栅格，即不会过小，也没有那么大，向上可以翻成64，128和256，向下可以切成 16 表示亲密，8 表示紧密，甚至可以切成 4 表示紧凑。
这——就是 32 栅格系统的秘密。
有了 32 像素做为基础栅格尺寸后，我们就可以进行一些相对比较粗线条的约定了：
- 采用 32 栅格系统，即基础行高列宽为 32 像素（ px ）；
- 页面的行与列的高度和宽度必须为4的整数倍；
- 列宽的约束性高于行高的约束性；
- 当行内包含组件，或该行是表格标题行或者是模板行时，行高可以不拘泥于 32 px 或 40 px 的约束，但仍应遵循行高为 4 px 的整数倍的约束；
有了这些基本共识，我们就可以进一步细化了：
栅格
- 采用 32 栅格系统，即基础行高列宽为 32 像素（ px ）；
- 页面的行与列的高度和宽度必须为4的整数倍；
- 行高可以不拘泥于 32 栅格的约束，但是仍应遵循 4 的整数倍的约束。
亲密性
- 使用间距表示亲密性；
- 亲密性分为四级：标准，亲密，紧密，紧凑；
- 标准级亲密性为基础栅格的宽高；
- 各级亲密性按照基础栅格的50%递进。
适应性
当行内包含组件时，可以不受基础栅格的约束，允许根据前端 UI 设计的需要，采用 40 px 、48 px 等行高设置。但仍应遵循行高为 4 px 的整数倍的约束；
有了这个细化的原则，我们就可以出规范了，比如：
基础行高和列宽为 32 像素（px）；
亲密性内容的间距为： 16 px；
紧密性内容的间距为： 8 px；
紧凑型内容的间距为： 4 px，（不推荐）；
页内部边距为 16 px；
表格标题行行高为 40 px 或 48 px，同一应用内表格标题行行高应保持一致；
表格模板行行高为 40 px 或 48 px，同一应用内表格模板行行高应保持一致；
页面隐藏区中的表格受限于显示区行高和列宽，不受约定限制；
操作面板（查询或功能等）独占行时，行高为 40 px 或 48 px，同一应用内同类型面板的行高应保持一致；
按钮 / 按钮组 / 按钮组件 独占一行时，行高为 40 px 或 48 px，同一应用内的行高应保持一致。
这样，我们就从大的原则，一步一步细化到了具体的规范了，然后，有了规范，就可以指导我们的行为，你看，从理论到原则，从原则到标准，从标准到规范，我们的栅格系统不就一步一步搭建起来了吗？
这个规范越来越卷——不是，是越写越详细，这也太多了不好看啊，那你分组啊，在规范下面再分组啊，你家里打个厨柜你还知道分层呢不是？
基础 / Basic
基础行高和列宽为 32 像素（px）；
布局
页面布局以 1280 为基准，以适应大多数用户；
不同的应用，可以依据其用户群的特征，适当调整页面的基础宽度，但是应以主流显示器分辨率为依据；
页面高宽比应为 16:9 或 16:10；
B端顶栏高度为固定高度 64；
B端中/后台左侧导航/菜单栏宽度为固定宽度 256；
内容区（页面占位区）应向右侧延展。
亲密性
亲密性内容的间距为： 16 px；
紧密性内容的间距为： 8 px；
紧凑型内容的间距为： 4 px，（不推荐）；
页面
页内部边距为 16 px，如下图所示：
页面通常应当有页头，页头位于页面顶部，与内容共同组成页面，如下图所示：
页面各组成部分，应当由背景色块进行视觉分割，实践中，可将页面全部衬底色，然后在底色背景上层分别用浅色块进行视觉切割；
背景色块的圆角 R = 8；
背景图片/色块的命名应包含背景图片/色块、图名/色值、圆角值（如果有），并使用“_”分隔；
表格
表格标题行行高为 40 px 或 48 px，同一应用内表格标题行行高应保持一致；
表格模板行行高为 40 px 或 48 px，同一应用内表格模板行行高应保持一致；
页面隐藏区中的表格受限于显示区行高和列宽，不受约定限制；
面板
操作面板（查询或功能等）独占行时，行高为 40 px 或 48 px，同一应用内同类型面板的行高应保持一致；
按钮 / 按钮组 / 按钮组件 独占一行时，行高为 40 px 或 48 px，同一应用内的行高应保持一致。
行了，剩下的就是怎么卷了
（活字格的栅格系统，全文完）
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
