XD 中的响应式调整

自适应调整大小功能允许我们为不同尺寸的设备创建自适应用户界面。自适应调整大小功能通过缩小画板的宽度将布局从桌面转到平板电脑或移动设备。它将自动调整画板内所有内容的大小。这是 Adobe XD 最出色的功能之一，它为应用程序提供了实时的虚拟导览。

如今，自适应调整大小是客户需求的功能之一。每个人都希望他们的设计在不同的设备上看起来很漂亮。当一个应用程序被设计出来时，它不仅仅局限于一个设备。作为一名设计师，您有责任为多个设备创建用户界面。因此，自适应调整大小功能通过使其可在不同设备上进行调整来节省大量时间。它将通过计算结构和布局来分析设计中的对象，并自动调整它们在不同尺寸设备上的大小。

确保将同一部分的对象分组，以便 XD 了解对象之间的关系。例如，对于导航菜单，将导航链接和图标放在一起，以便 XD 可以在对象之间创建层次结构。

建议在创建任何设计时牢记自适应设计，并避免使用填充来对齐对象。

如何使用 Adobe XD 创建自适应设计？

要创建自适应设计，请从属性检查器区域打开自适应调整大小切换图标。布局部分提供了其他一些自适应调整大小控件。布局部分定义了如何调整对象组在不同布局上的大小。

要应用自适应调整大小选项，请选择您希望适合不同布局的元素，并打开切换开关。

默认情况下，自适应调整大小功能对画板处于关闭状态，以便用户可以根据他们的要求调整他们的设计。

要为画板打开自适应调整大小，请选择画板，然后使用切换按钮打开自适应调整大小功能。我们可以移动画板的边界来调整它们的大小。当自适应调整大小功能打开时，自适应调整大小功能将自动调整不同布局上的画板内容。

Adobe XD 提供了两个不同的选项来自定义自适应结果，分别是自动和手动。自动选项将动态调整画板内容，手动选项允许我们自定义自适应结果。

手动选项允许我们手动定义对象的位置。我们可以轻松地选择要调整的对象并定义它们的位置。手动选项包含以下选项

要手动调整不同布局的对象，请选择对象并将自适应调整大小选项从自动更改为手动。现在，使用给定的四个选项之一；顶部、右侧、底部、左侧指示器以及其他高度和宽度按钮进行所需的更改。

固定宽度和固定高度按钮允许我们设置对象的固定或可变宽度和高度。其他四个方向指示器按钮允许我们设置与相应方向的固定或可变边距。

手动调整大小

手动调整大小允许我们自定义自适应结果；如果您对 Adobe XD 的自动自适应行为不满意，您可以通过进行一些更改来手动编辑规则。要更新自适应规则，请从自适应调整大小部分选择手动选项，并定义规则以确定对象在不同布局上的行为，通过调整其高度、宽度和边距。

手动调整大小选项会覆盖 Adobe XD 的自动行为。我们有以下控件来指定对象位置、高度和宽度在不同布局上。

• 固定/可变宽度
• 固定/可变高度
• 固定/可变左边距
• 固定/可变右边距
• 固定/可变上边距
• 固定/可变下边距

如何覆盖组的自适应调整大小

默认情况下，Adobe XD 支持组对象的自适应调整大小。尽管，如果需要，我们可以自定义它。我们可以使用以下方法进行自定义

• 要暂时覆盖自适应行为，请使用 Shift 键。它允许我们从其中一个角选择手柄拉动以在调整组大小时锁定组的纵横比。
• 关闭自适应调整大小选项以覆盖它。

总结

如今，世界充满了不同尺寸的小工具。当一个应用程序被设计出来时，它不仅仅局限于一个设备。作为一名设计师，您有责任为多个设备创建用户界面。考虑应用程序的广泛设备至关重要。

为了克服这个问题，Adobe XD 支持一个名为自适应调整大小的功能。它允许我们在调整对象大小时保持与其他对象的关系，以适应不同屏幕尺寸上的可见性。