kazminaviktoriya1
Перейти в профиль
Выйти из профиля
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42"><rect fill-opacity="0"/></svg>)
Добавить аккаунт
Прототипы с низкой точностью
В прошлых уроках вы узнали о том, как разделить пользовательский интерфейс на экраны и какие элементы интерфейса можно на них разместить.
В этом уроке: вы познакомитесь с инструментами, которые позволяют создать прототипы низкой точности, а именно с вайрфреймами и раскадровкой.
Поскольку процесс проектирования пользовательского интерфейса состоит из множества активностей, разработка готового интерфейса может занимать месяцы и даже годы. При этом заинтересованные лица хотят уже сейчас знать, каким будет итоговый результат. Сориентировать их помогут прототипы интерфейса — «черновики», которые дизайнер интерфейсов разрабатывает вместе с системным аналитиком.
Как вы помните, бывают прототипы с низкой точностью и прототипы с высокой точностью. Для создания прототипов с низкой точностью используются такие инструменты, как вайрфрейм и раскадровки.
Что такое вайрфрейм
Вайрфрейм (Wireframe) — это эскиз разрабатываемого интерфейса, который фокусируется на организации экранного пространства, его наполнении и реализуемом функционале интерфейса. Это непереводимый термин, и в русском языке для него нет эквивалента.
Вайрфрейм — простая и максимально облегчённая с точки зрения визуализации модель интерфейса, которую легко понимают все участники разработки: как команда, так и заинтересованные лица. Он определяет структуру экрана: какие элементы на экране будут отображаться и где их нужно расположить.
Вайрфрейм главного экрана сервиса по доставке еды может выглядеть так:
Насколько подробным должен быть вайрфрейм
Вайрфреймы должны быть достаточно информативными — не слишком детальными и не слишком поверхностными. Это позволит сориентировать заинтересованных лиц и команду разработки в том, какая информация будет доступна на экране.
Если в вайрфрейме будет слишком много деталей, акцентировать внимание заказчика или другого заинтересованного лица на обсуждении конкретного элемента будет труднее — за деталями может потеряться общий смысл.
Если нужно проверить, доступна ли часть функциональности только для зарегистрированных пользователей, чтобы не перегружать деталями, подготовьте два вайрфрейма:
- экран с одним функционалом — до авторизации;
- экран с другим функционалом — после авторизации, где видно, что изменилось.
Из чего состоит вайрфрейм и как его оформляют
- Вайрфрейм в основном состоит из плейсхолдеров (Placeholder) — прямоугольников с текстом или крестом внутри. Они символизируют, что в этом месте будет располагаться визуальный элемент — изображение, видео, анимация. Сами изображения, например иллюстрации и иконки, в вайрфрейме не используются.
- В вайрфреймах могут располагаться и тексты, но они должны помочь понять экран. Например, можно указать названия критичных элементов: кнопок «Регистрация», «Вход»/«Выход». Тексты могут представлять собой «рыбу» — заготовку для текста, который будет отображаться в этом месте. Классический пример — Lorem Ipsum — условный, часто бессмысленный текст-заполнитель, который используют для того, чтобы показать, что в этом месте будет отображаться текстовый блок.
- Кнопки, поля ввода, иконки и другие элементы интерфейса указываются на вайрфрейме в виде прямоугольников. Но только если их наличие позволяет заказчику лучше понять модель и принять решение о том, надо ли уточнять требования к интерфейсу. То же касается обозначения ссылок. Например, если вайрфрейм показывает, как работает поисковая строка, кнопку «Поиск» лучше обозначить в явном виде.
- Для оформления вайрфрейма, как правило, используется чёрно-белая или серая палитра. Иногда используются и другие оттенки. Это, как правило, обусловлено требованием бренда.
- Обычно вайрфреймы оформляют в виде сетки. Сеткой в дизайне называют невидимую структуру (она отображается только в графическом редакторе при использовании специальных настроек), которая определяет расположение элементов дизайна в интерфейсе. Благодаря сетке все проектируемые экраны будут выглядеть согласованно.
Представьте, что вы участвуете в разработке мобильного приложения для магазина игрушек. Заказчик сомневается, какой вариант оформления каталога игрушек ему подходит. Выберите вариант вайрфрейма, который подходит для этой задачи.
Верно
С вайрфреймом для каталога определились. Теперь нужно показать заказчику, как на странице каталога будут отображаться фильтры и опция добавления в корзину. Выберите вариант вайрфрейма, который подходит для этой задачи.
Верно
Раскадровка
Раскадровка, или сториборд (Storyboard), — это инструмент, который визуально описывает взаимодействие пользователя с продуктом через серию изображений.
Если вайрфрейм демонстрирует, как организован экран, то раскадровка помогает понять связь экранов между собой. Проще говоря, раскадровка — это последовательность вайрфреймов.
Раскадровку стоит использовать в том случае, если заказчику или любым другим заинтересованным лицам нужно объяснить, как система поведёт себя с течением времени, как будет развиваться пользовательский диалог или сценарий.
Интересный факт: раскадровка — инструмент, заимствованный из киноиндустрии, где она используется для визуализации каждой сцены, которую нужно отснять.
Из чего состоит раскадровка
Раскадровка состоит из набора вайрфреймов, каждый из которых отображает то или иное состояние системы.
Располагать вайрфреймы в раскадровке нужно в том порядке, в котором они будут отображаться для пользователя. Переходы между экранами изображают стрелками. Вайрфреймы и переходы в раскадровке можно сопроводить коротким текстом, который позволяет понять контекст. Например, сториборд из двух вайрфреймов, показывающих функционал до и после авторизации, можно сопроводить текстами: «До авторизации» и «После авторизации».
Перед вами раскадровка, которая иллюстрирует сценарий — как зарегистрированный пользователь просматривает статьи:
Раскадровка состоит из четырёх экранов:
- В первом экране пользователь проходит авторизацию.
- Во втором экране ему отображается список статей, для которого можно воспользоваться функцией поиска.
- В следующем экране пользователь ищет нужную статью по ключевым словам.
- И в последнем — переходит к просмотру найденной статьи.
На этой же раскадровке представлен альтернативный сценарий: у пользователя уже есть ссылка на нужную статью и, перейдя по ней, ему нужно авторизоваться, чтобы статья стала доступна для просмотра.
Ваш заказчик — сервис объявлений. Из предложенных вайрфреймов вам нужно разработать раскадровку для двух сценариев: в одном пользователь жалуется на объявление, в другом — добавляет объявление в избранное.
Будьте внимательны: для раскадровки понадобятся не все вайрфреймы. Поместите в колонку «Не использовать» те, что не подходят для описанных сценариев.
Зачем использовать вайрфреймы и раскадровки
Вайрфреймы и раскадровки помогают:
- Выявить пользовательские требования
В начале выявления пользовательских требований вайрфреймы и раскадровки максимально полезны, потому что наглядно показывают, как будет выглядеть интерфейс.
- Избежать ошибок
Простые и лёгкие в создании, вайрфреймы помогают проверить требования и снижают риск внесения правок в реализованный пользовательский интерфейс.
- Сформировать общее понимание интерфейса
Вайрфреймы и раскадровки — это удобный инструмент для коммуникации внутри команды. Их понимают и разработчики, и тестировщики. Дизайнеры и/или разработчики используют вайрфреймы для подготовки прототипов с высокой точностью (о них вы узнаете в следующем уроке).
Как создавать вайрфреймы и раскадровки
Обычно прототипы с низкой точностью разрабатывают дизайнеры интерфейсов. Системный аналитик может дополнить такими прототипами спецификацию требований к ПО.
Но бывает и так, что нужно создать прототипы с низкой точностью здесь и сейчас при коммуникации с заказчиком. В этом случае системный аналитик может сам нарисовать вайрфреймы.
- Нарисовать вайрфрейм можно от руки в максимально упрощённом виде.
- При создании вайрфрейма не используются конкретные нотации или правила оформления.
- Можно использовать графические инструменты, например Figma, Adobe XD, Sketch.
При разработке прототипов системный аналитик и дизайнер обращаются к диаграммам потоков данных (DFD) и диаграммам структуры интерфейса (ISD).
Как использовать DFD и ISD в создании прототипов
Как вы помните, на этапе создания ISD на базе DFD можно определить каждый экран пользовательского интерфейса и связанный с ним процесс. ISD позволяет понять, какие формы ввода, вывода и навигации нужно использовать на экране и как экраны связаны между собой.
Соответственно, эти экраны — потенциальные вайрфреймы. Почему «потенциальные»? Для некоторых экранов, определённых в ISD, недостаточно прототипов с низкой точностью. Поэтому их можно передавать UX-дизайнерам и разработчикам для разработки прототипов высокой точности.
Разберём, какие вайрфреймы и раскадровки можно создавать с помощью ISD на примере известного вам сервиса по заказу такси.
Для пункта меню «Данные пассажира» можно подготовить два вайрфрейма: экран для ввода данных пассажира и экран просмотра данных пассажира.
Экран для ввода данных пассажира должен содержать (минимальный набор):
- Форму ввода данных (набор полей).
- Кнопку подтверждения.
- Кнопку отмены и выхода из экрана.
Экран просмотра данных пассажира должен содержать как минимум:
- Поля данных.
- Кнопку редактирования данных.
- Кнопку выхода из экрана.
Если нужно продемонстрировать процесс регистрации пользователя в приложении, стоит сделать раскадровку. Для этого потребуются экраны:
- Регистрации в приложении.
- Ввода данных пассажира.
- Просмотра данных пассажира.
Этот вариант подойдёт для того, чтобы продемонстрировать, что происходит с новыми пользователями и теми пользователями, которые были зарегистрированы, но давно не заходили в систему.
Таким образом, ISD позволяет представить, сколько вайрфреймов и какое количество раскадровок можно разработать.
Подведём итоги
Вайрфреймы и раскадровки — это инструменты для создания прототипов с низкой точностью. Они позволяют наглядно показать структуру и расположение элементов на экранах интерфейса.
Вайрфреймы — прототипы отдельных экранов. Раскадровки — набор вайрфреймов с указанием связей между ними.
И вайрфреймы, и раскадровки должны содержать только важные элементы конечного продукта. Для разработки вайрфреймов и раскадровок не нужны нотации или специальное ПО. Их можно нарисовать на бумаге от руки или в простом графическом редакторе.
Определить необходимые экраны, элементы интерфейса и связи между экранами помогут DFD и ISD.
Как этот урок поможет вам в будущем:
Системный аналитик участвует в создании вайрфреймов и раскадровки в качестве эксперта пользовательских требований, поэтому мы предлагаем в домашнем задании к этому спринту попробовать подготовить раскадровку на основе DFD и ISD.
