Як створити гарний на вигляд додаток за допомогою ШІ
Щоб отримати гарний на вигляд застосунок від ШІ, перестаньте просити його «зробити красиво» і дайте те, що хотів би отримати дизайнер: два-три референси, які вам подобаються, назву напряму дизайну та конкретні правила для шрифтів, кольорів і відступів. Потім створіть один екран, доведіть його до ладу і попросіть ШІ застосувати ту саму систему всюди. Більшість «ШІ-вигляду» з'являється через розпливчасті запити, які дають середні відповіді; конкретні вхідні дані дають конкретний дизайн.
Чому дизайн від ШІ виглядає типово
Попросіть ШІ «сучасну, чисту панель SaaS», і він видасть статистичну середину з усіх панелей, які бачив: той самий шрифт без засічок, градієнт від фіолетового до синього, заокруглені картки з м'якими тінями, іконки в колах, схожі на емодзі, і центрований головний блок із написом «Ваш робочий процес, спрощений». Жоден окремий вибір не поганий. Проблема в тому, що жоден із них не обрано для вашого продукту.
Хороший дизайн — це насамперед рішення. Ваше завдання — ухвалити кілька рішень, які надають застосунку характер, і дозволити ШІ послідовно зробити тисячі дрібних.
Крок 1: Зберіть референси до того, як писати запит
Витратьте двадцять хвилин на пошук двох-чотирьох референсів — застосунків або сайтів, стиль яких пасує вашому продукту. Добрі джерела: продукти, якими вже користується ваша аудиторія, галереї дизайну та сайти компаній із суміжних сфер.
Для кожного запишіть простими словами, що вам подобається:
- «Багато білого простору, контент у вузькій колонці, дрібні сірі підписи над великими цифрами».
- «Щільні таблиці з тонкими роздільниками, без тіней у картках, один акцентний колір для дій».
- «Великі заголовки з засічками, теплий білувато-сірий фон, фотографії замість ілюстрацій».
Потім передайте ці описи ШІ і прикріпіть скриншоти, якщо ваш інструмент приймає зображення. Беріть натхнення з якостей, а не з продукту: копіювати чужий макет, бренд або текст повністю — це і юридичний, і репутаційний ризик.
Крок 2: Оберіть напрям дизайну і назвіть його
Напрям — це короткий опис відчуття від застосунку. Він дає ШІ фільтр для кожного рішення. Добре працюють такі:
| Напрям | Типові рішення | Підходить для |
|---|---|---|
| Спокійний і мінімалістичний | Нейтральна палітра, великі відступи, один акцент, тонкі рамки | Продуктивність, фінанси, здоров'я |
| Редакційний | Заголовки з засічками, сильний контраст шрифтів, великі зображення, вузькі колонки тексту | Портфоліо, видання, преміум-послуги |
| Щільний і функціональний | Компактні рядки, дрібний шрифт, таблиці, зручність для клавіатури | Внутрішні інструменти, панелі, адмінки |
| Теплий і дружній | Заокруглені форми, м'які кольори, ілюстрації, більші зони натискання | Споживчі застосунки, спільноти, освіта |
| Яскравий і графічний | Високий контраст, великий шрифт, плоскі кольорові блоки | Події, запуски, креативні бренди |
Додайте його в перший запит разом з описом того, для кого застосунок:
Створи застосунок для бронювання занять у незалежній студії йоги. Напрям дизайну: спокійний і мінімалістичний, як друкований розклад студії. Теплий білувато-сірий фон, майже чорний текст, один приглушений шавлієво-зелений акцент для кнопок і вибраних станів. Засічковий шрифт для заголовків, чистий шрифт без засічок для основного тексту. Великі відступи, без градієнтів, без тіней, без емодзі. Спочатку мобільна версія.
Крок 3: Задайте правила — шрифти, кольори та відступи
Ці три речі визначають більшість візуальної якості. Найбільше покращення, яке ви можете зробити, — це явно їх описати.
Типографіка
- Один або два шрифти. Шрифт для заголовків і шрифт для основного тексту або одна родина в кількох накресленнях.
- Шкала розмірів. Невеликий набір розмірів, що використовуються послідовно, наприклад 14, 16, 20, 28 і 40 px, а не те, що вибере кожен компонент окремо.
- Зручний основний текст. Близько 16 px для вебу, висота рядка приблизно 1.5 і довжина рядка 60–75 символів для довгих текстів.
- Ієрархія через товщину та розмір, а не колір. Заголовки жирніші й більші, другорядний текст менший і сірий.
Колір
- Переважно нейтральні відтінки. Фони, поверхні, рамки і сірі відтінки тексту виконують більшість роботи.
- Один акцентний колір для дій і вибраних станів. Другий — лише якщо він має чітку функцію.
- Семантичні кольори для успіху, попередження й помилки — і лише для цих цілей.
- Контрастність. WCAG 2 вимагає співвідношення контрасту щонайменше 4.5:1 для звичайного тексту та 3:1 для великого. Світло-сірий текст на білому часто не проходить перевірку; попросіть ШІ перевірити.
- Темна тема, якщо вона вам потрібна, має бути продумана, а не просто інвертована.
Відступи та макет
- Шкала відступів, наприклад 4, 8, 12, 16, 24, 32, 48, 64 px. Усе прив'язується до неї.
- Вирівнювання. Краї збігаються; контент стоїть на сітці або в узгодженій колонці з максимальною шириною.
- Близькість. Пов'язані речі стоять поруч, непов'язані — далі. Саме це правило виправляє більшість захаращених екранів.
- Менше контейнерів. Не все потребує картки. Рамки, роздільники й білий простір часто тихіше групують контент.
Запит, який налаштовує систему один раз:
Перш ніж створювати інші екрани, налаштуй невелику дизайн-систему і використовуй її всюди: шкала шрифтів 14/16/20/28/40 px, висота рядка основного тексту 1.5, шкала відступів 4/8/12/16/24/32/48 px, нейтральні відтінки від майже білого до майже чорного, один акцентний колір (#3F6B5A) лише для основних дій, а червоний — лише для помилок. Кнопки, поля введення й картки мають мати однаковий радіус заокруглення. Перевір, щоб увесь текст відповідав вимогам WCAG AA за контрастністю.
Якщо ви працюєте в конструкторі, який розуміє код, це зазвичай перетворюється на дизайн-токени — CSS-змінні або тему Tailwind, — а отже, подальші зміни вносяться в одному місці.
Крок 4: Спочатку зробіть один екран як слід
Не генеруйте дванадцять екранів, а потім намагайтеся виправити їх усі. Оберіть екран, який користувачі бачать найчастіше, — часто це панель або головний список — і доводьте його до ладу. Потім:
Використовуй панель як еталон для всіх інших сторінок: той самий заголовок, відступи, розміри шрифтів, стилі кнопок і стиль таблиць. Онови сторінки «Налаштування» і «Бронювання», щоб вони відповідали їй.
Готовий еталонний екран передає ваш смак набагато краще, ніж будь-які прикметники.
Крок 5: Ітеруйте конкретними, невеликими запитами
Зворотний зв'язок для ШІ працює як зворотний зв'язок для молодшого дизайнера: конкретний, одна ділянка за раз і чіткий щодо того, що залишити.
| Розпливчасто | Конкретно |
|---|---|
| «Зроби красивіше». | «Збільш відстань між секціями до 64 px, зроби заголовок сторінки 40 px і пом'якши другорядний текст до середньо-сірого». |
| «Виглядає захаращено». | «Прибери рамки карток у рядку статистики, вирівняй цифри по лівому краю і постав підписи над ними дрібними великими літерами». |
| «Зроби, щоб це виблискувало». | «Використовуй акцентний колір лише для основної кнопки. Другорядні кнопки зроби контурними». |
| «Покращ мобільний вигляд». | «На ширині телефона складай фільтри в панель, яка відкривається кнопкою Filters, і перетвори рядки таблиці на картки». |
Завжди додавайте, що залишити: «зберігай усі маршрути, текст і функції без змін», — щоб візуальний прохід тихцем не прибрав функціональність. Перевіряйте кожну зміну на екрані розміром з телефон, перш ніж просити наступну; про те, як виглядає добре на малих екранах, див. як створити мобільний вебзастосунок.
Крок 6: Деталі, які відрізняють хороший дизайн від типового
Коли структура вже правильна, ці дрібниці роблять застосунок завершеним:
- Порожні стани. Що бачить новий користувач без даних: коротке пояснення і одну чітку дію, а не порожню таблицю.
- Стани завантаження. Скелети, що повторюють форму контенту, а не скрізь спінери.
- Стани помилок. Зрозумілі повідомлення поруч із полем, яке їх спричинило.
- Стани наведення, фокусу й натискання для кожного інтерактивного елемента. Рамки фокусу важливі для користувачів клавіатури.
- Реальний контент. Замініть «Lorem ipsum» і «Іван Петренко» на реалістичні тексти та дані; заглушки приховують проблеми з макетом.
- Іконки з одного набору, в одному-двох розмірах, з однаковою товщиною ліній.
- Зображення з призначенням. Справжні фото вашого продукту, місця чи людей краще за типові стокові. Якщо ви використовуєте стокові або згенеровані зображення, тримайте однаковий стиль.
- Текст. Короткі, конкретні підписи («Записатися на заняття», а не «Надіслати») впливають на сприйняття якості так само, як будь-який колір.
Типові помилки
- Перероблення всього одним запитом. Великі переписування вносять регресії. Працюйте сторінка за сторінкою.
- Забагато акцентних кольорів. Якщо виділено все, не виділено нічого.
- Центрування всього. Центрований текст важко сканувати, окрім заголовків; більшість контенту краще вирівнювати по лівому краю.
- Дрібний текст з низьким контрастом, який виглядає елегантно на великому монітору й нечитабельно на телефоні на сонці.
- Декор замість ієрархії. Градієнти й тіні не виправлять екран, де найважливіша дія непомітна.
- Ігнорування головної сторінки. Для багатьох продуктів це перше враження; див. як створити лендинг, що конвертує.
Більше шаблонів запитів поза дизайном дивіться в як писати запити для конструкторів застосунків на основі ШІ. Якщо ваша робота — це сам продукт, наприклад портфоліо дизайнера чи фотографа, як створити сайт-портфоліо детальніше пояснює подання.
Дизайн у Mythex
У Mythex ви описуєте дизайн у чаті, бачите його в живому превью та перевіряєте кадр розміром з телефон перед наступною зміною. У документації є короткі шаблони для цього: запити щодо дизайну та інтерфейсу про те, що змінювати і що зберігати, та редизайн інтерфейсу для оновлення однієї сторінки за раз без втрати функцій. Mythex також може знайти стокові фото або згенерувати зображення в чаті — головне зображення, фон, картинку для поширення — і розмістити його в застосунку на ваш запит. Якщо прохід пішов не так, поверніться до контрольної точки, створеної перед ним. Перегляньте шаблони, якщо хочете почати з готового дизайну і підлаштувати його.
Запитання
Чому дизайн, створений ШІ, часто виглядає однаково?
Тому що розпливчастий запит отримує найсередніший результат: ті самі шрифти, градієнти, заокруглені картки і центрований головний блок. Дайте ШІ референси, назвіть напрям дизайну та конкретні правила для шрифтів, кольорів і відступів, і результат перестане бути типовим.
Чи можна дати ШІ скриншот, щоб він скопіював стиль?
Багато конструкторів на основі ШІ приймають зображення як вкладення, і скриншот — один із найзрозуміліших способів показати стиль. Опишіть, що вам подобається: відступи, шрифти, використання кольору, а не просіть скопіювати чийсь чужий продукт.
Чи потрібен дизайнер, якщо я створюю застосунок за допомогою ШІ?
Для першої версії — ні. Дизайнер найбільше корисний, коли є бренд, який треба захистити, або складний продукт, де рішення щодо макета впливають на зручність. До того часу чіткі референси та невеликі ітерації дадуть охайний і зручний інтерфейс.
Що робить застосунок професійним на вигляд?
Радше послідовність, ніж декор: одна шкала шрифтів, невелика палітра кольорів, яку використовують із метою, відступи за фіксованою шкалою, вирівняні краї та чітка ієрархія, щоб найважливіше на кожному екрані було очевидним.