Dizajn sučelja i generiranje UI koda s umjetnom inteligencijom

Dobici:

• Sposobnost izrade robusnog koda sučelja za Jetpack Compose i SwiftUI prema namjeni, komponenti, četiri stanja (učitavanje/prazno/pogreška/puno), sustav dizajna i pristupačnost
• Sposobnost izrade sučelja koje je otvoreno za sve korisnike definiranjem pristupačnosti od početka, s ispravnim označavanjem, dovoljnim kontrastom i odgovarajućim dodirom.
• Sposobnost stvaranja 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 njezinim korisničkim sučeljem (UI — zasloni koje korisnik vidi i dodiruje) i korisničkim iskustvom (UX — koliko je glatka i ugodna za korištenje). Korisnik ne vidi loš kod, ali osjeti loše sučelje u prvoj sekundi. AI igra dvije snažne uloge u razvoju sučelja: s jedne strane, stvara ideju dizajna, tijek i tekst (UX pisanje); S druge strane, izravno pretvara ovaj dizajn u radni kod sučelja. U ovoj jedinici naučit ćemo kako proizvesti brza, dostupna i dosljedna sučelja s umjetnom inteligencijom, fokusirajući se na moderne alate za deklarativno sučelje Jetpack Compose (Android) i SwiftUI (iOS). "Deklarativno" znači da umjesto objašnjenja korak po korak kako nacrtati ekran, opisujete "ovako bi ekran trebao izgledati u ovoj situaciji"; Alat će učiniti ostalo.

Od dizajna do koda: pravi redoslijed

Reći umjetnoj inteligenciji da "napravi lijep zaslon" je nejasno jer se "lijep" ne može mjeriti. Dobro generiranje sučelja slijedi ovaj redoslijed:

1. Svrha i sadržaj. Što ekran radi, koje informacije prikazuje, što će korisnik učiniti?
2. Popis komponenti. Dijelovi kao što su naslov, popis, gumb, polje obrasca.
3. Situacije. Učitavanje, prazno (bez podataka), pogreška, puno — četiri osnovna stanja zaslona.
4. Sustav dizajna. Boja, tipografija, pravila proreda; općenito u skladu sa Smjernicama za ljudsko sučelje Material 3 (Android) ili iOS.
5. Pristupačnost. Oznake čitača zaslona, ​​odgovarajući kontrast, veličina dodira.
6. Kodirati. 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 primjeni korisnik uglavnom susreće sa situacijama "učitavanja" i "pogreške". Ispisivanje sva četiri stanja na AI je tajna robusnog sučelja.

Savjet: dodajte "generiraj učitavanje, prazno, pogrešku i puno zasebno" na kraju upita. Ova jedna rečenica čini vaše sučelje spremnim za stvarni svijet i značajno smanjuje broj pogrešaka u QA (testiranju kvalitete) fazi.

O pristupačnosti nema pregovaranja

Pristupačnost — mogućnost korištenja aplikacije od strane korisnika s oštećenjima vida, sluha ili motorike — etička je odgovornost, ali i zakonsko očekivanje. AI proizvodi dostupan kod po želji; Vraća sučelje bez oznaka i niskog kontrasta ako nije željeno. Tri praktična pravila: svakom interaktivnom elementu dodijelite smislenu oznaku za čitač zaslona (contentDescription / accessibilityLabel), odgovarajući 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 dugačku oznaku pristupačnosti ukrasnoj ikoni; Ovo zatrpava korisnika čitača zaslona nepotrebnim brbljanjem. Čisto dekorativni elementi trebaju biti "skriveni od pristupačnosti" (čitač zaslona ih može preskočiti). Pregledajte proizvedene etikete: neka smisleno govori, neka dekorativno šuti.

Dosljednost: sustav dizajna i tema

Profesionalne aplikacije ne koriste nasumične boje i razmake; slijedi sustav dizajna (standardni skup boja, fontova, razmaka i komponenti). Ako AI-ju date svoje vrijednosti teme (glavnu boju, sekundarnu boju, radijus kuta, tipografsku ljestvicu), svi će zasloni biti dosljedni. Ako to ne učinite, svaki zaslon koristit će drugu nijansu plave i aplikacija će izgledati pretrpano. Najučinkovitiji način je prvo zatražiti od umjetne inteligencije da generira datoteku tokena teme/dizajna, a zatim povezati sve zaslone s tom temom.

Predmet

loš pristup

Snažan pristup

Boja

Ručno označite boju svakog zaslona

Središnja tema, zasloni čitaju iz teme

situacije

Samo "puni" ekran

Učitavanje/prazno/pogreška/puno četiri stanja

pristupačnost

Dodano kasnije

To je definirano u zahtjevu od početka

teksta

ugrađen u kod

Odvojeni izvor, spreman za više jezika

tri mini kućišta

Slučaj 1 — Prazan slučaj spremljen. Tim aplikacije za vijesti dao je AI ispisati pojedinačna stanja zaslona. Zahvaljujući ekranu “status mirovanja” (“Još nema spremljenih vijesti”), 70% sudionika u korisničkom testiranju nije ostavilo aplikaciju na praznom ekranu; U prethodnoj verziji, prazan ekran je ostao bijel i korisnici su mislili da je "pokvaren" i otišli. Mala kopija povećala je stopu zadržavanja.

Slučaj 2 — Odbijanje kontrasta. Jedan tim prijavio se u App Store sa zaslonima s tekstom u svijetlo sivoj boji, u boji marke. Apple je izdao upozorenje zbog pristupačnosti zbog niskog kontrasta. Kada je AI-u rečeno da "poveća kontrast teksta i pozadine iznad 4,5:1", boje su postale tamnije i problem je riješen. Da se tražilo od početka, odgode ne bi bilo.

Slučaj 3 — Buka dekorativne naljepnice. Slabovidni tester izvijestio je da je svaka ikona ukrasa ("linija", "točka", "sjena") pročitana naglas na zaslonu generiranom umjetnom inteligencijom, čineći zaslon neupotrebljivim. Iskustvo čitača zaslona postalo je fluidno kada su dekorativni elementi skriveni od pristupačnosti. Lekcija: pristupačnost znači "prave oznake", a ne "previše oznaka".

Slab upit / Jak upit

Slab upit: "Dizajnirajte zaslon profila."

Snažan upit: "Generiraj zaslon korisničkog profila za iOS/SwiftUI. Sadržaj: avatar, ime, e-pošta, gumb 'Uredi profil', popis postavki. Statusi: učitavanje (kostur), pogreška (gumb za ponovni pokušaj), puno. Dizajn: Nematerijalni, u skladu s iOS HIG; boje sustava, Dinamički tip. Pristupačnost: Oznaka pristupačnosti za svaki element, skrivene ukrasne ikone, ciljani dodir min. 44pt. Čitajte vrijednosti teme iz zasebnu datoteku, nemojte ugrađivati kod boje na ekran. Prvo nacrtajte stablo komponente, a zatim izvezite kod."

Predlošci koji se mogu kopirati

Predložak za generiranje zaslona: "Generiraj [naziv zaslona] za [platformu/alat]. Sadržaj: [elementi]. Radnje korisnika: [radnje]. Odvojeno generiraj četiri stanja: učitavanje, prazno, pogreška, puno. Sustav dizajna: [Materijal 3 / iOS HIG], čitanje iz tokena teme. Pristupačnost: oznake, kontrast >=4,5:1, ciljni standard dodira."

Predložak sustava teme/dizajna: "Proizvesti središnju definiciju teme za moju aplikaciju ([Sastavi temu /struktura tokena dizajna u SwiftUI]): - Primarna boja [hex], sekundarna [hex], boja pogreške, površinska boja - Ljestvica tipografije (naslov, tijelo, opis) - Ljestvica razmaka (4,8,16,24) - Standard radijusa kuta Dodajte podršku za svijetlu i tamnu temu."

Predložak revizije pristupačnosti: "Provjerite ovaj kôd zaslona za pristupačnost: 1) Ima li neoznačenih interaktivnih elemenata? 2) Jesu li omjeri kontrasta odgovarajući? 3) Jesu li dodirne mete dovoljno velike? 4) Jesu li dekorativni elementi skriveni od čitača zaslona? Predložite popravke za svaki problem. [kod]"

Predložak dizajna u kod: "Opisujem sljedeći dizajn: [opis zaslona ili snimka zaslona]. Prevedite ovo u [Compose/SwiftUI] kod. Neka razmaci i poravnanje budu vjerni dizajnu, ali dodajte sva četiri stanja."

Uobičajene greške

• Samo razmišljam o cijeloj situaciji. Većinu vremena stvarni korisnik vidi zaslon učitavanja/pogreške.
• Ugrađivanje boje i prostora u kod. Ako tema nije središnja, gubi se dosljednost i otežava se održavanje.
• Ostavljajući pristupačnost za kraj. Dodavanje kasnije je skupo; Besplatno je ako se zatraži od početka.
• Prekomjerno označavanje. Čitanje ukrasnih elemenata također remeti iskustvo čitača zaslona.
• Ugrađivanje teksta u kod. Kada je potrebna višejezična podrška, potrebno je ručno promijeniti svaki zaslon; Držite tekstove odvojeno.
• Očekuje se točna kopija sa snimke zaslona. AI dizajn proizvodi cca. Preciznost piksela postavlja se ručno.

Ukratko

AI je moćan u proizvodnji sučelja, ali zahtijeva vodstvo. Točan redoslijed: svrha, komponente, četiri stanja (učitavanje/prazno/pogreška/puno), sustav dizajna, pristupačnost, zatim kod. O pristupačnosti se ne može pregovarati i znači "prava oznaka", a ne "previše oznaka". Radi dosljednosti, čitajte boju i razmake iz središnje teme, nemojte ih ugrađivati ​​u kod. Snažna volja definira sve to od početka; Dakle, sučelje je spremno za stvarni svijet, odobrenje trgovine i sve korisnike.

Zadatak aplikacije

Koristeći "Predložak za generiranje zaslona" za zaslon postavki, zatražite od AI-ja Compose ili SwiftUI kod i zatražite sva četiri stanja. Zatim provjerite isti kod pomoću "Predloška provjere pristupačnosti". Pronađite i popravite barem jedno poboljšanje pristupačnosti (nedostajuća oznaka, nizak kontrast ili mali dodirni cilj) i zabilježite za koji status (učitavanje/prazno/pogreška) mislite da će se najčešće pojavljivati ​​u stvarnoj upotrebi.

popis za provjeru

• [ ] Jasno sam naveo svrhu i komponente zaslona u upitu
• [ ] Dao sam zasebno generirati četiri stanja (učitavanje/prazno/pogreška/puno).
• [ ] Napravio sam da se boja i prostor čitaju iz središnje teme, nisam to ugradio u kod.
• [ ] Od početka sam želio oznake pristupačnosti i kontrast
• [ ] Potvrdio sam da su ukrasni elementi skriveni od čitača zaslona
• [ ] Držao sam tekstove odvojene, spremne za više jezika