Дизайн-паттерны

Дизайн-пáттерн — это маленькое стандартизированное дизайн-решение, которое эффективно решает определённую задачу. Концепция того, как должен работать элемент интерфейса или логическое решение задачи.

О дизайн-паттернах

Механизм обучения, почему нужны, в чём опасность, пример нарушения


Это якорь, на который можно попасть с короткого адреса p.skdr.in .
Библиотека всегда под рукой.

Библиотека паттернов

Будет дополняться и превращаться в статьи, следи за обновлениями
в Скетч-дизайнере в Телеграме и Контакте.

Базовые элементы

Фон
Скайбокс

Типографика
Текст
Заголовок
Лид
Абзац
Ссылка
Сноска
Цитата
Текстовый список
Подпись

Декорирование
Фоновое фото
Отбивка
Граница
Иллюстрация
Иконка

Контролы
Кнопка
Свитчер
Ручка регулировки
Признак свайпа
Фейдер
Степпер

Экзотическое
Камера-кнопка

Методы ввода

Мышь
Движение
Движение вверх
Движение вниз
Движение влево
Движение вправо
Ховер

Клики
Тап и клик
Двойной клик
Тройной клик
Лонгтап

Скроллы
Скролл
Горизонтальный скролл

Зум
Зум
Зум-щипок

Свайпы
Свайп вправо
Свайп влево
Свайп вверх
Свайп вниз

Сдвиги
Перетаскивание
Сдвиг с пробелом
Вращение
Рогатка

Клавиатура
Клавиатурный ввод
Горячие клавиши
Тогл-принцип
Консоль

Гироскоп
Управление наклоном
Смена ориентации устройства

Прочее
Видеопоток
Голосовой ввод
Отпечаток пальца
IoT-триггер
Поток GPS-координат

Отображение данных

Лента постов
Экран-обложка
Модальное окно (попап)
Попоувер
Аккордеон
Канбан
Чеклист
Индикатор
Строка статуса
Хедап

Медиа
Аудиоплеер
Видеоплеер
Слайдер-карусель
Полноэкранный режим
Галерея
Презентация

Формат данных
Время
Дата
Сумма

Время
Таймер
Секундомер

Виды меню
Главное меню приложения
Дропдаун-меню
Контекстное меню
Таббар
Контекстный таббар
Гамбургер-меню
Блок действий (Action sheet)

Сортировка
Ручная сортировка
Сортировка по колонке
Сортировка по признаку

Привлечение внимания
Баннер
Информер
Признак нового
Уведомление
Пуш-уведомление

Лоадеры
Линейный лоадер
Зацикленный лоадер
Лоадер-скелет

Типы страниц
Прелоадер (=сплэш)
Лендинг
Форма подписки
О проекте
Пост
Товар
Архив
Дашборд
Корзина
Ошибка 404
Страница подтверждения

Взаимодействие с данными

Действия
Выделение
Тегирвание
Копирование и вставка
Скрытие
Удаление
Рейтинг
Промо-голосование
Репортинг
Избранное
Лайк
Шеринг
Обновление контента
Загрузка контента
Автосохранение
Отмена
Экспорт
Импорт
Печать
Предпросмотр

Визуальный редактор
Визард

Формы

Поля ввода
Поле ввода
Поле ввода цифр
Поле ввода карты
Поле ввода пароля
Поле среди текста
Поле ввода времени
Поле ввода даты

Диапазоны
Диапазон дат
Индикатор силы пароля

Поиск
Поле поиска
Поисковый фильтр
Дропдаун
Кнопка-дропдаун
Поле автозаполнения

Выбор
Чекбокс
Радио-переключатель
Выбор нескольких значений

Разворачивающееся поле
Контекстный редактор
Предзаполненные поля
Валидация ввода

Вёрстка

Шапка
Подвал
Блок
Сайдбар
Таблица
Колонки
Карточки
Вкладки

Паттерны пользователя

Ключевое действие (CTA)
Бинарный выбор

Аватар
Профиль
Настройки

Персонализация
Регистрация
Форма входа
Ленивая регистрация
Сброс пароля
Определение города

Статусы
Успех
Ожидание
Ошибка

Обучение
Онбординг
Хинт-блок
Выноска (пузырь)
Всплывающая подсказка
Туториал

Идентификация
По паролю
По СМС
По отпечатку пальца
Распознавание голоса
Распознавание лица
Капча

Навигация

Где я?
Ссылка на главную
Хлебные крошки
Меню
Фиксированная шапка
Прогрессбар скролла

Клавиатурная навигация
Фокус
Навигация стрелками
Альт-навигация

Навигация по контенту
Смотри также
Бесконечный скролл
Постраничная навигация
Назад-Далее

Адресация
Нумерация
Сайт
Соцсеть и юзернейм
Якорь
Кьюар-код

Анимация

Появления
Фейд
Зум-появление
Зум-исчезновение
Радикальный зум
Взрыв
Моргающая лампочка

Сдвиги
Сдвиг справа
Сдвиг слева
Сдвиг сверху
Сдвиг снизу
Параллакс

Вращения
Переворот (Y)
Наклон (X)
Вращение (Z)

Каскадное появление

Визуализация данных

Линейная диаграмма
Круговая диаграмма
Дуговая диаграмма
Диаграмма Гантта
Пирамидальная диаграмма

Схема
Блок-схема
Карта

Облако тегов


Другие сайты с коллекциями паттернов

Интерфейсы без шелухи / Ошибки дизайна и как их исправить

ui-patterns.com/patterns

Контур.Гайды

uipatterns.io