Design Systems & Component Libraries · 课时

间距、布局与图标

制定间距和网格布局规则，并创建可扩展的图标集，以保持不同设计之间的视觉和谐

间距、布局与图标 是 CoddyKit 上的免费 Design Systems & Component Libraries 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Design Systems & Component Libraries 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Design Systems & Component Libraries 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Visual Harmony for Users

Ever noticed how some apps just feel "right" to use? Often, it's thanks to thoughtful design choices.

In this lesson, we'll explore three pillars of visual harmony: consistent spacing, effective layout, and clear iconography. These elements work together to create a predictable and pleasant user experience.

The Power of White Space

Spacing, also known as "white space" or "negative space," is the empty area between design elements.

It improves readability by separating content.
It guides the user's eye, creating visual hierarchy.
It reduces cognitive load, making interfaces feel less cluttered.

Think of it as the air around your content!

Building a Spacing System

To achieve consistency, design systems often use a base unit for all spacing values. A common choice is 8 pixels (8px) or 4 pixels (4px).

All margins, paddings, and gaps then become multiples of this base unit (e.g., 8px, 16px, 24px, 32px). This creates a predictable rhythm and ensures elements always align nicely.

/* Example using an 8px base unit */
.card {
  padding: 16px; /* 2 * 8px */
  margin-bottom: 24px; /* 3 * 8px */
}

.button {
  margin-right: 8px; /* 1 * 8px */
}

Inner vs. Outer Space

It's crucial to understand the difference between padding and margin.

Padding is the space inside an element, between its content and its border.
Margin is the space outside an element, separating it from other elements.

Using them correctly helps control how elements interact visually.

<style>
  .box {
    border: 1px solid blue;
    background-color: lightblue;
    width: 100px;
    height: 50px;
    margin: 10px; /* Space outside the box */
    padding: 20px; /* Space inside the box */
  }
</style>
<div class="box">Content</div>

Structuring Your Content

Layout refers to the arrangement of elements on a page. A good layout makes content easy to scan and understand, guiding users through the information.

It defines how different sections, components, and text blocks are positioned relative to each other, creating a clear visual hierarchy and flow.

The Grid: Your Design Backbone

Grid systems are frameworks that help designers and developers arrange content in a consistent and organized way. They typically divide a page into columns and rows.

A common example is a 12-column grid. This flexible structure allows for many different content arrangements while ensuring everything stays aligned.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 equal columns */
    gap: 16px; /* Gutter between columns */
    border: 1px dashed gray;
  }
  .col-4 {
    grid-column: span 4; /* Element spans 4 columns */
    background-color: #e0e0e0;
    padding: 8px;
  }
</style>
<div class="grid-container">
  <div class="col-4">Item 1</div>
  <div class="col-4">Item 2</div>
  <div class="col-4">Item 3</div>
</div>

Layouts for Every Screen

A key aspect of modern layouts is responsiveness. This means your design should adapt and look great on any screen size, from small phones to large desktop monitors.

Grid systems and flexible spacing rules are fundamental to building responsive interfaces. They allow elements to rearrange, resize, or stack as the available screen space changes.

Icons: Universal Visual Cues

Icons are small graphical symbols used to represent actions, objects, or ideas. They are powerful tools in a design system because:

They convey meaning quickly, often faster than text.
They save screen space, especially on mobile.
They enhance navigation and user recognition.

A well-chosen icon can speak volumes!

Crisp Icons, Any Size

For icons to look great on any device, they need to be scalable. Two popular formats ensure this:

SVG (Scalable Vector Graphics): Vector-based, meaning they don't pixelate when scaled. Highly flexible.
Icon Fonts: Collections of icons delivered as a font. Easy to color and resize with CSS, but limited in complexity.

SVGs are generally preferred for their flexibility and quality.

<!-- Example of an SVG icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

Spacing & Layout Check

Test your knowledge on how spacing and layout contribute to a good user experience.

Mastering Visual Foundations

In this lesson, we explored how spacing, layout, and iconography are critical for creating visually harmonious and user-friendly interfaces.

Consistent spacing creates visual rhythm.
Grid layouts organize content and aid responsiveness.
Scalable icons provide clear visual cues.

These elements form the bedrock of a strong visual language in any design system.

常见问题解答

「间距、布局与图标」课时是免费的吗？

是的 — 「间距、布局与图标」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Design Systems & Component Libraries 课程的其余内容，请升级到 CoddyKit PRO。 Design Systems & Component Libraries 课程共包含 4 节课。

「间距、布局与图标」这节课中我会学到什么？

制定间距和网格布局规则，并创建可扩展的图标集，以保持不同设计之间的视觉和谐你通过在浏览器中直接运行的动手代码来练习 Design Systems & Component Libraries，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Design Systems & Component Libraries 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Design Systems & Component Libraries 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「间距、布局与图标」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Design Systems & Component Libraries 课中编写并运行代码吗？

能。每节 Design Systems & Component Libraries 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Design Systems & Component Libraries