CC BY
151ОБЗОР И СРАВНЕНИЕ ПО ДЛЯ РАЗРАБОТКИ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ (UI, UX)
OVERVIEW AND COMPARISON OF SOFTWARE FOR DEVELOPING USER
INTERFACES (UI, UX)
УДК 004
Остапенко Евгений Валерьевич, магистрант, физико-технический факультет
Кубанский государственный университет, г. Краснодар
Evgeny Ostapenko, Master student, Faculty of Physics and Technology, Kuban
State University, Krasnodar
Е-mail: ostapenko.zheka@gmail.com
Аннотация
Важным связующим элементом между идеей и конечным пользовательским интерфейсом является программное обеспечение для проектирования интерфейсов. Именно выбор подходящего ПО дает возможность создать максимально точный, "живой" прототип будущего реального интерфейса, позволяет грамотно построить совместную работу разработчиков и дизайнеров, а также сэкономить время и силы в работе над проектированием интерфейса. В данной статье будут рассмотрены среды визуальной разработки графических интерфейсов пользователя. Проводится анализ возможности трех самых популярных программных обеспечений на примере сравнения их главных функций, сильных и слабых сторон.
S u m m a r y
An important connecting element between the idea and the end user interface is the interface design software. It is the choice of suitable software that makes it possible to create the most accurate, "live" prototype of the future real interface, allows you to competently build the joint work of developers and designers, as well as save time and effort in designing the interface. This article will discuss visual development environments for graphical user interfaces. The possibility of the three most popular softwares is analyzed by comparing their main functions, strengths and weaknesses
Ключевые слова: ПО, программное обеспечение, интерфейс, веб-дизайн, прототипирование, UI, UX
Keywords: software, interface, web-design, prototyping, UX, UI.
На данный момент существует большое разнообразие программного обеспечения для создания пользовательских интерфейсов. В зависимости от того на каком этапе проектирования находится команда разработки спектр ПО сужается или расширяется. В нашем случае разделим проектирование на данные этапы: 1) Создание и проработка пользовательских сценариев - на этом этапе достаточно рисовать схемы, таблицы
2)создание условных и приблизительных каркасов будущего ПО - на этом этапе требуется создать черновые наброски интерфейсов, без какой-либо конкретики, наполненности деталями и стилевой обработки.
3) проектирование дизайн-макета максимально приближенного к итоговому продукту, т.е. создание реального статического макета
4) разработка анимаций в интерфейсе
5) работа над пользовательским взаимодействием
Не смотря на кажущуюся логичной мысль использовать для разработки ПО под конкретный запрос за определенном этапе, иметь "под рукой" больше количество различных программ или приложений, заточенных под разный функционал, и оперативно и эффективно использовать и переключаться между ними дано не каждому человеку. Гораздо эффективным будет взаимодействие узконаправленного специалиста с одной конкретной программой, которая сочетает в себе все нужные функции. Для веб-дизайнеров уже разработано несколько многофункциональных ПО: Balsamiq Mockups, Axure RP, Justmind, Figma, Adobe Experience Design, InVision Studio, Sketch.[1,2,3,4,5,6,7]
Кратко рассмотрим каждое ПО:
• Balsamiq Mockups - это действующий по подписке сервис для создания интерактивных макетов. Программа имеет вполне доступный интерфейс, широкий набор виджетов и иконок Есть возможность экспорта макеты в различные для просмотра форматы, а также интеграция с такими сервисами как Google Disk, JIRA и Confluence.
• Axure RP - известная и популярная платная профессиональная программа по созданию прототипов веб-сайтов и приложений, которая позволяет создавать не только статические, но и динамические веб-интерфейсы простым перетаскиванием блоков на рабочий холст.
• Justmind - платное ПО, позволяющее создавать сложные профессиональные графические веб-интерфейсы. Программа обладает
сложным пользовательским интерфейсом, что означает высокий порог входа для пользователя.
• Figma - условно бесплатный полностью облачный сервис, который имеет также версию на ПК. Позволяет работать над одним макетом всей команде, создавать макеты различных форматов, настраивать анимации и создавать прототипы.
• Adobe Experience Design(Adobe XD) - условно бесплатное ПО, с возможностью расширить возможности за дополнительную плату. По своему функционалу Adobe XD похож на Figma.
• Invision - очень гибкое ПО для проектирования интерфейсов, создания анимации и прототипов. Обладает удобным и понятным интерфейсом, поддерживает импорт из Sketch.
• Sketch - очень похожее по функционалу, принципу работы и интерфейсу на Figma ПО, однако работает только на iOS и является платным.
Представленные приложения являются максимально комплексными и позволяют гибко и точно создавать макеты и прототипы интерфейсов. Однако большей популярности пользуются Sketch, Adobe Experience Design и Figma. У Sketch данное преимущество обусловлено ранним выходом на рынок и фактическим отсутствием конкурентов на запуске. Figma и Adobe XD в свою очередь обеспечили свою качественную работу и хороший сервис поддержки, в связи с чем они активно борются за лидерство с Sketch. Более того, оба этих сервиса имеют бесплатные версии без сильно урезанного функционала, что привлекает новых пользователей. Подробный сравнительный анализ данных ПО по различным критериям приведён ниже:
1) Поддержка разных окружений: Figma и Adobe XD поддерживаются как на ПК с различными ОС, так и на мобильных устройствах, Sketch поддерживается исключительно на iOS
2) Стоимость использования: платная подписка на 1 пользователя Adobe XD обойдется в 10$, Figma 12$, в Sketch индивидуальная бессрочная подписка стоит 99$ либо 9$ ежемесячно на каждого сотрудника для компании. Вместе с тем стоит сказать о том, что в отличие от Sketch в Adobe Xd и Figma бесплатный функционал очень широк и позволяет полноценно создавать макеты и прототипы.
3) Интерфейс: по большей части интерфейсы у данных ПО очень похожи друг на друга из-за того, что интерфейсы Figma и XD основаны на Sketch.
4) Процесс работы: По умолчанию в Sketch и Figma новый файл это отдельный холст. Можно добавить больше страниц для своего интерфейса или
создать сразу создавать артборды - экраны интерфейса - пользовательского размера или выбрав из набора шаблонов. В Figma аналог артбордов называется "фрейм" и у фреймов больший функционал нежели в Sketch. Одной из особенностью фреймов является возможным создания вложенности, т.е. у каждого элемента экрана будет свой фрейм, каждый фрейм имеет свою сетку. К сожалению Sketch подобный функционал прекратил поддерживать. Так же все три ПО поддерживают накладывание сетки поверх артбордов, выделить можно только Figma за возможность накладывать неограниченное количество сеток и использовать разные сетки у разных фреймов.
5) Инструменты рисования: к сожалению ни одно из ПО не обладает инструментами для пользовательского рисования. Пользователю доступны примитивные фигуры, перо и векторные рисунки произвольной формы. Figma отличается простой работы с доступными фигурами, однако только в Adobe Experience Design есть возможность создавать один элемент и копировать его в сетке, создавая идентичные дубликаты, но наполнять их разным контентом.
6) Символы: Все три приложения поддерживают символы -элементы, которые имеют одинаковые свойства и могут быть моментально обновлены. Однако подход к символам сильно отличается во всех трех приложениях. В Sketch есть отдельная страница с символами, редактируя символы на данной странице, правки применяются ко всем экземплярам данного символа, по другому экземпляр не редактируется. В Figma символы называются компонентами. Их можно редактировать как любую другую группу, за исключением перемещения. С одной стороны это более гибкое решение, но и накладывает определенные ограничения на работу с такими экземплярами. В Adobe Experience Design наименее мощный функционал у символов, каждый экземпляр символа является абсолютным клоном своего родителя, а возможности редактирования таких символ очень ограничены. Все три приложения поддерживают символы, но версия XD настолько проста, будто ее вовсе нет. Подход Figma к редактированию экземпляра символа или компонента гораздо более интуитивен и эффективен, чем в Sketch. Хотя Sketch в последних версиях наверстывал упущенное. Оба приложения имеют мощные функции библиотек для удобного управления и совместной работы.
7) Плагины и интеграции: из-за огромной библиотеки плагинов, которая постоянно пополняется Sketch не имеет себе равных, когда дело доходит до экосистемы плагинов и интеграций, так же данное ПО поддерживает интеграцию с различными сторонними приложениями и сервисами, в том числе с другим ПО для создания интерфейсов, например InVision. В Adobe Experience Design плагины появились относительно
недавно, но из-за грамотной маркетинговой стратегии компания быстро привлекла разработчиков для запуска и наполнения своей экосистемы плагинов. У Figma не так много плагинов по сравнению со своими конкурентами, но те что есть обладают потенциалом в работе и дают возможности интеграции с различными сервисами.
8) Прототипирование и моушн-дизайн: Figma и Sketch изначально были задуманы как приложения для построения статического дизайн-макета, а Adobe XD сразу имел функционал связывания экранов вместе, для создания прототипов невысокой точности. В 2017 году Figma также добавила прототипирование, а в 2018 и Sketch. С точки зрения именно моушн-дизайна Adobe XD имеет самые мощные инструменты для работы, такие как Auto-animate и голосовые прототипы. Использование Auto-animate в сочетании с пользовательскими жестами, позволяет взаимодействовать между артбордами, открывая отличные возможности прототипов, такие как индикаторы прогресса, анимации каруселей, списков и карточек. Данная функция максимально реалистично отражает анимированный опыт будущего пользователя[8]. Из трех приложений Adobe XD обладает самым мощным набором инструментов прототипирования. На его фоне инструментарий Sketch и Figma кажется совсем элементарным;
9) Взаимодействие с командой: все приложения позволяют работать над проектом одной командой, однако Figma изначально создавалась как веб-приложения для работы нескольких пользователей, работа в Figma похожа на взаимодействие в Google Docs. Кроме того можно просто следить за работой другого пользователя со стороны. В Sketch проект нужно отдельно загружать в сервис Sketch Cloud, откуда он уже будет доступен другим пользователям. Figma и Adobe XD самостоятельно генерируют ссылку на проект, которой нужно поделиться с командой.
Исходя из вышеизложенного можно сделать вывод, что все три данные программы отлично справляются с поставленной им задачей - быть эффективным и разносторонним ПО с большим кругом возможности для разработки интерфейсов. Adobe Experience Design лучше всего проявляет себя в моушен-дизайне и активно развивает свою систему плагинов, но к сожалению в других основных функциях уступает двум другим ПО. Sketch является отличным нативным приложением, однако для многих может стать проблемой поддержка ПО исключительно на iOS. В то же время Figma является наверное лучше площадкой для разработки макетов и прототипов, так как она постоянно обновляется и развивается, имеет доступный функционал даже без покупки подписки, поддерживается на большинстве
платформ, а также в Figma самый лучший интерфейс для работы в команде.
Однако Figma имеет один очень существенный минус - при отсутствии
подключения к сети сервисом невозможно пользоваться.
Литература
1. Balsamiq. Rapid, effective and fun wireframing software. | Balsamiq // Balsamiq mocups [электронный ресурс] — Режим доступа. — URL: https://balsamiq.com (дата обращения 20.05.2020)
2. Axure RP 9 - Prototypes, Specifications, and Diagrams in One Tool // Axure [электронный ресурс] — Режим доступа. — URL: https://www.axure.com (дата обращения 20.05.2020)
3. Justmind: Free prototyping tool for web & mobile apps // Justmind. [Электронный ресурс] - Режим доступа. — URL: https://justmind.com / (Дата обращения: 20.05.2020)
4. Figma: the collaborative interface design tool // Figma. [Электронный ресурс]
- Режим доступа. — URL: https://figma.com/ (Дата обращения: 20.05.2020)
5. Learn and Master Adobe XD | Let's XD // Adobe. [электронный ресурс] — Режим доступа. — URL: https://letsxd.com (Дата обращения: 20.05.2020)
6. InVision | Digital product design, workflow & collaboration // InVision. [электронный ресурс] — Режим доступа. — URL: https://www.invisionapp.com (Дата обращения: 20.05.2020)
7. Sketch - The digital design toolkit // Sketch. [электронный ресурс] — Режим доступа. — URL: https://www.sketch.com (Дата обращения: 20.05.2020)
8. Тестируем Auto-Animate от Adobe XD // UXPUB. [электронный ресурс]
— Режим доступа. — URL: https://ux.pub/testiruem-auto-animate-ot-adobe-xd/ (Дата обращения: 20.05.2020)
Literature
1. Balsamiq. Rapid, effective and fun wireframing software. | Balsamiq // Balsamiq mocups [electronic resource] - Access mode. - URL: https://balsamiq.com (date of access 05.20.2020)
2. Axure RP 9 - Prototypes, Specifications, and Diagrams in One Tool // Axure [electronic resource] - Access mode. - URL: https://www.axure.com (accessed 05.20.2020)
3. Justmind: Free prototyping tool for web & mobile apps // Justmind. [Electronic resource] - Access mode. - URL: https://justmind.com / (Date of access: 05/20/2020)
4. Figma: the collaborative interface design tool // Figma. [Electronic resource] -Access mode. - URL: https://figma.com/ (Date of access: 05/20/2020)
5. Learn and Master Adobe XD | Let's XD // Adobe. [electronic resource] - Access mode. - URL: https://letsxd.com (Date accessed: 05/20/2020)
6. InVision | Digital product design, workflow & collaboration // InVision. [electronic resource] - Access mode. - URL: https://www.invisionapp.com (Date accessed: 05.20.2020)
7. Sketch - The digital design toolkit // Sketch. [electronic resource] - Access mode. - URL: https://www.sketch.com (Date accessed: 05/20/2020)
8. Testing Auto-Animate from Adobe XD // UXPUB. [electronic resource] -Access mode. - URL: https://ux.pub/testiruem-auto-animate-ot-adobe-xd/ (Date of access: 05/20/2020)
