CC BY
141УДК 004.4'27
СРАВНЕНИЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ДЛЯ РАЗРАБОТКИ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ И ИХ ПРОТОТИПИРОВАНИЯ
Соловьева Александра Анатольевна, магистрант, Научный руководитель: Шуклин Дмитрий Анатольевич,
кандидат педагогических наук, доцент; Университет ИТМО, Санкт-Петербург, Российская Федерация
Аннотация: Связующим звеном между придуманной идеей и конечным пользовательским интерфейсом является программное обеспечение (ПО) для проектирования интерфейсов. Выбор подходящего ПО позволяет создать «живую» и максимально точную копию реального интерфейса, грамотно построить совместную работу дизайнеров, сократить время создания интерфейса и в целом облегчить работу над проектированием интерфейса. В статье рассматриваются среды визуальной разработки графических пользовательских интерфейсов, их анимирования и прототипирования. Проводится анализ возможностей трех самых популярных ПО на примере сравнения главных функций, показаны основные достоинства и недостатки данных программ. Ключевые слова: интерфейс; анимация; проектирование; веб-дизайн; прототипиро-вание; UX; UI; программное обеспечение.
COMPARISON OF SOFTWARE FOR DEVELOPING AND PROTOTYPING USER
INTERFACES
Soloveva Alexandra Anatolevna, master student, Scientific adviser: Shuklin Dmitry Anatolevich, Candidate of Pedagogic Sciences,
Associate Professor; ITMO University, Saint-Petersburg, Russia
Abstract: The connecting link between the idea and the end user interface is software for interface design. Choosing the right software allows you to create a "live" and as accurate as possible copy of the real interface, competently build the joint work of designers, reduce the time to create the interface, and generally facilitate the interface design. The article discusses graphical user interface builders. The analysis of the capabilities of the three most popular software is carried out by comparing the main functions, the main advantages and disadvantages of these programs are shown.
Keywords: interface; animation; design; web design;prototyping; UX; UI; software.
Для цитирования: Соловьева А.А. Сравнение программного обеспечения для разработки пользовательских интерфейсов и их прототипирования // Наука без границ. 2020. № 4(44). С. 55-60. For citation: Soloveva A.A. Comparison of software for developing and prototyping user interfaces// Scince without borders, 2020, no. 4(44), pp. 55-60.
Спектр программного обеспечения, которое используется при создании пользовательских интерфейсов, крайне широк и зависит от этапа проектирования. Разделим проектирование на
несколько этапов:
1) создание пользовательских сценариев - предполагает использование ПО, позволяющего рисовать, например блок схемы или таблицы;
2) создание условных и приблизительных эскизов и каркасов - на ранних этапах проектирования требуется создать черновые макеты интерфейса, без конкретного наполнения информацией и самого стилевого оформления;
3) дизайн макет с реальным дизайном интерфейса - создание реально выглядящего статического макета;
4) анимирование макета;
5) проектирование пользовательского взаимодействия.
Конечно, на каждом этапе проектирования можно использовать какое-либо ПО, функции которого максимально подходят под конкретную задачу. Однако не всегда удобно иметь «под рукой» пять (а может и больше) разных программ, заточенных под разные направления, и оперативно переключаться между ними под силу далеко не каждому человеку. Гораздо удобнее работать с меньшим количеством программ (в идеале с одной), сочетающих в себе все необходимые функции. Для веб-дизайнеров существует несколько таких комплексных ПО: Axure RP, Mockups, Justmind, Figma, Sketch, Adobe XD, InVision Studo [1; 2; 3; 4; 5; 6; 7].
Рассмотрим каждое из них чуть подробнее:
• Axure RP - платное профессиональное ПО для создания прототипов веб-интерфейсов, позволяет создавать не только статические, но и динамические веб-интерфейсы простым перетягиванием блоков на рабочий холст;
• Mockups - условно бесплатное ПО для создания интерактивных веб-интерфейсов. Имеет более простой пользовательский интерфейс по сравнению с Axure. Программа имеет набор виджетов и иконок. Существует воз-
можность предварительного просмотра прототипа путем экспорта HTML/ изображения;
• Justmind - платное ПО, позволяющее создавать профессиональные графические веб-интерфейсы. Программа обладает сложным веб-интерфейсом и на её освоение уйдет немалое время;
• Figma - полностью облачное веб-приложение, имеет также версию на ПК. Поддерживает работу в команде, имеет большой набор плагинов. Условно бесплатное, за расширение возможностей необходимо заплатить. Позволяет создавать макеты интерфейсов любого размера, настраивать анимацию и создавать прототипы. Имеет интуитивно понятный интерфейс. Работает на любых операционных системах;
• Sketch - ПО, очень схожее с Figma по принципам работы, интерфейсу и возможностям. Однако работает только на iOS и является платным, хотя существует 30-дневная пробная версия;
• Adobe XD - условно бесплатное ПО, имеющее возможность расширить размер облачного хранилища и увеличить количество доступных проектов за дополнительную плату. По своим возможностям очень схоже с Figma и Sketch, XD позволяет привязать аккаунт к Creative Cloud;
• InVision Studio - гибкое ПО для проектирования дизайна, прототи-пирования и настраивания анимации интерфейса. Поддерживает импорт из Sketch. Возможности очень схожи с XD, Sketch и Figma. Однако в отличие от других приложений анимация InVision основана на временной шкале.
Все эти приложения являются наиболее комплексными и позволяют гибко создавать макеты и настраивать
прототипы интерфейсов приложения. Однако особой популярностью среди дизайнеров пользуются Sketch, Figma и XD.
Преимущественно это обусловлено временем выхода программ и их возможностями. Долгое время Sketch был единственным и, следовательно, самым популярным средством разработки интерфейсов, однако в современном мире Figma и Adobe XD настолько качественно работают, что активно противостоят лидирующей позиции Sketch. Более того, оба приложения имеют бесплатные версии без урезанного функционала, что привлекает новых пользователей. Подробный анализ данных ПО приведён ниже:
1) Различия программ видны до момента установки: XD имеет версии для Mac и Windows, в то время как Figma поддерживает любую операционную систему, а Sketch доступен только для iOS;
2) ПО имеют схожие интерфейсы: панель слоев слева, холст для проектирования посередине, панель свойств справа и панель инструментов вверху. Одно известно точно - интерфейсы Figma и XD основаны на Sketch;
3) Новый файл проекта в Sketch или Figma по умолчанию создает одну страницу с пустым холстом. Можно добавить больше страниц или создать артборды - экраны интерфейса - пользовательского размера или выбрав из набора пресетов (для iPhone / Android телефонов и планшетов или для интернета, соц. сетей, умных часов и даже для полиграфии). Артборды Adobe XD очень похожи на Sketch, однако по умолчанию всё, что находится за пределами высоты реборда, сразу же скролится. А если высоту изменить,
XD добавит маркер, чтобы показать исходную высоту экрана. В Figma арт-борды называются фреймами, и они несколько мощнее, чем у Sketch. Тогда как Sketch прекратил поддержку вложенных артбордов несколько версий назад, Figma поощряет такое вложение. Т.е. для каждого элемента экрана может быть свой фрейм, также каждый фрейм имеет свою сетку;
4) Все три ПО позволяют накладывать сетки поверх артбордов (фреймов). Adobe XD и Sketch имеют схожий функционал настройки сеток. А Figma позволяет использовать разные сетки у разных фреймов и компонентов. Кроме того, сеток может быть неограниченное количество;
5) Ни одно из этих ПО не имеет гибкого набора инструментов для рисования, только базовые фигуры: прямоугольник, эллипс, многоугольник, а также перо и векторный рисунок произвольной формы. Существует возможность комбинировать фигуры (вычитание, сложение и пр.). Однако гибкость фигур Figma позволяет больше, чем в других программах. Например, для создания кольцевых диаграмм достаточно небольшой работы с одним эллипсом, тогда как в Sketch или XD нужно комбинировать фигуры. Но и у XD есть неповторимая функция - повторяющаяся сетка. Она позволяет создать один элемент и повторить его в списке или сетке, при этом каждый дубликат имеет схожие свойства, но уникальный контент.
Хотя ни одно из приложений не может сравниться с любым векторным редактором, они имеют достаточный набор инструментов рисования для проектирования интерфейса. В тоже время инструменты Figma несколько превосходят Sketch и XD;
6) Все три приложения поддерживают символы (компоненты) - элементы, имеющие одинаковые свойства. Однако есть несколько различий. В Sketch преобразование элемента в символ по умолчанию отправляет его на отдельную страницу «Символы». Любые сделанные изменения в символе будут применены ко всем экземплярам символа. В Figma символы называются компонентами. Всегда имеется основной, родительский компонент, чье копирование создает экземпляры. Их можно редактировать, но невозможно изменить размещение элементов внутри экземпляра. Компоненты Adobe XD по своему функционалу напоминают Figma, но размеры элементов можно изменять отдельно от родительского компонента. Все три приложения поддерживают повторное использование символов в файлах, т.е. существует возможность копировать компоненты из одного файла в другой и связывать их;
7) Стили. Sketch поддерживает два типа стилей - стили текста и стили слоя. Стили текста включают в себя все свойства шрифта, цвет и эффекты. Стили слоя включают заливки, границы и эффекты. При этом стили текста применяются только к текстовым элементам, а стили слоев ко всему остальному. Возможности стилей XD повторяют Sketch. Figma использует другой подход - каскадные стили. Т.е. можно сохранить отдельный стиль для текста, цвета, эффекта и затем смешивать их в элементах;
8) Все три ПО поддерживают интеграцию с другими продуктами и обладают своими библиотеками плагинов. Однако библиотека плагинов Sketch, как библиотека наиболее старой программы, содержит больше всего элементов. Интеграции со сторонними
приложениями тоже больше всего у Sketch. В Figma и XD плагины тоже существуют, но их количество заметно меньше. С интеграцией дела обстоят похоже;
9) Adobe XD с самого начала имел возможность связывать экраны вместе для создания прототипов, тогда как Sketch и Figma начинали как приложения статического дизайна и только впоследствии добавляли эти функции. На сегодняшний день все три приложения позволяют создавать прототипы.
С точки зрения моушен-дизайна, Adobe XD имеет самые мощные функции: Auto-animate и голосовые прототипы. Использование Auto-animate в сочетании с жестами перетаскивания позволяет создавать микровзаимодействия между артбордами для получения богатых возможностей прототипов. Например, анимации каруселей, карточек и списков или индикаторов прогресса. Функция auto-animate создает потрясающие эффекты и переходы, которые максимально реалистично передают анимированный опыт конечного пользователя [8]. Жесты перетаскивания в XD дополняют Auto-animate и позволяют имитировать опыт перетаскивания на устройствах с сенсорным экраном. Запускать взаимодействия также стало возможно с помощью голосовых команд, что позволяет создавать прототипы диалоговых пользовательских интерфейсов. Из трех приложений Adobe XD обладает самым мощным набором инструментов прототипирования. На его фоне инструментарий Sketch и Figma кажется совсем элементарным;
10) Все три приложения позволяют работать одной командой над одним проектом. Однако Sketch и Adobe XD - традиционно десктопные прило-
жения, тогда как Figma изначально была создана для совместной работы. В Figma несколько пользователей могут работать над одним и тем же документом одновременно. Совместная работа происходит примерно как в Google Docs - видны цветные курсоры каждого человека. К тому же можно кликнуть на аватар и увидеть дизайн с точки зрения другого проектировщика, т.е. можно полностью наблюдать за его работой со стороны. Проект Sketch нужно отдельно загружать в Sketch Cloud, откуда он уже будет доступен другим пользователям. Figma и Adobe XD самостоятельно генерируют ссылку на проект, которой можно поделиться с миром.
Исходя из вышеизложенного, можно заключить, что Figma, Sketch и Adobe XD обладают схожим функционалом и справляются с постав-
ленными задачами, это происходит с разным уровнем производительности. Sketch - отличное нативное приложение, которое, однако, подойдёт только для владельцев iOS. Adobe XD позволяет очень гибко работать с мо-ушен-дизайном, однако остальные его функции ещё не догнали Sketch. В тоже время Figma имеет лучший баланс между функционалом, юзаби-лити и производительностью. Это ПО имеет богатый и, главное, бесплатный, функционал, доступно как на любой операционной системе, так и из любого браузера. Более того, Figma активно развивается, и постоянно добавляются новые функции, плагины и обновления. Однако есть и существенный минус - невозможно работать в Figma при отсутствии подключения к сети интернет (кроме случаев, когда уже есть открытый файл).
СПИСОК ЛИТЕРАТУРЫ
1. Axure RP 9 [Электронный ресурс] // Axure. - Режим доступа: https://axure.com/ (Дата обращения: 25.03.2020).
2. Online Mockup, Wireframe & UI Prototyping Tool [Электронный ресурс]. - Режим доступа: https://moqups.com/ (Дата обращения: 22.03.2020).
3. Justmind [Электронный ресурс] // Justmind. - Режим доступа: https://justmind.com / (Дата обращения: 25.03.2020).
4. Figma: the colloborstive interface design tool [Электронный ресурс] // Figma. - Режим доступа: https://figma.com/ (Дата обращения: 25.03.2020).
5. Sketch - The digital design toolkit [Электронный ресурс] // Sketch. - Режим доступа: https://sketch.com/ (Дата обращения: 22.03.2020).
6. Let's XD together [Электронный ресурс] // Adobe. - Режим доступа: https://www. adobe.com/ru/products/xd.html (Дата обращения: 22.03.2020).
7. Digital product design, workflow & collaboration [Электронный ресурс] // InVision. -Режим доступа: https://invisionapp.com/ (Дата обращения: 25.03.2020).
8. Тестируем Auto-Animane от Adobe XD [Электронный ресурс] // UXPUB. - Режим доступа: https://ux.pub/testiruem-auto-animate-ot-adobe-xd/ (Дата обращения: 25.03.2020).
REFERENCES
1. Axure RP 9 // Axure. Available at: https://axure.com/ (accessed 25 March 2020).
2. Online Mockup, Wireframe & UI Prototyping Tool. Available at: https://moqups.com/ (accessed 22 March 2020).
3. Justmind // Justmind. Available at: https://justmind.com / (accessed 25 March 2020).
4. Figma: the colloborstive interface design tool // Figma. Available at: https://figma.com/ (accessed 25 March 2020).
5. Sketch - The digital design toolkit // Sketch. Available at: https://sketch.com/ (accessed 22 March 2020).
6. Let's XD together. Available at: https://www.adobe.com/en/products/xd.html (accessed 22 March 2020).
7. Digital product design, workflow & collaboration // InVision. Available at: https:// invisionapp.com/ (accessed 25 March 2020).
8. Testiruem Auto-Animane ot Adobe XD [Testing Auto-Animane from Adobe XD]. UXPUB. Available at: https://ux.pub/testiruem-auto-animate-ot-adobe-xd/ (accessed 25 March 2020).
Материал поступил в редакцию 06.04.2020
© Соловьева А.А., 2020
