Ako navrhnúť pekne vyzerajúcu aplikáciu s AI

Ak chcete od AI dobre vyzerajúcu aplikáciu, prestaňte žiadať, aby ju „spravila pekne“, a začnite jej dávať to, čo by chcel dizajnér: dve alebo tri referencie, ktoré sa vám páčia, pomenovaný dizajnový smer a konkrétne pravidlá pre písmo, farby a medzery. Potom postavte jednu obrazovku, doladte ju, kým je správna, a nechajte AI uplatniť rovnaký systém na všetky ostatné. Väčšina „AI vzhľadu“ pochádza z vágnych promptov, ktoré dávajú priemerné odpovede; konkrétny vstup dá konkrétny dizajn.

Prečo AI dizajny vyzerajú generický

Požiadajte AI o „moderný, čistý SaaS dashboard“ a dostanete štatistický priemer všetkých dashboardov, ktoré videla: rovnaké bezpätkové písmo, prechod fialová–modrá, zaoblené karty s jemnými tieňmi, ikony v kruhoch pripomínajúce emoji a vycentrovaný hero blok s textom „Váš workflow, zjednodušený“. Nie je zle na žiadnej jednotlivej voľbe. Problém je, že žiadna z nich nebola zvolená pre váš produkt.

Dobrý dizajn je väčšinou súbor rozhodnutí. Vašou úlohou je urobiť hŕstku rozhodnutí, ktoré dajú aplikácii charakter, a nechať AI urobiť tisíce drobných rozhodnutí konzistentne.

Krok 1: Zbierajte referencie skôr, než zadáte prompt

Strávte dvadsať minút zbieraním dvoch až štyroch referencií — aplikácií alebo webov, ktorých vzhľad sa hodí k vášmu produktu. Dobré zdroje sú produkty, ktoré vaše publikum už používa, galérie dizajnu a weby firiem z príbuzných oblastí.

Pre každú si zapíšte prostým jazykom, čo sa vám páči:

• „Veľa bieleho priestoru, obsah v úzkom stĺpci, malé sivé popisky nad veľkými číslami.“
• „Husté tabuľky s tenkými oddeľovačmi, bez tieňov kariet, jedna akcentová farba pre akcie.“
• „Veľké serifové nadpisy, teplé lomenebiele pozadie, fotografie namiesto ilustrácií.“

Potom tieto opisy odovzdajte AI a ak váš nástroj prijíma obrázky, pridajte snímky obrazovky. Čerpajte inšpiráciu z kvalít, nie z produktu: kopírovať rozloženie, branding alebo texty inej firmy celé je právne a dôveryhodnostné riziko.

Krok 2: Vyberte dizajnový smer a pomenujte ho

Smer je krátky opis pocitu. Dáva AI filter pre každé rozhodnutie. Niektoré, ktoré fungujú dobre:

Uveďte ho do prvého promptu spolu s tým, pre koho je aplikácia:

Vytvor rezervačnú aplikáciu pre nezávislé jogínske štúdio. Dizajnový smer: pokojný a minimalistický, ako vytlačený rozvrh štúdia. Teplé lomenebiele pozadie, takmer čierny text, jeden tlmený šalviovo-zelený akcent pre tlačidlá a vybrané stavy. Serif pre nadpisy, čisté bezpätkové písmo pre telo textu. Veľkorysé medzery, žiadne prechody, žiadne tiene, žiadne emoji. Mobile-first.

Krok 3: Nastavte pravidlá — písmo, farby a medzery

Tieto tri veci nesú väčšinu vizuálnej kvality. Byť v nich výslovný je najväčšie jediné zlepšenie, ktoré môžete urobiť.

Písmo

• Jedno alebo dve písma. Písmo pre nadpisy a písmo pre telo textu, alebo jedna rodina v niekoľkých hrúbkach.
• Škála písma. Hŕstka veľkostí používaných dôsledne — napríklad 14, 16, 20, 28 a 40 px — namiesto toho, čo si každý komponent zvolí sám.
• Čitateľný text. Okolo 16 px na webe, výška riadka približne 1,5 a dĺžka riadka okolo 60–75 znakov pri dlhom texte.
• Hierarchia cez hrúbku a veľkosť, nie farbu. Nadpisy tučnejšie a väčšie; sekundárny text menší a jemnejší sivý.

Farba

• Hlavne neutrály. Pozadia, povrchy, okraje a sivé texty robia väčšinu práce.
• Jedna akcentová farba pre akcie a vybrané stavy. Druhú len vtedy, ak má jasnú úlohu.
• Sémantické farby pre úspech, upozornenie a chybu — a používané len na tieto účely.
• Kontrast. WCAG 2 vyžaduje kontrastný pomer aspoň 4,5:1 pre bežný text a 3:1 pre veľký text. Svetlosivý text na bielom často nevyhovie; požiadajte AI, aby to skontrolovala.
• Tmavý režim, ak ho chcete, navrhnutý zámerne a nie len invertovaný.

Medzery a rozloženie

• Škála medzier ako 4, 8, 12, 16, 24, 32, 48, 64 px. Všetko sa zarovnáva na ňu.
• Zarovnanie. Okraje sa zhodujú; obsah je na mriežke alebo v konzistentnom stĺpci s maximálnou šírkou.
• Blízkosť. Súvisiace veci blízko seba, nesúvisiace ďalej. Toto jedno pravidlo opraví väčšinu preplnených obrazoviek.
• Menej kontajnerov. Nie všetko potrebuje kartu. Okraje, oddeľovače a biely priestor často zoskupujú obsah tichšie.

Prompt, ktorý systém nastaví raz:

Pred tvorbou ďalších obrazoviek nastav malý dizajnový systém a používaj ho všade: škála písma 14/16/20/28/40 px, výška riadka tela 1,5, škála medzier 4/8/12/16/24/32/48 px, neutrály od takmer bielej po takmer čiernu, jeden akcentový odtieň (#3F6B5A) len pre primárne akcie a červenú len pre chyby. Tlačidlá, polia a karty nech zdieľajú jeden polomer zaoblenia. Over, že všetky texty spĺňajú WCAG AA kontrast.

Ak pracujete v nástroji, ktorý pozná kód, toto sa zvyčajne premení na dizajnové tokeny — CSS premenné alebo Tailwind tému — čo znamená, že neskoršie zmeny sa dejú na jednom mieste.

Krok 4: Najprv postavte jednu obrazovku poriadne

Negenerujte dvanásť obrazoviek a potom sa ich všetky pokúšajte opraviť. Vyberte obrazovku, ktorú používatelia vidia najčastejšie — často dashboard alebo hlavný zoznam — a iterujte, kým nie je správna. Potom:

Použi dashboard ako referenciu pre všetky ostatné stránky: rovnaká hlavička, medzery, veľkosti písma, štýly tlačidiel a štýl tabuliek. Uprav stránky Nastavenia a Rezervácie tak, aby zodpovedali.

Hotová referenčná obrazovka vyjadrí váš vkus oveľa lepšie než akékoľvek prídavné meno.

Krok 5: Iterujte konkrétnymi, malými žiadosťami

Spätná väzba AI funguje ako spätná väzba mladšiemu dizajnérovi: konkrétna, jedna oblasť naraz a jasná v tom, čo zachovať.

Vždy pridajte, čo zachovať — „všetky trasy, texty a funkcie nechaj rovnaké“ — aby vizuálny prechod potichu neodstránil funkcie. Každú zmenu si pozrite na obrazovke veľkosti telefónu skôr, než požiadate o ďalšiu, a pozrite si ako postaviť webovú aplikáciu prispôsobenú mobilu, kde nájdete, ako vyzerá dobrý výsledok na malých obrazovkách.

Krok 6: Detaily, ktoré odlíšia dobré od generického

Keď je štruktúra správna, tieto drobnosti robia aplikáciu hotovou:

• Prázdne stavy. Čo vidí nový používateľ bez dát: krátke vysvetlenie a jedna jasná akcia, nie prázdna tabuľka.
• Stavy načítavania. Kostry zodpovedajúce tvaru obsahu, nie všade točiace sa kruhy.
• Chybové stavy. Zrozumiteľné správy pri poli, ktoré chybu spôsobilo.
• Stavy hover, focus a stlačenia pri každom interaktívnom prvku — kruhy zamerania sú dôležité pre používateľov klávesnice.
• Skutočný obsah. Nahraďte „Lorem ipsum“ a „Ján Novák“ realistickým textom a dátami; zástupný obsah skrýva problémy s rozložením.
• Ikony z jednej sady, v jednej alebo dvoch veľkostiach, s konzistentnou hrúbkou ťahu.
• Obrázky s účelom. Skutočné fotografie vášho produktu, miesta alebo ľudí porazia generické stock fotky. Pri stock alebo vygenerovaných obrázkoch dodržte jednotný štýl.
• Texty. Krátke, konkrétne popisky („Rezervovať hodinu“, nie „Odoslať“) robia pre vnímanú kvalitu rovnako veľa ako akákoľvek farba.

Časté chyby

• Prepracovanie všetkého v jednom prompte. Veľké prepisy prinášajú regresie. Choďte stránku po stránke.
• Priveľa akcentových farieb. Ak je všetko zvýraznené, nič nevyniká.
• Vycentrovanie všetkého. Vycentrovaný text sa dá ťažko čítať za nadpisom; väčšinu obsahu zarovnávajte doľava.
• Malý, nízkokontrastný text, ktorý vyzerá elegantne na veľkom monitore, ale na telefóne na slnku je nečitateľný.
• Dekorácia namiesto hierarchie. Prechody a tiene nevyriešia obrazovku, na ktorej nie je najdôležitejšia akcia zrejmá.
• Ignorovanie domovskej stránky. Pri mnohých produktoch je prvým dojmom; pozrite si ako postaviť pristávaciu stránku, ktorá konvertuje.

Ďalšie vzory promptov mimo dizajnu nájdete v ako písať prompty pre tvorcov aplikácií s AI. Ak je vašou prácou samotný produkt — dizajnérske alebo fotografické portfólio — ako postaviť portfóliový web ide do presentácie hlbšie.

Dizajn s Mythex

V Mythex opíšete dizajn v chate, vidíte ho v živom náhľade a pred ďalšou zmenou skontrolujete rámec veľkosti telefónu. Dokumentácia má krátke postupy na to: prompty pre dizajn a UI o tom, ako pomenovať, čo zmeniť a čo zachovať, a redizajn vášho UI na obnovu jednej stránky naraz bez straty funkcií. Mythex môže v chate tiež hľadať stock fotky alebo vygenerovať obrázok — hero obrázok, pozadie, zdieľací náhľad — a keď si to vyžiadate, vložiť ho do aplikácie. Ak sa niektorý prechod nevydarí, vráťte sa na checkpoint pred ním. Ak chcete radšej začať z existujúceho dizajnu a upraviť ho, prezrite si šablóny.

Otázky