问题：如何在Adobe XD中单独修改矩形的某个圆角？

Question

在Adobe XD中，如何单独修改矩形的某一个圆角，而不是同步调整所有圆角？通常情况下，使用“矩形”工具创建的形状，其四个圆角是联动的，修改其中一个角的半径会导致其他角同步变化。但通过“插入形状”功能并选择“自定义圆角”，可以实现对单个圆角的独立调整。具体操作是：选中矩形，进入“属性检查器”，点击“圆角”旁边的箭头，展开四个独立的圆角输入框，分别设置每个角的半径值。此方法适用于需要精细化设计的UI元素，如按钮、卡片等。掌握这一技巧，有助于提升界面设计的灵活性与细节控制能力。

Answer 1

1. Adobe XD 中如何单独修改矩形的某一个圆角

在 Adobe XD 中，使用“矩形”工具创建的矩形，默认情况下四个角的圆角半径是联动的，即修改一个角的半径值会同步应用到其他三个角。但在实际 UI 设计中，我们经常需要对不同的角设置不同的圆角半径，以满足视觉设计需求。

幸运的是，Adobe XD 提供了“自定义圆角”功能，允许我们单独设置每个角的圆角半径。接下来我们将从基础操作到进阶技巧逐步展开。

2. 基础操作：创建矩形并进入属性检查器

1. 选择左侧工具栏中的“矩形”工具（快捷键为 <kbd>R</kbd>）。
2. 在画布上绘制一个矩形。
3. 选中该矩形后，在右侧的“属性检查器”面板中，找到“圆角”输入框。
4. 此时，圆角输入框显示为一个统一的数值，表示四个角的圆角半径一致。

3. 进阶操作：展开四个独立圆角设置

为了实现对每个角的独立控制，需展开“圆角”设置项：

1. 在“属性检查器”中，点击“圆角”输入框旁边的箭头按钮（通常是一个小三角形）。
2. 展开后会出现四个输入框，分别对应左上、右上、右下、左下四个角。
3. 依次输入不同的数值，即可实现每个角的圆角半径独立设置。

这种操作方式适用于需要精细控制 UI 元素外观的设计场景，例如按钮、卡片、弹窗等。

4. 使用场景与设计建议

在实际项目中，以下几种情况适合使用“自定义圆角”功能：

• 设计带有视觉层次的卡片组件，例如只设置左上和右上角为圆角。
• 制作对话框或弹窗，其中某些角需要保持直角以匹配视觉风格。
• 创建渐变按钮或图标，通过不同圆角增强视觉表现。

建议在设计过程中合理使用该功能，避免过度定制导致视觉混乱。

5. 技术原理与设计逻辑

从技术角度看，Adobe XD 的“矩形”对象本质上是一个路径（Path），其圆角信息是路径的一部分。当用户使用“自定义圆角”功能时，XD 实际上是将原本统一的圆角路径拆分为多个独立的圆角子路径。

操作步骤	技术影响
绘制矩形	创建一个默认的矩形路径
点击圆角箭头	拆分路径中的圆角信息
设置不同半径	每个角的路径独立修改

6. 与其他设计工具的对比

在其他主流 UI 设计工具中，如 Figma 和 Sketch，也支持类似的功能，但操作方式略有不同：

• Figma：使用“Corner Radius”面板，支持每个角独立设置。
• Sketch：通过右键选择“Edit Corners”来分别调整。

Adobe XD 的操作方式更为直观，尤其适合习惯使用属性面板进行精细调整的设计师。

7. Mermaid 流程图展示操作流程

graph TD
    A[创建矩形] --> B[选中矩形]
    B --> C[打开属性检查器]
    C --> D[点击圆角旁箭头]
    D --> E[展开四个圆角输入框]
    E --> F[分别设置每个角的半径]
    F --> G[完成自定义圆角设置]