Что показывает вайрфрейм и как его читать
Вайрфрейм намеренно не показывает, как будет выглядеть экран, — только что на нём есть, в каком порядке и что главное. Для этого у схем сложился общий язык условных обозначений, понятный и дизайнерам, и разработчикам.
| Что на экране | Как рисуют на схеме |
|---|---|
| Картинка или фото | Прямоугольник, перечёркнутый крест-накрест |
| Абзац текста | Серые полосы или настоящий текст без оформления |
| Заголовок | Настоящий заголовок, крупнее остального текста |
| Кнопка | Прямоугольник с названием действия: «Оформить заказ», а не «Кнопка» |
| Иконка | Квадрат или круг с подписью |
| Важность блока | Оттенок серого: чем темнее, тем главнее |
Виды вайрфреймов: lo-fi, mid-fi и hi-fi
Вайрфреймы различают по детализации. Чем раньше стадия, тем грубее схема: её легче выбросить и нарисовать заново.
Lo-fi (низкая детализация)
Набросок от руки или несколько серых блоков. Рисуют прямо на встрече, чтобы сравнить варианты структуры.
Mid-fi (средняя)
Блоки в реальных пропорциях на фрейме нужного размера, настоящие заголовки и подписи кнопок. Самый частый вид в работе.
Hi-fi (высокая)
Окончательные тексты, точные отступы и сетка, но ещё без цветов и шрифтов бренда. Отсюда один шаг до макета.
Аннотированный
Схема любой детализации с пометками: что происходит по нажатию, откуда берутся данные, какие есть ограничения.
Чем вайрфрейм отличается от макета и прототипа
Эти слова путают, потому что один и тот же экран обычно проходит все три стадии.
| Признак | Вайрфрейм | Макет | Прототип |
|---|---|---|---|
| Главный вопрос | Что где стоит | Как это выглядит | Как это работает |
| Что на экране | Серые блоки и подписи | Цвета, шрифты, картинки, точные отступы | Экраны макета или вайрфрейма со связями |
| Можно нажимать | Нет | Нет | Да |
| Что обсуждают | Состав и порядок блоков | Стиль и детали | Путь пользователя по шагам |
Кликабельной бывает и схема из серых блоков — это уже прототип низкой детализации. Подробнее — в статье прототип.
Как нарисовать вайрфрейм сайта в Morfa
Ниже порядок для одной страницы. Как довести страницу до макета с сеткой и адаптивом, описано в гайде макет сайта.
Создайте файл и фрейм
В файловом менеджере нажмите «Новый файл» и выберите инструмент «Фрейм» (F). Справа будут готовые размеры: для сайта — Desktop (1440×1024), для приложения — iPhone 16 (393×852).
Разметьте блоки
Шапку, меню, карточки и кнопки рисуйте прямоугольниками (R), заголовки и подписи — текстом (T). Хватит двух-трёх оттенков серого.
Выстройте порядок
Выделите блоки одной секции и добавьте автолейаут (⇧A): промежутки станут одинаковыми, а блок можно переставить, не двигая соседей вручную.
Назовите слои
Переименуйте слои по смыслу (⌘R): «Список заказов», «Форма входа». Так схему читают и разработчик, и заказчик.
Добавьте пояснения
То, чего не видно на схеме, запишите аннотацией (Y) с категорией «Взаимодействие» или оставьте комментарий (C).
Частые ошибки
Схема полезна, пока по ней можно понять экран и быстро её переделать.
- Цвет и картинки с первого шага. Спор уходит в оформление, а структуру так и не обсуждают.
- Рыбный текст вместо настоящего. Длина заголовка и подписи кнопки меняет структуру, поэтому пишите реальные или близкие к ним тексты.
- Фрейм без размера экрана. Схема без границ не показывает, сколько помещается на первом экране.
- Единственный вариант. Схема дешёвая: сравните два-три варианта структуры, прежде чем выбрать.
- Блоки без названий. Прямоугольник «Блок» ничего не говорит — подпишите, что будет внутри.