Jak navrhnout pěknou aplikaci s AI

Chcete-li od AI dobře vypadající aplikaci, přestaňte ji žádat, ať ji „udělá hezkou“, a dejte jí to, co by chtěl designér: dvě nebo tři reference, které se vám líbí, pojmenovaný designový směr a konkrétní pravidla pro písmo, barvy a mezery. Pak postavte jednu obrazovku, upravte ji, dokud je správně, a nechte AI použít stejný systém všude jinde. Většina „AI vzhledu“ vzniká z vágních zadání, která dávají průměrné odpovědi; konkrétní vstup dává konkrétní design.

Proč AI designy vypadají genericky

Zeptejte se AI na „moderní, čistý SaaS dashboard“ a dostanete statistický průměr všech dashboardů, které kdy viděla: stejné bezpatkové písmo, fialovo-modrý přechod, zaoblené karty s měkkými stíny, ikony v kruzích a vycentrovanou hero sekci s heslem „Váš workflow, zjednodušeně“. Žádná z těchto voleb sama o sobě není špatná. Problém je, že žádná nebyla vybrána pro váš produkt.

Dobrý design jsou hlavně rozhodnutí. Vaším úkolem je udělat hrstku rozhodnutí, která dají aplikaci charakter, a nechat AI udělat tisíce drobných věcí konzistentně.

Krok 1: Sbírejte reference dřív, než začnete zadávat

Věnujte dvacet minut sběru dvou až čtyř referencí – aplikací nebo webů, jejichž vzhled se hodí k vašemu produktu. Dobrým zdrojem jsou produkty, které vaše publikum už používá, designové galerie a weby firem z příbuzných oborů.

U každé reference si jednoduše zapište, co se vám líbí:

• „Hodně bílého prostoru, obsah v úzkém sloupci, malé šedé popisky nad velkými čísly.“
• „Husté tabulky s tenkými oddělovači, bez stínů karet, jedna akcentní barva pro akce.“
• „Velké serifové nadpisy, teplé světle krémové pozadí, fotografie místo ilustrací.“

Tyto popisy pak předejte AI a pokud to váš nástroj umí, přiložte snímky obrazovek. Inspirujte se vlastnostmi, ne produktem: kopírovat cizí rozložení, značku nebo texty celé je jak právní, tak důvěryhodnostní riziko.

Krok 2: Zvolte designový směr a pojmenujte ho

Směr je krátký popis pocitu. Dává AI filtr pro každé rozhodnutí. Některé, které fungují dobře:

Uveďte ho v prvním zadání spolu s tím, pro koho aplikace je:

Vytvoř rezervační aplikaci pro nezávislé jógové studio. Designový směr: klidný a minimalistický, jako vytištěný rozvrh studia. Teplé světle krémové pozadí, téměř černý text, jeden tlumený šalvějově zelený akcent pro tlačítka a vybrané stavy. Serifové písmo pro nadpisy, čisté bezpatkové pro text. Velké mezery, žádné přechody, žádné stíny, žádné emotikony. Nejdřív mobil.

Krok 3: Nastavte pravidla – písmo, barvy a mezery

Tyto tři věci nesou většinu vizuální kvality. Být u nich explicitní je nejvyšší zlepšení, které můžete udělat.

Typografie

• Jedno nebo dvě písma. Písmo pro nadpisy a písmo pro text, nebo jedna rodina v několika tlouštkách.
• Typografická škála. Hrstka velikostí používaných důsledně – například 14, 16, 20, 28 a 40 px – místo toho, aby si každá komponenta vybrala svou.
• Čitelný text. Na webu zhruba 16 px, výška řádku kolem 1,5 a délka řádku asi 60–75 znaků u delšího textu.
• Hierarchie přes tloušťku a velikost, ne přes barvu. Nadpisy tučnější a větší; sekundární text menší a měkčí šedý.

Barvy

• Převážně neutrály. Pozadí, plochy, okraje a šedé tóny textu dělají většinu práce.
• Jedna akcentní barva pro akce a vybrané stavy. Druhou jen tehdy, když má jasnou úlohu.
• Sémantické barvy pro úspěch, varování a chybu – a používané jen k tomuto účelu.
• Kontrast. WCAG 2 vyžaduje poměr kontrastu alespoň 4,5:1 pro běžný text a 3:1 pro velký text. Světle šedý text na bílém často neprojde; nechte AI zkontrolovat.
• Tmavý režim, pokud ho chcete, navržený záměrně a ne jen invertovaný.

Mezery a rozložení

• Stupnice mezer, například 4, 8, 12, 16, 24, 32, 48, 64 px. Všechno se na ni napojuje.
• Zarovnání. Hrany na sebe navazují; obsah stojí na mřížce nebo v konzistentním sloupci s maximální šířkou.
• Blízkost. Související věci blízko u sebe, nesouvisející dál od sebe. Tohle jediné pravidlo opraví většinu přeplněných obrazovek.
• Méně kontejnerů. Ne všechno potřebuje kartu. Okraje, oddělovače a bílý prostor často seskupí obsah tišeji.

Zadání, které systém nastaví jednou:

Než začneš stavět další obrazovky, nastav malý designový systém a používej ho všude: typografická škála 14/16/20/28/40 px, výška řádku těla 1,5, stupnice mezer 4/8/12/16/24/32/48 px, neutrály od téměř bílé po téměř černou, jeden akcent (#3F6B5A) jen pro hlavní akce a červenou jen pro chyby. Tlačítka, vstupy a karty by měly sdílet jeden poloměr zaoblení. Zkontroluj, že veškerý text splňuje WCAG AA kontrast.

Pokud pracujete v nástroji, který rozumí kódu, toto se obvykle promítne do návrhových tokenů – CSS proměnných nebo motivu Tailwind – takže pozdější změny se dělají na jednom místě.

Krok 4: Nejdřív postavte jednu obrazovku pořádně

Negenerujte dvanáct obrazovek a pak se je pokoušejte opravit všechny. Vyberte obrazovku, kterou uživatelé vidí nejčastěji – často dashboard nebo hlavní seznam – a iterujte, dokud není správná. Pak:

Použij dashboard jako referenci pro všechny ostatní stránky: stejná hlavička, mezery, velikosti písma, styl tlačítek a styl tabulek. Uprav stránky Nastavení a Rezervace tak, aby odpovídaly.

Hotová referenční obrazovka sdělí váš vkus mnohem lépe než jakékoli přídavné jméno.

Krok 5: Iterujte konkrétními, malými požadavky

Zpětná vazba AI funguje jako zpětná vazba mladšímu designérovi: konkrétní, jedna oblast najednou a jasně řečeno, co zachovat.

Vždy přidejte, co zachovat – „všechny trasy, texty a funkce nech stejné“ – aby vizuální úprava tiše neodstranila funkce. A každou změnu zkontrolujte na obrazovce velikosti telefonu, než se zeptáte na další; o tom, jak vypadá dobrý web na malé obrazovce, se dočtete v návodu, jak vytvořit web přizpůsobený mobilu.

Krok 6: Detaily, které odliší dobré od generického

Až bude struktura správná, těchto pár drobností udělá z aplikace hotový dojem:

• Prázdné stavy. Co uvidí nový uživatel bez dat: krátké vysvětlení a jednu jasnou akci, ne prázdnou tabulku.
• Stavy načítání. Kostry tvarované jako obsah, ne všude točící se kolečka.
• Chybové stavy. Srozumitelné zprávy přímo u pole, které chybu způsobilo.
• Stavy při najetí, zaostření a stisku u každého interaktivního prvku – zvýraznění zaostření je důležité pro uživatele klávesnice.
• Skutečný obsah. Nahraďte „Lorem ipsum“ a „Jan Novák“ realistickými texty a daty; zástupný obsah skrývá problémy s rozložením.
• Ikony z jedné sady, ve stejné nebo dvou velikostech, se stejnou tloušťkou tahu.
• Obrázky s účelem. Skutečné fotografie vašeho produktu, prostoru nebo lidí porazí generické fotobanky. Pokud používáte fotobanky nebo generované obrázky, držte se jednotného stylu.
• Texty. Krátké, konkrétní popisky („Rezervovat lekci“, ne „Odeslat“) dělají pro vnímanou kvalitu stejně jako jakákoli barva.

Časté chyby

• Přepracovávat všechno v jediném zadání. Velké přepisy přinášejí regrese. Jděte stránku po stránce.
• Příliš mnoho akcentních barev. Když je zvýrazněno všechno, nic není zvýrazněno.
• Vycentrovat všechno. Vycentrovaný text je těžké číst mimo nadpis; většinu obsahu zarovnejte doleva.
• Drobný text s nízkým kontrastem, který na velkém monitoru vypadá elegantně, ale na telefonu na slunci je nečitelný.
• Dekorace místo hierarchie. Přechody a stíny nespraví obrazovku, na které není hned vidět nejdůležitější akce.
• Ignorovat úvodní stránku. U mnoha produktů je to první dojem; viz jak vytvořit úvodní stránku, která konvertuje.

Další vzory zadání mimo design najdete v jak psát zadání pro AI nástroje na tvorbu aplikací. Pokud je vaší prací samotný produkt – portfolio designu nebo fotografie – jak vytvořit portfolio web jde do hloubky u prezentace.

Design s Mythex

V Mythex popíšete design v chatu, uvidíte ho v živém náhledu a před další změnou zkontrolujete rámec o velikosti telefonu. Dokumentace obsahuje krátké vzory: zadání pro design a UI o tom, co měnit a co zachovat, a přepracování UI pro osvěžení jedné stránky najednou bez ztráty funkcí. Mythex dokáže v chatu také vyhledat fotografie z fotobank nebo vygenerovat obrázek – hero fotku, pozadí, sdílecí náhled – a na vyžádání ho vložit do aplikace. Pokud úprava dopadne špatně, vraťte se ke kontrolnímu bodu z doby před ní. Projděte si šablony, pokud chcete začít od hotového designu a upravit ho.

Otázky