Готов к публикации
Инструменты на каждый день / VUI
VUI
Интерактивные UI-компоненты, примеры использования и темы.
Хорошие интерфейсы начинаются здесь.✳
Коллекция готовых компонентов. Изучайте детали, пробуйте живые примеры и создавайте свои интерфейсы.
20 готовых компонентов Две продуманные темы
Коллекция компонентов
20 / 2002Живой пример
Поле ввода
Ввод короткого значения. Пример: название проекта.
03Живой пример
Текстовая область
Ввод длинного текста. Пример: обратная связь.
04Живой пример
Список выбора
Выбор одного варианта. Пример: категория проекта.
05Живой пример
Флажок
Включение отдельного параметра. Пример: рассылка новостей.
06Живой пример
Переключатель вариантов
Выбор из нескольких вариантов. Пример: период оплаты.
07Живой пример
Переключатель
Включение настройки. Пример: уведомления.
08Живой пример
Ползунок
Настройка числового значения. Пример: громкость.
09Живой пример
Метка
Краткий статус. Пример: опубликованный проект.
Опубликован
10Живой пример
Аватар
Представление пользователя. Пример: участник команды.
VK
11Живой пример
Карточка
Группировка содержимого. Пример: сведения о проекте.
12Живой пример
Сообщение
Информация о состоянии. Пример: успешное сохранение.
✓ Изменения сохранены.
13Живой пример
Прогресс
Ход выполнения задачи. Пример: загрузка файла.
14Живой пример
Вкладки
Переключение представлений. Пример: просмотр и сведения.
Здесь отображается предпросмотр проекта.
15Живой пример
Аккордеон
Раскрытие подробностей. Пример: ответ на частый вопрос.
Как работает VUI?
Выберите тему и попробуйте компоненты прямо в браузере.
16Живой пример
Диалог
Отдельное окно задачи. Пример: подтверждение выбора.
17Живой пример
Подсказка
Пояснение к элементу. Пример: помощь с клавиатурой.
Для навигации используйте Tab.
18Живой пример
Таблица
Сравнение данных. Пример: последние проекты.
| Проект | Статус |
|---|---|
| VUI | Опубликован |
19Живой пример
Заглушка загрузки
Обозначение загрузки. Пример: ожидаемая карточка.
Загрузка содержимого
20Живой пример
Уведомление
Краткое подтверждение. Пример: сохранённая настройка.