98 lines
6.7 KiB
Markdown
98 lines
6.7 KiB
Markdown
---
|
||
sidebar_position: 2
|
||
---
|
||
|
||
# Atomic design
|
||
|
||
Atomic Design — это методология проектирования и организации пользовательских интерфейсов, предложенная Брэдом Фростом (Brad Frost). Она основана на идее разделения интерфейса на небольшие, независимые и переиспользуемые компоненты, которые затем комбинируются для создания более сложных структур. Название методологии вдохновлено химией: так же, как молекулы состоят из атомов, интерфейсы состоят из базовых компонентов.
|
||
|
||
## Основные принципы Atomic Design
|
||
1. **Иерархия компонентов:**
|
||
- Компоненты организуются в иерархию от простых к сложным.
|
||
- Каждый уровень иерархии имеет своё назначение и уровень абстракции.
|
||
2. **Переиспользуемость:**
|
||
- Компоненты проектируются так, чтобы их можно было использовать в разных частях интерфейса.
|
||
3. **Модульность:**
|
||
- Каждый компонент изолирован и независим, что упрощает тестирование и поддержку.
|
||
4. **Масштабируемость:**
|
||
- Методология подходит как для небольших, так и для крупных проектов.
|
||
|
||
## Уровни Atomic Design
|
||
1. Атомы (Atoms):
|
||
- Наименьшие и базовые элементы интерфейса, которые нельзя разделить на более мелкие части.
|
||
- Примеры: кнопки, инпуты, иконки, текстовые элементы.
|
||
2. Молекулы (Molecules):
|
||
- Комбинация нескольких атомов, которые вместе выполняют определённую функцию.
|
||
- Примеры: форма поиска (инпут + кнопка), карточка товара (изображение + заголовок + цена).
|
||
3. Организмы (Organisms):
|
||
- Более сложные компоненты, состоящие из молекул и/или атомов.
|
||
- Примеры: шапка сайта (логотип + навигация + форма поиска), футер (ссылки + текст + иконки).
|
||
4. Шаблоны (Templates):
|
||
- Макеты страниц, которые определяют структуру и расположение организмов.
|
||
- Пример: шаблон главной страницы (шапка + список карточек товаров + футер).
|
||
5. Страницы (Pages):
|
||
- Конкретные реализации шаблонов с реальными данными.
|
||
- Пример: главная страница сайта с заполненными карточками товаров.
|
||
|
||
## Пример структуры проекта с использованием Atomic Design
|
||
```
|
||
src/
|
||
│
|
||
├── components/
|
||
│ ├── atoms/ # Атомы
|
||
│ │ ├── Button/
|
||
│ │ ├── Input/
|
||
│ │ └── Text/
|
||
│ │
|
||
│ ├── molecules/ # Молекулы
|
||
│ │ ├── SearchForm/ # Форма поиска (Input + Button)
|
||
│ │ └── ProductCard/ # Карточка товара (Image + Text + Button)
|
||
│ │
|
||
│ ├── organisms/ # Организмы
|
||
│ │ ├── Header/ # Шапка сайта (Logo + Navigation + SearchForm)
|
||
│ │ └── Footer/ # Футер (Links + Text + Icons)
|
||
│ │
|
||
│ ├── templates/ # Шаблоны
|
||
│ │ ├── HomeTemplate/ # Шаблон главной страницы
|
||
│ │ └── ProductTemplate/# Шаблон страницы товара
|
||
│ │
|
||
│ └── pages/ # Страницы
|
||
│ ├── HomePage/ # Главная страница
|
||
│ └── ProductPage/ # Страница товара
|
||
│
|
||
└── App.tsx # Основной файл приложения
|
||
```
|
||
|
||
## Преимущества Atomic Design
|
||
1. **Переиспользуемость:**
|
||
- Компоненты можно использовать в разных частях интерфейса, что сокращает дублирование кода.
|
||
2. **Масштабируемость:**
|
||
- Методология подходит для проектов любого размера.
|
||
3. **Упрощение разработки:**
|
||
- Чёткая структура помогает разработчикам быстро находить и изменять нужные компоненты.
|
||
4. **Согласованность интерфейса:**
|
||
- Использование атомов и молекул обеспечивает единообразие дизайна.
|
||
5. **Упрощение тестирования:**
|
||
- Компоненты можно тестировать изолированно.
|
||
|
||
## Недостатки Atomic Design
|
||
1. **Сложность для небольших проектов:**
|
||
- В маленьких проектах такая структура может показаться излишне сложной.
|
||
2. **Требует дисциплины:**
|
||
- Необходимо строго следовать принципам, чтобы избежать смешения уровней.
|
||
3. **Ограниченная гибкость:**
|
||
- В некоторых случаях строгая иерархия может ограничивать возможности кастомизации.
|
||
|
||
## Пример реализации Atomic Design
|
||
1. **Атом:** Кнопка (Button)
|
||
2. **Молекула:** Форма поиска (SearchForm)
|
||
3. **Организм:** Шапка сайта (Header)
|
||
4. **Шаблон:** Главная страница (HomeTemplate)
|
||
5. **Страница:** Главная страница (HomePage)
|
||
|
||
## Когда использовать Atomic Design
|
||
- В проектах с большим количеством переиспользуемых компонентов.
|
||
- Когда требуется высокая согласованность интерфейса.
|
||
- В командах, где дизайнеры и разработчики тесно взаимодействуют.
|
||
|
||
🚀 **_Источник: DeepSeek_** |