界面的自动布局研究

效果演示

背景

布局研究小组

栅格布局系统、布局模式

智能栅格工具

🍱 Microwave

论文选题？

⚗️ 人机交互实验室
通过对 IUI、C2D、自动布局、界面生成等领域研究，最终确定了做界面的自动布局。

自动布局研究现状

图文排版

ACM TOMM 2017最佳论文：让AI接手繁杂专业的图文排版设计工作
从 2013 年底开始，来自微软亚洲研究院的研究员与来自清华大学美术学院的艺术设计专家，在这个科学与艺术相融合的领域开展了深入地合作。
杨绪勇等人把设计学中的审美原则与可计算的图像特征相结合，创造性地提出了一个可计算的自动排版框架原型。
该原型通过对一系列关键问题的优化（例如，嵌入在照片中的文字的视觉权重、视觉空间的配重、心理学中的色彩和谐因子、信息在视觉认知和语义理解上的重要性等)，把视觉呈现、文字语义、设计原则、认知理解等领域专家的先验知识自然地集成到同一个多媒体计算框架之内，并且开创了 “视觉文本版面自动设计” 这一新的研究方向。

利用算法自动产生的图文排版效果

imgcook

淘系前端智能化团队，主要往 D2C 方向进行研究，大部分情况下做的是基于 AI 的设计稿转代码。

相关系列文章：

• 如何使用深度学习识别 UI 界面组件 - 知乎
• 前端智能化：人机协同的编程方式 - 知乎

• AI 助力中后台场景下的设计稿转代码 - 知乎

  GRIDS

  Dayama等在 CHI2020 上提出了一种基于MILP的界面布局方式，并提供了GRIDS设计工具， 如下图所示。用户可以通过创建基本布局进行设计，然后使布局自动对齐到定义好的网格中。
  
  GRIDS 自动布局方法
  如下图所示，GRIDS 展示了基于MILP方法生成自动布局方案的可行性。
  
  但它主要是为探索设计而生的。如果希望将基于自动布局应用到生产中时，必须为现有的布局添加语义约束关系（例如元素从属关系、类型区别等等）。因为在界面设计过程中，设计师需要确保布局需要遵循相应的设计规范。如果工具只提供基础的自动布局能力，那么这些布局方案的有效性会大大降低。而GRIDS目前则并不支持生成符合设计规范的布局方案。

  技术方法对比

  机器学习/深度学习

  优点：

• 很高大上；

• 黑盒子，不用关心中间过程；
• 只要有数据，剩下都是小意思；

缺点：

• 需要较大的样本量，且需要被精准打标；
• 设计师投入打标工作，该工作的投入产出比非常低；
• 设计规范往往会随着业务发生动态调整，所有用户界面都将根据新的规范进行修改（Ant Design V3 -> V4 后，所有设计稿圆角都要改成 4px），打标数据就无效了；
• 规范除了关注模式，还关注具体值。

由于选择的是深度学习算法， 需要大量的训练集样本，所以样本数量和质量是亟需解决的问题。 目前我们已经拥有 2.5 万 + 的 UI 界面样本，包含 10 个分类，自动生成的样本支持 10 个分类。但人工标注的 UI 界面样本均为阿里系产品，虽然样本图片不同但设计风格会有相似且设计规范较统一，使得组件样式的丰富度不够，对阿里系之外的设计稿泛化能力较阿里系的要差。另外遵循一定的随机化规则自动生成的样本还存在版式和样式与实际样本有差异的地方，自动生成的样本质量无法评估。 未来在数据集方面，会考虑加入业界样本数量较大的数据集，并优化样本自动生成逻辑，同时探索评估自动生成的样本质量的方法。 From 淘系前端智能化团队 如何使用深度学习识别 UI 界面组件 - 知乎

优化方法

布局的本质是在设计空间中寻找符合某些约束规则的可行解。这种行为方式和最优化的求解思路比较相似。传统的设计规则较为感性和抽象，往往不被具体化。而最优化的方法需要将规则转换为可被计算的数学条件。
因此利用最优化解决布局问题的思路是通过数学建模将布局问题转变成基于若干条件约束的最优化问题，然后利用数学规划解算器进行求解。当设计规则发生变化时，只需要相应调整最优化问题的输入参数即可。
优点：

• 控制粒度够细
• 可以灵活制定规则

缺点：

• 规则抽取存在一定难度
• 需要会数学建模

最终方案：MILP（运筹学、最优化）

基础概念

运筹学

运筹学是 20 世纪三四十年代发展起来的一门新兴交叉学科。它主要研究人类对各种资源的运用及筹划，在满足一定约束的条件下，以期发挥有限资源的最大效益，达到总体最优的目标。

• 最短路径：我们用的导航软件，从一地到另一地的最短路径问题，就是一个典型的运筹学问题。该问题目标是找到最短的驾驶路径 （或驾驶时间最短的路径），约束条件往往有单行路段以及每条路段的限速等等（都可以写成严格的数学表达式）。
• 商家选址：一家大型连锁超市需要为其在英格兰北部开设的一系列超市建立仓库。超级市场的位置已经确定，但是仓库的位置尚未确定。目前已经确定了若干仓库的备选地点，但必须就建立多少个仓库以及在哪些候选地点建立仓库作出决定。建设多个仓库是有好处的，因为这将减少卡车从仓库到超市的平均行驶距离，从而降低运输成本。但是，建一个仓库有一定的固定成本。
• 投资组合：资产配置 （Asset Allocation）、风险控制 (risk management) 等经济金融领域也有很多应用；

拓展资料：

• 📺 【运筹学】基础教程（已完结）{适用范围：本科、考研、考博}_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili
• 📑 『运筹OR帷幄』大数据时代的运筹学 - 知乎
• 📑 我的知识库 -> 运筹学
• 📚 优化之道：生活中的运筹学思维 (豆瓣)
• 📚 生活中的运筹学 (豆瓣)

线性规划与整数规划

线性规划（Linear Programming，简称LP）特指目标函数和约束条件皆为线性的最优化问题。

整数规划(integer programming，简称IP) 是指一类要求问题中的全部或一部分变量为整数的数学规划。

• 
• 纯整数线性规划(PILP)：指全部决策变量都必须取整数值的整数线性规划。有时，也称为全整数规划。
• 混合整数线性规划(MILP)：指决策变量中有一部分必须取整数值，另一部分可以不取整数值的整数线性规划。
• 0-1型整数线性规划(ZILP)：指决策变量只能取值0或1的整数线性规划。

对于用户界面的布局来说，设计上要求界面元素的坐标与尺寸基本满足整数值或栅格值，且用户界面布局中存在大量对特定元素的描述，即存在必要的布尔型决策变量。因此用户界面的布局问题需要用混合整数线性规划的方法构建与求解。

优化器 Gurobi

在最优化问题中，数学规划求解器是针对多种已经建立的线性、整数及各种非线性规划模型，进行算法优化的求解器。正因为有了数学规划求解器的存在，我们只需将数学模型的系数矩阵，输入到优化求解器中，它就能够给我们快速求出最优解或可行解。

Gurobi是由美国 Gurobi Optimization 公司开发新一代大规模数学规划求解器。无论在生产制造领域，还是在金融、保险、交通、服务等其他各种领域，当实际问题越来越复杂，问题规模越来越庞大的时候，我们需要一个经过证明可以信赖的大规模优化工具，为决策提供质量保证，增强信心。在理论和实践中，Gurobi都被证明是全球性能领先的大规模求解器，具有突出的性价比，可以为客户在开发和实施中极大降低成本。
在全球最著名的专业优化器评比网站 Decision Tree for Optimization Software 中，Gurobi 比其他大规模求解器有明显优势。

数学规划求解器第三方测评情况
Gurobi 以卓越的性能跻身大规模求解器新领袖地位，成为性价比最为优秀的企业大规模求解器首选。同时， Gurobi 还为学术研究提供了免费的学术版本，在功能上和商业版没有区别。

相关资料：

• Gurobi 与数学建模 · 从入门到放弃
• 【中译版】Gurobi 官方教程
• 大规模优化求解器-Gurobi-教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili
• 运筹学

如何解决布局问题

MILP 的基本形式

一般的混合整数线性规划 (MILP) 问题通用形式包含两个部分：目标函数与优化方向 和 变量约束。

目标函数与优化方向

代表了数学问题中规划的优化目标，目标函数是一组基于相应变量的函数表达式，优化方向即该函数希望去求的最大或最小值，常见形式如公式 2.5所示，表明对公式 ax 求其最小值。

变量约束

代表了数学问题中变量的取值范围。在实际问题中可能存在的各种限定条件，转换到目标函数中即变量的约束条件，常见形式如公式2.6所示，该公式表明对 的限制条件。

设计模式规则提取

以单列模式为例

布局框架

栅格系统

单列布局

构建数学模型

:::info 构建方法参考下文，稍微有点复杂，不在这里讲了。 ::: GRIDs 数学建模

Python + Gurobi 代码实现

写代码也不讲了。

有了模型，还缺工具

下一步？

布局多样性探索

给定任意元素，自动出可能性的布局方案

布局模式的 lint

类似智能栅格的自动布局，给定特定的设计稿，完成「格式化」效果。

其他方向？

潜在的问题

Gurobi 学术版免费，但是商业版付费。
解决思路：

• 找开源解算器；
• 找达摩院合作（全球第一！阿里达摩院发布自研数学规划求解器，比第二名快了10%）。