Лекция №4: Каркасное проектирование (Wireframing) и UI паттерны
Курс: Веб-дизайн и проектирование интерфейсов Аудитория: 2 курс, технические специальности Связь с практикой: Теоретическая база для Лабораторной №3
Ключевая мысль
«Не изобретайте велосипед. Пользователи привыкли к стандартам».
1. Что такое Wireframe и уровни детализации
Wireframe (Вайрфрейм / Каркас) — это схема страницы, показывающая размещение элементов, но игнорирующая визуальный стиль (цвет, тени, шрифтовые пары).
- Аналогия: Чертеж несущих стен здания перед тем, как звать маляров.
Уровни детализации (Fidelity):
- Ручка и бумага.
- Используется для быстрого брейншторма.
- Мы это пропустили на этапе User Flow.
Почему нельзя использовать цвет?
Цвет обладает огромной эмоциональной силой. Если вы покажете заказчику (или преподавателю) цветной макет с плохой логикой, обсуждение скатится в «мне не нравится этот синий», а не «кнопка купить не видна». Правило: Сначала утверждаем логику (ч/б), потом стиль.
2. UI Паттерны: Закон Якоба
UI Pattern (Паттерн) — это повторяющееся решение типичной проблемы дизайна.
Закон Якоба Нильсена (Jakob’s Law)
Пользователи проводят большую часть времени на других сайтах. Они хотят, чтобы ваш сайт работал так же, как те сайты, к которым они привыкли.
Инженерный вывод: Нестандартное поведение интерфейса = Когнитивная нагрузка = Ошибка пользователя = Потеря денег. Быть «уникальным» в навигации — это анти-паттерн.
Примеры устоявшихся паттернов:
- Логотип: Всегда слева сверху (или по центру). Клик по нему ведет на Главную.
- Корзина: Всегда справа сверху. Иконка тележки.
- Поиск: Лупа. Поле ввода или иконка в шапке.
- Кнопка действия (CTA): Яркая, контрастная, с глаголом («Купить», «Подписаться»).
3. Навигационные паттерны (Mobile vs Desktop)
При адаптивном дизайне навигация меняется кардинально.
- Hamburger Menu (Гамбургер): Три полоски в углу. Скрывает редкие пункты меню.
- Минус: Низкая обнаруживаемость (out of sight, out of mind).
- Tab Bar (Нижняя панель): Стандарт iOS/Android. 4-5 ключевых иконок внизу экрана.
- Плюс: Под большим пальцем, переключение в 1 клик.
- Совет: Используйте Tab Bar для основных разделов, Гамбургер — для второстепенных.
4. Хлебные крошки (Breadcrumbs)
Критически важный элемент для вашего Сквозного проекта (особенно интернет-магазинов). Breadcrumbs — это навигационная цепочка: Главная > Каталог > Электроника > Ноутбуки > MacBook Pro.
- Функция: Показывает пользователю, где он находится в иерархии (Sitemap).
- Правило: Обязательны для сайтов с вложенностью более 2 уровней.
- Расположение: Сразу под шапкой, над заголовком страницы (H1).
5. Компоненты в Figma: Введение в ООП дизайна
На этапе Wireframing (Лаб 3) вы начинаете использовать Components.
- Master Component: Аналог определения Класса/Функции. Вы создаете его один раз (например, кнопка).
- Instance (Экземпляр): Объект класса. Вы расставляете их по макету.
- Наследование: Если вы перекрасите Master Component в черный, все 50 экземпляров на всех страницах станут черными.
Практический совет
Превращайте в компоненты всё, что повторяется более 2 раз: Хедер, Футер, Карточка товара, Кнопка, Поле ввода. В Figma это делается комбинацией Ctrl + Alt + K.
6. Базовая доступность (A11y - Accessibility)
Инженерный дизайн должен быть доступен всем, включая людей с плохим зрением или нарушениями моторики.
Правило 44 пикселей (Touch Target)
Любой интерактивный элемент на мобильном устройстве должен иметь зону клика не менее 44x44 px (по гайдлайнам Apple) или 48x48 px (Android).
- Даже если иконка маленькая (24px), фрейм вокруг нее (зона нажатия) должен быть 44px.
- Иначе пользователь с крупными пальцами будет промахиваться.
7. Глоссарий лекции
- Wireframe: Каркасный ч/б прототип высокой детализации.
- Mockup: (Забегая вперед) Цветной, чистовой макет дизайна.
- Pattern (Паттерн): Типовое, привычное пользователю решение интерфейсной задачи.
- Jakob’s Law: Принцип, гласящий, что пользователи ожидают привычного поведения от вашего сайта.
- Breadcrumbs (Хлебные крошки): Навигационная цепочка.
- A11y (Accessibility): Доступность интерфейса.
- Touch Target: Зона клика вокруг элемента.
8. Домашнее задание (Подготовка к Лаб №3 и 4)
- Зарегистрироваться на ресурсе Mobbin.com (или найти аналоги). Это библиотека скриншотов реальных приложений.
- Задание: Найти 3 варианта реализации «Корзины» и 3 варианта «Фильтра товаров».
- В своем проекте Figma определить, какие элементы станут Компонентами.
- Проверить свой макет на «Закон Якоба»: не пытаетесь ли вы сделать навигацию там, где её никто не ищет (например, меню снизу на десктопе)?