Dobici:
- Sposobnost izrade robusnog koda interfejsa za Jetpack Compose i SwiftUI prema svrsi, komponenti, četiri stanja (učitavanje/prazno/greška/puna), sistem dizajna i pristupačnost
- Mogućnost izrade interfejsa koji je otvoren za sve korisnike definisanjem pristupačnosti od početka, sa ispravnim označavanjem, dovoljnim kontrastom i odgovarajućim dodirom.
- Sposobnost kreiranja dosljednih, višejezičnih i sučelja spremnih za svijetle/tamne teme čitanjem boje i prostora iz središnje teme
Uspjeh mobilne aplikacije uvelike je određen njenim korisničkim sučeljem (UI – ekrani koje korisnik vidi i dodiruje) i korisničkim iskustvom (UX – koliko je glatko i ugodno za korištenje). Korisnik ne vidi loš kod, ali osjeti loš interfejs u prvoj sekundi. AI igra dvije moćne uloge u razvoju interfejsa: s jedne strane, generiše ideju dizajna, tok i tekst (UX pisanje); S druge strane, direktno pretvara ovaj dizajn u radni kod interfejsa. U ovoj cjelini naučit ćemo kako proizvesti brza, dostupna i konzistentna sučelja s umjetnom inteligencijom, fokusirajući se na moderne deklarativne alate sučelja Jetpack Compose (Android) i SwiftUI (iOS). "Deklarativno" znači da umjesto objašnjavanja korak po korak kako nacrtati ekran, opisujete "ovako bi ekran trebao izgledati u ovoj situaciji"; Alat radi ostalo.
Od dizajna do koda: pravi red
Reći AI da "napravi lijep ekran" je nejasno jer se "lijepo" ne može izmjeriti. Dobra generacija interfejsa slijedi ovaj redoslijed:
- Svrha i sadržaj. Šta radi ekran, koje informacije prikazuje, šta će korisnik učiniti?
- Lista komponenti. Dijelovi kao što su naslov, lista, dugme, polje obrasca.
- Situacije. Učitavanje, prazno (bez podataka), greška, puno — četiri osnovna stanja ekrana.
- Sistem dizajna. Boja, tipografija, pravila razmaka; općenito u skladu sa smjernicama za ljudski interfejs materijala 3 (Android) ili iOS.
- Pristupačnost. Oznake čitača ekrana, adekvatan kontrast, veličina dodirne mete.
- Kod. Rekavši sve ovo, Composable ili SwiftUI View generacija.
Korak koji se najčešće preskače je treći. Programeri uzimaju u obzir samo "puno" stanje; dok se u stvarnoj aplikaciji korisnik uglavnom susreće sa situacijama "učitavanja" i "greške". Ispis sva četiri stanja na AI je tajna robusnog interfejsa.
Savjet: dodajte "generiraj učitavanje, prazno, grešku i puno zasebno" na kraju upita. Ova pojedinačna rečenica čini vaš interfejs spremnim za stvarni svet i značajno smanjuje broj grešaka u fazi QA (testiranje kvaliteta).
O pristupačnosti se ne može pregovarati
Pristupačnost — mogućnost korištenja aplikacije od strane korisnika sa oštećenjima vida, sluha ili motorike — je i etička odgovornost i trgovina i pravno očekivanje. AI proizvodi dostupan kod po želji; Vraća sučelje bez oznaka, niskog kontrasta ako se ne želi. Tri osnovna pravila: dajte svakom interaktivnom elementu smislenu oznaku za čitač ekrana (contentDescription / accessibilityLabel), adekvatan kontrast boja između teksta i pozadine (omjer najmanje 4,5:1) i cilj dodira od najmanje 48x48 dp/44x44 pt. Pitajte AI ove stvari eksplicitno.
Oprez: AI također može dodati dugu oznaku pristupačnosti na dekorativnu ikonu; Ovo zatrpava korisnika čitača ekrana nepotrebnim brbljanjem. Čisto dekorativni elementi bi trebali biti "skriveni od pristupačnosti" (dozvoljeno da ih čitač ekrana preskoči). Pregledajte proizvedene etikete: neka smisleno govori, neka ukrasno šuti.
Konzistentnost: sistem dizajna i tema
Profesionalne aplikacije ne koriste nasumične boje i razmake; prati sistem dizajna (standardni skup boja, fontova, razmaka i komponenti). Ako AI date vrijednosti vaše teme (glavna boja, sekundarna boja, radijus ugla, skala tipografije), svi ekrani će ispasti konzistentni. Ako to ne učinite, svaki ekran će koristiti drugačiju nijansu plave i aplikacija će izgledati pretrpano. Najefikasniji način je da prvo zamolite AI da generiše datoteku tokena teme/dizajna, a zatim poveže sve ekrane na tu temu.
Predmet
loš pristup
Snažan pristup
Boja
Ručno kodirajte svaki ekran u boji
Centralna tema, ekrani čitaju iz teme
situacije
Samo "puni" ekran
Učitavanje/prazno/greška/puna četiri stanja
pristupačnost
Dodano kasnije
Definisano je u tužbi od početka
tekst
ugrađen u kod
Odvojeni izvor, spreman za više jezika
tri mini kofera
Slučaj 1 — Prazan slučaj je sačuvan. Tim aplikacije za vijesti dao je AI ispisati pojedinačna stanja ekrana. Zahvaljujući ekranu statusa mirovanja („Još nema spremljenih vijesti“), 70% učesnika u korisničkom testiranju nije napustilo aplikaciju na praznom ekranu; U prethodnoj verziji, prazan ekran je ostao bijel, a korisnici su mislili da je "pokvaren" i otišli. Mala kopija povećala je stopu zadržavanja.
Slučaj 2 — Odbijanje kontrasta. Jedan tim se prijavio na App Store sa ekranima sa tekstom u svetlo sivoj boji, u boji brenda. Apple je izdao upozorenje zbog pristupačnosti zbog niskog kontrasta. Kada je AI rečeno da "poveća kontrast teksta i pozadine iznad 4,5:1", boje su postale tamnije i problem je riješen. Da se to tražilo od početka, ne bi bilo kašnjenja.
Slučaj 3 — Šum na ukrasnoj etiketi. Tester sa oštećenim vidom prijavio je da je svaka ikona ukrasa („linija“, „tačka“, „sjena“) pročitana naglas na ekranu generisanom umjetnom inteligencijom, što ekran čini neupotrebljivim. Iskustvo čitača ekrana postalo je fluidno kada su dekorativni elementi bili skriveni od pristupačnosti. Pouka: pristupačnost znači "prave oznake", a ne "previše oznaka".
Slaba prompt / Jaka prompt
Slab upit: "Dizajnirajte ekran profila."
Snažan prompt: "Generirajte ekran korisničkog profila za iOS/SwiftUI. Sadržaj: avatar, ime, e-pošta, dugme 'Uredi profil', lista postavki. Statusi: učitavanje (kostur), greška (dugme za ponovni pokušaj), potpuno. Dizajn: nematerijalan, u skladu sa iOS HIG; sistemske boje, dinamički tip. Pristupačnost: accessibilitymecorLabel, dodirni ciljni element, min. decorLabel. vrijednosti iz zasebne datoteke, nemojte ugrađivati kod boja na ekran Prvo nacrtajte stablo komponenti, a zatim izvezite kod."
Predlošci koji se mogu kopirati
Predložak za generiranje ekrana: "Generiraj [ime ekrana] za [platformu/alat]. Sadržaj: [elementi]. Korisničke radnje: [akcije]. Zasebno generirajte četiri stanja: učitavanje, prazno, greška, puna. Sistem dizajna: [Material 3 / iOS HIG], čitanje iz tokena teme. Pristupačnost: oznake, kontrast >=4,5:1, standard za dodirivanje cilja."
Predložak sistema teme/dizajna: "Izradite središnju definiciju teme za moju aplikaciju ([Sastavi temu / strukturu tokena dizajna u SwiftUI]):- Primarna boja [hex], sekundarna [hex], boja greške, boja površine- Skala tipografije (naslov, tijelo, opis)- Skala razmaka (4,8,16,24)- Standardni radijus svjetla i tamne podrške."
Predložak revizije pristupačnosti: "Provjerite pristupačnost kod ovog ekrana: 1) Ima li neoznačenih interaktivnih elemenata? 2) Da li su omjeri kontrasta adekvatni? 3) Da li su mete dodira dovoljno velike? 4) Da li su ukrasni elementi skriveni od čitača ekrana? Predložite ispravke za svaki problem. [šifra]"
Predložak dizajna u kodu: "Opisujem sljedeći dizajn: [opis ekrana ili snimak ekrana]. Prevedi ovo u [Compose/SwiftUI] kod. Održavajte razmak i poravnanje istinskim dizajnom, ali dodajte sva četiri stanja."
Uobičajene greške
- Samo razmišljam o cijeloj situaciji. Većinu vremena pravi korisnik vidi ekran učitavanja/greške.
- Ugrađivanje boje i prostora u kod. Ako tema nije centralna, konzistentnost se gubi i održavanje postaje teško.
- Pristupačnost ostavljamo za kraj. Dodavanje kasnije je skupo; Besplatno je ako se zatraži od početka.
- Overlabeling. Čitanje ukrasnih elemenata takođe remeti iskustvo čitača ekrana.
- Ugradnja teksta u kod. Kada je potrebna višejezična podrška, potrebno je ručno promijeniti svaki ekran; Držite tekstove odvojeno.
- Očekuje se tačna kopija sa snimka ekrana. AI dizajn proizvodi cca. Preciznost piksela se postavlja ručno.
Ukratko
AI je moćan u proizvodnji interfejsa, ali zahtijeva vodstvo. Tačan redosled: svrha, komponente, četiri stanja (učitavanje/prazno/greška/puna), sistem dizajna, pristupačnost, zatim kod. O pristupačnosti se ne može pregovarati i znači „pravu oznaku“, a ne „previše oznaka“. Radi dosljednosti, pročitajte boju i razmak iz središnje teme, nemojte je ugrađivati u kod. Jaka volja sve ovo definiše od početka; Tako je interfejs spreman za stvarni svijet, odobrenje trgovine i sve korisnike.
Zadatak aplikacije
Koristeći “Screen Generation Template” za ekran postavki, zatražite od AI za Compose ili SwiftUI kod i zatražite sva četiri stanja. Zatim provjerite isti kod pomoću "šablona za provjeru pristupačnosti". Pronađite i popravite barem jedno poboljšanje pristupačnosti (nedostaje oznaka, nizak kontrast ili mali dodirni cilj) i zabilježite koji status (učitavanje/prazno/greška) mislite da će se najčešće pojaviti u stvarnoj upotrebi.
kontrolna lista
- [ ] U promptu sam razjasnio svrhu i komponente ekrana
- [ ] Imao sam četiri stanja (učitavanje/prazno/greška/puna) generirana odvojeno
- [ ] Boju i prostor sam pročitao iz centralne teme, nisam to ugradio u kod.
- [ ] Želeo sam oznake pristupačnosti i kontrast od samog početka
- [ ] Provjerio sam da su dekorativni elementi skriveni od čitača ekrana
- [ ] Držao sam tekstove odvojeno, spremni za više jezika