画板|一个好用的智能栅格工具是如何诞生的？( 二 )

这是第一层，设计穿透了栅格布局计算公式。
三、智能栅格：动态响应规则设计当初步完成上述的栅格显示，下一步就是要允许用户自定义栅格参数。这就立即带来了一个问题：修改栅格公式中的某个参数，其余参数应该如何相应？
事实上，在上一部分讲到的栅格计算公式只是一个简化版本。因为我们没有展开栅格宽度的计算公式。完整的计算公式应该是这样（以左右布局为例）：
画板宽度 A = 左侧偏移宽度L + 两侧间距M 2 + 栅格列数L 栅格宽度W + （栅格列数L – 1）* 栅格槽宽T
如果照着这个公式去思考，我想是个人头都要大了，一个参数变化，需要考虑其他 5 个参数的相应。其实我在第一步分析公式的时候，就是这么列的，结果就是很难往下推进开发，公式太过复杂，不知道如何算。
所以我又回过头来思考了下栅格修改的场景，发现修改画板、偏移宽度等总宽值时，用户对栅格内部的状态不会太关注。所以针对总宽的参数，我们就应该使用这样两个公式：
左右布局：画板宽度 A = 左侧偏移宽度L + 两侧间距M 2 + 栅格总宽G居中布局：画板宽度 A = 两侧间距M 2 + 栅格总宽G
再结合栅格修改时设计师的设计意图判断，我从中总结了 7 条规则：
在左右边距模式下：

修改画板宽度 A 时，往往希望栅格总宽 G 变化，即 A?? ~ G??；
修改左侧偏移宽度 L 时,往往希望栅格总宽 G 变化，即 L?? ~ G??；
…. (更多的就不列了)

到这一步，我只是理清楚了总宽类参数响应规则，但是还没有对栅格内部的参数进行分析。接下来就需要对栅格总宽的计算公式进行下钻分析。
栅格总宽 G = 栅格列数L 栅格宽度W + （栅格列数L – 1）栅格槽宽T
按照同样的思路，我得出了4条规则：

修改栅格总宽 G 时，往往希望栅格宽度 W 变化，即 G?? ~ W??；
修改栅格列数 L 时，往往希望栅格宽度 W 变化，即 L?? ~ W??；
修改栅格槽宽 T 时，往往希望栅格宽度 W 变化，即 T?? ~ W??；
设计师几乎不会去主动修改栅格宽度；

当总结完以上11 条规则时，在设计端上我有两个新的认知：

修改布局和修改栅格应该分两个部分分别呈现；
不必给出修改栅格宽度W的配置项。

所以在设计端最后的配置参数呈现如下（基本验证了第二版设计方案的正确性）

文章插图
而将上述这 11 条规则结合起来，并通过代码实现后，栅格就具有了智能动态响应的效果。由于这11条规则直接来源于设计师的认知经验，可以基本保证用户的使用体验如丝般顺滑，仿佛背后不存在设计一样。

文章插图
这是第二层，设计穿透了栅格变更的响应规则。
一个小插曲：在最初的时候（大约是Microwave 0.3.1），我走进了一个误区，在栅格总宽变化时，让栅格宽度和栅格槽宽等比缩放。结果带来的问题就是：每次修改完栅格总宽后，都需要人为手动地重新修改一遍栅格槽宽。由于我对响应规则判断出错，导致使用体验存在不必要的冗余操作，这就是一个规则考虑不周的典型反例。
四、栅格生成：简洁与易用的妥协与平衡利用 Sketch 的JS API，我很快就实现了栅格的创建。如下左图所示，是不是看上去非常简洁？但是你有没有看出其中的问题？