Kuidas AI abil disainida hea välimusega äppi

Et AI-lt saada hea välimusega äpp, lõpeta palumine „tee see ilusaks“ ja hakka andma talle seda, mida disainer tahaks: kaks-kolm meeldivat viidet, nimetatud disainisuund ning konkreetsed reeglid tüübi, värvi ja vahede kohta. Seejärel ehita üks ekraan, tee see õigeks ja lase AI-l sama süsteem kõikjal rakendada. Enamik „AI-välimust“ tuleb hägustest käskudest, mis annavad keskmisi vastuseid; täpne sisend annab täpse disaini.

Miks AI disainid näevad üldised välja

Küsi AI-lt „kaasaegset, puhast SaaS-i juhtpaneeli“ ning ta annab sulle statistilise keskmise kõigist juhtpaneelidest, mida ta on näinud: sama sans-serif-font, lilla-sinine gradient, pehmete varjudega ümarnurksed kaardid, ringides ikoonid ja keskel pealkiri „Sinu töövoog, lihtsustatud“. Ühegi üksiku valikuga pole midagi viga. Probleem on see, et ükski neist pole valitud sinu toote jaoks.

Hea disain koosneb enamasti otsustest. Sinu ülesanne on teha käputäis otsuseid, mis annavad äpile iseloomu, ja lasta AI-l teha sadu väikseid otsuseid järjekindlalt.

Samm 1: kogu viited enne käsu andmist

Kulu kakskümmend minutit, et koguda kaks kuni neli viidet: äppe või veebilehti, mille välimus sobib sinu tootega. Head allikad on tooted, mida su publik juba kasutab, disainigaleriid ja lähedaste valdkondade ettevõtete lehed.

Iga viite kohta kirjuta lihtsates sõnades üles, mis sulle meeldib:

• „Palju tühja ruumi, sisu kitsas veerus, väikesed hallid sildid suurte numbrite kohal.“
• „Tihedad tabelid õhukeste joontega, ilma kaardivarjudeta, tegevuste jaoks üks rõhuvärv.“
• „Suured serif-pealkirjad, soe kollakasvalge taust, pigem fotod kui illustratsioonid.“

Seejärel anna kirjeldused AI-le ja lisa ekraanipildid, kui su tööriist neid aktsepteerib. Võta eeskuju omadustelt, mitte tootelt: teise ettevõtte paigutuse, bränding või tekstide kopeerimine tervikuna tähendab nii õiguslikke kui ka usaldusega seotud riske.

Samm 2: vali disainisuund ja nimeta see

Suund on lühike kirjeldus tunnetusest. See annab AI-le filtri iga tehtava otsuse jaoks. Mõned, mis hästi toimivad:

Pane see esimesse käsku koos sellega, kellele äpp on mõeldud:

Ehita broneerimisäpp sõltumatule jooga-stuudiole. Disainisuund: rahulik ja minimalistlik, nagu trükitud stuudio ajakava. Soe kollakasvalge taust, peaaegu must tekst, üks vaikne salvei-roheline rõhuvärv nuppudele ja valitud olekutele. Pealkirjadele serif, kehatekstile puhas sans-serif. Avar ruum, ilma gradientideta, ilma varjudeta, ilma emotikonideta. Mobiili-esimene.

Samm 3: sea reeglid: tüüp, värv ja vahed

Need kolm kannavad enamikku visuaalsest kvaliteedist. Nende selgesõnaline määramine on suurim üksik parandus, mida saad teha.

Tüpograafia

• Üks või kaks kirjatüüpi. Pealkirjafont ja kehafont või üks perekond mitme paksusega.
• Tüübiskaala. Käputäis suurusi, mida kasutatakse järjekindlalt, näiteks 14, 16, 20, 28 ja 40 px, mitte seda, mida iga komponent juhuslikult valib.
• Loetav kehatekst. Veebis umbes 16 px, reavahe umbes 1,5 ja pikkade tekstide puhul umbes 60–75 tähemärki reas.
• Hierarhia kaalu ja suuruse kaudu, mitte värvi kaudu. Pealkirjad on paksemad ja suuremad; sekundaarne tekst väiksem ja pehmem hall.

Värv

• Enamasti neutraalsed toonid. Taustad, pinnad, piirjooned ja tekstihallid teevad suurema osa tööst.
• Üks rõhuvärv tegevuste ja valitud olekute jaoks. Teine ainult siis, kui sellel on selge ülesanne.
• Semantilised värvid edu, hoiatuse ja vea jaoks, ning kasutatud ainult nende jaoks.
• Kontrast. WCAG 2 nõuab tavalise kehateksti puhul kontrastisuhet vähemalt 4,5:1 ja suure teksti puhul 3:1. Hele hall tekst valgel taustal sageli ei läbi; palu AI-l kontrollida.
• Tumerežiim, kui seda tahad, aga kavandatud tahtlikult, mitte lihtsalt pööratud.

Vahed ja paigutus

• Vahede skaala, näiteks 4, 8, 12, 16, 24, 32, 48, 64 px. Kõik joondub sellele.
• Joondamine. Servad on joondatud; sisu asub ruudustikul või järjekindla maksimaalse laiusega veerus.
• Lähedus. Seotud asjad on lähestikku, mitteseotud kaugemal. See üks reegel parandab enamiku segaseid ekraane.
• Vähem konteinereid. Mitte kõik ei vaja kaarti. Piirjooned, eraldajad ja tühi ruum grupeerivad sisu sageli vaiksemalt.

Käsk, mis seab süsteemi üks kord üles:

Enne rohkemate ekraanide ehitamist seadista väike disainisüsteem ja kasuta seda kõikjal: tüübiskaala 14/16/20/28/40 px, kehateksti reavahe 1,5, vahede skaala 4/8/12/16/24/32/48 px, neutraalid lähedalt valgest kuni peaaegu mustani, üks rõhuvärv (#3F6B5A) ainult põhitegevuste jaoks ning punane ainult vigade jaoks. Nupud, sisendväljad ja kaardid peavad jagama ühte nurga raadiust. Kontrolli, et kogu tekst vastaks WCAG AA kontrastinõuetele.

Kui töötad koodi-teadlikus ehitajas, muutub see tavaliselt disainitokeniteks, CSS-muutujateks või Tailwindi teemaks, mis tähendab, et hilisemad muudatused toimuvad ühes kohas.

Samm 4: ehita esmalt üks ekraan korralikult

Ära genereeri kaksteist ekraani ja proovi siis neid kõiki parandada. Vali ekraan, mida kasutajad kõige rohkem näevad (sageli juhtpaneel või peamine loend), ja itereeri seni, kuni see on õige. Seejärel:

Kasuta juhtpaneeli kõigi teiste lehtede viitena: sama päis, vahed, tüübisuurused, nupustiilid ja tabelistiil. Uuenda Seadete ja Broneeringute lehti vastavaks.

Valmis viiteekraan edastab sinu maitse palju paremini kui ükski omadussõna.

Samm 5: itereeri konkreetsete ja väikeste päringutega

Tagasiside AI-le toimib nagu tagasiside noorele disainerile: konkreetne, üks ala korraga ja selge selle kohta, mida säilitada.

Lisa alati, mida säilitada („hoia kõik marsruudid, tekst ja funktsioonid samad“), et visuaalne ülevaatus ei eemaldaks vaikselt funktsionaalsust. Kontrolli iga muudatust telefonisuuruses ekraanil enne järgmise küsimist. Kuidas hea välimus väikestel ekraanidel näeb välja, selgitab juhend kuidas ehitada mobiilisõbralikku veebiäppi.

Samm 6: detailid, mis eristavad head üldisest

Kui struktuur on paigas, teevad need väikesed asjad äpi valmis tundma:

• Tühjad olekud. Mida uus kasutaja näeb ilma andmeteta: lühike selgitus ja üks selge tegevus, mitte tühi tabel.
• Laadimisolekud. Sisu kujuga skeletid, mitte kõikjal pöörlevad ringid.
• Veaolekud. Lihtsas keeles sõnumid selle välja kõrval, mis vea põhjustas.
• Hõljumise, fookuse ja vajutamise olekud igal interaktiivsel elemendil. Fookusrõngad on klaviatuurikasutajatele olulised.
• Päris sisu. Asenda „Lorem ipsum“ ja „John Doe“ realistliku teksti ja andmetega; kohatäitesisu varjab paigutusprobleeme.
• Ikoonid ühest komplektist, ühe või kahe suurusega, ühtlase joonepaksusega.
• Pildid, millel on eesmärk. Päris fotod sinu tootest, kohast või inimestest võidavad üldised pildipangad. Kus kasutad pildipanga- või genereeritud pilte, hoia ühtset stiili.
• Tekst. Lühikesed, konkreetsed sildid („Broneeri tund“, mitte „Esita“) annavad tajutavat kvaliteeti sama palju kui ükski värvivalik.

Levinud vead

• Kogu disaini ümbertegemine ühe käsuga. Suured ümberkirjutused toovad kaasa regressioone. Mine lehekülje kaupa.
• Liiga palju rõhuvärve. Kui kõik on esile tõstetud, pole midagi esile tõstetud.
• Kõige keskele joondamine. Keskele joondatud tekst on pealkirjast kaugemal raske skannida; joonda enamik sisu vasakule.
• Väike, madala kontrastiga tekst, mis näeb suurel monitoril elegantne välja ja on telefonis päikese käes loetamatu.
• Kaunistus hierarhia asemel. Gradiendid ja varjud ei paranda ekraani, kus kõige olulisem tegevus pole ilmne.
• Maandumislehe ignoreerimine. Paljude toodete jaoks on see esmamulje. Vaata kuidas ehitada konversiooni tootvat maandumislehte.

Disainivälistest promptimustritest loe kuidas kirjutada promte AI-äppide ehitajatele. Kui su töö ongi toode, näiteks disaini- või fotograafiaportfoolio, siis kuidas ehitada portfooliolehte käsitleb esitlust põhjalikumalt.

Disain Mythexis

Mythexis kirjeldad disaini vestluses, näed seda live-eelvaates ja kontrollid telefonisuuruses raami enne järgmist muudatust. Dokumentatsioonis on selleks lühikesed mustrid: disaini ja kasutajaliidese promptid selle kohta, mida muuta ja mida säilitada, ning kasutajaliidese uuendamine ühe lehe kaupa ilma funktsioone kaotamata. Mythex saab ka pildipankadest otsida või vestluses pildi genereerida, nagu kangelaspilt, taust või jagamispilt, ja selle äppi panna, kui palud. Kui mõni käik läheb valesti, pöördu tagasi enne seda tehtud kontrollpunkti. Kui eelistad alustada olemasolevast disainist ja seda kohandada, vaata malle.

Küsimused