В прошлом году, во время мозгового штурма, чтобы предложить новые идеи для Полное пересечение , мы начали думать о процессе разработки приложения и о том, какая часть была более болезненной для разработчиков. Поскольку для создания приложения требуется 5 основных этапов (Планирование, Проектирование, Разработка, тестирование, развертывание), мы создали несколько гипотез, одна из которых была более трудоемкой, и начали проверять ее с клиентами и опытными мобильными разработчиками.
Одна из этих гипотез была связана со временем, затраченным разработчиком на “перевод” всех прототипов/макетов с этапа проектирования в реальный исходный код. Поговорив с некоторыми разработчиками, мы обнаружили закономерность между ними, и в некоторых худших случаях они тратили более 30% времени разработки только на создание пользовательского интерфейса/UX приложения.
Определенно, есть проблема, которую необходимо решить.
Покопавшись в существующих решениях, мы обнаружили два основных подхода к решению этой проблемы:
Новый инструмент для дизайнеров: таким образом, инструмент проектирования автоматически “сгенерирует” исходный код и сделает его “проще” для разработчика;
Новый инструмент для разработчиков: таким образом, разработчику “просто нужно” перетащить некоторые компоненты, чтобы снова создать пользовательский интерфейс, сделав копию прототипа.
Либо оба решения приводят к множеству новых проблем, таких как:
Как дизайнерам, так и разработчикам необходимо будет освоить новый инструмент. Они уже привыкли к своим любимым инструментам, и большинство профессионалов просто не хотят их менять;
Внедрение нового инструмента дизайна, вероятно, будет чрезвычайно сложным, существует несколько хорошо зарекомендовавших себя инструментов дизайна для обоих персонажей, таких как Figma, AdobeXD, Photoshop, Xcode, Android Studio и т.д. (как говорят стартаперы: ваша технология должна быть в 10 раз лучше, чем у вашего конкурента);
Большинство инструментов проектирования, генерирующих исходный код, не обеспечивают чистой и достойной реализации.
После этого этапа исследования нам пришла в голову безумная идея:
Почему бы не использовать компьютерное зрение, которое люди используют для обнаружения объектов, животных и т. Д., Для обнаружения компонентов пользовательского интерфейса в изображениях прототипов и рисования пользовательского интерфейса для разработчиков?
Таким образом, мы бы не добавляли новый инструмент ни для кого, дизайнер мог бы продолжать использовать свой любимый инструмент дизайна, разработчик мог бы использовать свою IDE и, самое главное, мы могли бы сократить до 30% времени разработки и стоимость мобильного проекта. Похоже на беспроигрышное решение =)
Мы решили начать Доказательство концепции , чтобы проверить жизнеспособность этой идеи и избежать траты большого количества времени, денег и энергии без гарантии успеха.
В то время, когда мы начинали, некоторые публикации были сделаны с той же целью, и наиболее многообещающей была pix2code , мы начали проверку технологии с этого исследования и обучили нейронную сеть некоторым базовым компонентам, таким как текстовое поле, метка, поле со списком, и первые результаты были абсолютно потрясающими.
Первая проверка была завершена, но нам все еще оставалось решить одну проблему: как и в других технологиях, нам нужно было перевести компоненты в исходный код или на промежуточный язык/формат, чтобы разработчику было проще его использовать, но, опять же, в отличие от других решений, мы хотели использовать лучшие технологии, которые уже существуют. У нас возник вопрос: “Какое устройство является наиболее часто используемым инструментом для создания пользовательского интерфейса для приложений?”
Ответ был настолько очевиден: мобильные разработчики могут обеспечить потрясающий пользовательский интерфейс для приложений, используя такие инструменты, как Android Studio. Почему бы не создать XML-файл Android с нарисованным пользовательским интерфейсом? И вот мы это сделали .
Мы собрали команду, в которую вошли доктор философии и магистр компьютерной графики, а также студенты факультета компьютерных наук Университета Форталезы в Бразилии, чтобы выполнить эту задачу и создать эту технологию. Кроме того, мы собрали немного денег у Banco do Nordeste do Brasil , одного из крупнейших государственных банков Бразилии, для поддержки создания этого MVP.
Результаты до сих пор:
Некоторые из результатов, которых мы достигли до сих пор
Мы все еще работаем над улучшением нейронной сети, но мы достигли 70% точности алгоритма компьютерного зрения;
Прямо сейчас макеты Android поддерживаются на 80%;
Тесты проводятся на таких устройствах, как Модули Android , Raspberry Pi, Toradex , iOS и т.д. Приложения действительно гибкие, пользовательский интерфейс потрясающий, а занимаемая площадь чрезвычайно мала (так как мы не используем Android для рендеринга на устройстве). Вы можете взглянуть на первый образец здесь ;
Движок, который отображает XML Android на устройстве, теперь с открытым исходным кодом, доступен на Github =). Вы можете проверить исходный код здесь .
Вывод
Все это началось с мозгового штурма с командой, которая становится действительно крутой и многообещающей технологией, которая может упростить процесс разработки приложений для разработчиков и дизайнеров, не добавляя для них новый сложный инструмент.
Если вы хотите взглянуть на первый образец, он доступен на Github и мы написали краткое руководство , чтобы показать, как использовать эту технологию.
Алгоритмы компьютерного зрения и нейронных сетей, Android XML, Total Cross, pix2code – вот некоторые из технологий, которые мы используем для “чтения” прототипов изображений и перевода их в реальные приложения, которые могут работать на мобильных, настольных и встроенных устройствах. Работа еще не закончена но результаты пока действительно захватывающие =)
Что вы думаете об этой технологии? Оставляйте свои комментарии!
изображение с обложки: https://medium.com/@mou.abdelhamid/learning-computer-vision-machine-learning-c1521ee6ed08
Оригинал: “https://dev.to/brunoamuniz/applying-computer-vision-to-build-great-ui-ux-for-applications-3lb4”