[Курс] CSS — 43 | UI наборы компонентов
UI-библиотеки/каталоги компонентов Bootstrap - https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bulma - https://bulma.io MUI (React UI tools) - https://mui.com Базовые понятия UI (User Interface) — внешний вид интерфейса: кнопки, цвета, шрифты, отступы. UX (User Experience) — удобство использования: логика, сценарии, скорость, понятность. Продуктовый сценарий (User flow) — путь пользователя: “зашёл → выбрал → оплатил”. Экран / страница (Screen/Page) — отдельный вид интерфейса (каталог, корзина). Компонент (UI component) — повторяемый “кирпичик” интерфейса (кнопка, карточка). UI Kit — набор готовых компонентов в одном стиле. Design System — UI Kit + правила (цвета, шрифты, отступы) + принципы и гайдлайны. Частые UI-компоненты Button (Кнопка) — запускает действие (“Сохранить”, “Купить”). Link (Ссылка) — переход на другую страницу/раздел. Input (Поле ввода) — ввод текста (email, поиск). Textarea — многострочный ввод. Select (Выпадающий список) — выбор значения из списка. Checkbox (Чекбокс) — множественный выбор (несколько вариантов). Radio (Радиокнопка) — выбор одного варианта из группы. Switch (Переключатель) — on/off настройка. Slider (Ползунок) — выбор значения диапазона (громкость, цена). Tabs (Вкладки) — переключение разделов на одном экране. Accordion (Аккордеон) — раскрывающиеся/сворачиваемые блоки (часто FAQ). Dropdown (Дропдаун) — выпадающее меню действий/опций. Tooltip (Тултип) — подсказка при наведении/фокусе. Popover — “расширенная подсказка” (больше контента, чем тултип). Modal / Dialog (Модалка/диалог) — окно поверх страницы для важного действия. Drawer (Выезжающая панель) — панель сбоку/снизу (меню, фильтры). Toast / Snackbar — короткое уведомление (“Сохранено”). Alert — заметное сообщение (успех/ошибка/предупреждение). Badge (Бейдж) — маленькая метка: “NEW”, “-20%”, “3” на корзине. Tag / Chip (Тег/чип) — плашка категории/фильтра (“React”, “В наличии”). Card (Карточка) — контейнер для одного объекта (товар, пост, профиль). Avatar (Аватар) — круглая/квадратная картинка пользователя. Breadcrumbs (Хлебные крошки) — путь: “Каталог / Техника / Наушники”. Pagination (Пагинация) — переключение страниц списка. Stepper (Шаги) — прогресс по этапам (“Доставка → Оплата → Готово”). Skeleton (Скелетон) — серые заглушки при загрузке контента. Empty state — состояние “пусто”: нет товаров/сообщений + что делать дальше. Состояния элементов (states) Default — обычное состояние. Hover — наведение мыши. Active / Pressed — момент нажатия. Focus / Focus-visible — фокус (обычно с клавиатуры Tab). Disabled — элемент недоступен. Loading — идёт загрузка (спиннер, блокировка). Error — состояние ошибки (красная рамка, текст). Success — успешное состояние (зелёная подсветка). Текст и оформление Typography (Типографика) — шрифты, размеры, интервалы, иерархия заголовков. Hierarchy (Иерархия) — что главное/второстепенное в тексте и блоках. Contrast (Контраст) — разница цветов для читаемости. Spacing (Система отступов) — набор шагов (обычно 4/8/16/24…). Grid (Сетка) — правила колонок/рядов для аккуратной раскладки. Alignment (Выравнивание) — ровные линии и края элементов. UX-термины и принципы Feedback (Обратная связь) — интерфейс сообщает результат действия (загрузка/успех/ошибка). Error prevention — предотвращение ошибок (маска, подсказка, ограничения). Validation (Валидация) — проверка ввода (email, пароль, обязательность). Affordance — элемент “выглядит кликабельным/перетаскиваемым” и это понятно. Consistency (Согласованность) — одинаковые элементы ведут себя одинаково. Cognitive load (Когнитивная нагрузка) — сколько “думать” нужно пользователю. Onboarding — первое знакомство/подсказки для новичка. Accessibility (A11y, доступность) — удобно всем, включая клавиатуру/скринридеры. Роли/документы Wireframe — “черновой” макет без дизайна (структура). Mockup — статичный макет с дизайном. Prototype — кликабельный прототип (переходы, сценарии). Responsive — адаптив под разные экраны. Breakpoint — точка, где меняется раскладка (например 768px).
UI-библиотеки/каталоги компонентов Bootstrap - https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bulma - https://bulma.io MUI (React UI tools) - https://mui.com Базовые понятия UI (User Interface) — внешний вид интерфейса: кнопки, цвета, шрифты, отступы. UX (User Experience) — удобство использования: логика, сценарии, скорость, понятность. Продуктовый сценарий (User flow) — путь пользователя: “зашёл → выбрал → оплатил”. Экран / страница (Screen/Page) — отдельный вид интерфейса (каталог, корзина). Компонент (UI component) — повторяемый “кирпичик” интерфейса (кнопка, карточка). UI Kit — набор готовых компонентов в одном стиле. Design System — UI Kit + правила (цвета, шрифты, отступы) + принципы и гайдлайны. Частые UI-компоненты Button (Кнопка) — запускает действие (“Сохранить”, “Купить”). Link (Ссылка) — переход на другую страницу/раздел. Input (Поле ввода) — ввод текста (email, поиск). Textarea — многострочный ввод. Select (Выпадающий список) — выбор значения из списка. Checkbox (Чекбокс) — множественный выбор (несколько вариантов). Radio (Радиокнопка) — выбор одного варианта из группы. Switch (Переключатель) — on/off настройка. Slider (Ползунок) — выбор значения диапазона (громкость, цена). Tabs (Вкладки) — переключение разделов на одном экране. Accordion (Аккордеон) — раскрывающиеся/сворачиваемые блоки (часто FAQ). Dropdown (Дропдаун) — выпадающее меню действий/опций. Tooltip (Тултип) — подсказка при наведении/фокусе. Popover — “расширенная подсказка” (больше контента, чем тултип). Modal / Dialog (Модалка/диалог) — окно поверх страницы для важного действия. Drawer (Выезжающая панель) — панель сбоку/снизу (меню, фильтры). Toast / Snackbar — короткое уведомление (“Сохранено”). Alert — заметное сообщение (успех/ошибка/предупреждение). Badge (Бейдж) — маленькая метка: “NEW”, “-20%”, “3” на корзине. Tag / Chip (Тег/чип) — плашка категории/фильтра (“React”, “В наличии”). Card (Карточка) — контейнер для одного объекта (товар, пост, профиль). Avatar (Аватар) — круглая/квадратная картинка пользователя. Breadcrumbs (Хлебные крошки) — путь: “Каталог / Техника / Наушники”. Pagination (Пагинация) — переключение страниц списка. Stepper (Шаги) — прогресс по этапам (“Доставка → Оплата → Готово”). Skeleton (Скелетон) — серые заглушки при загрузке контента. Empty state — состояние “пусто”: нет товаров/сообщений + что делать дальше. Состояния элементов (states) Default — обычное состояние. Hover — наведение мыши. Active / Pressed — момент нажатия. Focus / Focus-visible — фокус (обычно с клавиатуры Tab). Disabled — элемент недоступен. Loading — идёт загрузка (спиннер, блокировка). Error — состояние ошибки (красная рамка, текст). Success — успешное состояние (зелёная подсветка). Текст и оформление Typography (Типографика) — шрифты, размеры, интервалы, иерархия заголовков. Hierarchy (Иерархия) — что главное/второстепенное в тексте и блоках. Contrast (Контраст) — разница цветов для читаемости. Spacing (Система отступов) — набор шагов (обычно 4/8/16/24…). Grid (Сетка) — правила колонок/рядов для аккуратной раскладки. Alignment (Выравнивание) — ровные линии и края элементов. UX-термины и принципы Feedback (Обратная связь) — интерфейс сообщает результат действия (загрузка/успех/ошибка). Error prevention — предотвращение ошибок (маска, подсказка, ограничения). Validation (Валидация) — проверка ввода (email, пароль, обязательность). Affordance — элемент “выглядит кликабельным/перетаскиваемым” и это понятно. Consistency (Согласованность) — одинаковые элементы ведут себя одинаково. Cognitive load (Когнитивная нагрузка) — сколько “думать” нужно пользователю. Onboarding — первое знакомство/подсказки для новичка. Accessibility (A11y, доступность) — удобно всем, включая клавиатуру/скринридеры. Роли/документы Wireframe — “черновой” макет без дизайна (структура). Mockup — статичный макет с дизайном. Prototype — кликабельный прототип (переходы, сценарии). Responsive — адаптив под разные экраны. Breakpoint — точка, где меняется раскладка (например 768px).