Како да дизајнирате добро изгледечка апликација со AI

За да добиете добро изгледечка апликација од AI, престанете да барате „нека изгледа убаво“ и почнете да му давате она што би го сакал дизајнер: два или три референци што ви се допаѓаат, именувана дизајнерска насока и конкретни правила за типографија, боја и простор. Потоа изградете еден екран, поправете го додека не биде како што треба, и нека AI го примени истиот систем на сите други екрани. Повеќето „AI изглед“ доаѓа од нејасни барања што даваат просечни одговори; специфичниот влез дава специфичен дизајн.

Зошто AI дизајните изгледаат генерички

Побарајте од AI „модерна, чиста SaaS табла“ и ќе ви даде статистичката средина на секоја табла што ја видел: истиот сан-сериф фонт, градиент од виолетова до сина, заоблени картички со меки сенки, икони во кругови и централен наслов „Вашиот тек, поедноставен“. Ниту еден од тие избори не е сам по себе погрешен. Проблемот е што ниту еден не е избран за вашиот производ.

Добриот дизајн е главно одлуки. Вашата работа е да донесете неколку одлуки што ѝ даваат карактер на апликацијата, а AI нека ги направи илјадниците мали одлуки конзистентно.

Чекор 1: Собирајте референци пред да напишете барање

Потрошете дваесетина минути за да соберете две до четири референци — апликации или веб-страници чиј изглед одговара на вашиот производ. Добри извори се производите што вашата публика веќе ги користи, галериите за дизајн и веб-страниците на компании од сродни области.

За секоја напишете што ви се допаѓа со едноставни зборови:

• „Многу бел простор, содржината во тесна колона, мали сиви ознаки над големи броеви.“
• „Густи табели со тенки линии, без сенки кај картичките, една акцентна боја за дејствија.“
• „Големи серифни наслови, топла бело-крем позадина, фотографии наместо илустрации.“

Потоа пренесете ги опишувањата на AI, а приложете снимки од екран ако вашиот алат прифаќа слики. Инспирирајте се од квалитетите, не од производот: копирањето туѓ распоред, брендирање или текст во целост е и правен и кредибилитетен ризик.

Чекор 2: Изберете дизајнерска насока и именувајте ја

Насоката е кратак опис на чувството. Таа му дава на AI филтер за секоја одлука што ја донесува. Некои што добро функционираат:

Ставете ја во првото барање, заедно со тоа за кого е апликацијата:

Изработи апликација за резервации за независно студио за јога. Дизајнерска насока: смирена и минимална, како испечатен распоред на студиото. Топла бело-крем позадина, речиси црн текст, една приглушена зелено-маслинеста акцентна боја за копчиња и избрани состојби. Серифен фонт за наслови, чист сан-сериф за основниот текст. Широк простор, без градиенти, без сенки, без емоџи. Прво мобилен.

Чекор 3: Поставете правила — типографија, боја и простор

Овие три носат најголем дел од визуелниот квалитет. Експлицитноста за нив е единственото најголемо подобрување што можете да го направите.

Типографија

• Еден или два фонта. Фонт за наслови и фонт за основен текст или едно семејство во неколку тежини.
• Скала за текст. Неколку големини користени конзистентно — на пример 14, 16, 20, 28 и 40 px — наместо секоја компонента да избира своја.
• Читлив основен текст. Околу 16 px на веб, висина на редот околу 1,5 и должина на ред од околу 60–75 знаци за долг текст.
• Хиерархија преку тежина и големина, не преку боја. Наслови подебели и поголеми; секундарниот текст помал и помеку сив.

Боја

• Главно неутрални бои. Позадините, површините, рабовите и сивите за текст ја вршат најголемата работа.
• Една акцентна боја за дејствија и избрани состојби. Втора само ако има јасна улога.
• Семантички бои за успех, предупредување и грешка — и користени само за тоа.
• Контраст. WCAG 2 бара однос на контраст од најмалку 4,5:1 за нормален основен текст и 3:1 за голем текст. Светло сив текст на бело често не поминува; замолете AI да провери.
• Темен режим, ако сакате, дизајниран намерно, а не инвертиран.

Простор и распоред

• Скала за простор како 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: Итерирајте со конкретни, мали барања

Поврата кон AI функционира како повратна информација кон млад дизајнер: конкретна, по една област, и јасна за она што треба да се задржи.

Секогаш додавајте што да се задржи — „задржи ги сите рути, текст и функции исти“ — за визуелниот премин тивко да не отстрани функционалност. И проверете ја секоја промена на екран со големина на телефон пред да побарате следна; видете како да изградите мобилно-пријателска веб-апликација за тоа како изгледа добро на мали екрани.

Чекор 6: Деталите што ја одвојуваат добрата од генеричката апликација

Кога структурата е точна, овие мали работи ја прават апликацијата да изгледа завршена:

• Празни состојби. Што новиот корисник гледа без податоци: кратко објаснување и едно јасно дејство, а не празна табела.
• Состојби на вчитување. Скелети обликувани како содржината, не вртливи индикатори насекаде.
• Состојби на грешка. Пораки на едноставен јазик веднаш до полето што ја предизвикало.
• Состојби при задржување, фокус и притискање на секој интерактивен елемент — прстените за фокус се важни за корисниците на тастатура.
• Вистинска содржина. Заменете „Lorem ipsum“ и „Јован Петровски“ со реален текст и податоци; заменските содржини ги кријат проблемите со распоредот.
• Икони од една збирка, во една или две големини, со конзистентна дебелина на линијата.
• Слики со цел. Вистински фотографии од вашиот производ, место или луѓе се подобри од генеричка стоковна слика. Кога користите стокови или генерирани слики, одржувајте конзистентен стил.
• Текст. Кратки, конкретни ознаки („Резервирај час“, а не „Испрати“) придонесуваат за перципираниот квалитет колку и која било боја.

Чести грешки

• Реконструкција на сè во едно барање. Големите преработки воведуваат регресии. Одете страница по страница.
• Премногу акцентни бои. Ако сè е истакнато, ништо не е.
• Центрирање на сè. Центрираниот текст е тежок за читање освен за наслов; порамнете најголем дел од содржината лево.
• Мал, низок контраст на текст што изгледа елегантно на голем монитор, а е нечитлив на телефон на сонце.
• Декорација наместо хиерархија. Градиентите и сенките не можат да поправат екран каде најважното дејство не е очигледно.
• Занемарување на почетната страница. За многу производи тоа е прв впечаток; видете како да изградите страница што конвертира.

За повеќе шаблони за барања освен дизајн, прочитајте како да пишувате барања за AI градители на апликации. Ако вашата работа е самиот производ — портфолио за дизајн или фотографија — како да изградите портфолио веб-страница оди подлабоко во презентацијата.

Дизајнирање со Mythex

Во Mythex го опишувате дизајнот во разговорот, го гледате во живиот преглед и проверувате рамката со големина на телефон пред следната промена. Документацијата има кратки шаблони за ова: барања за дизајн и UI за именување што да се промени и што да се задржи, и преработка на вашиот UI за освежување една страница по една без губење функции. Mythex може и да пребарува стокови фотографии или да генерира слика во разговорот — главна слика, позадина, слика за споделување — и да ја стави во апликацијата кога ќе побарате. Ако некој премин не успее, вратете се на контролната точка пред него. Прегледајте ги шаблоните ако претпочитате да почнете од постоечки дизајн и да го приспособите.

Прашања