项目文档管理工具开发实践

考虑到楼可能比较多，我把上传的工程文件放在最上边了，方便大家下载

0001_白泽_8.0.4.0.fgcc (4.71 MB, 下载次数: 82)

2022-8-23 00:06 上传

点击文件名下载附件
0002_白泽_8.0.4.0.fgcc (4.71 MB, 下载次数: 81)

2022-8-23 00:06 上传

点击文件名下载附件
0003_白泽_8.0.4.0.fgcc (4.71 MB, 下载次数: 97)

2022-8-26 10:19 上传

点击文件名下载附件
0004_白泽_8.0.4.0.fgcc (4.72 MB, 下载次数: 142)

2022-8-27 20:36 上传

点击文件名下载附件

------------------------------正文-------------------------------

项目文档管理，是指在一个系统（软件）项目开发进程中，将提交的文档进行收集管理的过程。通常，文档管理在项目开发中不是很受重视，当发现其重要性时，往往为时已晚。整个项目可能因此变得管理混乱，问题产生后无据可查。文档管理对于一个项目的顺利进行有着至关重要的作用，其关键性不容忽视。

这话不是我说的，这是度娘说的：项目文档_百度百科 (baidu.com)

可是吧，我们用活字格开发，这个开发文档就是个大问题。活字格和传统的开发不同，她是自成体系的。以前我们传统开发是基于文件的，我们可以随意在开发目录里放文档，可是活字格开发是基于活字格自有的工程文件的，虽然这个工程文件本质上是一个 zip 压缩包，格小新们可以自己试一下，把活字格的工程文件的扩展名改成 .zip，然后你打开这个 zip 包，那些少儿不宜的东西就啥都看见了——住手！你还真改扩展名啊你，听相声在这儿，作死去Wyn内版！

对于格小新们来说，还是要养成写文档的习惯。其实我废这么多话呢，主要是说给格小新们听的，我就是想着干的年头不短了，经验不敢说有多少，咸盐倒是吃了不少，能多说点儿就多说点吧，等哪天我们咽了气了想听还听不着了呢，大佬们的时间宝贵，不用听我这儿闲扯淡。

项目文档啊，除了指导开发，它还是个积累。格小新们用活字格，错误那是没少犯。没少犯是没少犯，问题是同样的错误没少犯。犯了再改，改完再犯，千锤百炼。这要是能在活字格的工程文件里能把项目文档含着，项目开发的全过程都可以跟着记录，然后开一个新的项目工程，还可以把这部分导入到新工程中，这能省好大事啊，而且这做出来的东西它规矩不是？

但是用活字格开发，你说这文档我写哪儿？写 word 里？团伙做案怎么办？不是，我的意思是团队开发，团队开发，嘴秃噜了。一人写一部分？那怎么拼起来呢？然后更新怎么办呢？这是开发文档，不是起点小说还有个断更一说，开发文档一天能更新八百遍！用钉钉或企业微信传来传去吗？你知道传的是哪个版本的？写 git 上呗，是可以，但是，它不方便啊，传统开发还好，就在开发的目录里专门建一个文件夹，起个名字叫 docs，然后文档都放这里，往 git 上一传完事，保证丢不了。可是活字格不行啊，活字格有协同开发啊，协同开发把 git 直接包起来了。还是写到语雀上？写石墨上？要不刻脸上？



你写单元格里呀，每个单元格都能写备注啊。列位，您听这像话吗？写单元格里，我写哪单元格里呀？这一格一格的这不都写碎了吗？我写的是文档啊写的是胡椒面啊？

有写胡椒面的吗？

写页面上行不行呢？当然也不是不行，可是，你自己试试就知道了，那叫一个酸爽，你想这个道理呀，有拿 excel 当 word 用的吗？你能拿改锥楔钉子，你能拿榔头拧螺丝吗？什么工具干什么活。

那要都没有，咱就得另想辙了。

文档的内容我其实可以写在数据表里啊，然后我只要做一个维护的页面，能把表的内容读出来，还能再写回去，这不就得了吗？开发的时候，我需要写文档了，我就把这个维护的页面设置成启动页，然后按一下 F5，就可以写了，写完了保存，回到设计器里继续开发就行了。

文档我是可以写数据表里，可是交互页面上的编辑器用什么呢？用官方的富文本编辑器？这东西吧，不是不能用，嘿嘿，谁用谁知道……

万幸，咱格友 lovert 做了这个 EditorMD插件 ，终于可以在活字格里舒舒服服地用 markdown 写文档了，让我们向 lovert 表达最衷心的敬意和最诚挚的感谢。

这家伙什儿都全了那还等什么呢，开整吧就！您先等会。

这个小工具要叫什么名字呢？

这还有什么名字啊，就叫活字格文档工具啊。您瞧瞧，张嘴就来。这就是项目思维。那甭管谁做的这类的工具不都能叫活字格文档工具吗？那大家要都叫这个，这不就叫乱了吗？咱换一个，咱在项目思维中带入一点点产品思维，咱用做产品的心态来做这个项目。那要是做产品，你这产品可就得有名字了。项目可以没有名字，就叫什么什么项目就行，产品没名字可歇了，所以，得先起个名字。

其实一个项目啊，也应该跟产品一样，从起名字开始，格小新们也要学会起名字。比如你们也都了解活字格，活字格开发的系统登录后，进入的第一个页面，是启动页是吧，但是我要分权限，不同角色权限的人看到的页面不一样，这怎么办？我参考别人的方法，提出了一个名词：首页路由，这个概念很快咱们团队里的人就都接受了，因为大家都能理解。孔子说名不正则言不顺的意思不仅仅是说名义、道义要正，这个“名”也是名称、名字，一件事，你不把这件事起个名字，你就不容易叫它，不容易叫它这个事儿就办不成。

你们看美国电影，是不是特种部队行动时都要起个名字？什么剑鱼行动，雷霆行动，勇者行动，送死行动，要么就给一个行动代号，为什么？因为好叫，互相之间也好理解，也好交流好沟通，即简捷还没有歧义。所以，你们要是当产品经理，一个功能点一定要起个名字。你们逛过宜家吗？宜家是不是所有的产品都有一个名字？我想买一个嗑毛豆专用的小方桌，你上淘宝上怎么搜啊？你搜小方桌？长什么样的都有，把方青卓搜出来都有可能。



可是你要按照产品的名字搜呢？是不是搜出来的结果就靠谱多了？
再​比方说，要在列表页上，在名字的右侧，显示一个箭头，如果排名比昨天上升了，就显示红色向上的箭头，如果下降了就显示绿色下降的箭头，产品经理把这个功能释放了，开发做了，过程中产品问进度时可咋问？

​内个功能做完了吗？哪个功能？就是那个箭头的功能？啥箭头？现实是不是就是这个样子的？可是产品经理在释放需求时如果定义了，这个功能就叫列表红绿灯，是不是大家就都好沟通了？这叫名不正，则言不顺——说的不顺畅嘛。

顺便讲一下名不正则言不顺这个典故。这话在春秋战国之时，有一位莽撞人。

死人姓仲名由字子路。

子路曰：卫君待子而为政，子将奚先？子曰：必也正名乎。子路曰：有是哉？子之迂也。奚其正？！

子曰：野哉！由也。君子于其所不知，盖阙如也。名不正，则言不顺；言不顺，则事不成；事不成，则礼乐不兴；礼乐不兴，则刑罚不中；刑罚不中，则民无所措手足，故君子名之必可言也，言之必可行也。君子于其言，无所苟而已矣！

这是说啊，在公元前485年，66岁的孔子抵达卫国。此时的卫国正面临内乱的前夜。卫灵公有个很宠爱的小老婆，就是大名鼎鼎的南子，言听计从的。但卫灵公的儿子蒯聩，这个字读kuǎi，却对这个后妈怎么看，怎么讨厌。甚至企图发动政变，干掉这个后妈。事情败露后，蒯聩逃往晋国。卫灵公大骂蒯聩不孝，断绝父子关系。

卫灵公死后，将君位传给自己的孙子，也是蒯聩的儿子，就是后来的卫出公。卫出公刚继位，他父亲蒯聩也带兵从晋国跑回卫国，军队正驻扎在卫国边境，准备和自己的儿子争夺君位。

此时正在卫国的孔子，正面临卫国如此的局面。

子路跑来见孔子。父子争夺君位，老师你怎么看？孔子就在这种背景下，说出了著名的: 名不正则言不顺，言不顺则事不成。什么意思呢？孔子的意思是，一个君位难道能大过父子间的亲情吗？父子不能和解吗？

子路一听就笑了。老师啊，你为什么这么迂腐？我就支持卫出公。孔子真的生气了，他告诉子路，你参与卫国内乱，你不得好死。其实孔子这真不是在骂子路。孔子这是预见到了子路的命运。

卫国内乱前夜，孔子最终返回鲁国，结束了其14年周游列国的历史。但子路没走，留在了卫国。子路的结局大家都知道，最终被蒯聩的武士，剁为肉泥。卫出公逃亡鲁国。

你们注意啊，史书是很严谨的，剁为肉泥，就是字面的意思。

子路遇害消息传到鲁国。孔子痛哭流涕。子路何等人物，是孔子的学生兼保镖，亦师亦友，一逗一捧，30多年的感情，两人不离不弃。从此以后，孔子再不吃肉酱。这回明白了吧？剁为肉泥就是字面的意思。

这是名不正则言不顺的背景。这是从政治层面说的。

这叫师出有名，大到改朝换代，小到去单位办事，你得拿个介绍信吧？你啥也没有我知道你是干嘛的？这些都是名不正则言不顺。

当然这是政治上的，那我们理解论语，不能这么简单地去理解。这句话在哲学层面上，就是一个事物如果没有给出一个准确的定义，你就讲不出它内在的道理，讲不出内在的道理你就没法按照它去解决问题。

用数学的角度阐述：一个概念定义不清晰，那就无法证明和阐述清楚跟它有关的一切理论，也无法用它解决实际问题。

咱们用活字格做开发，从起名字开始，因为名不正，则言不顺。

这要叫什么名字呢？我得分析这个货是干什么的吧？你看，起名字，也是你在梳理需求，明确项目的目标的一个过程。这个小工具是写项目文档的，活字格的所有项目文档都写在这里，然后把文档内容记录到数据表中，将来开发过程中有遗忘，上这里找，万一做着做着矫情起来了，看文档。这是上古神兽白泽啊！

白泽不知道？山海经里有啊，这是中国古代神话中的瑞兽啊。《宋书·符瑞志》记载说啊，这话说在黄帝时期，说黄帝东巡，这一天到了滨海新区，一过于家堡啊，哎，遇到一头神兽白泽，白泽是祥瑞之兽，能口吐人言，通万物之情，知鬼神之事，晓天下万物状貌。就说这白泽，嘛都懂，这不就是项目文档吗？

所以，这个小工具的名字就有了，就叫白泽了。

真要开始干了，先要明确三件事儿：范围、时间、成本，熟悉项目管理的都知道，这是项目管理三基准。为什么要这三基准呢？这事儿你得定下来呀，要不万一黄了呢？这三基准就是帮助我们把这个事儿明确地定下来的。

先说范围，就是你要做多大。慢着，先别说做多大，先说做多小。那要做多小呢？先做一裤衩版——这怎么叫的这么央脏呢，什么叫裤衩版哪？这裤衩版哪，学名叫 MVP，意思是最小可行产品，是 Minimum Viable Product 的首字母的缩写。这个昂撒匪帮吧，没文化就在这儿呢，他用缩写。他也不想想，他就26个字母，咱们汉语光常用字就3000，汉语能用缩写，他26个字母也用缩写，你这么缩写这不缩重了吗？所以你们搜MVP，会搜出 MVP开发模式，还能搜出NBA最有价值球员，就是搜不出最小可行产品。可是你要就叫裤衩版呢？保证一搜一个准，保证没重名的。

裤衩版有两个意思，一个意思是该有的必须要有，再少就涉黄了，另一个意思是该露的一定要露，也就是不该有的一定不能有。这个裤衩跟于老师的丁字毛裤可不一样。一个是你扒开裤衩才能看见屁股，另一个是你扒开屁股才能看见裤衩。



格小新们要认真体会这里面的辩证关系。



我们做项目，当然是一鼓作气，格小新们刚刚接触了活字格，也往往是意气风发，恨不能马上就做出一个淘宝出来。冷静，这个时候一定要冷静下来，先别想着淘宝，先想着怎么逃命吧。为什么这么说呢？项目万一烂尾了，被甲方追杀亡命天涯的日子，恐怕有的人就经历过吧？所以，咱用产品的思维来搞，什么思维呢？叫小步快跑，苍蝇也是肉，屁和（hú）也是和，和龙牌的不一定赢钱，真正赢钱的是屁和的，这叫一路小屁，走向胜利。

项目思维和产品思维的区别在哪儿呢？一个是毕其功于一役，打会战，阵地战，比如斯大林格勒保卫战、辽沈战役这样的会战，另一个是小刀剌肉，打运动战，麻雀战，但是，每战力求歼灭。格小新们不要想着一下来就搞一个大的，搞不了的。


想的时候，能想多大想多大，做的时候，能做多小做多小，这才是适合格小新们的精髓。



看了吗，起步要稳，慢慢做大做强。



我们说产品思维，不要只会做加法，更要学会做减法。

于是，我今天上午临下班的时候，花了不到半个小时，做了这么一个小裤衩。是，这个小裤衩是太小了，比如说，没办法添加记录啊？那你在设计器里加啊，类似的问题肯定多了去了，但是有一点，它能用！

这是 MVP 最关键的，也是最容易被人忽视的一点：能用！

这个小裤衩，我就用了一个数据表，一个页面，它不象官方教程那样，是一个完整的系统，她就是一个小功能，让你可以嵌入到你的工程文件中，解决你项目文档管理的问题。

但是你别看她小，用到的知识点还是有一些的，比如，我用了插件，插件的知识你得有吧？还用了 odata 公式，还有选择器、文本框等等。

这个小裤衩我会一直维护下去，当然只会用业余时间维护了，然后我每一次迭代，都会把工程文件发出来，格小新们更容易对比出来不同版本之间的差异，我希望能把敏捷开发的种子给格小新们种下去，然后一点点浇水，慢慢等她发芽。

当然了，BUG也肯定有，老司机开车也会熄火，这不丢人，改 BUG 也是进步。

好了，我下面先放出来第一版，散了散了，骂闲街的那个，买票在门口，退票口在阿富汗，不退票是本公司的宗旨，去吧，外边骂去。

0001_白泽_8.0.4.0.fgcc (4.71 MB, 下载次数: 80)

2022-8-22 23:27 上传

点击文件名下载附件

第一次迭代，版本号升到0002

上午快下班的时候做的，晚上一看，到处都是错，把几个主要的错误修正了

这一版主要改了这些地方：

1. 修改了页面的标题
2. 数据库里增加了两条记录
3. 修正了文章编码、文章标题、作者和左侧树型图的取值错误
4. 增加了版本
5. 开始撰写更新记录


0002_白泽_8.0.4.0.fgcc (4.71 MB, 下载次数: 92)

2022-8-23 00:12 上传

点击文件名下载附件

赞

这格局 这文采 必须点赞；再看看时间这敬业 必须赞中赞！！！

工作30%，文化70%，这个是现代工作的常态，终于有大佬诠释了这个状态。

年度最精彩发帖

学习~~~~~~~~

顶

晚饭前一点时间，跟大家聊聊关于栅格系统的事儿。

早在平面设计开始之初，就有对“栅格”的使用记录了，不过那时不叫栅格，而叫网格。其实网格这个概念你一定见过：


这是 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，同一应用内的行高应保持一致。


行了，剩下的就是怎么卷了

（活字格的栅格系统，全文完）