Kasu:
- Võimalus luua Jetpack Compose'i ja SwiftUI jaoks tugeva liidese koodi eesmärgi, komponendi, nelja oleku (laadimine / tühi / viga / täis), disainisüsteemi ja juurdepääsetavuse järjekorras
- Võimalus luua liides, mis on avatud kõigile kasutajatele, määratledes algusest peale juurdepääsetavuse, õige märgistuse, piisava kontrasti ja sobiva puudutusega.
- Võimalus luua ühtseid, mitmekeelseid ja heledate/tumedate teemade jaoks valmis liideseid, lugedes kesksest teemast värvi ja ruumi
Mobiilirakenduse edu määrab suuresti selle kasutajaliides (UI — ekraanid, mida kasutaja näeb ja puudutab) ja kasutuskogemus (UX — kui sujuv ja nauditav on seda kasutada). Kasutaja ei näe halba koodi, kuid tunneb halba liidest juba esimesel sekundil. AI mängib liidese arendamisel kaht võimsat rolli: ühelt poolt genereerib see disainiideed, voogu ja teksti (UX kirjutamine); Teisest küljest teisendab see selle disaini otse tööliidese koodiks. Selles õppetükis õpime tootma kiireid, juurdepääsetavaid ja järjepidevaid liideseid AI-ga, keskendudes kaasaegsetele deklaratiivse liidese tööriistadele Jetpack Compose (Android) ja SwiftUI (iOS). "Deklaratiivne" tähendab, et selle asemel, et selgitada samm-sammult, kuidas ekraani joonistada, kirjeldate "nii peaks ekraan antud olukorras välja nägema"; Tööriist teeb ülejäänu.
Disainist koodini: õige järjekord
AI käsk "teha ilus ekraan" on ebamäärane, sest "ilusat" ei saa mõõta. Hea liidese loomine toimub järgmises järjekorras:
- Eesmärk ja sisu. Mida ekraan teeb, millist teavet see näitab, mida kasutaja teeb?
- Komponentide loend. Osad, nagu pealkiri, loend, nupp, vormiväli.
- Olukorrad. Laadimine, tühi (andmed puuduvad), viga, täis – neli põhiekraani olekut.
- Disainisüsteem. Värv, tüpograafia, vahereeglid; üldiselt järgides materjali 3 (Android) või iOS-i inimliidese juhiseid.
- Juurdepääsetavus. Ekraanilugeja sildid, piisav kontrast, puutemärgi suurus.
- Kood. Seda kõike öeldes Composable või SwiftUI View põlvkond.
Kõige sagedamini vahele jäetud samm on kolmas. Arendajad arvestavad ainult "täis" olekuga; kusjuures reaalses rakenduses kohtab kasutaja enamasti "laadimise" ja "tõrke" olukordi. Kõigi nelja oleku printimine tehisintellektile on tugeva liidese saladus.
Näpunäide. Lisage viiba lõppu "loo laadimine, tühi, viga ja täis eraldi". See üksainus lause muudab teie liidese reaalseks kasutamiseks valmis ja vähendab oluliselt vigade arvu QA (kvaliteedi testimise) etapis.
Juurdepääsetavus ei ole läbiräägitav
Juurdepääsetavus – nägemis-, kuulmis- või liikumispuudega kasutajate võimalus rakendust kasutada – on nii eetiline vastutus kui ka pood ja juriidiline ootus. AI toodab soovi korral juurdepääsetavat koodi; Tagastab sildivaba madala kontrastsusega liidese, kui seda ei soovita. Kolm rusikareeglit: andke igale interaktiivsele elemendile ekraanilugeja jaoks tähendusrikas silt (contentDescription / AccessibilityLabel), piisav värvikontrast teksti ja tausta vahel (suhe vähemalt 4,5:1) ja puutemärk vähemalt 48x48 dp/44x44 pt. Küsige tehisintellektilt neid asju selgesõnaliselt.
Ettevaatust: AI võib dekoratiivikoonile lisada ka pika juurdepääsetavuse sildi; See uputab ekraanilugeja kasutaja tarbetu lobisemisega. Puhtalt dekoratiivsed elemendid peaksid olema "juurdepääsetavuse eest varjatud" (ekraanilugejal on lubatud need vahele jätta). Vaadake toodetud sildid üle: laske sisukal rääkida, dekoratiivil vaikige.
Järjepidevus: kujundussüsteem ja teema
Professionaalsed rakendused ei kasuta juhuslikke värve ja vahesid; järgib kujundussüsteemi (standardsete värvide, fondide, vahekauguste ja komponentide komplekt). Kui annate tehisintellektile oma teema väärtused (põhivärv, teisene värv, nurga raadius, tüpograafia skaala), on kõik ekraanid ühtsed. Kui te seda ei tee, kasutab iga ekraan erinevat sinist tooni ja rakendus näeb segane. Kõige tõhusam viis on esmalt paluda tehisintellektil luua teema/kujundusmärke fail, seejärel siduda kõik ekraanid selle teemaga.
Teema
halb lähenemine
Tugev lähenemine
Värv
Iga ekraani värvikood käsitsi
Keskne teema, ekraanid loetakse teemast
olukordi
Ainult "täisekraan".
Laadimine/tühi/viga/neli olekut täis
ligipääsetavus
Lisatud hiljem
Nõudes on see algusest peale määratletud
tekst
koodi sisse manustatud
Eraldi allikas, mitmes keeles valmis
kolm minikarpi
Juhtum 1 – tühi juhtum on salvestatud. Uudisterakenduse meeskonnal oli tehisintellekti printimise ekraani olekud. Tänu ooteoleku ekraanile (“Uudised pole veel salvestatud”) ei jätnud 70% kasutajatestis osalejatest rakendust tühjale ekraanile; Eelmises versioonis jäi tühi ekraan valgeks ja kasutajad arvasid, et see on "katki" ja lahkus. Väike koopia suurendas säilitusmäära.
Juhtum 2 – kontrasti tagasilükkamine. Üks meeskond kandideeris App Store'i ekraanidega, mille tekst on helehalli värvi, brändi värvi. Apple andis madala kontrasti tõttu juurdepääsetavuse põhjustel hoiatuse. Kui tehisintellektil kästi "suurendada teksti-tausta kontrasti üle 4,5:1", muutusid värvid tumedamaks ja probleem lahenes. Kui seda oleks algusest peale taotletud, poleks viivitamist olnud.
Juhtum 3 – dekoratiivsildi müra. Nägemispuudega tester teatas, et tehisintellekti loodud ekraanil loeti ette iga ornamentikoon (joon, punkt, vari), mis muudab ekraani kasutuskõlbmatuks. Ekraanilugeja kogemus muutus sujuvaks, kui dekoratiivsed elemendid olid juurdepääsetavuse eest varjatud. Õppetund: juurdepääsetavus tähendab "õigeid silte", mitte "liiga palju silte".
Nõrk viip / Tugev viip
Nõrk viip: "Kujunda profiiliekraan."
Võimas viip: "Loo iOS/SwiftUI kasutajaprofiili ekraan. Sisu: avatar, nimi, e-post, nupp "Muuda profiili", seadete loend. Olekud: laadimine (skelett), tõrge (nupp uuesti proovimine), täis. Kujundus: mittematerjal, vastab iOS-i HIG-ile; süsteemivärvid, dünaamiline ikoon. Juurdepääsetavus: juurdepääsetavus: juurdepääsetavuse miniväärtused4 peidetud elemendist, 4-st. eraldi faili, ärge manustage ekraanile värvikoodi. Esmalt joonistage komponendipuu ja seejärel eksportige kood.
Kopeeritavad mallid
Ekraani genereerimise mall: "Loo [platvormi/tööriista] jaoks [ekraaninimi]. Sisu: [elemendid]. Kasutaja toimingud: [toimingud]. Genereerige neli olekut eraldi: laadimine, tühi, viga, täis. Kujundussüsteem: [Material 3 / iOS HIG], loe teemamärkidest. Juurdepääsetavus: sildid, kontrast >=4,5:1, puutestandard."
Teema/kujundussüsteemi mall: "Looge minu rakenduse jaoks keskne teema definitsioon ([Koosta teema / SwiftUI-s disainimärgi struktuur]):- põhivärv [kuueteistkümnend], teisene [kuueteistkümnend], veavärv, pinnavärv- tüpograafia skaala (pealkiri, keha, kirjeldus)- vaheskaala (standardne reklaami 4,8,16,24)-tuginurk."
Juurdepääsetavuse auditi mall: "Juurdepääsetavuse kontrollimiseks kontrollige seda ekraanikoodi:1) Kas on märgendita interaktiivseid elemente?2) Kas kontrastsuse suhe on piisav?3) Kas puutetundlikud sihtmärgid on piisavalt suured?4) Kas dekoratiivsed elemendid on ekraanilugeja eest peidetud? Soovitage iga probleemi jaoks parandusi. [kood]"
Kujundus koodi malliks: "Kirjeldan järgmist kujundust: [ekraani kirjeldus või ekraanipilt]. Tõlgi see [Compose/SwiftUI] koodiks. Jätke tühikud ja joondus kujundusele vastavad, kuid lisage kõik neli olekut."
Levinud vead
- Lihtsalt mõeldes kogu olukorrale. Enamasti näeb tegelik kasutaja laadimis-/tõrkeekraani.
- Värvi ja ruumi manustamine koodi. Kui teema pole kesksel kohal, kaob järjepidevus ja hooldus muutub keeruliseks.
- Juurdepääsetavuse jätmine viimaseks. Selle hilisem lisamine on kallis; See on algusest peale taotlemisel tasuta.
- Ülemärgistamine. Dekoratiivsete elementide lugemine häirib ka ekraanilugeja kasutuskogemust.
- Teksti manustamine koodi. Kui on vaja mitmekeelset tuge, tuleb iga ekraani käsitsi muuta; Hoidke tekstid eraldi.
- Ekraanipildilt oodatakse täpset koopiat. AI disain toodab u. Pikslite täpsus määratakse käsitsi.
Kokkuvõttes
AI on liidese tootmisel võimas, kuid see nõuab juhiseid. Õige järjekord: eesmärk, komponendid, neli olekut (laadimine/tühi/viga/täis), disainisüsteem, juurdepääsetavus, seejärel kood. Juurdepääsetavus ei ole läbiräägitav ja tähendab "õiget silti", mitte "liiga palju silte". Järjepidevuse huvides lugege värvid ja vahed kesksest teemast, ärge manustage seda koodi. Tugev tahe määratleb selle kõik algusest peale; Seega on liides valmis reaalseks maailmaks, poe heakskiitmiseks ja kõigile kasutajatele.
Rakenduse ülesanne
Kasutades seadete ekraani jaoks ekraani genereerimise malli, küsige AI-lt koostamis- või SwiftUI-koodi ja taotlege kõiki nelja olekut. Seejärel laske sama koodi kontrollida "juurdepääsetavuse kontrolli malliga". Otsige üles ja parandage vähemalt üks juurdepääsetavuse täiustus (puuduv silt, madal kontrastsus või väike puutemärk) ning märkige üles, milline olek (laadimine/tühi/viga) teie arvates tegelikus kasutuses kõige sagedamini ilmub.
kontrollnimekiri
- [ ] Tegin viipas selgeks kuva eesmärgi ja komponendid
- [ ] Lasin neli olekut (laadimine/tühi/viga/täis) eraldi genereerida
- [ ] Värvi ja ruumi lasin lugeda kesksest teemast, koodi ei põiminud.
- [ ] Tahtsin algusest peale juurdepääsetavuse silte ja kontrasti
- [ ] Kontrollisin, et dekoratiivsed elemendid oleksid ekraanilugeja eest peidetud
- [ ] Hoidsin tekste eraldi, olin valmis mitme keele jaoks