61 lines
3.2 KiB
Markdown
61 lines
3.2 KiB
Markdown
---
|
|
title: Ant Design and Chinese Enterprise Design Systems
|
|
created: 2026-06-02
|
|
updated: 2026-06-02
|
|
type: concept
|
|
tags: [web-design, design-system, chinese-design]
|
|
sources:
|
|
- raw/articles/web-design-research.md
|
|
- https://ant.design/
|
|
- https://tdesign.tencent.com/
|
|
confidence: high
|
|
---
|
|
|
|
# Ant Design и Китайские Enterprise-дизайн системы
|
|
|
|
## Ant Design (Ant Group / Alibaba)
|
|
Самая популярная enterprise-дизайн система в мире (после Material Design).
|
|
|
|
### 5 принципов Ant Design
|
|
1. **Proximity** — близость: связанные элементы группируются
|
|
2. **Alignment** — выравнивание: создаёт визуальный порядок
|
|
3. **Contrast** — контраст: выделяет важное
|
|
4. **Repetition** — повторение: создаёт единообразие
|
|
5. **Consistency** — последовательность: основа доверия
|
|
|
|
### Ценности дизайн-языка
|
|
- **Natural** — естественность: интеракции, следующие физическому миру
|
|
- **Certain** — определённость: предсказуемое поведение интерфейса
|
|
- **Meaningful** — осмысленность: каждый элемент служит цели
|
|
- **Growing** — рост: система развивается с пользователем
|
|
|
|
### Техническая база
|
|
- React-компоненты (TypeScript)
|
|
- Design Tokens (CSS Variables)
|
|
- 70+ компонентов
|
|
- Темы: светлая, тёмная, кастомная
|
|
- i18n (включая 50+ языков)
|
|
|
|
## TDesign (Tencent)
|
|
Китайская альтернатива Ant Design от Tencent.
|
|
|
|
### Особенности
|
|
- Vue 3, React, Angular, Mobile — 4 фреймворка сразу
|
|
- 500+ компонентов (один из самых больших наборов)
|
|
- Цветовая система на основе оттенков (10 ступеней на цвет)
|
|
- Адаптивная: desktop → mobile одной библиотекой
|
|
- Полностью открытая (MIT)
|
|
|
|
## Общие черты китайских дизайн-систем
|
|
- Высокая плотность контента (по умолчанию compact mode)
|
|
- Вертикальная ориентация (узкие экраны — стандарт)
|
|
- Многоцветность (богатые палитры, градиенты)
|
|
- Enterprise-first (мощные таблицы, фильтры, дашборды)
|
|
- Анимация как часть дизайна (микро-взаимодействия обязательны)
|
|
|
|
## Применение для российских сайтов
|
|
- взять систему токенов и компонентный подход
|
|
- использовать compact mode для информативных дашбордов
|
|
- кастомизировать цвета под российский рынок (не ярко-красный, а приглушённый)
|
|
- анимации умеренно — для РФ важнее скорость загрузки (медленный интернет в регионах)
|