Studio / ROBLOX

Roblox Studio 卡片比例：设置 UIAspectRatioConstraint

保持目标元素的形状，不把方形图标与长说明绑定在一起。选择对象、设置宽高比，再检查窄区域、布局和翻译文字。

更新日期: 2026-10-07

确定究竟什么被拉伸 #

从一个元素开始，例如面板尺寸改变后，方形物品图片变宽。分别检查是图片区域变形，还是其他卡片元素只是换了位置。这是不同任务。保持比例是保持宽度与高度的关系，不是所有设备都有相同像素数量。

写下预期：“父容器变化时，图标区域仍是方形。”这可以验证，也不承诺一次修好整个菜单。本文使用建议的练习卡片，没有测量已发布游戏或实际 Studio 尺寸。

选择需要固定比例的元素 #

练习可把 ItemCard 分成 IconArea、Title 和 Description。图标可能需要方形，文字却需要多行。对整个卡片施加方形限制，会变成另一项设计问题：长说明仍然必须装进这种形状。

先只处理 IconArea。这些是我们的示例名称，Roblox 不会自动创建结构。建立独立 Frame，或使用原型中合适的 GuiObject。如果其中有 ImageLabel，单独检查子图片位置；外部容器为方形，并不说明所有子图片的设置。

在目标对象下添加约束 #

在 Explorer 中找到准确元素，把 UIAspectRatioConstraint 添加为其子对象。Roblox 文档将该约束的父 GuiObject 作为目标。随后选中约束本身，找到 AspectRatio。

继续前核对层级：限制 IconArea 时，应是 ItemCard → IconArea → UIAspectRatioConstraint。直接放在 ItemCard 下，就针对整张卡片。其他面板中相似名字容易混淆，因此应核对父对象，而不是只看属性名称。

约束针对自己的父对象 — 原创练习层级：限制 IconArea，文字作为同级对象保留。

设置并正确理解比例 #

AspectRatio 表示宽度除以高度。方形用 1，宽为高两倍用 2，宽为高一半用 0.5。输入的是比例数值，不是“1:1”字符串，也不是像素数。

先选一个比例；如果形状应保持一致，不要每换屏幕尺寸就改比例。方形图片可使用自己的方形资源，观察是否拉伸。我们的三个矩形图示用于解释比例，不是实际测量界面的截图。

区分形状与绝对尺寸 #

120×120 和 180×180 大小不同，但都是比例 1。240×120 的比例是 2，120×240 则是 0.5。这些是自行选择的算术例子，不是项目测量值。当你期待方形却只比较宽度时，它们有助于发现错误。

如果形状正确但卡片太大，不要随意改变比例只为缩小。先查看容器尺寸和限制大小的工具。UISizeConstraint 与 UIAspectRatioConstraint 相关但任务不同：一个处理尺寸边界，另一个处理比例。应在自己的布局中检查共同结果。

练习尺寸	宽高比
120 × 120	1
180 × 180	1
240 × 120	2
120 × 240	0.5

在窄父区域与宽父区域中重复 #

保留相同物品和文字，对比两种可用区域：窄与宽。记录父区域大小、目标观察到的宽高和设置比例。设备屏幕对比可以参考我们的 Device Simulator 指南。不要同时更换配置和卡片内容。

除了形状，也检查位置：图标可能仍是方形，却挡住出口或超出可用区域。这不否定比例计算，而是另一种布局问题。修正后使用同一对尺寸和同一个物品重新检查。

考虑布局与其他约束 #

元素参与 UIListLayout 时，不能仅从列表设置判断其尺寸。文档提醒，UIAspectRatioConstraint 会覆盖布局对尺寸的控制。一次改变多项属性前，先记录布局与其他约束的存在。

排查时可比较独立练习元素和列表中的元素。使用另一个原型，保留原结构，并记录一项改变的设置。不要仅因为独立图片看起来正确，就删除真实菜单的布局。列表之外形状正确，并不验证列表中的位置。

单独检查长名称与翻译 #

先换入短标题，再换入界面确实可能收到的长文字。检查标题、说明和动作是否可用。宽高比不选择字号，也不保证所有翻译都能放下。Roblox 将文字尺寸约束、自动大小与比例分开说明。

文字空间不足时，先决定玩家需要看到什么：完整说明、多行内容，或独立详情面板。不要为了保持外部方形而把文字缩到难以阅读。练习中的方形对应图标，所以图像形状与文字空间可以分开设计。

检查动作，不只看图片 #

打开卡片、选择物品，并按预定操作关闭面板。调整尺寸后再次重复。视觉几何正确，不证明按钮处理、选择状态或触控流程正确。这些属于界面行为检查。

一个虚构情况是：图标已变成方形，但相邻文字遮住出口，导致无法触发。应记录两个结论：比例已修正，退出路径仍待检查。不要凭一张截图宣布整张卡片完成。本文示例不创建真实选择或关闭逻辑。

保留清楚的结果记录 #

记录约束目标、父对象、AspectRatio、可用区域、卡片内容与布局参与情况。每种布局加上预期和观察。如果只是计划检查，就如此标注；示意图和比例计算不等于运行过 Studio。

练习准备就绪的条件，是目标形状与可读文字、可用动作在所选条件下同时成立。这不保证相同物理大小，也不覆盖所有设备和翻译。原创图示解释比例和层级，不展示真实游戏测量。

检查项目	记录内容
约束目标	准确元素与父对象
布局	列表和其他约束
长翻译	两种尺寸中的相同文字
动作	选择和退出路径

原始资料

Roblox Creator Hub — Size modifiers and constraints
Roblox Creator Hub — UIAspectRatioConstraint