Александр
Вайрфрейм, или каркас интерфейса, помогает решить, какие элементы нужны на экране и как их расположить. Для первого варианта достаточно простых блоков и понятных подписей. Разберём структуру на знакомых типах сайтов, а затем соберём каркас мобильного приложения в Pixso.
Что такое каркас интерфейса
Каркас показывает навигацию, области контента и основные действия. Он позволяет обсуждать порядок информации без окончательных цветов и иллюстраций. Например, на странице товара важно сначала определить место цены, выбора варианта и кнопки покупки.
Сколько деталей нужно каркасу
Каркас с низкой детализацией состоит из простых фигур и коротких подписей. Он удобен для быстрого сравнения структуры: поиск сверху или в боковой панели, одна колонка или две, короткая форма или несколько шагов.
Более подробный каркас содержит реальные названия разделов, примеры данных и состояния элементов. Он помогает оценить плотность экрана и понятность действий. Подробность выбирают под вопрос, который нужно решить, а не как показатель качества работы.
Что должно быть на каркасе
- Структура. Обозначьте шапку, навигацию, основной контент и подвал. Покажите, где начинается главный сценарий пользователя.
- Содержание. Добавьте реальные заголовки и пример текста. Для изображений обозначьте место и назначение: товар, аватар или иллюстрация.
- Действия. Подпишите кнопки и поля, укажите следующий экран или результат нажатия. Важные состояния, например ошибку ввода, покажите отдельно.
Пять знакомых структур для разбора
У сайтов ниже разные задачи. При разборе обращайте внимание на иерархию информации и путь пользователя: именно эти решения полезно перенести в собственный каркас.
- Amazon
Задача: найти и выбрать товар
Для каркаса магазина выделите поиск, категории и список товаров. На карточке покажите изображение, название и цену. Затем добавьте путь к подробностям товара и корзине: пользователь должен понимать следующий шаг без декоративного оформления.
Задача: просматривать обновления и общаться
В структуре социальной сети отделите ленту от навигации и личных действий. На карточке публикации обозначьте автора, содержание и доступные реакции. Продумайте, как человек вернётся к ленте после просмотра профиля или обсуждения.
- Поиск Google
Задача: сформулировать запрос и выбрать результат
Разделите каркас поиска на два состояния: ввод запроса и результаты. В выдаче покажите заголовок, адрес и описание. Расположите элементы так, чтобы результаты было удобно сравнивать, а запрос — уточнять.
- Netflix
Задача: выбрать контент для просмотра
Для видеокаталога выделите подборки, карточки и подробности выбранного материала. На каркасе важны названия разделов, возврат к каталогу и заметная кнопка просмотра. Не заменяйте весь смысл карточек одинаковыми прямоугольниками: добавьте примеры названий.
- Airbnb
Задача: найти жильё по условиям поездки
На каркасе сервиса бронирования покажите место, даты, число гостей и фильтры. В списке результатов оставьте данные, необходимые для сравнения: стоимость, расположение и основные условия. Свяжите карточку с подробностями и следующим шагом бронирования.
Как собрать каркас приложения в Pixso
Начните с одного сценария, например выбора услуги и отправки заявки. Подготовьте начальный экран, форму и подтверждение.
Шаг 1. Задайте размер экрана
Создайте фрейм для целевого устройства. Используйте одинаковую ширину для экранов одного сценария, чтобы сравнивать структуру и переходы.
Шаг 2. Разместите основные блоки
Добавьте навигацию, область содержания и главное действие. Сначала определите порядок блоков, затем задайте отступы и размеры.
Шаг 3. Добавьте элементы управления
Разместите кнопки, поля и переключатели, которые нужны для сценария. Используйте простые компоненты, чтобы одинаковые элементы не приходилось рисовать заново.
Шаг 4. Напишите понятные подписи
Замените текст-заглушку названием услуги, вопросами формы и текстом кнопки. Проверьте длинные значения и пояснения: они часто меняют нужную высоту блока.
Шаг 5. Свяжите экраны
Настройте переходы между каркасами и пройдите сценарий в предпросмотре. Добавьте возврат и состояние ошибки, если они нужны для проверки. Дайте коллеге выполнить задачу без подсказок.
Уточняйте каркас по наблюдениям
Если человек не находит действие, пересмотрите в Pixso подпись и расположение элемента. Если не хватает информации — дополните содержание. После решения структурных вопросов можно переходить к типографике, цветам и подробным состояниям интерфейса.
