Hogyan tervezzen jól kinéző appot AI-val

Ahhoz, hogy az AI jó megjelenésű appot adjon, ne kérje, hogy „szépen nézzen ki”, hanem adja meg azt, amit egy designer is szeretne: két-három referenciát, amely tetszik, egy megnevezett tervezési irányt, valamint konkrét szabályokat a tipográfiára, a színekre és a térközökre. Aztán építsen meg egy képernyőt, javítsa, amíg rendben nem lesz, és kérje meg az AI-t, hogy ugyanezt a rendszert alkalmazza a többi képernyőn is. Az „AI-look” nagy része homályos promptokból származik, amelyek átlagos válaszokat adnak; a konkrét bemenet konkrét designt eredményez.

Miért néznek ki általánosnak az AI-tervezések

Ha az AI-tól egy „modern, tiszta SaaS-irányítópultot” kér, az minden irányítópult statisztikai középértékét adja: ugyanazt a sans-serif betűtípust, egy lila-kék átmenetet, lágy árnyékú lekerekített kártyákat, körökbe zárt, emojiszerű ikonokat és egy középre helyezett hőst, amely azt mondja: „Az Ön munkafolyamata egyszerűsítve”. Egyetlen választással sincs baj. A probléma az, hogy egyiket sem a termékéhez választották.

A jó design nagyrészt döntések sorozata. Az Ön feladata, hogy meghozza azt a néhány döntést, amely karaktert ad az appnak, az apró, többi döntést pedig hagyja az AI-ra, hogy következetesen meghozza.

1. lépés: Gyűjtsön referenciákat, mielőtt promptol

Szánjon húsz percet arra, hogy két-négy referenciát gyűjtsön: appokat vagy weboldalakat, amelyek megjelenése illik a termékéhez. Jó források a termékek, amelyeket a közönsége már használ, a designgalériák és a szomszédos területeken működő cégek weboldalai.

Mindegyiknél írja le egyszerű szavakkal, mi tetszik benne:

• „Sok fehér tér, a tartalom keskeny oszlopban, kis szürke címkék nagy számok fölött.”
• „Sűrű táblázatok vékony elválasztókkal, nincs kártyaárnyék, egy kiemelőszín a műveletekhez.”
• „Nagy serif címsorok, meleg, törtfehér háttér, fotók illusztráció helyett.”

Ezeket a leírásokat adjaz át az AI-nak, és ha az eszköz fogad képeket, csatoljon képernyőképeket. Az inspirációt a minőségekből merítse, ne a termékből: egy másik cég elrendezésének, márkajelzésének vagy szövegének teljes átvétele jogi és hitelességi kockázat.

2. lépés: Válasszon tervezési irányt, és nevezze meg

Az irány a megjelenés rövid leírása. Minden döntéshez szűrőt ad az AI-nak. Néhány, amely jól működik:

Ezt tegye bele az első promptba, a célközönséggel együtt:

Építsen foglalási appot egy független jógastúdiónak. Tervezési irány: nyugodt és minimális, mint egy nyomtatott stúdiós órarend. Meleg, törtfehér háttér, majdnem fekete szöveg, egy visszafogott zöldes-szürke kiemelőszín a gombokhoz és a kiválasztott állapotokhoz. Serif a címsorokhoz, tiszta sans-serif a szövegtörzshez. Bő térköz, nincs átmenet, nincs árnyék, nincs emoji. Mobil elsőként.

3. lépés: Állítson be szabályokat — tipográfia, szín és térköz

Ezek a három elem hordozza a vizuális minőség nagy részét. Ha ezeket kifejezetten megadja, az a legnagyobb javítás, amit tehet.

Tipográfia

• Egy vagy két betűtípus. Egy címsor-betűtípus és egy szövegtörzs-betűtípus, vagy egy család több vastagsággal.
• Típusskála. Néhány méret, következetesen használva — például 14, 16, 20, 28 és 40 px —, ahelyett hogy minden komponens azt választaná, ami éppen eszébe jut.
• Olvasható szövegtörzs. Weben nagyjából 16 px, kb. 1,5-ös sormagasság, és hosszabb szövegnél kb. 60–75 karakteres sorhossz.
• Hierarchia vastagsággal és mérettel, nem színnel. A címsorok vastagabbak és nagyobbak; a másodlagos szöveg kisebb és lágyabb szürke.

Szín

• Túlnyomórészt semleges színek. A háttér, a felületek, a keretek és a szürke szövegek végzik a munka nagy részét.
• Egy kiemelőszín a műveletekhez és a kiválasztott állapotokhoz. Második csak akkor, ha egyértelmű feladata van.
• Szemantikus színek a sikerhez, a figyelmeztetéshez és a hibához — és csak erre a célra.
• Kontraszt. A WCAG 2 legalább 4,5:1 kontrasztarányt kér a normál szövegtörzsnél és 3:1-et a nagy szövegnél. A világosszürke szöveg fehéren gyakran elbukik; kérje meg az AI-t, hogy ellenőrizze.
• Sötét mód, ha szeretné, de szándékosan megtervezve, nem egyszerűen megfordítva.

Térköz és elrendezés

• Térközskála, például 4, 8, 12, 16, 24, 32, 48, 64 px. Minden erre illeszkedik.
• Igazítás. Az élek egy vonalban vannak; a tartalom rácson vagy következetes maximális szélességű oszlopban ül.
• Közelség. Az összetartozók egymás közelében, a nem összetartozók távolabb. Ez az egy szabály megoldja a legtöbb zsúfolt képernyőt.
• Kevesebb konténer. Nem minden igényel kártyát. A keretek, elválasztók és a fehér tér gyakran halkabban csoportosítják a tartalmat.

Egy prompt, amely egyszer felállítja a rendszert:

Mielőtt több képernyőt építene, állítson fel egy kis tervezési rendszert, és használja mindenhol: típusskála 14/16/20/28/40 px, szövegtörzs sormagasság 1,5, térközskála 4/8/12/16/24/32/48 px, semleges színek a majdnem fehértől a majdnem feketéig, egy kiemelőszín (#3F6B5A) kizárólag az elsődleges műveletekhez, a piros csak hibákhoz. A gombok, beviteli mezők és kártyák osztozzanak egy sarokkerekítésen. Ellenőrizze, hogy minden szöveg megfelel a WCAG AA kontrasztnak.

Kódközpontú építőben ez jellemzően design tokenekké válik — CSS-változókká vagy Tailwind-témává —, így a későbbi módosítások egy helyen történnek.

4. lépés: Építsen meg egy képernyőt rendesen először

Ne generáljon tizenkét képernyőt, hogy aztán mindet javítani próbálja. Válassza ki azt a képernyőt, amelyet a felhasználók a legtöbbet látnak — gyakran az irányítópultot vagy a fő listát —, és finomítsa, amíg rendben nem lesz. Aztán:

Használja az irányítópultot referenciaként az összes többi oldalhoz: ugyanaz a fejléc, térköz, típusméret, gombstílus és táblázatstílus. Frissítse a Beállítások és a Foglalások oldalt, hogy illeszkedjenek hozzá.

Egy kész referenciaképernyő sokkal jobban közvetíti az ízlését, mint bármilyen melléknév.

5. lépés: Iteráljon konkrét, kis kérésekkel

Az AI-nak adott visszajelzés olyan, mint egy junior designernek adott visszajelzés: konkrét, egyszerre egy terület, és egyértelmű arról, mit kell megtartani.

Mindig írja hozzá, mit kell megtartani — „minden útvonalat, szöveget és funkciót hagyjon változatlanul” —, hogy egy vizuális kör ne távolítson el csendben funkciókat. A következő kérés előtt pedig nézze meg minden változtatást telefonméretű képernyőn; hogy mi a jó a kis képernyőkön, lásd: hogyan építsen mobilbarát webes appot.

6. lépés: A részletek, amelyek megkülönböztetik a jót az általánostól

Amikor a szerkezet már rendben van, ezek az apró dolgok teszik az appot késznek érződővé:

• Üres állapotok. Mit lát egy új felhasználó adat nélkül: rövid magyarázat és egy egyértelmű művelet, nem egy üres táblázat.
• Betöltési állapotok. A tartalom alakjához igazodó vázlatok, nem mindenhol forgó körök.
• Hibaállapotok. Közérthető üzenetek a mező mellett, amely a hibát okozta.
• Hover-, fókusz- és lenyomott állapotok minden interaktív elemen — a fókuszgyűrű fontos a billentyűzetet használóknak.
• Valódi tartalom. A „Lorem ipsum” és a „John Doe” helyett valósághű szöveg és adat; a helyőrző tartalom elrejti az elrendezési problémákat.
• Egy készletből származó ikonok, egy-két méretben, egységes vonalvastagsággal.
• Képek céllal. A valódi fotók a termékéről, helyéről vagy embereiről jobbak az általános stock képeknél. Ahol stock vagy generált képet használ, tartson egységes stílust.
• Szöveg. A rövid, konkrét címkék („Óra foglalása”, nem „Küldés”) ugyanúgy növelik az érzékelt minőséget, mint bármelyik szín.

Gyakori hibák

• Mindent átdolgozni egyetlen prompttal. A nagy átírások regressziókat okoznak. Oldalanként haladjon.
• Túl sok kiemelőszín. Ha minden ki van emelve, semmi sincs.
• Minden középre igazítása. A középre igazított szöveget a címsoron kívül nehéz áttekinteni; a legtöbb tartalmat balra igazítsa.
• Apró, alacsony kontrasztú szöveg, amely nagy monitoron elegánsnak tűnik, telefonon napfényben pedig olvashatatlan.
• Díszítés a hierarchia helyett. Átmenetek és árnyékok nem javítanak egy képernyőn, ahol a legfontosabb művelet nem nyilvánvaló.
• A főoldal figyelmen kívül hagyása. Sok terméknél ez az első benyomás; lásd: hogyan építsen konverziós céloldalt.

A designon túli prompt-mintákért olvassa el: hogyan írjon promptot AI-appépítőkhöz. Ha a munkája maga a termék — designer vagy fotós portfólió —, a hogyan építsen portfóliós weboldalt útmutató részletesebben foglalkozik a bemutatással.

Designolás a Mythexben

A Mythexben a designt a chatben írja le, a működő előnézetben látja, és a következő módosítás előtt a telefonméretű keretben ellenőrzi. A dokumentációban rövid minták találhatók erre: design- és UI-promptok arról, mit kell módosítani és mit megtartani, valamint a UI átdolgozása, egy-egy oldal frissítéséhez a funkciók elvesztése nélkül. A Mythex a chatben stock fotókat is kereshet, vagy képet generálhat — főképet, hátteret, megosztási képet — és kérésére az appba illesztheti. Ha egy kör rosszul sül el, térjen vissza az előtte lévő mentési pontra. Ha előre szeretne építeni egy meglévő designból, böngéssze a sablonokat.

Kérdések