Как вы позволяете людям легко создавать красивые мобильные и веб-приложения, когда у них нет опыта в дизайне?

«Легко: вы просто добавляете в проблему нейронные сети!»

«Ну, вроде как»

Возможно, вы уже слышали об Uizard из нашего раннего исследования машинного обучения pix2code или нашей технологии для превращения нарисованных от руки эскизов в интерактивные прототипы приложений.

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

Дизайн - это сложно для не дизайнеров

Со временем и на протяжении всей нашей частной бета-программы большинство наших постоянных активных пользователей начали все чаще становиться основателями стартапов, менеджерами по продуктам, консультантами, бизнес-аналитиками и маркетинговыми командами. Мы также заметили поддержку среди профессионалов в области пользовательского опыта (UX) и исследователей, которые обычно работают в тесном сотрудничестве с командами дизайнеров, но сами не прошли подготовку в качестве графических дизайнеров / дизайнеров пользовательского интерфейса. Проще говоря, Uizard стал дизайнерским инструментом для не дизайнеров.

Uizard превратился в простой в использовании инструмент дизайна, в котором вы можете создавать мобильные приложения, веб-сайты и экраны программного обеспечения для настольных компьютеров с помощью компонентов и шаблонов перетаскивания, а не пикселей и векторов, как в большинстве инструментов дизайна пользовательского интерфейса. Вы также можете загружать нарисованные от руки каркасные эскизы и автоматически преобразовывать их в редактируемые экраны. Довольно проста в использовании!

Поскольку Uizard - это инструмент проектирования на основе компонентов, компоненты организованы в виде минималистичной системы дизайна: тема Uizard (отметьте эту ссылку или эту, если вам интересно узнать об атомарном дизайне и системах дизайна). Вообще говоря, темы Uizard - это средство для организации и категоризации компонентов, определения их цветов, типографий и свойств стиля. Эти компоненты (например, кнопки, метки, поля ввода) могут быть собраны в повторно используемые шаблоны (например, форма входа, галерея изображений, раздел оплаты), которые затем могут использоваться для создания экранов. и приложения.

Хотя Uizard поставляется с несколькими готовыми темами, до сих пор нашим клиентам, не являющимся дизайнерами, было сложно:

  • Легко создавайте новые темы, которые будут хорошо выглядеть, если у них нет дизайна.
  • Легко импортируйте существующие артефакты дизайна в Uizard, чтобы убедиться, что их проекты соответствуют фирменному стилю их компании.

Два из наших первых последователей упомянули об этом ограничении во время нашей частной бета-фазы: Валентин де Брюн и Саймон Хангаард Хансен (еще раз спасибо, ребята!).

Затем мы спросили себя: можем ли мы использовать глубокое обучение для автоматического создания тем?

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

Как описано в этом сообщении в блоге, мы создали систему, способную извлекать компоненты, распознавать шрифты, извлекать маркеры дизайна и извлекать свойства стиля (преобразование текста, радиус границы, отступы, вес шрифта, тень и т. Д.) из изображений, URL-адресов и даже файлов Sketch. Это позволяет нашим клиентам:

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

Насколько нам известно, это впервые в мире. (Да, мы очень гордимся своей технологией, извините за это…) Adobe создала инструмент для извлечения цветов из изображений, но система не может извлекать какую-либо другую информацию. Кто-то построил инструмент для извлечения маркеров дизайна из URL-адреса, но система может извлекать только список цветов, шрифтов и информацию о расстоянии, но не полностью готовые к использованию компоненты.

Итак, как мы заставили это работать?

Создание дизайн-системы из изображения

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

Наш конвейер нейронной сети обучен обрабатывать изображение в качестве входных данных и идентифицировать компоненты, распознавать шрифты и извлекать свойства стиля (размер текста, радиус границы, отступы, вес шрифта, тень и т. Д.). Это позволяет создать индивидуальную тему Uizard за секунды, просто загрузив одно изображение.

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

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

Создание дизайн-системы из URL

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

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

"Пожалуйста! Зачем для этого нужно глубокое обучение? Почему нельзя просто обработать необработанные CSS и HTML? »

«Потому что ШУМ»

Не существует стандарта для реализации или наименования компонентов в HTML. Вы можете создать кнопку, используя ‹div›, ‹a›, ‹button› или другие теги. Поэтому практически невозможно наивно проанализировать HTML / CSS веб-страницы и надеяться точно определить семантические концепции, лежащие в основе каждого отдельного элемента. Машинное обучение - мощный инструмент, который может нам здесь помочь.

Нашему алгоритму сначала необходимо сделать снимок экрана веб-сайта и собрать файлы CSS и HTML. Затем наш конвейер обрабатывает снимок экрана веб-сайта и получает доступ к метаданным (т. Е. К файлам HTML / CSS), чтобы делать более точные и точные прогнозы, как показано на изображении ниже. Если и когда возникают ошибки - потому что ни одна технология никогда не была безупречной - все можно редактировать и настраивать на платформе Uizard. Посмотрите это демонстрационное видео, чтобы увидеть эту функцию в действии.

Создание дизайн-системы из файла Sketch

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

«Да ладно, это довольно простая задача! Вероятно, все в файле Sketch названо и хорошо организовано, не так ли? Верно?"

«НЕТ»

Для начала дизайнеры могут называть слои и организовывать свои файлы Sketch так, как они хотят. Что наиболее важно, Sketch - это программа для работы с векторной графикой, поэтому здесь нет таких понятий, как «кнопка» или «поле ввода». Все состоит из фигур, состоящих из векторов. Нет доступной семантической информации и соглашения об именах. Вероятно, вы можете увидеть общность с проблемой, которую мы обсуждали ранее, для извлечения компонентов и свойств стиля из файлов HTML / CSS.

Файл Sketch - это, по сути, zip-дамп с кучей json-файлов и изображений. Одно из этих изображений является предварительным просмотром содержимого файла в том виде, в каком оно будет отображаться во время выполнения Sketch. Таким образом, мы можем кормить наш движок, как мы это делали для генератора тем на основе URL: давая нашему конвейеру нейронной сети как изображение предварительного просмотра, так и доступ ко всем доступным метаданным для корректировки прогнозов.

Это работает (на удивление) хорошо! Этот метод может быть расширен и использован в качестве обобщенной структуры для обработки файлов из других инструментов векторного дизайна, таких как Figma или Adobe XD. Вы можете посмотреть это демонстрационное видео, чтобы увидеть, как это работает на практике.

Одним из основных ограничений этого метода является то, что изображение предварительного просмотра может иметь максимальный размер не более 2048 пикселей на самой большой стороне. Это означает, что для очень больших проектов Sketch с большим количеством экранов мелкие детали в изображении предварительного просмотра сильно пикселизируются, что может привести к неточным прогнозам. К счастью, на платформе Uizard все можно редактировать и настраивать!

Напутственные слова

Излишне говорить, что мы очень гордимся нашей технологией генератора тем! Вы можете бесплатно попробовать его на https://uizard.io.

Конечно, команда Uizard - это не только я! Престижность Хавьеру Фуэнтесу Алонсо, ведущему инженеру-исследователю наших генераторов тем, Джеймсу Монку и Артуро Аррансу Матео из группы машинного интеллекта, Иоаннису Синтосу, нашему фокуснику MLOps / DevOps, Матиасу Вильверту и Хенрику Хаугбёлле за гладкий API между нашими моделями машинного обучения и платформа Uizard.

Спасибо, что прочитали, и обязательно подписывайтесь на я, Хавьер и Уизард в Твиттере, если вас интересует машинное обучение, применяемое для проектирования продуктов и разработки программного обеспечения.

У нас еще много всего нового в области искусственного интеллекта, так что следите за обновлениями! 😊