Моделирование интерфейсов пользователя, инструменты

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

📍Бумага Нет, это не название редактора. Иногда проще нарисовать маркером на листе, если вы проводите встречу в переговорке и несложная картинка нужна для обсуждения
📍Excel Встречала умельцев рисовать диаграммы через функционал фигур Excel и умельцев делать интерактивные фомы ввода, чтобы показать порядок полей и правила валидации. "По сути это среда, которая позволяет не только хранить данные, выполнять расчеты и строить пользовательский интерфейс, это также среда, которая позволяет программировать", цитата из книги И. Корнипаева "Требования для программного обеспечения: рекомендации по сбору и документированию". Я не делала прототипов на VBA, а просто показывала фомы ввода, задавая лейблы, границы ячеек и правила для данных в ячейках.
📍Draw.io В этой рисовалке из геометрических фигур можно собрать вайрфрейм. Использую время от времени этот инструмент, потому что всегда под рукой. С тем же результатом можно использовать Miro, Lucidchart, Balsamiq, Escalidraw, Arti или MS Visio

После знакомства с графическими редакторами использую их для задач по визуализации, потому что возможности покрывают все, что может понадобиться. Не посоветую аналитику делать сложный прототип в графическом редакторе, если результат нужен быстро, а у него ни редактора под рукой, ни навыков работы в нем. Об этом подробнее было тут
📍Figma Известный графический редактор, в котором можно построить что угодно. Если в вашем приложении принята открытая или собственная дизайн-система, то аналитик может искать идеи в готовых примерах или собирать мок-апы из готовых компонент. Вот, например, в Figma Community Material Design Kit, Figma UI kit
📍Pixso Почти полный клон Figma. Есть бесплатная версия, платные тарифы дешевле Figma. Из всеми замеченных минусов – проблемы с быстродействием. Использую для тех же целей и тем же образом, что и Figma

Еще об инструментах проектирования интерфейсов
🔅Выбираем инструмент проектирования интерфейсов для аналитика В статье сравнивается несколько популярных инструментов для создания вайрфреймов
🔅Игра «Что, где, когда» с вайрфреймами, мокапами и прототипами Доклад на Analyst Days-11 о том, с какими прототипами работают аналитики на проектах мобильной разработки
🔅Что делать если отключат Figma? Есть ли альтернативы? Статья, где автор сравнил несколько графических редакторов

#инструменты #что_почитать