如果您与 Web 开发人员密切合作，您可能已经体验过他们使用看起来像外语的技术术语。但别担心，我在这里解释一些您作为 UI/UX 设计师应该熟悉的最常见术语。理解这些术语将提高您作为设计人员的技能，并改善您与开发人员的协作。

1. Margin

Margin 是元素边界外的空间。它会在该元素与其周围的其他元素之间创建距离。

示例：在画布上排列按钮或图像等元素时，请保持它们之间的间距一致。

您可以通过将元素分开或使用对齐工具来调整边距，以实现一致的间距。

例如，在设计导航栏或横幅部分时，请在元素周围留出边距，以防止它们看起来彼此太近或太靠近屏幕边缘。

2. Padding

Padding 是元素边界内、内容（如文本或图像）与该元素边缘之间的空间。

例：使用包含文本元素、徽标和图标的导航栏时，请考虑调整内边距以改善其外观。

增加导航栏中的内部间距可以创建更平衡且易于阅读的外观。

例如，在顶部和底部设置 24 像素的内边距，并在左侧和右侧添加 36 像素的内边距，将在 nav 元素周围创建平衡的间距。

3. border

边框是围绕元素边缘的一条线，有助于定义其边界。

边框的粗细、样式和颜色可能会有所不同。

例：在设计卡片或输入字段组件时，您可能希望添加边框以使其在背景中脱颖而出。

此边框为输入字段提供了清晰的边界，使用户能够更轻松地识别他们需要单击或键入的位置。

您可以通过选择矩形并应用笔触、设置粗细、颜色和样式（实线、虚线等）来轻松添加边框。

例如，添加 2px 的纯黑色边框将在输入字段周围创建清晰的轮廓，使其在视觉上与众不同。

4. Border-Radius

Border-radius 是一个属性，它允许你对元素的角进行圆角处理，使它们不那么锐利，并使你的设计看起来更柔和。

这是一个小细节，但它可以让您的设计感觉更加现代和友好。

例：如果您正在设计矩形按钮或卡片，默认情况下，它的角是尖锐的直角。要柔化外观，您可以应用 border-radius。

例如，将 border-radius 设置为 20px 将使按钮的角变圆，使其外观更加现代和友好。

5. 字体系列

字体系列由您选择的特定字体定义，例如 Arial、Times New Roman 或 Helvetica。

例：在处理设计时，您需要为不同的文本元素选择字体系列，以保持设计的一致性。

例如，为正文选择像 Inter Tight 这样干净现代的字体，以确保可读性和样式。

这种字体系列的选择可确保网站上的所有文本都具有统一的外观。您可以在 Figma 或 XD 中将此字体设置为全局样式，这样就可以轻松地跨多个文本图层应用。

6. 网格系统：

网格系统是一个框架，它将网页划分为一系列列和行，以帮助一致地对齐和组织内容。

当您在设计工具中使用网格时，您正在结构化框架中组织元素。

示例：在设计金融网站时，您可以使用 12 列网格系统来帮助您以平衡且具有视觉吸引力的方式排列文本、图像和按钮等元素。

例如，您可以将标题对齐以跨越 6 列，同时将图像放置在 4 列宽度中，以确保所有内容都完美对齐。

7. 弹性盒

Flexbox 是一种 CSS 布局模型，它允许元素在容器内对齐和分配空间，从而更轻松地创建灵活且响应式的布局。

例：在 Figma 或 XD 中，您可以使用自动布局 （Figma） 或堆栈 （XD） 来模拟弹性框的行为。

例如，如果您正在设计一行按钮，则可以使用自动布局将它们均匀地分布在容器中。当你调整容器的大小时，按钮会自动调整它们的间距，就像 Flexbox 一样。

这对于设计需要在任何屏幕尺寸上看起来都不错的响应式组件特别有用。

8. SVG

SVG（可缩放矢量图形）是一种使用 XML 定义基于矢量的图形的文件格式，该图形可以在不损失质量的情况下进行缩放。

示例：假设您为网站创建了一个 logo。如果将其保存为 SVG（可缩放矢量图形）文件，则可以将其大小调整为任意比例而不会降低其质量。

这意味着 SVG 徽标可以在您的网站上以任何大小使用，无论是用于小网站图标还是大型英雄图像，都不会显得模糊或像素化。

这可确保您的徽标在所有设备上都清晰锐利，从大显示器显示器到小手机屏幕。

9. Rem 和 Em

Rem 和 Em 是 CSS 中的相对单位，用于调整字体、填充和边距等元素的大小。Rem 基于根元素的字体大小，而 Em 则相对于其父元素的字体大小。

例：尽管 Figma 和 XD 不直接使用 rem 或 em，但您可以通过保持一致的字体大小并在整个设计中均匀缩放它们来实现类似的效果。

例如，如果您设置基本字体大小（例如 16px）并按比例缩放标题或按钮，则您实际上是在代码中复制 rem 或 em 的行为。

此方法有助于保持各种组件和屏幕之间的设计一致性。

结论

了解边距、填充和响应式设计等术语如何应用于您在 Figma 或 Adobe XD 中的工作，有助于弥合设计和开发之间的差距。这使得协作更加顺畅，并确保您的设计实用且更易于在现实世界中实现。