Прибыль:
- Возможность создания надежного кода интерфейса для Jetpack Compose и SwiftUI в порядке назначения, компонента, четырех состояний (загрузка/пустой/ошибка/полный), системы дизайна и доступности.
- Способность создать интерфейс, открытый для всех пользователей, с самого начала определяя доступность, с правильной маркировкой, достаточным контрастом и соответствующим прикосновением.
- Возможность создавать согласованные, многоязычные и готовые к светлой/темной теме интерфейсы, считывая цвет и пространство из центральной темы.
Успех мобильного приложения во многом определяется его пользовательским интерфейсом (UI — экраны, которые пользователь видит и к которым прикасается) и пользовательским опытом (UX — насколько плавно и приятно им пользоваться). Пользователь не видит плохой код, но чувствует плохой интерфейс в первую секунду. ИИ играет две важные роли в разработке интерфейсов: с одной стороны, он генерирует дизайнерскую идею, поток и текст (написание UX); С другой стороны, он напрямую преобразует этот дизайн в рабочий код интерфейса. В этом модуле мы научимся создавать быстрые, доступные и согласованные интерфейсы с помощью ИИ, уделяя особое внимание современным инструментам декларативного интерфейса Jetpack Compose (Android) и SwiftUI (iOS). «Декларативный» означает, что вместо пошагового объяснения того, как рисовать экран, вы описываете «вот как должен выглядеть экран в данной ситуации»; Инструмент сделает все остальное.
От дизайна к коду: правильный порядок
Сказать ИИ «сделать красивый экран» расплывчато, потому что «красивость» невозможно измерить. Хорошая генерация интерфейса следует следующему порядку:
- Цель и содержание. Что делает экран, какую информацию он показывает, что будет делать пользователь?
- Список компонентов. Такие части, как заголовок, список, кнопка, поле формы.
- Ситуации. Загрузка, пустой (нет данных), ошибка, полный — четыре основных состояния экрана.
- Система дизайна. Цвет, типографика, правила интервалов; в целом соответствует Руководству по пользовательскому интерфейсу Материала 3 (Android) или iOS.
- Доступность. Ярлыки для чтения с экрана, достаточный контраст, размер сенсорной цели.
- Код. Сказав все это, генерация Composable или SwiftUI View.
Чаще всего пропускают третий шаг. Разработчики рассматривают только «полное» состояние; тогда как в реальном приложении пользователь чаще всего сталкивается с ситуациями «загрузки» и «ошибок». Вывод всех четырех состояний в ИИ — секрет надежного интерфейса.
Совет: Добавьте в конце приглашения фразу «генерировать загрузку, пустую, ошибку и полную отдельно». Это единственное предложение готовит ваш интерфейс к реальному миру и значительно снижает количество ошибок на этапе QA (тестирование качества).
Доступность не подлежит обсуждению
Доступность — возможность использовать приложение пользователями с нарушениями зрения, слуха или моторики — является одновременно этической ответственностью, а также ожиданием магазина и закона. При желании ИИ создает доступный код; Возвращает малоконтрастный интерфейс без тегов, если это нежелательно. Три практических правила: дайте каждому интерактивному элементу осмысленную метку для программы чтения с экрана (contentDescription/accessibilityLabel), адекватный цветовой контраст между текстом и фоном (соотношение не менее 4,5:1) и сенсорный экран размером не менее 48x48 dp/44x44 pt. Спросите ИИ об этих вещах явно.
Внимание: ИИ также может добавить длинный тег доступности к декоративному значку; Это перегружает пользователя программы чтения с экрана ненужной болтовней. Чисто декоративные элементы должны быть «скрыты от доступности» (разрешены пропускаться программой чтения с экрана). Просмотрите изготовленные этикетки: пусть говорит значимое, пусть декоративное молчит.
Последовательность: система дизайна и тема
Профессиональные приложения не используют случайные цвета и интервалы; следует системе дизайна (стандартный набор цветов, шрифтов, интервалов и компонентов). Если вы зададите AI значения вашей темы (основной цвет, дополнительный цвет, радиус угла, масштаб типографики), все экраны будут выглядеть одинаково. Если вы этого не сделаете, каждый экран будет использовать свой оттенок синего, и приложение будет выглядеть загроможденным. Самый эффективный способ — сначала попросить ИИ сгенерировать файл токенов темы/дизайна, а затем привязать все экраны к этой теме.
Тема
плохой подход
Сильный подход
Цвет
Вручную раскрашивать каждый экран
Центральная тема, экраны читаются из темы
ситуации
Только «полный» экран
Загрузка/пусто/ошибка/полные четыре состояния
доступность
Добавлено позже
Это определено в формуле с самого начала
текст
встроенный в код
Отдельный источник, поддержка нескольких языков
три мини-кейса
Случай 1 — Пустой ящик сохранен. Команда новостного приложения попросила ИИ распечатать отдельные состояния экрана. Благодаря экрану «статуса ожидания» («Новости еще не сохранены») 70% участников пользовательского тестирования не покидали приложение на пустом экране; В предыдущей версии пустой экран оставался белым, и пользователи думали, что он «сломан», и уходили. Небольшая копия увеличивает коэффициент удержания.
Случай 2 — Отказ от контраста. Одна команда подала заявку в App Store с экранами со светло-серым текстом — фирменным цветом. Apple выпустила предупреждение по соображениям доступности из-за низкой контрастности. Когда ИИ было сказано «увеличить контрастность текста и фона выше 4,5:1», цвета стали темнее, и проблема была решена. Если бы это было запрошено с самого начала, задержки не было бы.
Случай 3 — Шум от декоративной этикетки. Тестировщик с нарушениями зрения сообщил, что каждый значок орнамента («линия», «точка», «тень») читался вслух на экране, сгенерированном ИИ, что делало экран непригодным для использования. Работа программы чтения с экрана стала более гибкой, когда декоративные элементы были скрыты от доступности. Урок: доступность означает «правильные теги», а не «слишком много тегов».
Слабая подсказка / Сильная подсказка
Слабая подсказка: «Создать экран профиля».
Мощная подсказка: «Создать экран профиля пользователя для iOS/SwiftUI. Содержимое: аватар, имя, адрес электронной почты, кнопка «Редактировать профиль», список настроек. Статусы: загрузка (скелет), ошибка (кнопка повтора), полный. Дизайн: нематериальный, соответствующий iOS HIG; системные цвета, динамический тип. Доступность: метка доступности для каждого элемента, декоративные значки скрыты, сенсорная цель мин. 44 пт. Считывайте значения темы из отдельного файла, не встраивайте цветовой код в Screen. Сначала нарисуйте дерево компонентов, затем экспортируйте код».
Копируемые шаблоны
Шаблон создания экрана: «Создать [имя экрана] для [платформы/инструмента]. Содержание: [элементы]. Действия пользователя: [действия]. Создать четыре состояния отдельно: загрузка, пустое, ошибка, полное. Система дизайна: [Материал 3 / iOS HIG], чтение из жетонов темы. Доступность: метки, контраст >=4,5:1, стандарт сенсорной цели».
Шаблон системы темы/дизайна: «Создайте определение центральной темы для моего приложения ([Составить тему/структуру токена дизайна в SwiftUI]): — Основной цвет [шестнадцатеричный], вторичный [шестнадцатеричный», цвет ошибки, цвет поверхности — Типографический масштаб (заголовок, тело, описание) — Масштаб интервалов (4,8,16,24) — Стандарт радиуса углаДобавьте поддержку светлых и темных тем».
Шаблон аудита доступности: «Проверьте этот код экрана на доступность: 1) Есть ли какие-либо непомеченные интерактивные элементы? 2) Адекватны ли коэффициенты контрастности? 3) Достаточно ли велики сенсорные объекты? 4) Спрятаны ли декоративные элементы от программы чтения с экрана? Предложите исправления для каждой проблемы. [код]»
Шаблон дизайна для кода: «Я описываю следующий дизайн: [описание экрана или снимок экрана]. Переведите это в код [Compose/SwiftUI]. Сохраняйте расстояние и выравнивание в соответствии с дизайном, но добавьте все четыре состояния».
Распространенные ошибки
- Просто обдумываю ситуацию в целом. Большую часть времени реальный пользователь видит экран загрузки/ошибки.
- Встраивание цвета и пространства в код. Если тема не является центральной, теряется последовательность и поддержание становится затруднительным.
- О доступности оставим напоследок. Добавление его позже обходится дорого; Это бесплатно, если запрошено с самого начала.
- Перемаркировка. Чтение декоративных элементов также мешает работе программы чтения с экрана.
- Встраивание текста в код. Когда требуется многоязычная поддержка, необходимо вручную менять каждый экран; Держите тексты отдельно.
- Ожидаем точную копию со скриншота. AI-дизайн производит ок. Пиксельная точность устанавливается вручную.
В итоге
ИИ обладает мощными возможностями в создании интерфейсов, но требует руководства. Правильный порядок: назначение, компоненты, четыре состояния (загрузка/пусто/ошибка/заполнено), дизайн-система, доступность, затем код. Доступность не подлежит обсуждению и означает «правильный ярлык», а не «слишком много ярлыков». Для единообразия читайте цвет и интервал из центральной темы, не встраивайте их в код. Сильная воля определяет все это с самого начала; Таким образом, интерфейс готов к реальному миру, одобрению магазина и всем пользователям.
Задача приложения
Используя «Шаблон генерации экрана» для экрана настроек, запросите у AI код Compose или SwiftUI и запросите все четыре состояния. Затем проверьте тот же код с помощью «Шаблона проверки доступности». Найдите и исправьте хотя бы одно улучшение специальных возможностей (отсутствует ярлык, низкий контраст или маленький сенсорный объект) и отметьте, какой статус (загрузка/пусто/ошибка), по вашему мнению, будет появляться чаще всего при реальном использовании.
контрольный список
- [ ] Я ясно объяснил назначение и компоненты дисплея в подсказке
- [ ] У меня было четыре состояния (загрузка/пусто/ошибка/полное), сгенерированные отдельно.
- [ ] Цвет и пространство я сделал считываемыми из центральной темы, в код не встраивал.
- [ ] Мне с самого начала нужны были метки доступности и контрастность.
- [ ] Я проверил, что декоративные элементы скрыты от программы чтения с экрана.
- [ ] Я сохранил тексты отдельно, готовые для нескольких языков.