Парадигмы софтов для дизайна интерфейсов

Написано много статей и снято много видео, посвященных софтам для веб-дизайна, дизайна интерфейсов и UX/UI дизайна. Эти материалы рассматривают софт с позиции пользователя, то есть, уделяют основное внимание удобству и фичам. Нередко встречаются материалы с ответами на вопрос, что выбрать для повседневной работы или для решения конкретной дизайнерской задачи. Зачастую авторы основываются на собственном опыте и предпочтениях. В чём здесь ошибка? Читайте в этой статье.

Автор статьи: Алексей Литвин, аналитик данных в IT-сфере, автор книги «UX/UI дизайн: практическое руководство».

В публичном поле дизайнеры интерфейсов, разговаривая о софте, чаще всего спорят о том, что лучше – Figma или Sketch. Этот вопрос лишен смысла, и, дочитав статью до конца, вы поймете почему. Мы также не будем говорить об отдельных фичах. Вместо этого попробуем выделить базовые элементы, которые делают продукт таким, какой он есть. Другими словами, в фокусе нашего внимания окажутся элементы, изменение которых сформирует продукт иного класса. 

Мы выделили два базовых элемента после анализа софтов для дизайна интерфейсов. Первый элемент – это основная структурная единица, то, из чего строится макет, визуальный образ интерфейса. Второй – это способ интерактивности, с помощью этого подхода создаются элементы взаимодействия между пользователем и интерфейсом.

На основе выделенных базовых элементов, мы объединили современные дизайнерские софты в четыре группы:

• Редакторы фреймов
• Редакторы объектов
• Редакторы фреймов и правил
• Блочные редакторы

Рассмотрим каждую из групп подробнее.

Редакторы фреймов

Основная единица редактора фреймов – это фрейм. Пользователь создаёт множество макетов экранов. Каждый из макетов представляет собой дерево фреймов. Иначе говоря, иерархическую структуру фреймов, вложенных один в другой. Это показано в следующей иллюстрации.

На наш взгляд, редакторы фреймов возникли как попытка адаптировать Adobe Photoshop для дизайнеров интерфейсов. Но осталась концепция представления составного визуального образа в виде иерархии отдельных слов. Иначе говоря, фрейм – это тот же слой, но с четкой границей.

В редакторах фреймов интерактивность создаётся за счёт связей между фреймами (редакторы фреймов со связями), а также за счёт интерактивных фреймов (редакторы интерактивных фреймов). Типичные представители редакторов фреймов со связями: Figma, Sketch.

В свою очередь, пример интерактива – переход между экранами. В его основе лежит связь между двумя фреймами. Figma и Sketch – это одно и то же, с точки зрения базовых элементов. Различия же проявляются на уровне отдельных фич. 

Пример редакторов интерактивных фреймов – это Proоto.io. В отличие от предыдущего класса, здесь интерактив является частью фрейма. Пользователь устанавливает необходимые свойства, в результате чего можно интерактивно взаимодействовать.

Редакторы фреймов со связями – это наиболее востребованные инструменты для дизайна интерфейсов. На наш взгляд, эта популярность возникла во многом из-за сходства с Photoshop.

Хотя редакторы фреймов со связями популярны, они обладают существенным недостатком, он вытекает из выбранной парадигмы. Это множественное копирование. Представим интерфейс в виде большого количества экранов, которые соединены переходами. Такой интерфейс будет состоять из множества экранов без существенных отличий. Поэтому количество фреймов и связей между этими экранами быстро растет с увеличением сложности и многообразности интерфейса.

Редакторы объектов

Управляющих элементов (кнопок, чекбоксов, радиобаттонов) не так много, как кажется на первый взгляд. Поэтому не обязательно собирать эти элементы из фреймов, а можно использовать готовые шаблоны с возможностью настройки. Этим путем пошли редакторы объектов. Среди прочего, с помощью данного подхода преодолевается проблема множественного копирования в редакторах фреймов.

Основная единица редактора объектов – это объект. Он является готовым элементом интерфейса, со своими визуальными и функциональными свойствами. Интерактив – это свойство объекта. Изменяя свойства, пользователь получает различные варианты поведения объекта. Известный представитель редакторов объектов – это Axure RP. С помощью объектного подхода создаются макеты с более сложными сценариями взаимодействия, чем с помощью редакторов фреймов.

Редакторы фреймов и правил

Чтобы спроектировать интерфейс, воспользуемся еще одним подходом. Он заключается в обособлении правила как отдельной базовой единицы.

Основных единиц в редакторе фреймов и правил две – это фреймы и правила. Фреймы – те же ограниченные слои. Пользователь получит макет интерфейса, если будет создавать из этих слоёв вложенные структуры. 

Существенное отличие от редактора фреймов – наличие правила как отдельной структурной единицы. Пользователь может создавать комбинации правил и соединять их с фреймами. Таким образом, создается интерактивность интерфейса. Пример редактора фреймов и правил – это Origami studio. 

С помощью введения правил мы избавляемся от множественного копирования – интерактив работает на одном и том же экране. Поэтому сборка цепочек правил порождает похожую проблему: с увеличением сложности интерфейса растет сложность цепочек правил и растет их количество.

Блочные редакторы

Основная единица блочного редактора – это блок. Подразумевается цельный и готовый фрагмент интерфейса со встроенным содержимым (текстом, изображениями, видео). Пользователь в блочном редакторе выстраивает последовательности блоков, изменяет данные на свои. Также он строит и собственные блоки.

Блочные редакторы сужают возможности дизайнера. Ему приходится замыкаться на простых веб-сайтах – не создаются разнообразные интерфейсы. С другой стороны, за счёт этой простоты можно быстро и легко собирать несложные проекты.

Интерактив – это свойство блока. Чтобы сделать блок интерактивным, ему нужно присвоить соответствующее свойство. Типичные представители блочных редакторов – Tilda.cc и WIX.com.

Выводы

Кажется, что инструментов для дизайна интерфейсов много, но вариативность парадигм, на которых они строятся, крайне мала. Все инструменты представляют собой редакторы с добавлением интерактива или WYSIWYG (what you see is what you get). Даже в редакторах фреймов и правил правила выражаются визуально.

Проведя анализ, мы считаем, что есть потенциал для открытия новых парадигм и для создания эффективных редакторов интерфейсов. Сегодня сложно сказать какими они будут, но их зависимость от визуала будет ниже, чем сегодня. 

Ранее по этому пути пошел Дональд Кнут, создав систему компьютерной верстки TeX. В привычных редакторах WYSIWIG (Microsoft Word, Google Docs) текст создается на виртуальном листе, в готовом виде. В TeX отображение текста отделено от данных – создается пользователем на основе системы команд. Это позволяет гарантировать внешний вид текста вне зависимости от версии программы, пользовательских настроек конкретного ПК и иных побочных факторов.

Освоить TeX сложнее, чем Word. С профессиональной точки зрения, TeX обладает рядом неоспоримых преимуществ, особенно при написании научных текстов.

Сильные разработки создаются не в одиночку, а в коллективе. LIVREZON CLUB объединяет более 50-ти коллективов в разных отраслях научного знания. В ежедневном режиме они делятся опытом, собирают новые данные, пишут книги и статьи, тестируют технологии и получают друг от друга полезную обратную связь. 

Хотите присоединиться к коллективу разработчиков? Пишите на info@livrezon.com

ЧТО ТАКОЕ БАЗА ЗНАНИЙ?

Концентрированная книга издательства LIVREZON складывается из сотен и тысяч проанализированных источников литературы и масс-медиа. Авторы скрупулёзно изучают книги, статьи, видео, интервью и делятся полезными материалами, формируя коллективную Базу знаний. 

Пример – это фактурная единица информации: небанальное воспроизводимое преобразование, которое используется в исследовании. Увы, найти его непросто. С 2017 года наш Клуб авторов собрал более 80 тысяч примеров. Часть из них мы ежедневно публикуем здесь. 

Каждый фрагмент Базы знаний относится к одной или нескольким категориям и обладает точной ссылкой на первоисточник. Продолжите читать материалы по теме или найдите книгу, чтобы изучить её самостоятельно.  

📎 База знаний издательства LIVREZON – только полезные материалы.