智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)

编辑导读:产品设计的穿透力怎么表现?穿透意味着打破界限,从表面到内核,从表象到本质。需要把一个点打穿打透,需要的不仅仅是一个乌托邦的幻象,更多需要深入到 real world 当中,感知更多的限制、连接。本文以智能栅格工具的设计开发为例,来看看怎么表达设计的穿透力。

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(1)

今天想和大家分享一下智能栅格工具的整个设计开发的过程,并从中感受到设计的「穿透力」。

什么是穿透力?穿透意味着打破界限,从表面到内核,从表象到本质。需要把一个点打穿打透,需要的不仅仅是一个乌托邦的幻象,更多需要深入到 real world 当中,感知更多的限制、连接。

一、初版方案与实现思路

经过初步讨论后的第一版设计基本可以作为 demo 开发,但是存在一个不明确的地方就是居中按钮。

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(2)

这个方案的设计完全借鉴了 Sketch 的布局界面,但是 sketch 的这个居中按钮其实挺令人匪夷所思的,往往不知如何使用。

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(3)

经过一番讨论后,我们一致认为这个按钮应该放在栅格总宽边上,表示需要对栅格进行调整。同时为了便于预览,最好给栅格预览区加上相应的宽度值,大致如下:

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(4)

以上是我们作为设计师的视角,经过两轮讨论,得出来的设计结果。到这一步,我们都可以认为这个版本算是一个合格的栅格工具。

然后我作为工具的实现方,我准备先大致明确开发顺序。在这个窗口的实现上从易到难,应该为:静态栅格实现->栅格响应实现。

所以我决定开发顺序是这样:

静态栅格预览渲染 -> 栅格参数面板 -> 栅格动态响应 -> 生成栅格 。

二、静态栅格:栅格生成公式解析

绘制静态栅格包含两部分工作,第一部分是左右布局的栅格,第二部分是居中布局的栅格。

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(5)

我的思路是先确定一下左右布局和居中布局的计算公式,然后在实现的时候就可以有清晰的实现手段了。

在纸上一通演算,我突然发现左右布局和居中布局的计算公式其实是不一样的:

左右布局: 画板宽度 A = 左侧偏移宽度L 两侧间距M 智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(6)

所以在实现这个参数面板的时候,我们选择了使用选择器的方式呈现不同的布局模式,同时在居中布局下去掉了【侧边栏宽】这个参数。

到这个时候,我们再去对比 Sketch 的栅格布局面板,已经能够感知到明显不同了。而这一步,只是由于深入了一下布局栅格的计算规则带来的。

这是第一层,设计穿透了栅格布局计算公式

三、智能栅格:动态响应规则设计

当初步完成上述的栅格显示,下一步就是要允许用户自定义栅格参数。这就立即带来了一个问题:修改栅格公式中的某个参数,其余参数应该如何相应?

事实上,在上一部分讲到的栅格计算公式只是一个简化版本。因为我们没有展开栅格宽度的计算公式。完整的计算公式应该是这样(以左右布局为例):

画板宽度 A = 左侧偏移宽度L 两侧间距M 智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(7)

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

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(8)

这是第二层,设计穿透了栅格变更的响应规则。

一个小插曲:在最初的时候(大约是Microwave 0.3.1),我走进了一个误区,在栅格总宽变化时,让栅格宽度和栅格槽宽等比缩放。结果带来的问题就是:每次修改完栅格总宽后,都需要人为手动地重新修改一遍栅格槽宽。由于我对响应规则判断出错,导致使用体验存在不必要的冗余操作,这就是一个规则考虑不周的典型反例。

四、栅格生成:简洁与易用的妥协与平衡

利用 Sketch 的JS API,我很快就实现了栅格的创建。如下左图所示,是不是看上去非常简洁?但是你有没有看出其中的问题?

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(9)

问题就是:这些智能栅格其实是由一堆图层组成的。而在 Sketch 中,大家也知道,一旦成组之后,这些栅格图层就失去了非常重要的能力:吸附。一旦没了吸附,这个栅格工具就失去了大部分的意义。如果需要吸附,那么必须将这个组打散,这就会导致画板中平白无故会多出 20 的栅格图层。

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(10)

这个时候,你觉得应该怎么做?是为了简洁,忍痛割掉栅格吸附的能力?还是为了吸附的能力牺牲图层上的简洁?

综合考量,我给本来很简洁的面板多加了一个【吸附模式】切换器,打开这个模式后,不会对栅格图层进行编组,从而保持原有的吸附能力。通过这样曲折的方式了解决 Sketch 的这个问题。(这里又要骂一句辣鸡的 Sketch 了)

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(11)

这是第三层,设计穿透了 Sketch 的能力,绕过了已有的限制。

PS:在后来的迭代过程中,我发现了更上游的解决方案,所以后来又把这个模式取消了。

五、智能适配:栅格基础能力的升华

其实在完成上述那些功能之后,我自己感觉这个栅格工具已经接近“击穿”的状态,似乎没有更多更大快的地方可以优化了。但是,我仍然感觉到这个智能栅格工具并没有那么“智能”,仿佛围绕了这个“智能”做了很多很多的工作,但是就是还有一层纸挡在那边,没有捅破。

于是我与几位同学进行沟通,其中一位同学的一句话间把这层纸捅破了:“要是这个栅格能够帮我自动去匹配上栅格就好了。”我突然想到前端工程中很重要的一个能力是 lint,即校验与自动修复代码中的空格、标点等错误。

瞬间我的心中豁然开朗。栅格是什么?是布局的规范,同样应该也是校验与修复工具。一个合格的栅格工具,除了前面基础的栅格生成、修改、校验(相当于 Sketch 的吸附),也应该提供自动修复的能力。于是我连夜把这个功能实现了出来。

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(12)

这个能力的实现并不复杂,甚至非常简单(用了不到 30 分钟),但是对于整个栅格工具却是升华般的存在。

这是最后一层,设计穿透了平台的能力枷锁,带来了工具质的飞跃

在小组周会上演示这个功能时,大家都不约而同地鼓起掌来,足以证明这个能力有多被认可。

六、一点总结和感想

1. 设计的穿透力

越接近底层,需要掌握和了解的东西也越多,但另一方面,也带来了足够大的优化空间。如何全面分析和所有相关的限制条件,在这些限制条件下找出设计上的最优解法,我认为这就是设计的穿透力。

2. 工具与思维限制

工具不会限制人们的思考,但会潜移默化的影响人们思考的模式。 —— 前电脑时代的建筑图纸是什么样的?是怎么画成的?

曾经在知乎看到过上面这一句话,现在再复盘这个工具的设计开发过程中,我对这句话又有了更深入的体会。

因为 Sketch 只有吸附功能,所以在设计和开发的时候,我就完全被 Sketch 已有的能力牵着鼻子走,为了「吸附」功能,绕弯路实现了吸附模式,而没有去往上一层去思考出「适配」的能力。

事实上,在前端工程中,早已有 ESLint、Prettier 等自动约束和修正的工具。但是在设计侧似乎一切都在刀耕火种时代,工具链的贫瘠导致无法孕育出工程化的思想。

这种时候,打破思想限制的最有效的方式,就是多获得不同领域的信息输入。很有可能当前领域的问题,在其他领域已经有成熟的解决方案了。所以我也愈发感觉到交流的必要性。

3. 设计工程化

所谓设计工程化需要的是类似前端工程中一样的 lint 工具,能够对大到颜色、字体、字号,小到图层命名进行相应的约束与自动修复。

同时,工程化这个概念,也不应该靠大家喊出来、逼出来的。而是顺应时代的发展,自然而然的事情。TechUI 周会结束的时候,有人跟我说,“我之前觉得栅格没有什么用,但是你这个东西一出来,就立马觉得栅格好有用。”我想这就是所谓的自然发生吧。

4. 我们需要哪种布局

我们需要的真的是自由画布吗?至少从栅格这个工具来说,完全的自由反而是降低效率。如果能够给出一定的限制,反而会使得我们的设计效率提升。因为我们不必要关心三等分的组件,每一等分的具体值是多少,我们只需要关系是正确的三分了即可。所以限制不一定降低效率,有目的的限制反而能够提升效率。

智能对象快速栅格化(一个好用的智能栅格工具是如何诞生的)(13)

作者:空谷,蚂蚁集团设计师

本文由 @Ant Design 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页