Dobički:
- Sposobnost izdelave robustne vmesniške kode za Jetpack Compose in SwiftUI po vrstnem redu glede na namen, komponento, štiri stanja (nalaganje/prazno/napaka/polno), sistem oblikovanja in dostopnost
- Sposobnost izdelave vmesnika, ki je odprt za vse uporabnike, z definiranjem dostopnosti od začetka, s pravilnim označevanjem, zadostnim kontrastom in ustreznim dotikom.
- Sposobnost ustvarjanja doslednih, večjezičnih vmesnikov, pripravljenih za svetlo/temno temo, z branjem barve in prostora iz osrednje teme
Uspeh mobilne aplikacije je v veliki meri odvisen od njenega uporabniškega vmesnika (UI – zasloni, ki jih uporabnik vidi in se jih dotakne) in uporabniške izkušnje (UX – kako gladka in prijetna je uporaba). Uporabnik ne vidi slabe kode, ampak v prvi sekundi začuti slab vmesnik. Umetna inteligenca igra dve močni vlogi pri razvoju vmesnikov: na eni strani ustvarja oblikovalsko idejo, tok in besedilo (pisanje UX); Po drugi strani pa ta dizajn neposredno pretvori v delujočo kodo vmesnika. V tej enoti se bomo naučili izdelati hitre, dostopne in dosledne vmesnike z AI, pri čemer se bomo osredotočili na sodobna deklarativna vmesniška orodja Jetpack Compose (Android) in SwiftUI (iOS). "Deklarativno" pomeni, da namesto korak za korakom razlage, kako narisati zaslon, opisujete "tako bi moral izgledati zaslon v tej situaciji"; Orodje naredi ostalo.
Od zasnove do kode: pravi vrstni red
Reči AI, naj "naredi čudovit zaslon", je nejasno, ker "lepega" ni mogoče izmeriti. Dobro ustvarjanje vmesnika sledi temu vrstnemu redu:
- Namen in vsebina. Kaj počne zaslon, katere informacije prikazuje, kaj bo naredil uporabnik?
- Seznam komponent. Deli, kot so naslov, seznam, gumb, polje obrazca.
- Situacije. Nalaganje, prazno (ni podatkov), napaka, polno — štiri osnovna stanja zaslona.
- Sistem oblikovanja. Barva, tipografija, pravila razmika; na splošno v skladu s smernicami za človeški vmesnik materiala 3 (Android) ali iOS.
- Dostopnost. Oznake bralnika zaslona, ustrezen kontrast, velikost cilja za dotik.
- Koda. Ob vsem tem, Generacija pogleda Composable ali SwiftUI.
Najpogosteje preskočen korak je tretji. Razvijalci upoštevajo samo "polno" stanje; medtem ko se v resnični aplikaciji uporabnik večinoma srečuje s situacijami "nalaganja" in "napake". Tiskanje vseh štirih stanj v AI je skrivnost robustnega vmesnika.
Namig: na koncu poziva dodajte "generiraj nalaganje, prazno, napaka in polno ločeno". Ta en sam stavek naredi vaš vmesnik pripravljen za resnični svet in znatno zmanjša število napak v fazi QA (testiranje kakovosti).
O dostopnosti se ni mogoče pogajati
Dostopnost – zmožnost uporabe aplikacije s strani uporabnikov z motnjami vida, sluha ali motoričnih motenj – je hkrati etična odgovornost ter obveznost in pravno pričakovanje. AI po želji izdela dostopno kodo; Vrne vmesnik brez oznak z nizkim kontrastom, če ni želen. Tri osnovna pravila: vsakemu interaktivnemu elementu dajte smiselno oznako za bralnik zaslona (contentDescription / accessibilityLabel), ustrezen barvni kontrast med besedilom in ozadjem (razmerje vsaj 4,5:1) in cilj dotika najmanj 48x48 dp/44x44 pt. Te stvari izrecno vprašajte AI.
Pozor: AI lahko okrasni ikoni doda tudi dolgo oznako dostopnosti; To uporabnika bralnika zaslona zasuje z nepotrebnim klepetanjem. Povsem okrasni elementi morajo biti "skriti pred dostopnostjo" (bralnik zaslona jih lahko preskoči). Preglejte izdelane etikete: pomenljivo naj spregovori, dekorativno naj molči.
Doslednost: sistem oblikovanja in tema
Profesionalne aplikacije ne uporabljajo naključnih barv in razmikov; sledi sistemu oblikovanja (standardni nabor barv, pisav, razmikov in komponent). Če umetni inteligenci podate svoje vrednosti teme (glavna barva, sekundarna barva, polmer vogalov, merilo tipografije), bodo vsi zasloni prikazani skladno. Če tega ne storite, bo vsak zaslon uporabljal drugačen odtenek modre in aplikacija bo videti natrpana. Najučinkovitejši način je, da najprej zahtevate od umetne inteligence, da ustvari datoteko žetonov za temo/oblikovanje, nato pa povežete vse zaslone s to temo.
Predmet
slab pristop
Močan pristop
barva
Ročno barvno kodirajte vsak zaslon
Osrednja tema, zasloni se berejo iz teme
situacije
Samo "cel zaslon".
Nalaganje/prazno/napaka/polno štiri stanja
dostopnost
Dodano pozneje
Opredeljen je v zahtevku od začetka
besedilo
vdelano v kodo
Ločen vir, pripravljen za več jezikov
trije mini kovčki
Primer 1 — Shranjen prazen primer. Ekipa aplikacije za novice je dala AI natisniti posamezna stanja zaslona. Zahvaljujoč zaslonu »stanje mirovanja« (»novic še ni shranjenih«) 70 % udeležencev uporabniškega testiranja ni pustilo aplikacije na praznem zaslonu; V prejšnji različici je prazen zaslon ostal bel in uporabniki so mislili, da je "pokvarjen" in so odšli. Majhna kopija je povečala stopnjo hrambe.
Primer 2 – Zavrnitev kontrasta. Ena ekipa se je prijavila v App Store z zasloni z besedilom v svetlo sivi barvi, barvi blagovne znamke. Apple je izdal opozorilo zaradi dostopnosti zaradi nizkega kontrasta. Ko je bilo AI naročeno, naj "poveča kontrast besedila in ozadja nad 4,5:1", so barve postale temnejše in težava je bila rešena. Če bi bilo zahtevano od začetka, ne bi bilo zamude.
Primer 3 – hrup okrasnih nalepk. Slabovidni tester je poročal, da je bila vsaka ikona okraska (»črta«, »pika«, »senca«) prebrana na glas na zaslonu, ustvarjenem z umetno inteligenco, zaradi česar je bil zaslon neuporaben. Izkušnja bralnika zaslona je postala tekoča, ko so bili dekorativni elementi skriti pred dostopnostjo. Lekcija: dostopnost pomeni "prave oznake", ne "preveč oznak".
Šibek poziv/močan poziv
Šibek poziv: "Oblikuj zaslon profila."
Zmogljiv poziv: "Ustvari zaslon uporabniškega profila za iOS/SwiftUI. Vsebina: avatar, ime, e-pošta, gumb 'Uredi profil', seznam nastavitev. Stanja: nalaganje (okostje), napaka (gumb za ponovni poskus), polno. Oblikovanje: nematerialno, v skladu z iOS HIG; sistemske barve, dinamični tip. Dostopnost: dostopnostOznaka za vsak element, skrite okrasne ikone, cilj dotika najmanj 44pt. Preberite vrednosti teme iz ločeno datoteko, ne vdelajte barvne kode na zaslon. Najprej narišite drevo komponent, nato izvozite kodo."
Kopirane predloge
Predloga za generiranje zaslona: "Generiraj [ime zaslona] za [platformo/orodje]. Vsebina: [elementi]. Uporabniška dejanja: [dejanja]. Ločeno generiraj štiri stanja: nalaganje, prazno, napaka, polno. Oblikovalski sistem: [Material 3 / iOS HIG], branje iz žetonov teme. Dostopnost: oznake, kontrast >=4,5:1, ciljni standard na dotik."
Sistemska predloga za temo/oblikovanje: "Izdelajte osrednjo definicijo teme za mojo aplikacijo ([Sestavi temo /strukturo oblikovalskega žetona v SwiftUI]): - Primarna barva [hex], sekundarna [hex], barva napake, barva površine - Lestvica tipografije (naslov, telo, opis) - Lestvica razmika (4,8,16,24) - Standard radija vogala Dodajte podporo za svetlo in temno temo."
Predloga za revizijo dostopnosti: »Preverite to kodo zaslona za dostopnost: 1) Ali obstajajo neoznačeni interaktivni elementi? 2) Ali so kontrastna razmerja ustrezna? 3) Ali so cilji dotika dovolj veliki? 4) Ali so okrasni elementi skriti pred bralnikom zaslona? Predlagajte popravke za vsako težavo. [koda]«
Predloga oblikovanja v kodo: "Opisujem naslednjo zasnovo: [opis zaslona ali posnetek zaslona]. Prevedite to v kodo [Compose/SwiftUI]. Razmik in poravnava naj bosta skladna z zasnovo, vendar dodajte vsa štiri stanja."
Pogoste napake
- Če samo pomislim na celotno situacijo. Pravi uporabnik večino časa vidi zaslon z nalaganjem/napako.
- Vdelava barve in prostora v kodo. Če tema ni osrednja, je doslednost izgubljena in vzdrževanje postane težavno.
- Dostopnost puščamo za konec. Pozneje dodajanje je drago; Brezplačno je, če se zahteva od začetka.
- Prekomerno označevanje. Branje okrasnih elementov tudi moti izkušnjo bralnika zaslona.
- Vdelava besedila v kodo. Kadar je potrebna večjezična podpora, je treba ročno spremeniti vsak zaslon; Besedila naj bodo ločena.
- Pričakujem natančno kopijo s posnetka zaslona. AI design proizvede pribl. Natančnost slikovnih pik se nastavi ročno.
Če povzamem
AI je močan pri izdelavi vmesnikov, vendar zahteva vodenje. Pravilni vrstni red: namen, komponente, štiri stanja (nalaganje/prazno/napaka/polno), sistem oblikovanja, dostopnost, nato koda. O dostopnosti se ni mogoče pogajati in pomeni "prava oznaka", ne "preveč oznak". Zaradi doslednosti preberite barvo in razmik iz osrednje teme, ne vdelajte je v kodo. Močna volja določa vse to že na začetku; Tako je vmesnik pripravljen za realni svet, odobritev trgovine in vse uporabnike.
Aplikacijska naloga
Z uporabo »Predloge za ustvarjanje zaslona« za zaslon z nastavitvami vprašajte AI za kodo Compose ali SwiftUI in zahtevajte vsa štiri stanja. Nato dajte isto kodo preveriti s "Predlogo za preverjanje dostopnosti". Poiščite in popravite vsaj eno izboljšavo dostopnosti (manjkajoča oznaka, nizek kontrast ali majhen cilj na dotik) in zabeležite, katero stanje (nalaganje/prazno/napaka) se bo po vašem mnenju najpogosteje pojavilo v resnični uporabi.
kontrolni seznam
- [ ] V pozivu sem pojasnil namen in komponente zaslona
- [ ] Štiri stanja (nalaganje/prazno/napaka/polno) sem dal ustvariti ločeno
- [ ] Barvo in prostor sem prebral iz osrednje teme, nisem ju vdelal v kodo.
- [ ] Od začetka sem želel oznake za dostopnost in kontrast
- [ ] Preveril sem, da so okrasni elementi skriti pred bralnikom zaslona
- [ ] Besedila sem hranil ločeno, pripravljeno za več jezikov