Революция ИИ в дизайн-системах

Исследование того, как ИИ подбирается к созданию, обслуживанию и использованию систем дизайна и готов их революционизировать.

Системы проектирования – фундамент любого приложения или веб-сайта. Они ускоряют процесс проектирования и помогают дизайнерам и разработчикам быстрее решать свои задачи, сообщает UX Planet.

Искусственный интеллект много чего интересного может предложить дизайн-системам в процессе проектирования. Уже сегодня дизайнеры используют ИИ для генерации идей, улучшения UX и написания безупречных объяснений при передаче дизайна разработчикам.

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

Ну и как это будет выглядеть? Вот лишь несколько идей, которым явно суждено стать реальностью.

Создание машины с ИИ для генерации экранов

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

Команде разработчиков придется обучать систему искусственного интеллекта. Это означает, что дизайнеры системы проектирования не просто создают набор для проектирования пользовательского интерфейса Figma, имена маркеров, документацию по системе проектирования и обучают команду.

Они также будут натаскивать машину создавать экраны на основе типографики, цвета, компонентов и рекомендаций системы дизайна.

Вот пример теста, который мы провели с помощью ChatGPT. Мы создали простую форму с элементами ввода и кнопкой отправки. И попросили ChatGPT следовать рекомендациям Google Material Design для добавления стилей.

Благодаря популярности Google Material Design чат бот Chat GPT знает его рекомендации, поэтому он добавил в форму стили Google Material Design.

Ещё один пример из инструмента генеративного ИИ tldraw, где мы набросали простой круг идей, который увеличивается или уменьшается при перемещении ползунка.

Представьте, что у вас появился ИИ, который обучается специально под нужды вашего продукта. Круто, правда?

Сила комплектов пользовательского интерфейса Figma для недизайнеров

Картинка может стоить тысячи слов, но прототип стоит тысячи фотографий.

Когда менеджер по продукту приносит нам идею без четкого объяснения и просит создать функцию на основе своего туманного объяснения, мы задумываемся:

«А почему бы не показать несколько визуальных образов и тем самым лучше объяснить?».

Теперь это больше не пляшет. Руководители, разработчики и даже владельцы малого бизнеса будут генерировать экран прямо из запроса, включая все стили продукта, чтобы сделать идею более понятной для команды.

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

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

Упрощение управления маркерами дизайна

Организация маркеров дизайна в системе дизайна – невыносимо сложная и трудоемкая задача; необходимо принимать множество решений, а сами маркеры должны иметь четкую логику и архитектуру, например, организовывать названия маркеров так, чтобы их легко было понять. Здесь ИИ поможет двумя способами.

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

Например, система будет предупреждать команду разработчиков, если пользователь сильно концентрируется на экране или не понимает, о чем идет речь, и предлагать улучшения.

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

Попрощайтесь с пропастью между разработкой и реализацией

После завершения разработки мы обычно переключаемся на что-то другое, а не пересматриваю дизайн для проверки его качества, но, по идее, это делать всё-таки надо, чтобы добиться супер качества продукта.

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

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

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

Лёгкое создание компонентов, дизайн в один клик, код в один клик

Мы видим, как можно добавлять новые компоненты в систему дизайна в два клика: один для проектирования и один для создания кода.

Например, представьте, что вам нужно добавить в систему карточку. Тогда в один клик команда системы проектирования попросит чат сгенерировать несколько вариантов; команда рассмотрит и выберет наиболее точные, а затем в один клик создаст код со всеми элементами.

Оптимизация воздействия и минимизация рисков с помощью обновлений системы дизайна

На Schema 2022 (ежегодная конференция Figma по системам дизайна) была презентациякоманды дизайнеров Zalando, в которой они объясняли, что им нужно адаптировать дизайн карты из-за предстоящего регулирования.

Новое правило ЕС изменило порядок отображения цен и скидок для покупателей. Оно требует показывать самую низкую цену за последние 30 суток для любой скидки. Это призвано помешать продавцам показывать высокие цены и притворяться, что они предоставляют ощутимые скидки.

Закон предусматривал жёсткие сроки, и все это нужно сделать быстро. Необходимо учесть два важнейших фактора: во-первых, изменения в карте;а во-вторых, не повлияют ли эти изменения негативно на продажи.

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

Если сделать ещё один шаг вперёд, то можно выбрать 2-3 варианта карточек и провести тест, чтобы увидеть, какой дизайн не повлияет на бизнес и UX-дизайн.

Кстати, советуемвам глянуть презентацию Zalando. Интересно посмотреть, как они в реале внесли эти изменения.

Системы дизайна чат бота для более эффективного принятия решений

Команда разработчиков системы дизайна должна включить чат бот в машину искусственного интеллекта, чтобы задавать вопросы и получать информацию.

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

Ответы будут основываться на данных из аналитики продукта и руководстве по системе проектирования. Следует понимать, что алгоритм искусственного интеллекта будет вычислять все данные, потребности и историю пользователя.

Затем он покажет, что предпочитают пользователи – поток А или поток Б. При желании можно говорить о машине предсказаний, которая поможет дизайнерам принимать решения.

Автоматизация проверки согласованности дизайна на разных платформах

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

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

Стоит отметить, что каждая платформа имеет свои особенности, и не все должно быть одинаковым на 100%. Однако в случаях, когда мы хотим быть уверены в высоком уровне согласованности, ее проверка будет более практичным подходом.

Переход от создания к выбору

В результате этих изменений дизайнеры смогут разгрузиться и уделять гораздо больше внимания потребностям пользователей и предприятий.

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

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

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

Подведениеитогов

В этой статье изложены 9 идей о том, как ИИ изменит нашу работу над системами проектирования. Мы показали, как он сделает пользователей эффективнее и быстрее.

Вот их краткий пересказ.

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

***

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