Примеры вайрфреймов: 5 структур и каркас приложения в Pixso

Вайрфрейм, или каркас интерфейса, помогает решить, какие элементы нужны на экране и как их расположить. Для первого варианта достаточно простых блоков и понятных подписей. Разберём структуру на знакомых типах сайтов, а затем соберём каркас мобильного приложения в Pixso.

В редакторе интерфейсов Pixso начните с порядка информации и одного главного действия на каждом экране. Каркас полезен, если по нему можно объяснить задачу пользователя, даже когда изображения и окончательный стиль ещё не готовы.

Что такое каркас интерфейса

Каркас показывает навигацию, области контента и основные действия. Он позволяет обсуждать порядок информации без окончательных цветов и иллюстраций. Например, на странице товара важно сначала определить место цены, выбора варианта и кнопки покупки.

Сколько деталей нужно каркасу

Каркас с низкой детализацией состоит из простых фигур и коротких подписей. Он удобен для быстрого сравнения структуры: поиск сверху или в боковой панели, одна колонка или две, короткая форма или несколько шагов.

Более подробный каркас содержит реальные названия разделов, примеры данных и состояния элементов. Он помогает оценить плотность экрана и понятность действий. Подробность выбирают под вопрос, который нужно решить, а не как показатель качества работы.

Что должно быть на каркасе

1. Структура. Обозначьте шапку, навигацию, основной контент и подвал. Покажите, где начинается главный сценарий пользователя.
2. Содержание. Добавьте реальные заголовки и пример текста. Для изображений обозначьте место и назначение: товар, аватар или иллюстрация.
3. Действия. Подпишите кнопки и поля, укажите следующий экран или результат нажатия. Важные состояния, например ошибку ввода, покажите отдельно.

Пять знакомых структур для разбора

У сайтов ниже разные задачи. При разборе обращайте внимание на иерархию информации и путь пользователя: именно эти решения полезно перенести в собственный каркас.

1. Amazon

Задача: найти и выбрать товар

Для каркаса магазина выделите поиск, категории и список товаров. На карточке покажите изображение, название и цену. Затем добавьте путь к подробностям товара и корзине: пользователь должен понимать следующий шаг без декоративного оформления.

2. Facebook

Задача: просматривать обновления и общаться

В структуре социальной сети отделите ленту от навигации и личных действий. На карточке публикации обозначьте автора, содержание и доступные реакции. Продумайте, как человек вернётся к ленте после просмотра профиля или обсуждения.

3. Поиск Google

Задача: сформулировать запрос и выбрать результат

Разделите каркас поиска на два состояния: ввод запроса и результаты. В выдаче покажите заголовок, адрес и описание. Расположите элементы так, чтобы результаты было удобно сравнивать, а запрос — уточнять.

4. Netflix

Задача: выбрать контент для просмотра

Для видеокаталога выделите подборки, карточки и подробности выбранного материала. На каркасе важны названия разделов, возврат к каталогу и заметная кнопка просмотра. Не заменяйте весь смысл карточек одинаковыми прямоугольниками: добавьте примеры названий.

5. Airbnb

Задача: найти жильё по условиям поездки

На каркасе сервиса бронирования покажите место, даты, число гостей и фильтры. В списке результатов оставьте данные, необходимые для сравнения: стоимость, расположение и основные условия. Свяжите карточку с подробностями и следующим шагом бронирования.

Что переносить из примера в свой каркас

Знакомые сервисы помогают увидеть разные модели содержания. Используйте их как отправную точку для разбора задачи, а не как требование воспроизвести текущий интерфейс бренда. Набор блоков зависит от того, что нужно решить вашему пользователю.

Одинаковая сетка карточек может обслуживать разные задачи. В магазине цена помогает сравнить товар, а в справочнике важнее название и описание темы. Если каркас состоит только из одинаковых серых блоков, эту разницу трудно обсудить.

Разбор: три экрана заявки на ремонт

Представим сервис ремонта бытовой техники. Человек хочет вызвать мастера для стиральной машины, но компания сначала проверяет заявку и согласовывает выезд. Каркас должен различать отправку запроса и подтверждение визита. Иначе красивая финальная кнопка пообещает больше, чем происходит на самом деле.

Экран 1 — выбор услуги. В шапке укажите «Ремонт техники», ниже разместите варианты с понятными названиями: «Стиральная машина», «Холодильник», «Посудомоечная машина». В выбранной карточке добавьте короткое описание и действие «Описать проблему». Изображение техники помогает распознать категорию, но не заменяет подпись.

Экран 2 — описание и контакт. Покажите выбранную технику, поле «Что случилось?», адрес и телефон. Рядом с полем времени напишите «Когда вам удобно связаться», если это предпочтение для звонка, а не обещанный интервал приезда. Над действием «Отправить заявку» кратко объясните: «Свяжемся с вами, чтобы уточнить детали и согласовать выезд».

Экран 3 — заявка получена. Сохраните название техники, описание проблемы и указанный способ связи. Заголовок «Заявка получена» соответствует действию сервиса. Формулировка «Мастер приедет завтра» была бы неверной, пока визит не согласован. Возможность исправить контакт или вернуться к описанию нужно обозначить отдельно.

Добавьте к каркасу объяснения решений

Короткие примечания рядом с фреймом помогают обсуждать поведение, не перегружая сам экран. Они нужны команде в файле дизайна; в пользовательский интерфейс переносится только полезная человеку информация.

• Адрес: полный текст может занимать несколько строк; поле и блок ниже должны оставаться раздельными.
• Описание проблемы: в примере используйте реальную фразу, например «Вода остаётся в барабане после завершения программы». Одно слово «Текст» не показывает нужную высоту.
• Телефон: рядом с неверным значением требуется понятная ошибка. Введённое описание проблемы при этом сохраняется.
• Стоимость: если её определяют после диагностики, не рисуйте фиксированную цену как подтверждённую. Объясните порядок расчёта в том месте, где пользователь принимает решение.
• Результат: заявка и подтверждённый выезд — разные состояния. У каждого должны быть своё название и следующий шаг.

Покажите эти три экрана коллеге и попросите объяснить, какая услуга выбрана, что произойдёт после отправки и назначено ли уже время визита. Если ответы расходятся с замыслом, поправьте подписи и последовательность блоков. Для этой проверки ещё не нужны окончательные цвета и фотографии.

Как собрать каркас приложения в Pixso

Для приложения доставки еды начните с маршрута от списка ресторанов к меню выбранного заведения. На первом экране нужны адрес, поиск, категории и список; на следующем — название ресторана, блюда и действие добавления в заказ.

Попробуйте Pixso бесплатно

Шаг 1. Задайте размер экрана

Создайте фрейм для целевого устройства. Используйте одинаковую ширину для экранов одного сценария, чтобы сравнивать структуру и переходы.

Шаг 2. Разместите основные блоки

Добавьте навигацию, область содержания и главное действие. Сначала определите порядок блоков, затем задайте отступы и размеры.

Шаг 3. Добавьте элементы управления

Разместите кнопки, поля и переключатели, которые нужны для сценария. Используйте простые компоненты, чтобы одинаковые элементы не приходилось рисовать заново.

Шаг 4. Напишите понятные подписи

Замените текст-заглушку названиями ресторанов, категорий и блюд, а также понятными подписями действий. Проверьте длинные значения и пояснения: они часто меняют нужную высоту блока.

Шаг 5. Свяжите экраны

Настройте переходы между каркасами и пройдите сценарий в предпросмотре. Добавьте возврат и состояние ошибки, если они нужны для проверки. Дайте коллеге выполнить задачу без подсказок.

Уточняйте каркас по наблюдениям

Если человек не находит действие, пересмотрите в Pixso подпись и расположение элемента. Если не хватает информации — дополните содержание. После решения структурных вопросов можно переходить к типографике, цветам и подробным состояниям интерфейса.