CN110908637A

CN110908637A - 基于设计语义自动生成和施加图形用户界面调整大小约束

Info

Publication number: CN110908637A
Application number: CN201910590897.0A
Authority: CN
Inventors: S·什里瓦斯塔瓦; H·王; A·黄
Original assignee: Adobe Systems Inc
Current assignee: Adobe Inc
Priority date: 2018-09-16
Filing date: 2019-07-02
Publication date: 2020-03-24
Also published as: AU2019205973A1; AU2019205973B2; DE102019004670A1; GB201910085D0; GB2577159A; US11320975B2; US20200089396A1; GB2577159B

Abstract

本公开的实施例涉及基于设计语义自动生成和施加图形用户界面调整大小约束。本公开涉及使用自动生成的语义感知调整大小约束对图形用户界面设计布局调整大小的系统、方法和非暂态计算机可读介质。特别地，本文所述的系统可以分析图形用户界面设计元素的语义(例如，包括大小、位置、类型等)和设计元素的相对位置(例如，层级、偏移、嵌套等)。所公开的系统利用对经分析的语义的启发法系统来生成对每个图形用户界面设计界面的经自动地限定的语义感知调整大小约束的集合。所公开的系统还呈现使设计者能够手动选择要被施加于设计元素的约束的设计调整大小界面。所公开的系统可以在施加对设计元素的手动选择的和自动的语义感知调整大小约束之间切换。

Description

基于设计语义自动生成和施加图形用户界面调整大小约束

相关申请的交叉参考

本申请要求于2018年9月16日提交的标题为“AUTOMATICALLY GENERATING ANDAPPLYING GRAPHI-CAL USER INTERFACE RESIZE-CONTRAINTS BASED ON DESIGNSEMANTICS”的美国临时专利申请号62/731,965的优先权，其以整体引用并入本文。

技术领域

本公开总体上涉及显示布局的调整，更具体地涉及使用自动生成的语义感知调整大小约束对图形用户界面设计布局调整大小的系统、方法和非暂态计算机可读介质。

背景技术

随着互联网的快速发展，人们正转向在线观看内容。诸如网页、本机应用、杂志、手册或在线书籍等文档通常被设计用于在特定介质或视口中显示。然而，文档通常被访问或被提供给各种显示(或目标)设备，诸如平板计算机、移动电话、PDA、膝上型计算机等。这些目标设备拥有不同的特性，诸如屏幕大小或分辨率，从而建立针对不同目标设备的不同目标显示布局的需要。数字出版通常涉及生成多个显示布局副本以在不同设备上使用。

因此，设计者通常使用传统系统以创建用于多个屏幕大小和分辨率的多个显示布局。尽管传统系统可以创建不同的显示布局以在不同设备上使用，但它们经受与效率、准确性和灵活性相关的许多技术缺点。实际上，传统系统要求大量的处理能力、时间、存储和其他计算机资源。例如，传统系统通常要求过多的设计者交互和时间以创建多个显示布局。传统系统通常还要求设计者手动地调整大小、移动、移除和/或创建显示布局中的各个元素。

一些传统系统基于手动设置规则对一些元素调整大小。即使这些传统的手动规则调整大小系统是低效的。例如，大多数传统的手动规则调整大小系统要求设计者为显示布局中的每个元素单独地限定调整大小规则。此外，创建多个显示布局通常要求开发者浏览多个用户界面并且投入过多的时间和资源，以便确定和设置用于对显示布局调整大小的规则。

传统系统还经常在经调整大小的显示布局中产生经不准确地调整大小的元素。例如，许多传统系统简单地将元素调整大小到新显示布局的相同尺度。这样的简单的调整大小通常会导致失真的最终元素，因为许多经调整大小的元素会具有与原始元素不同的纵横比。如所提及的，许多传统的调整大小系统试图通过要求设计者对各个元素手动调整大小来克服该缺点。然而，由于这些传统的调整大小系统依赖于人类设计者来手动调节每个元素，所以最终的显示布局通常包括错位的和/或失真的元素，特别是在包含多个元素的显示布局中。

此外，传统系统通常是不灵活的。实际上，传统的手动规则调整大小系统通常限于少数用例。特别地，许多传统的手动规则调整大小系统要求设计者在设计被调整大小或以其他方式被更新时限定新的规则集合或更新规则集合。此外，传统的手动规则调整大小系统通常限于施加边缘固定(pinning)规则。例如，传统的手动规则调整大小系统通常仅能够参考最近的显示布局边缘来固定元素的位置。因此，当元素不位于显示布局边缘附近时，传统的手动规则调整大小系统通常在技术上受限于对元素调整大小。此外，传统的手动规则调整大小系统通常是不灵活的，因为它们不能在需要重新定位、扩展或缩小(diminish)元素的情况下进行操作。

关于生成经调整大小的显示布局，这些问题和难题以及其他问题和难题都存在。

发明内容

本发明的实施例包括使用基于考虑设计语义的启发法集合来动态生成的调整大小约束以自动地对设计调整大小的系统、方法和计算机可读介质。因此，当用户改变设计的大小时，系统、方法和计算机可读介质智能地且自动地(例如，无用户输入)对设计元素调整大小。特别地，所公开的系统分析设计和设计元素的属性。此外，系统就在调整大小操作之前动态地生成约束，使得设计中的任何改变都将被自动地适应。所公开的系统还在经调整大小的设计和设计元素必需时动态地施加新约束。此外，该系统是灵活的并且涉及多种情况。

为了说明，在一个或多个实施例中，所公开的系统可以接收将图形用户界面设计布局从第一大小调整大小为第二大小的请求。图形用户界面设计布局可以包括多个图形用户界面元素。所公开的系统分析图形用户界面设计布局的语义。此外，所公开的系统基于图形用户界面设计布局的经分析的语义，自动地限定针对多个图形用户界面元素的语义感知(semantic-aware)规则或约束的集合。此外，所公开的系统通过根据经自动地限定的语义感知调整大小约束的集合对多个图形用户界面元素调整大小，生成第二大小的经调整大小的图形用户界面设计布局。

以下描述阐述了所公开的系统、计算机介质和方法的一个或多个实施例的附加特征和优点。在一些情况下，从描述中或者可以通过对所公开的实施例的实践来学习，这样的特征和优点对于本领域技术人员将是明显的。

附图说明

通过使用附图，具体实施方式提供了具有附加特性和细节的一个或多个实施例，下面简要描述附图。

图1A至图1C图示了根据一个或多个实施例的在调整大小操作期间处于第一大小以及在已经经受自动语义感知调整大小约束而被调整大小之后处于第二大小的数字设计的序列。

图2图示了根据一个或多个实施例的具有表示性偏移的第一设计元素和第二设计元素的示意图。

图3A至图3F图示了根据一个或多个实施例的处于第一大小以及在已经经受自动语义感知调整大小约束而被调整大小之后处于第二大小的各种设计元素对。

图4A至图4B图示了根据一个或多个实施例的表示用于生成适当的语义感知调整大小约束的启发法的状态图。

图5A至图5B图示了根据一个或多个实施例的处于初始大小以及在已经经受自动语义感知调整大小约束而被调整大小之后处于第二大小的设计布局对。

图6A至图6D图示了根据一个或多个实施例的示出自动语义感知调整大小约束和手动选择的约束的各种图形用户界面对。

图7A至图7D图示了根据一个或多个实施例的包括处于初始大小以及在已经经受自动语义感知调整大小约束而被调整大小之后处于第二大小的复杂设计元素的各种设计布局对。

图8图示了根据一个或多个实施例的设计调整大小约束系统的示意图。

图9图示了根据一个或多个实施例的用于实现设计调整大小约束系统的示例环境。

图10图示了根据一个或多个实施例的用于自动语义感知约束施加的一系列动作的流程图。

图11图示了根据一个或多个实施例的示例计算设备的框图。

具体实施方式

本公开描述了设计调整大小约束系统的一个或多个实施例，该设计调整大小约束系统通过基于检测到的图形用户界面设计布局的语义来动态地生成和使用语义感知调整大小约束，响应性地对图形用户界面设计布局调整大小同时保持设计语义完整。例如，设计调整大小约束系统可以接收对图形用户界面设计布局调整大小的请求。基于接收到对图形用户界面设计布局调整大小的请求，设计调整大小约束系统分析图形用户界面设计布局的语义，包括布局和层级。基于经分析的设计语义，设计调整大小约束系统可以就在任何调整大小操作之前动态地生成针对图形用户界面元素的语义感知调整大小约束。设计调整大小约束系统可以使用语义感知调整大小约束对图形用户界面设计布局、包括图形用户界面设计布局内的图形用户界面元素调整大小。

为了说明，设计调整大小约束系统可以生成具有经语义地调整大小的图形用户界面元素的经调整大小的图形用户界面设计布局。特别地，设计调整大小约束系统可以接收将图形用户界面设计布局从第一大小调整大小为第二大小的请求，该图形用户界面设计布局包括多个图形用户界面元素。设计调整大小约束系统可以分析图形用户界面设计布局的语义。特别地，设计调整大小约束系统可以标识设计内的元素的层级(例如，元素是父设计元素还是子设计元素)、元素的类型(例如，元素是文本还是图形)以及元素边缘相对于彼此的位置等。基于经分析的语义，设计调整大小约束系统可以限定语义感知调整大小约束的集合。设计调整大小约束系统使用语义感知调整大小约束来生成第二大小的经调整大小的图形用户界面设计布局。因此，当设计者请求对图形用户界面设计布局调整大小时，设计调整大小约束系统根据动态生成的语义感知调整大小约束来智能地且自动地(例如，无用户输入)对所有图形用户界面元素调整大小。

设计调整大小约束系统为处于不同大小的设计元素维持空间关系。特别地，在一个或多个实施例中，设计调整大小约束系统利用启发法系统来限定针对多个图形用户界面元素的语义感知调整大小约束的集合。特别地，设计调整大小约束系统可以标识不同大小和位置的图形用户界面元素的空间关系。设计调整大小约束系统使用启发法系统分析图形用户界面设计布局的语义，以自动地限定针对图形用户界面元素的语义感知调整大小约束。设计调整大小约束系统使用经分析的语义和启发法系统来确定针对图形用户界面元素的语义正确的调整大小行为，并且对元素放置对应的语义感知调整大小约束。

设计调整大小约束系统还在自动生成的语义感知约束和手动约束之间提供独特的平衡和工作流。特别地，设计调整大小约束系统使任何调整大小操作都由自动生成的语义感知约束自动地约束。因此，设计调整大小约束系统不需要呈现关于约束的复杂细节。如果设计者选择编辑自动生成的语义感知约束并切换到手动约束，则设计调整大小约束系统揭示预先填充有约束的约束用户界面，这允许设计者进行编辑以改变对该元素的响应性行为。然后，设计调整大小约束系统可以使用该反馈来优化和运行启发式算法来智能地学习。

如上文所提及的，设计调整大小约束系统不需要呈现关于约束的复杂细节，也不需要用户理解或给出有关约束的指令。也就是说，设计调整大小约束系统可以可选地示出标识被施加于图形用户界面元素的语义感知调整大小约束的覆盖(overlay)线。例如，设计调整大小约束系统可以呈现覆盖线以用于示出图形用户界面元素的固定行为。设计调整大小约束系统可以在调整大小操作期间提供这些覆盖，以在设计阶段期间给设计者提供对在调整大小期间被施加的语义感知调整大小约束的理解，而没有任何视觉噪声。

本文所述的一个或多个实施例用设计调整大小约束系统提供了益处并解决了本领域的一个或多个上述问题或其他问题，该设计调整大小约束系统基于考虑设计、布局和层级的语义的启发法集合来生成语义感知调整大小约束。例如，设计调整大小约束系统可以提高对图形用户界面设计布局调整大小的效率。特别地，设计调整大小约束系统允许用户从他们必须创建所有调整大小规则的系统来到自动生成和施加约束的系统。此外，在一个或多个实施例中，设计调整大小约束系统提供选项，以允许用户在通过语义感知调整大小约束没有实现期望结果的情况下修改或微调设计或约束。更特别地，设计调整大小约束系统通过呈现允许设计者进行编辑和改变约束的约束用户界面来提高对设计布局调整大小的效率。

此外，相对于传统系统，设计调整大小约束系统提高了准确性。例如，设计调整大小约束系统为处于不同大小的图形用户界面元素维持空间关系。特别地，设计调整大小约束系统使用启发法系统来标识针对图形用户界面元素的语义正确的调整大小行为，并且基于设计语义对图形用户界面元素放置语义感知调整大小约束。因此，设计调整大小约束系统可以生成经调整大小的设计，其包括正确地定比例和定位的图形用户界面元素。

相对于传统系统，设计调整大小约束系统还提高了灵活性。例如，设计调整大小约束系统涉及并自动适应各种情况。特别地，设计调整大小约束系统可以分析针对任何设计的设计语义。基于设计语义，设计调整大小约束系统使用标识适当的语义感知调整大小约束的启发法系统。此外，设计调整大小约束系统可以针对设计中的每个元素生成一个或多个语义感知调整大小约束。特别地，调整大小约束系统不限于施加边缘固定规则。相反，调整大小约束系统可以生成指示元素的形状以及元素相对于其他图形用户界面元素的位置的规则。

如前面的讨论所说明的，本公开利用各种术语来描述设计调整大小约束系统的特征和优点。关于这些术语的含义，现在提供更多细节。如本文所使用的，术语“图形用户界面设计布局”(或“设计布局”)是指包括视觉元素的布置的视觉设计。特别地，术语“图形用户界面设计布局”是指包括图形用户界面元素的用户界面。例如，图形用户界面设计布局可以指网页、数字消息或程序界面。

如本文所使用的，术语“图形用户界面元素”(或“设计元素”)是指图形用户界面设计布局的视觉元素。特别地，术语“图形用户界面元素”是指作为图形用户界面设计布局的一部分的设计单元。例如，图形用户界面元素可以包括文本、图像、控件、覆盖、框、交互元素和其他图形用户界面成分。

本文所使用的，术语“设计语义”(或简称为“语义”)是指设计的特性或特质。特别地，术语“设计语义”是指图形用户界面设计布局的特性。例如，“设计语义”可以指设计布局中的图形用户界面元素的设计、布局和层级。具体地，语义可以指父设计元素和子设计元素之间的层级关系、设计元素之间的位置关系以及设计布局中的设计元素之间的任何其他关系。此外，语义可以指图形用户界面元素的类型和图形用户界面元素的相对定位。

如本文所使用的，术语“语义感知约束”是指在调整大小期间被施加于设计布局的限制。特别地，“语义感知约束”是指基于设计布局的语义被施加于图形用户界面元素的规则。语义感知约束可以指将图形用户界面元素的边缘绑定到设计布局或另一图形用户界面元素的边缘的规则。例如，设计调整大小约束系统可以生成针对设计元素的左、右、顶或底约束。左约束固定设计元素的左边缘到父设计元素或设计布局的对应边缘的距离。因此，贯穿调整大小操作，左偏移(即，设计元素的左边缘到相应父边缘之间的距离)保持固定。此外，术语“语义感知约束”可以指固定设计元素的大小的规则。例如，设计调整大小约束系统可以对设计元素设置高度或宽度约束，该高度或宽度约束固定设计元素的高度或宽度。

如上文所讨论的，设计调整大小约束系统可以根据语义感知调整大小约束智能地对设计元素调整大小。图1A至图1C图示了示例经调整大小的图形用户界面设计。虽然图1A至图1C图示了对设计元素调整大小，更特别地对包括多个子设计元素的父设计元素调整大小，但设计调整大小约束系统可以对包括多个设计元素的整个图形用户界面设计布局调整大小。

图1A图示了第一大小112的图形用户界面设计布局102(“设计布局102”)。特别地，第一大小112的设计元素102包括标题设计元素104、文本设计元素106以及交互设计元素108a和108b。如所图示的，设计调整大小约束系统可以接收第一大小112的图形用户界面设计布局102作为输入。设计调整大小约束系统可以允许对设计布局102调整大小，并且然后使用自动生成的语义感知调整大小约束来自动地对所包括的设计元素调整大小。

设计调整大小约束系统分析图形用户界面设计布局102的语义，并且限定针对设计布局102的语义感知调整大小约束集合。如图1B所图示的，设计调整大小约束系统在设计布局102中呈现表示语义感知调整大小约束集合的固定覆盖110a-d。特别地，图1B图示了在被调整大小的过程中的、中间大小114的设计布局102。中间大小114的设计布局102包括顶固定覆盖110a、右固定覆盖110b、左固定覆盖110c和底固定覆盖110d(统称为“固定覆盖110a-d”)。

如上所讨论的，设计调整大小约束系统可以接收对设计布局102调整大小的请求。例如，设计者可以手动选择并拖动设计布局102的边缘，以对设计布局102调整大小。备选地，设计者可以指定所期望的经调整大小的设计布局102的尺寸。此外，设计者可以通过提交对整个图形用户界面设计布局102调整大小的请求来请求对父设计元素调整大小。基于对设计布局102调整大小的请求，设计调整大小约束系统分析第一大小112的设计布局102的设计语义。特别地，设计调整大小约束系统单独地或者相对于彼此地分析第一大小112的设计布局102的设计元素的属性。

使用检测到的设计布局102的语义，设计调整大小约束系统限定针对设计布局102中的每个设计元素的语义感知调整大小约束的集合。例如，设计调整大小约束系统针对标题设计元素104、文本设计元素106以及交互设计元素108a和108b中的每个来限定语义感知调整大小约束。

设计调整大小约束系统生成固定覆盖110a-d以表示语义感知调整大小约束。特别地，固定覆盖110a-d示出子设计元素的固定行为。固定覆盖110a-d在设计阶段期间没有过多的视觉噪声的情况下给设计者对调整大小操作的理解。例如，顶固定覆盖110a表示所施加的顶约束(即，子设计元素的顶边缘固定至设计布局102的边缘)。如图1B中的施加于标题设计元素104的顶固定覆盖110a和左固定覆盖110c所图示的，设计调整大小约束系统将顶约束和左约束施加于标题设计元素104。如所图示的，设计调整大小约束系统为文本设计元素106提供了左固定覆盖110c和右固定覆盖110b。此外，设计调整大小约束系统为交互设计元素108a提供了左固定覆盖110c和底固定覆盖110d。设计调整大小约束系统为交互设计元素108b提供了右固定覆盖110b和底固定覆盖110d。

在调整大小操作之后，设计调整大小约束系统生成经调整大小的设计布局。如图1C所图示的，设计调整大小约束系统生成第二大小116的设计布局102。特别地，设计调整大小约束系统根据语义感知调整大小约束的集合对设计布局102中的子设计元素调整大小。例如，在扩展设计布局102时，设计调整大小约束系统还适当地将子设计元素的边缘与设计布局102的边缘绑定。如所图示的，设计调整大小约束系统将顶约束和左约束施加于标题设计元素104。因此，设计调整大小约束系统通过将第二大小116的设计布局102的标题设计元素104约束为与第一大小112的设计布局102的顶边缘和左边缘的距离相同来对设计布局调整大小。类似地，设计调整大小约束系统将第二大小116的设计布局102中的文本设计元素106约束为与第一大小112的设计布局102的左边缘和右边缘的距离相同。此外，设计调整大小约束系统将第二大小116的设计布局102的交互设计元素108a约束为与第一大小112的设计布局102的左边缘和底边缘的距离相同。最后，设计调整大小约束系统将第二大小116的设计布局102的交互设计元素108b约束为与第一大小112的设计布局102的右边缘和底边缘的距离相同。

图1A-1C提供了使用自动地(无用户输入)和动态地(响应于调整大小请求即时地)语义感知调整大小约束来对设计布局调整大小的示例的简要概述。下面将提供关于分析设计布局的语义和生成语义感知调整大小约束的过程的附加细节。

作为分析设计布局的语义的一部分，设计调整大小约束系统可以测量设计元素之间和/或设计元素与设计布局的边界之间的偏移值，以生成语义感知调整大小约束。图2图示了第一设计元素和第二设计元素之间的偏移。图2图示了第一设计元素202和第二设计元素204的示意图。第二设计元素204嵌套在第一设计元素202内。在一个或多个实施例中，第一设计元素202是父设计元素，并且第二设计元素204是子设计元素。在一个或多个实施例中，设计调整大小约束系统可以以基于子设计元素相对于父设计元素的偏移的一个或多个自动生成的语义感知约束为基础。如本文所使用的，术语“偏移”是指设计元素的边缘与另一设计元素的边缘之间的距离。特别地，偏移是指设计元素的边缘与另一设计元素或设计布局的对应边缘之间的距离。例如，左偏移可以是子设计元素的左边缘和父设计元素的左边缘之间的距离。

例如，图2图示了限定第二设计元素204的左侧到第一设计元素202的左侧的距离的左偏移206。类似地，图2示出了限定第二设计元素204的上侧到第一设计元素202的上侧的距离的上偏移208。图2示出了限定第二设计元素204的右侧到第一设计元素202的右侧的距离的右偏移210。最后，图2示出了限定第二设计元素204的底侧到第一设计元素202的底侧的距离的底偏移212。

如上文所提及的，设计调整大小约束系统可以使用语义感知调整大小约束来自动地对设计布局内的设计元素定大小和移动设计布局内的设计元素。图3A-3F图示了根据一个或多个实施方式的处于初始大小以及在已经经受自动语义感知调整大小约束而被调整大小的更新大小的各种设计元素对。特别地，图3A-3F图示了第一设计元素302和第二设计元素304的对，其中第二设计元素304嵌套在第一设计元素302内。更特别地，图3A-3F中图示的对是初始大小的第一设计元素302和初始大小的第二设计元素304的第一对、以及经调整大小的第一设计元素302a和经调整大小的第二设计元素304a的第二对。在至少一个实施例中，第一设计元素302表示父设计元素，并且第二设计元素304表示子设计元素。在至少一个其他实施例中，第一设计元素302表示包括第二设计元素304的设计布局。

如上文所讨论的，设计调整大小约束系统测量初始大小的设计元素的偏移。图3A图示了处于初始大小的第一设计元素302和第二设计元素304。设计调整大小约束系统测量初始大小的第一设计元素302的左偏移314、顶偏移316、右偏移318和底偏移320。此外，设计调整大小约束系统测量初始大小的第一设计元素302的宽度310和高度312。

设计调整大小约束系统可以基于相对于设计元素的偏移长度来施加语义感知调整大小约束。例如，基于确定子设计元素的偏移小于父设计元素的大小的阈值比例，设计调整大小约束系统可以施加对应的语义感知调整大小约束。如图3A所图示的，设计调整大小约束系统确定左偏移314小于第一设计元素302的宽度310的阈值比例。基于该确定，设计调整大小约束系统施加左约束。同样地，基于确定顶偏移316小于高度312的阈值比例，设计调整大小约束系统施加顶约束。

设计调整大小约束系统基于所施加的语义感知调整大小约束来对第二设计元素304调整大小。例如，图3B图示了表示在调整大小操作期间所施加的语义感知调整大小约束的固定覆盖。特别地，图3B图示了顶固定覆盖308a和左固定覆盖308b。此外，图3B包括经调整大小的第一设计元素302a、经调整大小的第二设计元素304a、维持的顶偏移316、维持的左偏移314、经更新的底偏移320a和经更新的右偏移318a。

图3B图示了调整大小操作期间的设计元素。如本文所使用的，术语“调整大小操作”是指当设计布局是第一大小时和当设计布局是第二大小时的时间之间的中间时期。设计调整大小约束系统在调整大小操作期间呈现针对设计元素的固定覆盖。图3B图示了设计调整大小约束系统基于经调整大小的第一设计元素302自动地对第二设计元素304调整大小。特别地，设计调整大小约束系统施加如顶固定覆盖308a和左固定覆盖308b所示的顶约束和左约束。基于顶约束，设计调整大小约束系统将第二设计元素304的顶边缘固定至第一设计元素302的顶边缘。特别地，在设计调整大小约束系统对经更新的第一设计元素302a调整大小时，经更新的顶偏移316将保持恒定。类似地，基于左约束，设计调整大小约束系统将第二设计元素304的左边缘固定至第一设计元素302的左边缘。因此，如所图示的，在设计调整大小约束系统扩展第一设计元素302的大小时，经更新的左偏移314保持恒定。

用于未被固定的设计元素边缘的偏移在调整大小操作期间扩展和缩小。例如，如图3B所图示的，设计调整大小约束系统没有对第二设计元素304的底边缘或右边缘施加约束。如所图示的，经更新的右偏移318a和底偏移320a没有保持恒定。相反，随着设计调整大小约束系统扩展第一设计元素302以生成经调整大小的第一设计元素302a时，设计调整大小约束系统将右偏移318延长到经更新的右偏移318a，并且将底偏移320延长到经更新的底偏移320a。

图3A至图3B图示了基于所施加的顶约束和左约束的对第二设计元素304的调整大小行为的一个示例。图3C至图3F图示了基于语义感知调整大小约束的附加组合的对第二设计元素304的调整大小行为的附加示例。

设计调整大小约束系统可以就在调整大小操作之前动态地分析针对设计布局的设计语义。特别地，设计调整大小约束系统不要求设计者在设计布局改变时施加或更新约束。相反，设计调整大小约束系统自动地适应设计中的任何改变，并且根据需要施加新规则。例如，设计者可以通过拉长第二设计元素304来改变图3A的第一设计元素302的设计语义，以生成图3C的拉长的第二设计元素304b。设计调整大小约束系统基于变化来分析第一设计元素302和第二设计元素304b的语义，以生成针对拉长的第二设计元素304b的适当的语义感知调整大小约束。因此，对图3C的第一设计元素302、包括对拉长的第二设计元素304b进行的任何调整大小的调节使用经动态分析的设计语义来施加的约束来进行。

图3C图示了处于初始大小的第一设计元素302和第二设计元素304b。如图3C所图示的，第二设计元素304b的右边缘位于接近第一设计元素302的右边缘。设计调整大小约束系统确定左、顶和右偏移小于第一设计元素302的大小的比例阈值。基于该考虑，设计调整大小约束系统对第二设计元素304b施加左约束、顶约束和右约束。

图3D图示了调整大小操作期间的、图3C的第一设计元素302和第二设计元素304b。特别地，设计调整大小约束系统呈现顶固定覆盖308a、左固定覆盖308b和右固定覆盖308c，以对应于所施加的顶约束、左约束和右约束。因此，当设计调整大小约束系统生成经调整大小的第一设计元素302c时，顶偏移、左偏移和右偏移保持恒定，而底偏移基于经调整大小的第一设计元素302c来改变。因此，设计调整大小约束系统生成经调整大小的第一设计元素304c，其被进一步拉长以维持顶偏移、左偏移和右偏移。因此，图3A-3B与图3C-3D的比较图示了设计调整大小约束系统如何基于设计布局的语义来改变语义感知调整大小约束。

图3E和图3F图示了设计者已经通过扩大第二设计元素304来改变图3A的第一设计元素302的设计语义，以生成图3E的扩大的第二设计元素304d。设计调整大小约束系统基于变化来分析第一设计元素302和第二设计元素304d的语义，以生成用于扩大的第二设计元素304d的适当的语义感知调整大小约束。特别地，设计调整大小约束系统对第二设计元素304d施加顶、左、右和底语义感知调整大小约束。特别地，图3E图示了处于初始大小的第一设计元素302和第二设计元素304d。如所图示的，设计约束系统确定第二设计元素304d的所有偏移(即，顶、左、右和底)都小于第一设计元素302的阈值比例。例如，设计约束系统确定顶偏移和底偏移中的每个都小于第一设计元素302的高度的阈值比例。此外，设计约束系统确定左偏移和右偏移中的每个都小于第一设计元素302的宽度的阈值比例。设计约束系统因此确定对第二设计元素304d施加顶、左、右和底约束。

图3F图示了在调整大小操作期间或之后的经调整大小的第一设计元素302d和经调整大小的第二设计元素304e。如图3F所图示的，设计调整大小约束系统使用固定覆盖表示所施加的语义感知调整大小约束中的每个。特别地，设计约束系统显示顶固定覆盖308a、左固定覆盖308b、右固定覆盖308c和底固定覆盖308d。如所图示的，由于设计调整大小约束系统对第二设计元素304施加了所有偏移，所以第二设计元素304的所有偏移值都在调整大小操作期间保持固定/恒定。更特别地，由于第二设计元素304d的所有边缘都固定至第一设计元素302的对应边缘，所以第二设计元素304d随第一设计元素302扩展。

如上文所讨论和所示出的，设计调整大小约束系统可以基于图形用户界面设计布局的经分析的语义来施加语义感知调整大小约束。图4A至图4B图示了展示设计调整大小系统如何对设计元素施加启发法的集合来生成语义感知调整大小约束的状态图。特别地，如上文所讨论的，设计调整大小约束系统分析设计元素的特性(例如，大小、位置、类型等)以及设计元素的相对位置(例如，层级、偏移、嵌套等)。设计调整大小约束系统利用包括对经分析的特性的启发法的集合的启发法系统，以生成语义感知调整大小约束。

在至少一个实施例中，设计调整大小约束系统将以下的约束规则(即，启发法)按以下顺序施加于设计布局中的每个设计元素：

1.如果子设计元素的左偏移小于其父宽度的15％，则设置针对子设计元素的左约束。

2.如果子设计元素的右偏移小于其父宽度的15％，则设置针对子设计元素的右约束。

3.如果子设计元素的顶偏移小于其父宽度的15％，则设置针对子设计元素的顶约束。

4.如果子设计元素的底偏移小于其父宽度的15％，则设置针对子设计元素的底约束。

规则5-6施加于不是嵌套容器且不是单行文本元素的子设计元素。

5.如果左偏移和右偏移几乎相等(仅相差1)并且它们小于父宽度的25％，则设置针对子设计元素的左约束和右约束。这将使子设计元素宽度随父设计元素宽度调整大小。

6.如果顶偏移和底偏移几乎相等(仅相差1)并且它们小于父高度的25％，则设置针对子设计元素的顶约束和底约束。这将使子设计元素高度随父设计元素高度调整大小。

规则7-8施加于文本区域子设计元素。

7.如果文本区域子设计元素的宽度是其父的宽度的66％，则设置针对子设计元素的左约束和右约束。这将使子设计元素宽度随父设计元素宽度调整大小。

8.如果文本区域子设计元素的高度是其父的高度的66％，则设置针对子设计元素的顶约束和底约束。这将使子设计元素高度随父设计元素高度调整大小。

规则9施加于除单行文本之外的所有子设计元素。

9.如果子设计元素的三个边缘在父边缘的5％边距内且第四边缘在父的33％边距内，则设置针对子设计元素的顶、底、左和右约束。这将使子设计元素宽度和高度随父设计元素宽度和高度调整大小。

规则10-13施加于所有类型的子设计元素。

10.如果子设计元素宽度界限被包含在左边距的20％内，则设置左约束。

11.如果子设计元素高度界限被包含在顶边距的20％内，则设置顶约束。

12.如果子设计元素宽度界限被包含在右边距的20％内，则设置右约束。

13.如果子设计元素高度界限被包含在底边距的20％内，则设置底约束。

规则14到15适用于所有规则。

14.如果在施加所有以上规则之后，既没有设置左约束也没有设置右约束，则设置宽度约束。

15.如果在施加所有以上规则之后，既没有设置顶约束也没有设置底约束，则设置高度约束。

这些约束规则中的每个都将在下面随图4A和图4B的描述中以附加细节来讨论。尽管图4A和4B描述了对与父设计元素相关的子设计元素的语义的分析的过程，但设计调整系统可以分析相对于父设计元素或设计布局的任何设计元素的语义。

如图4A所图示的且如上文所提及的，设计调整大小约束系统通过确定子设计元素的偏移是否小于其父宽度或高度的15％来开始。作为步骤402的一部分，设计调制大小约束计算父高度的15％并且计算父宽度的15％。设计调整大小约束系统访问针对子设计元素的偏移值(例如，顶、左、右和底)，并且确定偏移是否小于对应的父高度或宽度的15％。

如图4A所图示的，基于确定偏移小于对应的父高度或宽度的15％，设计调整大小约束系统执行设置对应的侧约束的步骤404。例如，基于确定左偏移小于父高度的15％，设计调整大小约束系统设置左约束。设计调整大小约束系统针对子设计元素的右、顶和底偏移中的每个重复该分析。

设计调整大小约束系统接下来考虑设计布局内的设计元素的层级。特别地，作为图4A的步骤406的一部分，设计调整大小约束系统确定子设计元素是嵌套容器还是单行文本元素。特别地，设计调整大小约束系统确定设计元素是否被嵌套在另一较大的设计元素内。此外，设计调整大小约束系统确定设计元素是否包括单行文本。

如果设计调整大小约束系统确定子设计元素不是嵌套容器或单行文本元素，则设计调整大小约束系统执行步骤408，步骤408确定相对的偏移是否几乎相等且小于父宽度和高度的25％。例如，设计调整大小约束系统测量设计元素到父设计元素或设计布局的对应边缘的左偏移和右偏移。设计调整大小约束系统还测量父设计元素或设计布局的宽度。如果左偏移和右偏移几乎相等且小于父宽度的25％，则设计调整大小约束系统前进到步骤410并设置左约束和右约束。类似地，设计调整大小约束系统测量设计元素到父设计元素或设计布局的对应边缘的顶偏移和底偏移。设计调整大小约束系统测量父设计元素或设计布局的高度。如果顶偏移和底偏移几乎相等且小于父高度的25％，则设计调整大小约束系统前进到步骤410且设置顶约束和底约束。

设计调整大小约束系统前进到步骤412，以确定子设计元素是否是文本元素。如果设计调整大小约束系统确定子设计元素是文本元素，则设计调整大小约束系统前进到步骤414，步骤414确定文本区域的宽度或高度是否为其父的宽度或高度的66％。更具体地，设计调整大小约束系统确定文本区域的宽度是否为其父宽度的66％或更多。基于确定子设计元素的宽度为其父宽度的66％或更多，设计约束系统前进到步骤416，并且设置对子设计元素的左约束和右约束。类似地，基于确定子设计元素的高度为父高度的66％或更多，设计调整大小约束系统设置顶约束和底约束，作为步骤416的一部分。

对于非文本元素，设计调整大小约束系统进一步评估子设计元素是否是单行文本422。对于不是单行文本的子设计元素，设计调整大小约束系统前进到步骤424，以确定子设计元素的三个边缘是否在父边缘的5％边距内以及第四边缘是否在父的33％边距内。特别地，设计调整大小约束系统通过计算父设计元素的宽度的5％来标识设计元素的右父边缘和左父边缘的5％边距。设计调整大小约束系统通过计算父设计元素的高度的5％来标识顶父边缘和底父边缘的5％边距。设计调整大小约束系统执行类似的分析，以标识第四边缘是否在父设计元素的33％边距内。基于确定子设计元素的三个边缘在父边缘的5％边距内且第四边缘在33％边距内，设计调整大小约束系统前进到步骤426，并且设置对子设计元素的顶约束、左约束、右约束和底约束。

接下来，设计调整大小约束系统评估子设计元素宽度是否被包含在父设计元素的左边距或右边距的20％内428。基于确定子设计元素的整个宽度被包含在左边距的20％内，设计调整大小约束系统在步骤430中设置左约束。类似地，基于确定子设计元素的整个宽度被包含在右边距的20％内，设计调整大小约束系统在步骤430中设置右约束。

作为步骤432的一部分，设计调整大小约束系统评估子设计元素高度是否被包含在父设计元素的顶边距和底边距的20％内。基于确定子设计元素的整个高度被包含在顶边距的20％内，设计调整大小约束系统在步骤434中设置顶约束。类似地，如果设计调整大小约束系统确定子设计元素的整个高度被包含在底边距的20％内，则设计调整大小约束系统在步骤434中设置底约束。

在设计调整大小约束系统已经施加所有讨论的启发法之后，设计调整大小约束系统使用适用于所有的启发法评估设计元素。特别地，设计调整大小约束系统在步骤436中确定是左约束还是右约束被设置。如果设计调整大小约束系统确定既没有设置左约束也没有设置右约束，则设计调整大小约束系统在步骤440中设置宽度约束。在另一方面，基于确定是右约束还是左约束被设置，设计调整大小约束系统在步骤438中不设置宽度约束。

此外，设计调整大小约束系统在步骤442中确定是顶约束还是底约束被设置。特别地，基于确定已经对设计元素施加了顶约束或底约束，设计调整大小约束系统根据步骤446不设置高度约束。备选地，如果设计调整大小约束系统确定既没有设置顶约束也没有设置底约束，则设计调整大小约束系统在步骤444中设置高度约束。

图5A和图5B图示了上面相对于图4A和图4B描述的启发法的示例施加。图5A和图5B图示了示例父设计元素和子设计元素。特别地，图5A图示了具有子设计元素504、506、508、510和512的父设计元素502。图5B图示了在调整大小操作期间的经更新的父设计元素502a。

设计调整大小约束系统访问关于父设计元素502和子设计元素504、506、508、510和512的语义信息。然后，设计调整大小约束系统使用启发法系统以标识针对父设计元素502的可施加的语义感知调整大小约束。特别地，设计调整大小约束系统施加上文提及的启发法。例如，设计调整大小约束系统首先将规则1-4施加于子设计元素504、506、508、510和512。具体地关注子设计元素504，设计调整大小约束系统确定子设计元素504的顶偏移小于父设计元素502高度的15％。因此，设计调整大小约束系统对子设计元素504设置顶约束，其将子设计元素504的顶边缘绑定至父设计元素502的顶边缘。设计调整大小约束系统还确定子设计元素504的底偏移小于父设计元素502高度的15％。因此，设计调整大小约束系统还对子设计元素504设置底约束。设计调整大小约束系统确定子设计元素的右偏移和左偏移均不小于父设计元素502的宽度的15％。因此，设计调整大小约束系统此时不设置左约束或右约束。

设计调整大小约束系统不施加规则5-6，因为子设计元素504、506、508、510和512是嵌套容器。此外，设计调整大小约束系统不施加规则7-8，因为子设计元素504、506、508、510和512不是文本区域子设计元素。设计调整大小约束系统将规则9施加于子设计元素504、506、508、510和512。然而，由于没有子设计元素的3个边缘在父边缘的5％边距内，因此设计调整大小约束系统不施加附加约束。最后，基于规则14和15，设计调整大小约束系统对所有子设计元素504、506、508、510和512设置宽度约束，因为设计调整大小约束系统对子设计元素既没有设置左约束也没有设置右约束。因此，基于所施加的启发法系统，设计调整大小约束系统将顶语义感知约束、底语义感知调整大小约束和宽度语义感知调整大小约束施加于子设计元素504、506、508、510和512中的每个。

图5B图示了调整大小操作期间的经调整大小的父设计元素502a。如图5B所图示的，经调整大小的父设计元素502a在宽度上短于初始父设计元素502。特别地，父设计元素502a包括顶固定覆盖514和底固定覆盖516，其对应于顶语义感知约束和底语义感知调整大小约束。在至少一个实施例中，设计调整大小约束系统引入宽度固定覆盖，以表示被施加于子设计元素504、506、508、510和512的宽度约束。

如上文所提及的，设计调整大小约束系统可以自动地将语义感知调整大小约束施加于设计布局的设计元素。此外，设计调整大小约束系统能够实现对设计布局的相同设计元素施加手动选择的约束。图6A-6D图示了一系列图形用户界面，其示出使用自动施加的语义感知调整大小约束和手动选择的约束的针对设计的调整大小行为。特别地，图6A至图6B图示了示出自动施加的语义感知调整大小约束的图形用户截面。图6C至图6D图示了示出手动选择的约束的图形用户界面。

图6A图示了当设计调整大小约束系统自动地施加语义感知调整大小约束时，由设计调整大小约束系统呈现的调整大小约束图形用户界面602。特别地，调整大小约束图形用户界面602包括具有嵌套的第二设计元素608的第一设计元素604。此外，调整大小约束图形用户界面602包括自定义面板614，该自定义面板614包括自动选择元素610、手动选择元素612、边缘约束元素616、宽度约束元素618和高度约束元素620。如所讨论的，第一设计元素604可以表示包括嵌套的子第二设计元素608的父设计元素。此外，第一设计元素604可以表示包括第二设计元素608的显示布局。

设计调整大小约束系统可以突出显示所选择的设计元素并显示与所选择的设计元素相关的信息。如图6A所图示的，设计调整大小约束系统经由调整大小约束图形用户界面602呈现初始大小的第一设计元素604和第二设计元素608。基于检测到第二设计元素608的设计者选择，设计调整大小约束系统突出显示第二设计元素608。例如，设计调整大小约束系统使用调整大小点突出显示第二设计元素608。在至少一个或多个其他实施例中，设计调整大小约束系统基于检测到设计者与多个设计元素的交互而突出显示多于一个设计元素。例如，基于设计者对多个设计元素的选择，设计调整大小约束系统可以呈现针对所有所选择的多个设计元素的固定覆盖以及针对所有所选择的多个设计元素的约束。

设计调整大小约束系统呈现针对被突出显示的设计元素的自定义选项。如图6A所图示的，设计调整大小约束系统使用自定义面板614呈现与所选择的设计元素相关的响应性调整大小数据。基于与自定义面板614的设计者交互，设计调整大小约束系统自定义所选择的设计元素的大小、所选择的设计元素的调整大小行为以及所选择的设计元素的外观(例如，颜色、边框、不透明度、模糊等)。

设计调整大小约束系统使用自定义面板614呈现针对自动施加的语义感知调整大小约束的视觉表示。特别地，设计调整大小约束系统突出显示自动选择元素610，以指示施加于突出显示的第二设计元素608的约束是自动施加的语义感知调整大小约束。此外，设计调整大小约束系统突出显示边缘约束元素616的左约束和顶约束，以表示设计调整大小约束系统基于设计语义对第二设计元素608施加了左约束和顶约束。如所图示的，设计调整大小约束系统还突出显示宽度约束元素618和高度约束元素620，以表示所施加的宽度和高度约束。

基于对第一设计元素604调整大小的设计者请求，设计调整大小约束系统更新调整大小约束图形用户界面602，以展示对第二设计元素608的调整大小行为。图6B图示了具有嵌套的经更新的第二设计元素608a的经更新的第一设计元素604a。此外，设计调整大小约束系统呈现顶固定覆盖622和左固定覆盖624。

设计调整大小约束系统可以检测对图形用户界面设计布局调整大小的设计者请求。图6B图示了在对第一设计元素604和第二设计元素608的调整大小操作期间的调整大小约束图形用户界面602。如图6B所图示的，设计调整大小约束系统标识对第一设计元素604的边角的设计者选择。基于对第一设计元素604的边角的拖动运动，设计调整大小约束系统生成经更新的第一设计元素604a和经更新的第二设计元素608a。随着设计调整大小约束系统基于与第一设计元素604a的设计者交互来更新第一设计元素604a，设计调整大小约束系统基于自动施加的语义感知调整大小约束来对经更新的第二设计元素608a调整大小。

尽管图6B图示了设计调整大小约束系统标识选择和拖动姿势作为对图形用户界面设计布局调整大小的请求，但设计调整大小约束系统可以接收对设计布局调整大小的附加请求。特别地，设计者可以与自定义面板614中的元素交互，以指定设计布局的所期望的尺寸。例如，基于对第一设计元素604的设计者选择，设计调整大小约束系统可以更新自定义面板614以显示与第一设计元素604相关的数据。然后，设计者可以输入针对第一设计元素604的所期望的调整大小尺寸。

设计调整大小约束系统呈现固定覆盖，以示出调整大小操作期间的子设计元素的固定行为，而没有过多的视觉噪声。如图6B所图示的，设计调整大小约束系统呈现顶固定覆盖622和左固定覆盖624，以示出经更新的第二设计元素608a已经基于顶约束和左约束而被固定至经更新的第一设计元素604a的左边缘和顶边缘。在至少一个其他实施例中，设计调整大小约束系统包括宽度和高度固定覆盖，以展示设计调整大小约束系统还对经更新的第二设计元素608a施加了宽度约束和高度约束。

如上文所讨论的，设计调整大小约束系统可以在对设计元素施加自动的语义感知调整大小约束和手动选择的约束之间切换。图6C至图6D图示了示例调整大小约束图形用户界面602，其呈现针对手动选择的约束的控件和布局。特别地，图6C图示了初始大小的第一设计元素604和第二设计元素608。图6D图示了在调整大小操作期间的经更新的第一设计元素604a和经更新的第二设计元素608a。

如上文所讨论的，设计调整大小约束系统可以向设计者呈现针对要被施加于数字元素的手动选择的约束的选项。图6C图示了包括第一设计元素604和第二设计元素608的调整大小约束图形用户界面602。调整大小约束图形用户界面602包括自定义面板614，其具有自动选择元素610、手动选择元素612、边缘约束元素616、宽度约束元素618和高度约束元素620。

设计调整大小约束系统可以从所选择的设计元素中移除自动施加的语义感知调整大小约束，并且施加手动选择的约束。如图6C所图示的，尽管设计调整大小约束系统自动地限定针对第二设计元素608的顶约束、左约束、宽度约束和高度约束，但设计调整大小约束系统可以移除那些自动施加的语义感知调整大小约束。例如，基于与手动选择元素612的用户交互，设计调整大小约束系统确定将手动选择的约束施加于第二设计元素608。特别地，设计者可以选择边缘约束元素616的顶约束和左约束，以移除自动施加的左约束和顶约束。此外，设计者可以选择边缘约束元素616的右约束和底约束。基于与边缘约束元素616的设计者交互，设计调整大小约束系统可以确定用以施加于第二设计元素608的约束。尽管没有被图示，但设计调整大小约束系统也可以检测与宽度约束元素618和高度约束元素620的设计者交互，以添加或移除宽度约束和高度约束。

设计调整大小约束系统施加手动选择的约束，并且更新调整大小约束图形用户界面602以包括调整大小操作期间的固定覆盖。图6D图示了具有经更新的第一设计元素604a和经更新的第二设计元素608a的调整大小约束图形用户界面602。此外，设计调整大小约束系统呈现右固定覆盖626和底固定覆盖628。注意，除了手动施加的右约束和底约束之外，自动施加的宽度和高度约束还在调整大小期间施加。

随着设计调整大小约束系统接收对第一设计元素604调整大小的设计者请求，设计调整大小约束系统图示第二设计元素608的固定行为。特别地，设计调整大小约束系统呈现经更新的第一设计元素604a，以提供针对对第一设计元素604调整大小的请求的实时反馈。此外，经更新的第二设计元素608a图示了基于手动选择的约束的对第二设计元素604的实时调整大小行为。例如，设计调整大小约束系统生成右固定覆盖626和底固定覆盖628，以展示经更新的第二设计元素608a的固定行为。

如图6A至图6D所示出的，设计调整大小约束系统还提供在自动生成的语义感知调整大小约束和手动约束之间的独特平衡和工作流。特别地，设计调整大小约束系统使任何调整大小操作都由自动生成的语义感知调整大小约束自动地约束。因此，设计调整大小约束系统不需要呈现关于约束的复杂细节。如果用户选择编辑自动生成的语义感知约束并将一个或多个切换为手动约束，则设计调整大小约束系统揭示预先填充有约束的约束UI，这允许用户进行编辑以改变该元素的响应性行为。然后，设计调整大小约束系统可以使用该反馈来优化和运行启发式算法来智能地学习。

图7A至图7D图示了处于初始大小以及在调整大小操作期间的示例图形用户界面设计布局的对。特别地，图7A至图7D图示了：即使当设计布局包含复杂的设计元素时，设计调整大小约束系统也能够准确地对图形用户界面设计布局调整大小。

图7A至图7B图示了对包括多个设计元素的设计布局调整大小的设计调整大小约束系统。特别地，图7A图示了初始大小的设计布局702。图7B图示了经更新的设计布局702a。

图7A图示了设计布局702，其包括标题元素704、文本图形元素706和图像元素708。基于设计布局的经分析的设计语义，设计调整大小约束系统对设计布局702中的每个设计元素施加语义感知调整大小约束。

图7B图示了被施加于设计布局的设计元素的不同约束。特别地，图7B图示了经更新的设计布局702a，其包括经更新的标题设计元素704a、经更新的文本图形元素706a和经更新的图像元素708。设计调整大小约束系统将左约束和右约束施加于文本图形元素706，以生成跨度经更新的设计布局702a的宽度的经更新的文本图形元素706a。代替对图像元素708施加左约束和右约束，设计调整大小约束系统将宽度约束施加于图像元素708以生成经调整大小的图像元素708a。由于经调整大小的图像元素708a的宽度是固定的，因此设计调整大小约束系统在经更新的设计布局702a中包括未被包括在初始设计布局702中的附加的经调整大小的图像元素708a。

图7C至图7D提供了包括各种类型的设计元素的设计布局的附加示例。特别地，图7C图示了设计布局710，其包括初始大小的标题设计元素712、交互媒体元素714和文本设计元素718。

图7D图示了调整大小操作期间的经更新的设计布局710a。特别地，经更新的设计布局710a包括针对经更新的标题设计元素712a的顶固定覆盖716a、左固定覆盖716b和右固定覆盖716c。此外，经更新的设计布局710a包括经更新的交互媒体元素714a和经更新的文本设计元素718a。

设计调整大小约束系统可以在设计元素被调整大小时适应各个设计元素。特别地，设计调整大小约束系统可以扩展或最小化图像，并且重新配置文本以适配文本容器。例如，如图7B所示，设计调整大小约束系统将交互媒体元素714扩展到经更新的交互媒体元素714a的大小。设计调整大小约束系统将经更新的交互媒体元素714a的尺度最大化(即，放大媒体元素)。在至少一个其他实施例中，设计调整大小约束系统扩展经更新的交互媒体元素714a的边框，同时维持在经更新的交互媒体元素714a内呈现的媒体的相同尺度。例如，设计调整大小约束系统可以显示初始大小的交互媒体元素714的剪裁快照。因此，当设计调整大小约束系统扩展交互媒体元素714的边框时，设计调整大小约束系统可以移除剪裁以呈现相同尺度的经更新的交互媒体元素714a。此外，如图7B所图示的，设计调整大小约束系统将经更新的标题设计元素712a和经更新的文本设计元素718a中的文本重新格式化，以适配各个元素的边界。在附加的实施例中，设计调整大小约束系统改变文本设计元素的字体、字体大小、间距和格式。

现在参考图8，提供了关于根据一个或多个实施例的设计调整大小约束系统的能力和组件的附加细节。特别地，图8示出了在计算设备800上被实施的内容设计系统802的设计调整大小约束系统804的示例架构的示意图。设计调整大小约束系统804可以表示先前描述的设计调整大小约束系统的一个或多个实施例。在一个或多个实施例中，设计调整大小约束系统804的一些或所有组件可以与内容设计系统802分开实施。此外，计算设备800可以包括各种不同的设备。例如，在一些实施例中，设计调整大小约束系统804的一些或所有组件在客户端设备和/或服务器设备上实施。

在一个或多个实施例中，内容设计系统802通常有助于图形内容的创建、修改、分享和/或删除。在一个或多个实施例中，内容设计系统802是诸如

的设计应用。在其他实施例中，内容设计系统802包括与图形内容相关的多种应用、功能和操作，诸如成套应用、基于web的应用和/或计算设备800上的系统操作。

如图8所图示的，设计调整大小约束系统804包括用于执行本文所述的过程和特征的各种组件。例如，设计调整大小约束系统804包括设计元素分析器806、约束管理器808、经调整大小的设计生成器810、用户反馈管理器812和数据库820。下面依次描述这些组件中的每个组件。

如上文所提及的，设计调整大小约束系统804包括设计元素分析器806。例如，在一个或多个实施例中，设计元素分析器806检测或标识设计中的设计元素。例如，设计元素分析器806可以检测设计元素并确定针对每个设计元素的类型(例如，设计元素是否为容器、文本)。设计元素分析器806检测设计元素之间的关系(例如，父子)。此外，设计元素分析器806检测设计元素偏移、大小、相对位置等。上面提供了关于设计元素分析器806执行的任务的附加描述。

如所示，设计调整大小约束系统804包括约束管理器808。通常，约束管理器808可以基于上述的设计元素分析器808的分析对设计元素施加约束。特别地，约束管理器808访问由设计元素分析器806提取的语义信息。约束管理器808使用上面讨论的启发法规则以标识针对每个设计元素的语义感知调整大小约束的集合。此外，约束管理器808动态地分析设计元素的语义并且根据要求生成新的语义感知调整大小约束的集合。约束管理器808还管理手动选择的约束。特别地，约束管理器808标识所施加的约束是自动施加的语义感知调整大小约束还是手动选择的约束。

如图8所图示的，设计调整大小约束系统804包括经调整大小的设计生成器810。通常，经调整大小的设计生成器810接收改变设计布局的大小的用户输入(例如，接收将设计布局或视口从智能电话大小改变为平板大小的用户输入)。经调整大小的设计生成器810将由约束管理器808限定的语义感知调整大小约束施加于设计布局的每个设计元素。基于所施加的约束(例如，手动选择的或自动施加的)和接收到的调整大小的请求，经调整大小的设计生成器810生成具有经调整大小的设计元素的经调整大小的设计布局。

设计调整大小约束系统804还包括用户反馈管理器812。通常，用户反馈管理器812管理：呈现调整大小约束图形用户界面，检测与调整大小约束图形用户界面的交互，以及基于检测到的与调整大小约束图形用户界面的设计者交互来适应设计布局。用户反馈管理器812可以允许用户修改、成形、变形和/或操纵设计(或设计元素)的形状/大小。特别地，用户反馈管理器812呈现固定覆盖，其示出基于约束的设计元素的调整大小行为。此外，用户反馈管理器812向设计者呈现选项，以在施加自动语义感知调整大小约束和手动选择的约束之间切换。

设计调整大小约束系统804还包括数据库820。数据库包括约束规则822(例如，上面关于图4A和图4B所描述的启发法)。约束规则822可以包括约束规则的集合，该约束规则用于基于设计语义来标识对设计元素的适当语义感知调整大小约束。更具体地，约束规则822包括上面相对于图4A至图4B所讨论的规则。

设计调整大小约束系统804的组件806-820中的每个组件都可以包括软件、硬件或两者。例如，组件806-820可以包括被存储在计算机可读存储介质上并且由一个或多个计算设备(诸如客户端设备(例如，移动客户端设备)或服务器设备)的处理器可执行的一个或多个指令。在由一个或多个处理器执行时，设计调整大小约束系统804的计算机可执行指令可以使计算设备执行如本文所述的经调整大小的图形用户界面生成。备选地，组件806-820可以包括硬件，诸如用于执行特定功能或功能组的专用处理设备。此外，设计调整大小约束系统804的组件806-820可以包括计算机可执行指令和硬件的组合。

此外，设计调整大小约束系统804的组件806-820可以被实施为一个或多个操作系统、一个或多个独立应用、应用的一个或多个模块、一个或多个插件、可以由其他应用调用的一个或多个库函数或函数、和/或云计算模型。因此，组件806-820可以被实施为独立应用，诸如台式或移动应用。此外，组件806-820可以被实施为被主存在远程服务器上的一个或多个基于web的应用。组件806-820还可以在成套的移动设备应用或“apps”中被实施。为了说明，组件806-820可以在应用中被实施，该应用包括但不限于

ADOBE

CREATIVE

软件。“ADOBE”、“INDESIGN”、“ACROBAT”、“ILLUSTRATOR”、“PHOTOSHOP”和“CREATIVE CLOUD”是Adobe公司在美国和/或其他国家的注册商标或商标。

图9图示了环境900的示意图，其中设计调整大小约束系统804可以根据一个或多个实施例来实施。如图9所示，环境900包括各种计算设备，包括(多个)服务器设备904和一个或多个客户端设备902。此外，环境900包括网络912。网络912可以是计算设备可以通信的任何合适的网络。下面将关于图11更详细地讨论示例网络。

如所示，环境900包括客户端设备902。客户端设备902可以包括各种类型的客户端设备。例如，在一些实施例中，客户端设备902包括移动设备，诸如膝上型计算机、平板计算机、移动电话、智能电话等。在其他实施例中，客户端设备902包括非移动设备，诸如台式计算机或服务器或其他类型的客户端设备。下面将相对于图11讨论关于客户端设备902的附加细节。

如图9所图示的，环境900包括(多个)服务器设备904。(多个)服务器设备904可以接收、存储、生成和/或传输任何类型的数据，包括设计布局。例如，(多个)服务器设备904可以接收、存储来自客户端设备902的设计布局以及对其调整大小，并且将经调整大小的设计布局传输至客户端设备902。在一个或多个实施例中，(多个)服务器设备904包括数据服务器。(多个)服务器设备904还可以包括通信服务器或web主存服务器。下面将关于图11提供关于(多个)服务器设备904的附加细节。

虽然未被图示，但在一个或多个实施例中，(多个)服务器设备904还可以包括诸如在内容设计服务器系统906内的设计调整大小约束系统804的全部或一部分。例如，当位于(多个)服务器设备904中时，设计调整大小约束系统804可以包括在(多个)服务器设备904上运行的设计调整大小约束应用或者可以被下载到客户端设备902的软件应用的一部分。例如，设计调整大小约束系统804包括web主存应用，其允许客户端设备902与来自在(多个)服务器设备904上主存的内容设计服务器系统906的内容交互。以这种方式，(多个)服务器设备904可以基于来自客户端设备902的输入执行设计布局调整大小。

如图9所图示的，客户端设备902包括内容设计应用908和设计调整大小约束应用910。特别地，设计调整大小约束应用910可以包括设计调整大小约束系统804的全部或一部分。此外，设计调整大小约束应用910还允许客户端设备902与来自在(多个)服务器设备904上主存的内容设计服务器系统906的内容交互。因此，设计调整大小约束应用910允许客户端设备902执行设计布局调整大小。

尽管图9图示了(多个)服务器设备904、客户端设备902和网络912的特定布置，但各种附加布置也是可能的。例如，虽然图9图示了一个或多个客户端设备902经由网络912与(多个)服务器设备904通信，但在一个或多个实施例中，单个客户端设备可以绕过网络912与(多个)服务器设备904直接通信。

类似地，虽然图9的环境900被描述为具有各种组件，但环境900可以具有附加的或备选的组件。例如，设计调整大小约束系统804可以在多个计算设备上实施。特别地，设计调整大小约束系统804可以由(多个)服务器设备904整体实施，或者设计调整大小约束系统804可以由客户端设备902整体实施。备选地，可以跨多个设备或组件(例如，利用(多个)服务器设备904和一个或多个客户端设备902)实施设计调整大小约束系统804。

图1至图9、对应的文本和示例提供了设计调整大小约束系统804的许多不同的方法、系统、设备以及非暂态计算机可读介质。除前述内容之外，还可以根据包括用于实现特定结果的动作的流程图(诸如图9所示的动作的流程图)来描述一个或多个实施例。此外，本文所述的动作可以被重复、或彼此并行执行、或与相同或类似动作的不同实例并行执行。例如，图10图示了根据一个或多个实施例的用于生成经调整大小的图形用户界面设计布局的一系列动作1000的流程图。尽管图10图示了根据一个实施例的动作，但备选实施例可以省略、添加、重新排序和/或修改图10所示的任何动作。图10的动作可以作为方法的一部分来执行。备选地，非暂态计算机可读介质可以包括在由一个或多个处理器执行时使计算设备执行图10动作的指令。在又一些实施例中，系统可以执行图10的动作。

如图10所图示的，一系列动作1000可以包括接收对图形用户界面设计布局调整大小的请求的动作1010。例如，动作1010可以包括接收将图形用户界面设计布局从第一大小调整大小为第二大小的请求，该图形用户界面设计布局包括多个图形用户界面元素。第二大小可以大于或小于第一大小，并且具有与第一大小相同的形状或不同的形状。

一系列动作1000还可以包括分析图形用户界面设计布局的语义的动作1020。例如，动作1020可以包括：标识图形用户界面元素的层级、确定图形用户界面元素的类型和/或标识图形用户界面元素之间的相对位置。更特别地，动作1020可以涉及标识图形用户界面设计布局的图形用户界面元素之间的父子关系。动作1020还可以涉及标识子图形用户界面元素的边缘和父图形用户界面元素的对应边缘之间的偏移。此外，动作1020可以包括标识图形用户界面元素的类型。例如，动作1020可以涉及确定图形用户界面元素是否是文本、单行、嵌套等。

此外，动作1020可以涉及标识多个图形用户界面元素的图形用户界面元素的元素边缘的集合；以及标识图形用户界面设计布局的设计布局边缘的集合。此外，动作1020可以涉及测量偏移长度，其中偏移长度包括元素边缘的集合中的元素边缘与设计布局边缘的集合中的对应设计布局边缘之间的距离。动作1020还可以包括确定元素边缘的集合中的相对的元素边缘之间的图形用户界面元素的长度，以及确定设计布局边缘的集合中的对应的相对的设计布局边缘之间的图形用户界面设计布局的对应长度。

一系列动作1000可以包括自动地限定语义感知调整大小约束的集合的动作1030。特别地，动作1030包括：基于图形用户界面设计布局的经分析的语义，自动地限定针对多个图形用户界面元素的语义感知调整大小约束的集合。具体地，动作1030可以涉及：将启发法系统施加于图形用户界面设计布局的经分析的语义。例如，动作1030可以涉及：确定偏移长度小于图形用户界面设计布局的阈值比例；以及基于偏移长度小于设计布局的阈值比例的确定，通过将元素边缘固定至对应的设计布局边缘来限定边缘语义感知约束。动作1030还可以涉及：确定图形用户界面元素的长度满足图形用户界面设计布局的对应长度的阈值比例；以及基于确定图形用户界面元素的长度满足阈值比例，通过将相对的元素边缘对中的每个相对的元素边缘固定至相对的设计布局边缘中的对应的相对的设计布局边缘来限定相对的边缘语义感知约束。动作1030可以涉及：确定相对的元素边缘对中的任何相对的边缘都没有固定至对应的相对的设计布局边缘的集合；以及基于相对的元素边缘对中的任何相对的边缘都没有固定至对应的相对的设计布局边缘的集合的确定，设置对图形用户界面元素的长度语义感知约束。此外，动作1030可以涉及：确定针对子图形用户界面元素的偏移长度小于对应的父图形用户界面元素的阈值比例；以及基于偏移长度小于阈值比例的该确定，通过将子图形用户界面元素的边缘固定至父图形用户界面元素的对应边缘来限定边缘语义感知约束。动作1030还可以涉及：在对图形用户界面设计布局调整大小之前，检测对图形用户界面设计布局的一个或多个图形用户界面元素的用户改变；以及基于对一个或多个图形用户界面元素的用户改变，动态地更新语义感知调整大小约束的集合。

一系列动作1000还包括生成经调整大小的图形用户界面设计布局的动作1040。特别地，动作1040可以包括：通过根据经自动地限定的语义感知调整大小约束的集合对多个图形用户界面元素调整大小，生成第二大小的经调整大小的图形用户界面设计布局。

一系列动作1000还可以包括生成设计调整大小界面以用于设计者设备处的显示的动作，该设计调整大小界面包括图形用户界面设计布局、多个图形用户界面元素、表示语义感知调整大小约束的集合的固定覆盖、自动约束元素和手动约束元素。该动作还可以包括经由设计调整大小界面呈现表示语义感知调整大小约束的集合的自动固定覆盖的集合。此外，该动作可以包括：检测与手动约束元素的用户交互；以及基于与手动约束元素的用户交互，经由图形用户界面元素呈现手动约束的集合。该动作还可以包括：检测对手动约束的集合中的至少一个手动约束的设计者选择；更新设计调整大小界面以呈现表示手动约束的集合中的至少一个手动约束的手动固定覆盖的集合；以及基于检测到的设计者交互，通过根据手动约束的集合中的至少一个手动约束对多个图形用户界面元素调整大小，生成第二大小的经手动调整大小的图形用户界面设计布局。

一系列动作还可以涉及：在调整大小期间呈现表示边缘语义感知约束的自动固定覆盖；以及在生成经调整大小的图形用户界面设计布局之后，移除表示边缘语义感知约束的自动固定覆盖。

作为上述动作的附加(或者备选)，在一些实施例中，动作1000包括执行用于分析图形用户界面设计布局的语义的步骤，以及执行用于基于图形用户界面设计布局的经分析的语义自动地限定针对多个图形用户界面元素的语义感知调整大小约束的集合的步骤。例如，参考图2、图3A-3F所描述的动作可以包括用于执行用于分析图形用户界面设计布局的语义的步骤的对应动作。此外，图4A-4B和相关联的描述包括用于执行用于基于图形用户界面设计布局的经分析的语义自动地限定针对多个图形用户界面元素的语义感知调整大小约束的集合的步骤的对应动作。

如以下更详细地讨论的，本公开的实施例可以包括或利用专用或通用计算机，包括计算机硬件，诸如例如一个或多个处理器和系统存储器。本公开的范围内的实施例还包括用于承载或存储计算机可执行指令和/或数据结构的物理和其他计算机可读介质。特别地，本文描述的一个或多个过程可以至少部分地被实施为在非暂态计算机可读介质中体现的、并且由一个或多个计算设备(例如，本文所述的任何介质内容访问设备)可执行的指令。通常地，处理器(例如，微处理器)接收来自非暂态计算机可读介质(例如，存储器等)的指令并且执行那些指令，从而执行一个或多个过程，包括本文所述的一个或多个过程。

计算机可读介质可以是可以由通用或专用计算机系统访问的任何可用介质。存储计算机可执行指令的计算机可读介质是非暂态计算机可读存储介质(设备)。承载计算机可执行指令的计算机可读介质是传输介质。因此，通过示例而非限制，本公开的实施例可以包括至少两种明显不同种类的计算机可读介质：非暂态计算机可读存储介质(设备)和传输介质。

非暂态计算机可读存储介质(设备)包括RAM、ROM、EEPROM、CD-ROM、固态驱动器(“SSD”)(例如，基于RAM的)、闪速存储器、相变存储器(“PCM”)、其他类型的存储器、其他光盘存储装置、磁盘存储装置或其他磁性存储设备、或者可以用于存储以计算机可执行指令或数据结构的形式的所期望的程序代码装置并且可以由通用或专用计算机访问的任何其他介质。

“网络”被定义为实现计算机系统和/或模块和/或其他电子设备之间的电子数据的传输的一个或多个数据链路。当信息通过网络或其他通信连接(硬接线、无线或者硬接线或无线的组合)被传送或被提供给计算机时，计算机正确地将该连接视为传输介质。传输介质可以包括网络和/或数据链路，其可以用于承载以计算机可执行指令或数据结构的形式的所期望的程序代码装置并且可以由通用或专用计算机访问。上述的组合也应当被包括在计算机可读介质的范围内。

此外，在到达各种计算机系统组件之后，以计算机可执行指令或数据结构形式的程序代码装置可以从传输介质被自动传送至非暂态计算机可读存储介质(设备)(反之亦然)。例如，通过网络或数据链路接收到的计算机可执行指令或数据结构可以在网络接口模块(例如“NIC”)内的RAM中被缓冲，并且然后被最终传送到计算机系统RAM和/或计算机系统处的不易失性计算机存储介质(设备)。因此，应该理解，非暂态计算机可读存储介质(设备)可以被包括在计算机系统组件中，计算机系统组件也(或甚至主要地)利用传输介质。

例如，计算机可执行指令包括指令和数据，该指令和数据当在处理器处被执行时使通用计算机、专用计算机或专用处理设备执行特定功能或功能组。在一些实施例中，计算机可执行指令在通用计算机上执行，以将通用计算机转变为实施本公开的元素的专用计算机。例如，计算机可执行指令可以是二进制、中间格式指令(诸如汇编语言)，或者甚至是源代码。虽然已经用特定于结构特征和/或方法动作的语言描述了主题，但应当理解，所附权利要求中限定的主题不一定限于上述特征或上述动作。相反，所述特征和动作被公开为实施权利要求的示例形式。

本领域技术人员将理解，本公开可以在具有许多类型的计算机系统配置的网络计算环境中被实践，包括个人计算机、台式计算机、膝上型计算机、消息处理器、手持设备、多处理器系统、基于微处理器或可编程消费电子设备、网络PC、小型计算机、大型计算机、移动电话、PDA、平板计算机、寻呼机、路由器、交换机等。本公开还可以在分布式系统环境中被实践，其中通过网络链接(通过硬接线数据链路、无线数据链路或者硬接线和无线数据链路的组合)的本地和远程计算机系统均执行任务。在分布式系统环境中，程序模块可以位于本地和远程存储器存储设备两者中。

本公开的实施例也可以在云计算环境中被实施。在本说明书中，“云计算”被定义为用于实现对可配置计算资源的共享池的按需网络访问的模型。例如，可以在市场中采用云计算，以提供对可配置计算资源的共享池的无所不在和方便的按需访问。可配置计算资源的共享池可以经由虚拟化被快速地提供，并且以低的管理努力或服务提供商交互被释放并且然后相应地被缩放。

云计算模型可以由各种特性组成，诸如例如按需自助服务、广泛的网络访问、资源池、快速弹性、测量服务等。云计算模型还可以公开各种服务模型，诸如软件即服务(“SaaS”)、平台即服务(“PaaS”)和基础设施即服务(“IaaS”)。云计算模型还可以使用不同的部署模型被部署，诸如私有云、社区云、公共云、混合云等。在本说明书和权利要求书中，“云计算环境”是采用云计算的环境。

图11以框图形式图示了可以被配置为执行上述一个或多个过程的示例计算设备1100(例如，计算设备800、客户端设备902和/或(多个)服务器设备904)。将理解，设计调整大小约束系统804可以包括计算设备1100的实施。如图11所示，计算设备可以包括处理器1102、存储器1104、存储设备1106、I/O接口1108和通信接口1110。此外，计算设备1100可以包括输入设备，诸如触摸屏、鼠标、键盘等。在一些实施例中，计算设备1100可以包括比图11所示的更少或更多的组件。现在将以附加细节描述图11所示的计算设备1100的组件。

在特定实施例中，(多个)处理器1102包括用于执行指令(诸如构成计算机程序的那些指令)的硬件。作为示例而非限制的方式，为了执行指令，(多个)处理器1102可以从内部寄存器、内部高速缓存、存储器1104或存储设备1106中取回(或取得)指令，并对其进行解码和执行。

计算设备1100包括耦合至(多个)处理器1102的存储器1104。存储器1104可以用于存储数据、元数据和程序以供(多个)处理器执行。存储器1104可以包括一个或多个易失性和非易失性存储器，诸如随机存取存储器(“RAM”)、只读存储器(“ROM”)、固态磁盘(“SSD”)、闪存、相变存储器(“PCM”)或其他类型的数据存储装置。存储器1404可以是内部存储器或分布式存储器。

计算设备1100包括存储设备1106，存储设备1106包括用于存储数据或指令的存储装置。作为示例而非限制的方式，存储设备1106可以包括上述非暂态存储介质。存储设备1106可以包括硬盘驱动器(HDD)、闪速存储器、通用串行总线(USB)驱动器或这些或其他存储设备的组合。

计算设备1100还包括一个或多个输入或输出(“I/O”)设备/接口1108，它们被提供以允许用户向计算设备1100提供输入(诸如用户笔画)、从计算设备1100接收输出以及以其他方式向/从计算设备1100传输数据。这些I/O设备/接口1108可以包括鼠标、键盘、触摸屏、摄像头、光学扫描仪、网络接口、调制解调器、其他已知I/O设备或这样的I/O设备/接口1108的组合。触摸屏可以通过书写设备或手指激活。

I/O设备/接口1108可以包括用于向用户呈现输出的一个或多个设备，包括但不限于图形引擎、显示器(例如，显示屏)、一个或多个输出驱动器(例如，显示驱动器)、一个或多个音频扬声器和一个或多个音频驱动器。在一些实施例中，设备/接口1108被配置为向显示器提供图形数据以向用户呈现。图形数据可以表示一个或多个图形用户界面和/或可以服务特定实施方式的任何其他图形内容。

计算设备1100还可以包括通信接口1110。通信接口1110可以包括硬件、软件或两者。通信接口1110可以提供一个或多个接口，以用于在计算设备和一个或多个其他计算设备1100或一个或多个网络之间的通信(诸如，例如基于分组的通信)。作为示例而非限制的方式，通信接口1110可以包括用于与以太网或其他基于线的网络通信的网络接口控制器(NIC)或网络适配器，或用于与无线网络(诸如Wi-Fi)通信的无线NIC(WNIC)或无线适配器。计算设备1100还可以包括总线1112。总线1112可以包括硬件、软件或两者，它们将计算设备1100的组件彼此耦合。

在前面的说明书中，已经参考其具体示例实施例描述了本发明。参考本文所讨论的细节描述了本发明的各种实施例和方面，并且附图图示了各种实施例。上面的描述和附图是本发明的说明，并且将不被理解为限制本发明。描述了许多具体细节，以提供对本发明的各种实施例的透彻理解。

本发明可以以其他具体形式来体现而不脱离其精神或本质特性。所述实施例在各方面仅被视为说明性的而非限制性的。例如，本文所述的方法可以用更少或更多的步骤/动作来执行，或者步骤/动作可以以不同的顺序执行。此外，本文所述步骤/动作可以被重复、或彼此并行执行，或与相同或类似步骤/动作的不同实例并行执行。因此，本发明的范围由所附权利要求而不是由前面的描述来指示。在权利要求同等含义和范围内的所有改变都应被包含在其范围内。

Claims

1.一种非暂态计算机可读介质，其上存储在由至少一个处理器执行时使计算设备执行以下操作的指令：

接收将图形用户界面设计布局从第一大小调整大小为第二大小的请求，所述图形用户界面设计布局包括多个图形用户界面元素；

分析所述图形用户界面设计布局的语义；

基于所述图形用户界面设计布局的经分析的所述语义，自动地限定针对所述多个图形用户界面元素的语义感知调整大小约束的集合；以及

通过根据经自动地限定的所述语义感知调整大小约束的集合对所述多个图形用户界面元素调整大小，生成所述第二大小的经调整大小的图形用户界面设计布局。

2.根据权利要求1所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：生成调整大小约束图形用户界面以用于设计者设备处的显示，所述调整大小约束图形用户界面包括所述图形用户界面设计布局、所述多个图形用户界面元素、自动约束元素和手动约束元素。

3.根据权利要求2所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：经由所述调整大小约束图形用户界面，呈现表示所述语义感知调整大小约束的集合的自动固定覆盖的集合。

4.根据权利要求3所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：

检测与所述手动约束元素的用户交互；以及

基于与所述手动约束元素的所述用户交互，经由所述图形用户界面元素呈现手动约束的集合。

5.根据权利要求4所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：

检测对所述手动约束的集合中的至少一个手动约束的设计者选择；

更新所述调整大小约束图形用户界面，以呈现表示所述至少一个手动约束的一个或多个手动固定覆盖；以及

基于检测到的所述设计者选择，通过根据所述至少一个手动约束对所述多个图形用户界面元素中的至少一个图形用户界面元素调整大小，生成所述第二大小的经调整大小的所述图形用户界面设计布局。

6.根据权利要求1所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备通过以下操作来分析所述图形用户界面设计布局的所述语义的指令：

标识所述多个图形用户界面元素中的图形用户界面元素的元素边缘的集合；

标识所述图形用户界面设计布局的设计布局边缘的集合。

7.根据权利要求6所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：

测量偏移长度，其中所述偏移长度包括所述元素边缘的集合中的元素边缘与所述设计布局边缘的集合中的对应的设计布局边缘之间的距离；

确定所述偏移长度小于所述图像用户界面设计布局的阈值比例；以及

基于所述偏移长度小于所述图形用户界面设计布局的所述阈值比例的确定，通过将所述元素边缘固定至对应的所述设计布局边缘来限定边缘语义感知约束。

8.根据权利要求6所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：

确定在所述元素边缘的集合中的相对的元素边缘对之间的所述图形用户界面元素的长度；

确定所述设计布局边缘的集合中的对应的相对的设计布局边缘之间的所述图形用户界面设计布局的对应长度；

确定所述图形用户界面元素的所述长度满足所述图形用户界面设计布局的所述对应长度的阈值比例；

基于确定所述图形用户界面元素的所述长度满足所述阈值比例，通过将所述相对的元素边缘对中的每个相对的元素边缘固定至所述相对的设计布局边缘中的对应的相对的设计布局边缘来限定相对的边缘语义感知约束。

9.根据权利要求6所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：

确定相对的元素边缘对中的任何相对的边缘都没有固定至对应的相对的设计布局边缘的集合；以及

基于所述相对的元素边缘对中的任何相对的边缘都没有固定至所述对应的相对的设计布局边缘的集合的确定，设置对所述图形用户界面元素的长度语义感知约束。

10.根据权利要求1所述的非暂态计算机可读介质，还包括在由所述至少一个处理器执行时使所述计算设备执行以下操作的指令：通过确定所述多个图形用户界面元素中的图形用户界面元素的类型，分析所述图形用户界面设计布局的所述语义。

11.一种系统，包括：

至少一个处理器；

启发法系统，包括用于生成约束的规则；以及

计算机可读存储介质，存储在由所述至少一个处理器执行时使所述系统执行以下操作的指令：

通过标识图形用户界面元素的层级、确定所述图形用户界面元素的类型以及标识所述图形用户界面元素之间的相对定位，分析所述图形用户界面设计布局的语义；

通过向所述图形用户界面设计布局的经分析的所述语义施加所述启发法系统，自动地限定针对所述多个图形用户界面元素的语义感知调整大小约束的集合；以及

12.根据权利要求11所述的系统，其中所述指令在由所述至少一个处理器执行时使所述系统：通过标识所述图形用户界面设计布局的所述图形用户界面元素之间的父和子关系，标识图形用户界面元素的所述层级。

13.根据权利要求11所述的系统，其中所述指令在由所述至少一个处理器执行时使所述系统：通过标识子图形用户界面元素的边缘与父图形用户界面元素的对应边缘之间的偏移，标识所述图形用户界面元素之间的相对定位。

14.根据权利要求13所述的系统，其中所述指令在由所述至少一个处理器执行时使所述系统：

确定针对子图形用户界面元素的偏移长度小于对应的父图形用户界面元素的阈值比例；以及

基于所述偏移长度小于所述阈值比例的确定，通过将所述子图形用户界面元素的边缘固定至所述父图形用户界面元素的对应边缘来限定边缘语义感知约束。

15.根据权利要求14所述的系统，还包括在由所述至少一个处理器执行时使所述系统执行以下操作的指令：呈现表示所述边缘语义感知约束的自动固定覆盖。

16.根据权利要求15所述的系统，还包括在由所述至少一个处理器执行时使所述系统执行以下操作的指令：在经调整大小的所述图形用户界面设计布局的生成之后，移除表示所述边缘语义感知约束的所述自动固定覆盖。

17.根据权利要求11所述的系统，还包括在由所述至少一个处理器执行时使所述系统执行以下操作的指令：

在对所述图形用户界面设计布局调整大小之前，检测对所述图形用户界面设计布局的一个或多个图形用户界面元素的用户改变；以及

基于对所述一个或多个图形用户界面元素的所述用户改变，动态地更新所述语义感知调整大小约束的集合。

18.一种语义感知约束选择的方法，所述方法在用于分析图形显示并且对所述图形显示调整大小的数字媒体环境中，所述方法包括：

执行用于分析所述图形用户界面设计布局的语义的步骤；

执行用于基于所述图形用户界面设计布局的经分析的所述语义来自动地限定针对所述多个图形用户界面元素的语义感知调整大小约束的集合的步骤；以及

19.根据权利要求18所述的方法，还包括：生成设计调整大小界面以用于设计者设备处的显示，所述设计调整大小界面包括所述图形用户界面设计布局、所述多个图形用户界面元素、自动约束元素和手动约束元素。

20.根据权利要求18所述的方法，还包括：基于对所述手动约束元素的用户选择，改变经自动地限定的所述语义感知调整大小约束的集合中的一个或多个自动约束。