流体发动机开发

[rumiseoexpate5]

上个月，我们发布了十年来对我们核心网​​站编辑体验的最大改变：Fluid Engine，我们最新的拖放式编辑器。Fluid Engine 是对 Squarespace 现有编辑系统的重新构想，它大大提高了在页面上布局块的可用性，同时释放了新的设计可能性。我们希望依靠熟悉的移动和调整大小范例，实现对布局的自由控制，同时避免与绝对定位元素相关的常见陷阱。这篇博文介绍了我们如何实现这一功能，并介绍了开发此功能的一些核心技术和用户体验问题。

流体引擎网格，带有图像、按钮和文字，上面写着“随心所欲地构建您的网站”
研究与理解
2021 年 2 月，我们完成了为期六个月的 多米尼加共和国 whatsapp 号码数据 5 户研究，致力于深入了解如何提高编辑器的可用性。我们发现了三个主要机会：在现有的拖放体验布局引擎中移动、调整大小和对齐块。

布局引擎是一个由行和 12 列组成的系统。行跨越多列，一行内可以容纳尽可能多的列，只要它们的跨度总和等于行的宽度。列可以包含一堆块或行，但不能为空（0 宽度或没有块）。这可以无限嵌套，同时保持宽度和跨度加起来等于其父级宽度的关系，加起来等于根宽度 12。如果不添加“间隔块”，就无法垂直间隔开块。



展示布局引擎的嵌套行和列结构的图表
这种结构允许用户快速创建各种布局样式。但是，它会导致用户对上面列出的功能感到困惑：移动、调整大小和对齐块。具体来说，由于结构和不变性，涉及这些操作的大多数场景不仅仅是用户与之交互的块。

Gif 演示了在布局引擎中拖放时意外的布局偏移
这是一些用户的主要痛点——移动和调整大小会带来不确定性，从而导致布局意外。这种洞察力催生了我们的主要目标：移动、调整大小和对齐单个块不应影响其他块。这些操作需要可预测，我们可以通过使它们独立来实现这一点。