Генеративные ограждения пользовательского интерфейса: проектирование по замыслу, не нарушая вашу систему дизайна

От фиксированных макетов к проектированию по назначению

В фиксированном макете дизайнеры заранее определяют каждый экран. При использовании генеративного пользовательского интерфейса модель ИИ решает, какой интерфейс отображать для конкретного запроса. Google описывает генеративный пользовательский интерфейс как модель, генерирующую не только контент, но и весь опыт, и теперь проводит эксперименты, основанные на этом, в приложении Gemini и в режиме искусственного интеллекта в поиске Google. В инструментах разработчика Vercel AI SDK описывает более простую версию: модель вызывает инструмент, а результат вызова этого инструмента отображается как компонент React.

Что изменится в UX

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

Guardrail 1: утвержденный каталог компонентов

Самый безопасный шаблон — позволить модели выбирать и заполнять компоненты, а не изобретать их. A2UI, открытый протокол, созданный Google, работает следующим образом: агенты отправляют декларативные описания компонентов, а клиент отображает их с помощью собственных виджетов, не запуская произвольный код агента. Ваш каталог может быть небольшим: таблицы, карточки, диаграммы, формы, списки, каждый из которых создан и протестирован вашей командой.

Guardrail 2: токены вместо необработанных значений

Дайте модели семантические токены, такие как color.text.primary или space.4, и отклоните выходные данные, в которых используются необработанные шестнадцатеричные значения или произвольные размеры шрифта. Это сохраняет контрастность, типографику и интервалы внутри системы, а такие темы, как темный режим или высокая контрастность, продолжают работать автоматически.

Guardrail 3: проверка перед рендерингом

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

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