Si të dizajnoni një aplikacion të bukur me AI

Për të marrë një aplikacion të bukur nga AI, mos i kërkoni më "ta bësh të duket bukur". Jepini atë që do të donte një dizajner: dy ose tre referenca që ju pëlqejnë, një drejtim dizajni me emër dhe rregulla konkrete për shkrimin, ngjyrat dhe hapësirat. Pastaj ndërtoni një ekran, rregulloni derisa të jetë i saktë, dhe kërkoni nga AI-ja të zbatojë të njëjtin sistem kudo tjetër. Pjesa më e madhe e "pamjes së AI" vjen nga kërkesa të paqarta që japin përgjigje mesatare; hyrja specifike prodhon dizajn specifik.

Pse dizajnet me AI duken gjenerike

Kërkoni nga një AI "një panel modern dhe i pastër SaaS" dhe do t'ju japë mesataren statistikore të çdo paneli që ka parë: të njëjtin font pa thurrje, një gradient vjollcë-blu, karta të rrumbullakosura me hije të butë, ikona si emoji brenda rrathësh, dhe një hero në qendër që thotë "Puna juaj, e thjeshtuar". Asnjë zgjedhje e veçantë nuk është e gabuar. Problemi është se asnjëra nuk u zgjodh për produktin tuaj.

Dizajni i mirë është kryesisht vendime. Detyra juaj është të merrni disa vendime që i japin aplikacionit karakter, dhe t'ia lini AI-së t'i zbatojë me qëndrueshmëri mijëra vendimet e vogla.

Hapi 1: Mblidhni referenca para se të kërkoni

Kaloni njëzet minuta duke mbledhur dy deri në katër referenca: aplikacione ose faqe interneti, pamja e të cilave i përshtatet produktit tuaj. Burime të mira janë produktet që audienca juaj i përdor tashmë, galeritë e dizajnit dhe faqet e kompanive në fusha të ngjashme.

Për secilën, shkruani çfarë ju pëlqen me fjalë të thjeshta:

• "Shumë hapësirë e bardhë, përmbajtja në një kolonë të ngushtë, etiketa të vogla gri mbi numra të mëdhenj."
• "Tabela të dendura me ndarës të hollë, pa hije në karta, një ngjyrë e vetme theksi për veprimet."
• "Titujt e mëdhenj me serif, sfond krem i ngrohtë, fotografi në vend të ilustrimeve."

Pastaj i kaloni këto përshkrime AI-së, dhe bashkëngjitni pamje ekrani nëse mjeti juaj i pranon imazhet. Frymëzohuni nga cilësitë, jo nga produkti: kopjimi i paraqitjes, markës ose tekstit të një kompanie tjetër është rrezik ligjor dhe humbje besueshmërie.

Hapi 2: Zgjidhni një drejtim dizajni dhe emërojeni

Drejtimi është një përshkrim i shkurtër i ndjesisë. I jep AI-së një filtër për çdo vendim që merr. Disa që funksionojnë mirë:

Vendoseni te kërkesa e parë, bashkë me atë që përdoruesit kanë nevojë:

Ndërto një aplikacion rezervimesh për një studio yoge të pavarur. Drejtimi i dizajnit: i qetë dhe minimal, si një orar i printuar i studios. Sfond krem i ngrohtë, tekst pothuajse i zi, një ngjyrë e qetë jeshile salvie për butonat dhe gjendjet e zgjedhura. Serif për titujt, sans-serif i pastër për tekstin. Hapësira bujare, pa gradientë, pa hije, pa emoji. Së pari për celular.

Hapi 3: Vendosni rregullat, shkrimin, ngjyrat dhe hapësirat

Këto tri përcaktojnë pjesën më të madhe të cilësisë vizuale. Të qenit i qartë për to është përmirësimi më i madh që mund të bëni.

Shkrimi

• Një ose dy fonte. Një font për titujt dhe një për tekstin, ose një familje e vetme në disa pesha.
• Një shkallë tekstit. Një numër i vogël madhësish të përdorura me qëndrueshmëri, për shembull 14, 16, 20, 28 dhe 40 px, në vend që çdo komponent të zgjedhë çfarë të dojë.
• Tekst i lexueshëm. Rreth 16 px në web, lartësi rreshti afërsisht 1,5, dhe gjatësi rreshti rreth 60–75 karaktere për tekste të gjata.
• Hierarkia përmes peshës dhe madhësisë, jo ngjyrës. Titujt më të trashë dhe më të mëdhenj; teksti dytësor më i vogël dhe gri më i butë.

Ngjyrat

• Kryesisht neutrale. Sfondet, sipërfaqet, kufijtë dhe grit e tekstit bëjnë pjesën më të madhe të punës.
• Një ngjyrë theksi për veprimet dhe gjendjet e zgjedhura. Një e dytë vetëm nëse ka një detyrë të qartë.
• Ngjyra semantike për sukses, paralajmërim dhe gabim, dhe të përdorura vetëm për ato.
• Kontrasti. WCAG 2 kërkon raport kontrasti të paktën 4,5:1 për tekst normal dhe 3:1 për tekst të madh. Teksti gri i çelët mbi të bardhë shpesh nuk kalon; kërkojani AI-së ta kontrollojë.
• Modaliteti i errët, nëse e doni, i dizajnuar qëllimisht e jo thjesht i përmbysur.

Hapësirat dhe paraqitja

• Një shkallë hapësirash si 4, 8, 12, 16, 24, 32, 48, 64 px. Çdo gjë përshtatet me të.
• Drejtimi. Skajet përputhen; përmbajtja qëndron në një rrjet ose në një kolonë me gjerësi maksimale të njëtrajtshme.
• Afërsia. Gjërat e lidhura janë afër njëra-tjetrës, ato të palidhura më larg. Ky rregull i vetëm rregullon shumicën e ekraneve të ngarkuara.
• Më pak kontejnerë. Jo çdo gjë ka nevojë për kartë. Kufijtë, ndarësit dhe hapësira bosh shpesh grupojnë përmbajtjen më qetë.

Një kërkesë që e vendos sistemin një herë:

Para se të ndërtosh më shumë ekrane, krijo një sistem të vogël dizajni dhe përdore kudo: një shkallë teksti 14/16/20/28/40 px, lartësi rreshti 1,5 për tekstin, një shkallë hapësirash 4/8/12/16/24/32/48 px, neutrale nga e bardha pothuajse e plotë deri te e zeza pothuajse e plotë, një ngjyrë theksi (#3F6B5A) vetëm për veprimet kryesore, dhe e kuqe vetëm për gabimet. Butonat, fushat e shkrimit dhe kartat duhet të kenë të njëjtin rreze rrumbullakimi. Kontrollo që i gjithë teksti të përmbushë kontrastin WCAG AA.

Nëse punoni në një ndërtues që kupton kodin, kjo zakonisht bëhet token dizajni, p.sh. variabla CSS ose një temë Tailwind, që do të thotë se ndryshimet e mëvonshme bëhen në një vend.

Hapi 4: Ndërtoni fillimisht një ekran të përsosur

Mos gjeneroni dymbëdhjetë ekrane dhe pastaj përpiquni t'i rregulloni të gjitha. Zgjidhni ekranin që përdoruesit e shohin më shpesh, shpesh panelin ose listën kryesore, dhe përsëritni derisa të jetë i saktë. Pastaj:

Përdore panelin si referencë për të gjitha faqet e tjera: i njëjti header, hapësira, madhësitë e tekstit, stilet e butonave dhe stili i tabelës. Përditëso faqet Cilësimet dhe Rezervimet për t'u përshtatur.

Një ekran referencë i përfunduar e komunikon shijen tuaj shumë më mirë se çdo mbiemër.

Hapi 5: Përsërit me kërkesa specifike dhe të vogla

Reagimi ndaj një AI-je funksionon si reagimi ndaj një dizajneri të ri: specifik, një zonë në çdo herë, dhe i qartë për atë që duhet ruajtur.

Përfshini gjithmonë edhe atë që duhet ruajtur, si "ruaj të gjitha rrugët, tekstet dhe funksionet të njëjta", që një kalim vizual të mos heqë heshtazi funksionalitet. Dhe kontrolloni çdo ndryshim në një ekran me përmasa telefoni para se të kërkoni tjetrin. Shihni si të ndërtoni një aplikacion web të përshtatur për celular për atë që duket mirë në ekrane të vogla.

Hapi 6: Detajet që e dallojnë një dizajn të mirë nga gjenerik

Kur struktura është e saktë, këto gjëra të vogla e bëjnë aplikacionin të duket i përfunduar:

• Gjendjet boshe. Çfarë sheh një përdorues i ri pa të dhëna: një shpjegim i shkurtër dhe një veprim i qartë, jo një tabelë bosh.
• Gjendjet e ngarkimit. Skelete të formuara si përmbajtja, jo spinner kudo.
• Gjendjet e gabimit. Mesazhe në gjuhë të thjeshtë pranë fushës që e shkaktoi.
• Gjendjet hover, focus dhe të shtypur për çdo element ndërveprues. Unazat e fokusit kanë rëndësi për përdoruesit e tastierës.
• Përmbajtje reale. Zëvendësoni "Lorem ipsum" dhe "John Doe" me tekst dhe të dhëna realiste; përmbajtja e rreme fsheh problemet e paraqitjes.
• Ikona nga një grup i vetëm, në një ose dy madhësi, me trashësi vije të qëndrueshme.
• Imazhe me qëllim. Fotografi reale të produktit tuaj, vendit ose njerëzve mundojnë imazhe stoku të përgjithshme. Kur përdorni imazhe stoku ose të gjeneruara, mbani një stil të njëtrajtshëm.
• Teksti. Etiketa të shkurtra dhe specifike ("Rezervo klasën", jo "Dërgo") ndikojnë në cilësinë e perceptuar po aq sa çdo ngjyrë.

Gabimet e zakonshme

• Ridizajnimi i gjithçkaje në një kërkesë. Rishkrimet e mëdha sjellin regresione. Shkoni faqe për faqe.
• Shumë ngjyra theksi. Nëse çdo gjë është e theksuar, asgjë nuk është.
• Vendosja e gjithçkaje në qendër. Teksti i centruar është i vështirë për t'u skanuar përtej titullit; vendosni pjesën më të madhe të përmbajtjes majtas.
• Tekst i vogël me kontrast të ulët që duket elegant në një monitor të madh dhe është i palexueshëm në një telefon në diell.
• Dekorimi në vend të hierarkisë. Gradientët dhe hijet nuk mund të rregullojnë një ekran ku veprimi më i rëndësishëm nuk është i dukshëm.
• Injorimi i faqes hyrëse. Për shumë produkte është përshtypja e parë; shihni si të ndërtoni një faqe hyrëse që konverton.

Për më shumë modele kërkesash përtej dizajnit, lexoni si të shkruani kërkesa për ndërtuesit e aplikacioneve me AI. Nëse puna juaj është vetë produkti, si një portofol dizajni ose fotografie, si të ndërtoni një faqe portofoli shkon më thellë te prezantimi.

Dizajnimi me Mythex

Në Mythex përshkruani dizajnin në chat, e shihni në pamjen paraprake të drejtpërdrejtë, dhe kontrolloni kornizën me përmasa telefoni para ndryshimit të radhës. Dokumentacioni ka modele të shkurtra për këtë: kërkesat për dizajn dhe UI për të emërtuar çfarë të ndryshohet dhe çfarë të ruhet, dhe ridizajnimi i UI-së për të rifreskuar një faqe në çdo herë pa humbur funksionalitetin. Mythex mund të kërkojë edhe fotografi stoku ose të gjenerojë një imazh në chat, si një foto kryesore, një sfond ose një imazh ndarjeje, dhe ta vendosë në aplikacion kur ta kërkoni. Nëse një kalim shkon keq, kthehuni te pika e ruajtjes nga para tij. Shfletoni shabllonet nëse preferoni të nisni nga një dizajn ekzistues dhe ta përshtatni.

Pyetje