Grid layouts are used by designers to spatially organise user interfaces when sketching and wireframing. However, their design is largely time consuming manual work. This is challenging due to combinatorial explosion and complex objectives, such as alignment, balance, and expectations regarding positions. This paper proposes a novel optimisation approach for the generation of diverse grid-based layouts. Our mixed integer linear programming (MILP) model offers a rigorous yet efficient method for grid generation that ensures packing, alignment, grouping, and preferential positioning of elements. Further, we present techniques for interactive diversification, enhancement, and completion of grid layouts (Figure 1). These capabilities are demonstrated using GRIDS1, a wireframing tool that provides designers with real-time layout suggestions. We report findings from a ratings study (N = 13) and a design study (N = 16), lending evidence for the benefit of computational grid generation during early stages of design.

中文翻译：

---

GRIDS：使用整数规划的交互式布局设计

设计师在绘制草图和线框图时使用网格布局在空间上组织用户界面。然而，他们的设计在很大程度上是耗时的手工工作。由于组合爆炸和复杂的目标，例如对齐、平衡和对位置的期望，这是具有挑战性的。本文提出了一种新的优化方法来生成不同的基于网格的布局。我们的混合整数线性规划 (MILP) 模型为网格生成提供了一种严格而有效的方法，可确保元素的打包、对齐、分组和优先定位。此外，我们还介绍了交互式多样化、增强和完成网格布局的技术（图 1）。这些功能使用 GRIDS1 进行演示，GRIDS1 是一种线框图工具，可为设计人员提供实时布局建议。