Pelnas:
- Galimybė sukurti patikimą „Jetpack Compose“ ir „SwiftUI“ sąsajos kodą pagal paskirtį, komponentą, keturias būsenas (įkeliama / tuščia / klaida / pilna), projektavimo sistemą ir prieinamumą
- Galimybė sukurti sąsają, kuri būtų atvira visiems vartotojams, apibrėžiant prieinamumą nuo pat pradžių, su teisingu ženklinimu, pakankamu kontrastu ir tinkamu prisilietimu.
- Galimybė kurti nuoseklias, keliomis kalbomis ir šviesioms/tamsioms temoms paruoštas sąsajas, nuskaitant spalvas ir erdvę iš pagrindinės temos
Mobiliosios programėlės sėkmę daugiausia lemia jos vartotojo sąsaja (UI – ekranai, kuriuos vartotojas mato ir paliečia) ir vartotojo patirtis (UX – kaip sklandžiai ir maloniai ją naudoti). Vartotojas nemato blogo kodo, bet pajunta blogą sąsają per pirmąją sekundę. AI vaidina du galingus sąsajos kūrimo vaidmenis: viena vertus, jis generuoja dizaino idėją, srautą ir tekstą (UX rašymas); Kita vertus, jis tiesiogiai konvertuoja šį dizainą į darbo sąsajos kodą. Šiame skyriuje išmoksime kurti greitas, prieinamas ir nuoseklias sąsajas su AI, daugiausia dėmesio skirdami šiuolaikiniams deklaratyviosios sąsajos įrankiams Jetpack Compose (Android) ir SwiftUI (iOS). „Deklaratyvus“ reiškia, kad užuot žingsnis po žingsnio paaiškinę, kaip piešti ekraną, aprašote „taip ekranas turi atrodyti šioje situacijoje“; Visa kita padarys įrankis.
Nuo dizaino iki kodo: teisinga tvarka
Pasakymas AI „padaryti gražų ekraną“ yra neaiškus, nes „gražus“ negalima išmatuoti. Gera sąsaja sukuriama tokia tvarka:
- Tikslas ir turinys. Ką daro ekranas, kokią informaciją jis rodo, ką veiks vartotojas?
- Komponentų sąrašas. Tokios dalys kaip pavadinimas, sąrašas, mygtukas, formos laukas.
- Situacijos. Įkeliama, tuščia (nėra duomenų), klaida, pilna – keturios pagrindinės ekrano būsenos.
- Projektavimo sistema. Spalvos, tipografija, tarpų taisyklės; paprastai atitinkantys „Material 3“ („Android“) arba „iOS“ žmogaus sąsajos gaires.
- Prieinamumas. Ekrano skaitytuvo etiketės, tinkamas kontrastas, jutiklinio taikinio dydis.
- Kodas. Visa tai pasakius, Composable arba SwiftUI View kartos.
Dažniausiai praleidžiamas žingsnis yra trečiasis. Kūrėjai atsižvelgia tik į „pilną“ būseną; tuo tarpu realioje programoje vartotojas dažniausiai susiduria su „pakrovimo“ ir „klaidų“ situacijomis. Visų keturių būsenų spausdinimas AI yra tvirtos sąsajos paslaptis.
Patarimas: raginimo pabaigoje pridėkite „generuoti įkėlimą, tuščią, klaidą ir pilną atskirai“. Šis vienas sakinys paruošia jūsų sąsają realiam pasauliui ir žymiai sumažina klaidų skaičių kokybės užtikrinimo (kokybės tikrinimo) etape.
Prieinamumas yra nediskutuojamas
Prieinamumas – galimybė naudoti programą regos, klausos ar motorikos negalią turintiems naudotojams – yra ir etinė atsakomybė, ir parduotuvė bei teisiniai lūkesčiai. AI sukuria prieinamą kodą, jei pageidaujama; Jei nenorima, pateikiama bežymė, mažo kontrasto sąsaja. Trys nykščio taisyklės: kiekvienam interaktyviam elementui suteikite prasmingą ekrano skaitytuvui skirtą etiketę (contentDescription / AccessibilityLabel), tinkamą spalvų kontrastą tarp teksto ir fono (bent 4,5:1 santykis) ir bent 48x48 dp / 44x44 tšk. liečiamą taikinį. Aiškiai paklauskite AI šių dalykų.
Įspėjimas: AI taip pat gali pridėti ilgą pritaikymo neįgaliesiems žymą prie dekoratyvinės piktogramos; Tai užvaldo ekrano skaitytuvo vartotoją nereikalingu plepėjimu. Grynai dekoratyviniai elementai turėtų būti „paslėpti nuo prieinamumo“ (leista juos praleisti ekrano skaitytuvui). Peržiūrėkite pagamintas etiketes: tegul kalba prasmingas, tegul tyli dekoratyvumas.
Nuoseklumas: dizaino sistema ir tema
Profesionaliose programose nenaudojamos atsitiktinės spalvos ir tarpai; vadovaujasi projektavimo sistema (standartinis spalvų, šriftų, tarpų ir komponentų rinkinys). Jei AI nurodysite temos reikšmes (pagrindinę spalvą, antrinę spalvą, kampo spindulį, tipografijos skalę), visi ekranai bus vienodi. Jei to nepadarysite, kiekviename ekrane bus naudojamas skirtingas mėlynas atspalvis ir programa atrodys netvarkinga. Veiksmingiausias būdas yra pirmiausia paprašyti AI sugeneruoti temos / dizaino žetonų failą, tada visus ekranus susieti su ta tema.
Tema
prastas požiūris
Stiprus požiūris
Spalva
Rankiniu būdu įrašykite kiekvieno ekrano spalvų kodą
Centrinė tema, ekranai skaitomi iš temos
situacijos
Tik „visas“ ekranas
Įkeliama / tuščia / klaida / visos keturios būsenos
prieinamumas
Pridėta vėliau
Jis apibrėžiamas ieškinyje nuo pat pradžių
tekstą
įterptas į kodą
Atskiras šaltinis, paruoštas kelioms kalboms
trys mini dėklai
1 atvejis – išsaugotas tuščias dėklas. Naujienų programos komanda turėjo AI spausdinimo atskiras ekrano būsenas. Ekrano „neaktyvios būsenos“ dėka („Jokių naujienų dar neišsaugota“) 70% naudotojų testavimo dalyvių nepaliko programėlės tuščiame ekrane; Ankstesnėje versijoje tuščias ekranas liko baltas, o vartotojai manė, kad jis „sugedo“ ir paliko. Maža kopija padidino saugojimo rodiklį.
2 atvejis – kontrasto atmetimas. Viena komanda kreipėsi į App Store su ekranais su šviesiai pilkos spalvos tekstu. „Apple“ paskelbė įspėjimą dėl prieinamumo priežasčių dėl mažo kontrasto. Kai AI buvo liepta „padidinti teksto ir fono kontrastą virš 4,5:1“, spalvos tapo tamsesnės ir problema buvo išspręsta. Jei to būtų buvę prašoma nuo pat pradžių, nebūtų buvę delsiama.
3 atvejis – dekoratyvinės etiketės triukšmas. Regėjimo negalią turintis testeris pranešė, kad AI sukurtame ekrane garsiai buvo perskaityta kiekviena ornamento piktograma („linija“, „taškas“, „šešėlis“), todėl ekranas tapo netinkamas naudoti. Ekrano skaitytuvo patirtis tapo sklandi, kai dekoratyviniai elementai buvo paslėpti nuo pasiekiamumo. Pamoka: prieinamumas reiškia „tinkamas žymas“, o ne „per daug žymų“.
Silpnas raginimas / Stiprus raginimas
Silpnas raginimas: „Sukurkite profilio ekraną“.
Galingas raginimas: "Sukurkite vartotojo profilio ekraną, skirtą iOS / SwiftUI. Turinys: pseudoportretas, vardas, el. paštas, mygtukas "Redaguoti profilį", nustatymų sąrašas. Būsenos: įkeliama (skeletas), klaida (mygtukas bandyti dar kartą), pilnas. Dizainas: nematerialus, atitinkantis iOS HIG; sistemos spalvos, dinaminis tipas. Prieinamumas: skaitymas. atskirą failą, nedėkite spalvų kodo ekrane. Pirmiausia nubrėžkite komponentų medį, tada eksportuokite kodą.
Kopijuojami šablonai
Ekrano generavimo šablonas: "Generuoti [ekrano pavadinimą] [platformai/įrankiui]. Turinys: [elementai]. Vartotojo veiksmai: [veiksmai]. Atskirai generuokite keturias būsenas: įkeliama, tuščia, klaida, pilna. Dizaino sistema: [Medžiaga 3 / iOS HIG], skaitoma iš temos prieigos raktų. Prieinamumas: etiketės, kontrastas >=4,5:1, jutiklinis standartas.
Temos / dizaino sistemos šablonas: „Sukurkite pagrindinę mano programos temos apibrėžimą ([Sukurti temą / dizaino prieigos rakto struktūrą SwiftUI]):- Pirminė spalva [šešioliktainis], antrinė [šešioliktainė], klaidos spalva, paviršiaus spalva- Tipografijos skalė (pavadinimas, turinys, aprašas)- Tarpų skalė (4,8,16,24 standartinis skelbimo palaikymas).
Prieinamumo audito šablonas: „Patikrinkite šį ekrano kodą, kad sužinotumėte pritaikymą neįgaliesiems: 1) Ar yra nepažymėtų interaktyvių elementų? 2) Ar tinkamas kontrasto santykis? 3) Ar pakankamai dideli liečiami objektai? 4) Ar dekoratyviniai elementai paslėpti nuo ekrano skaitytuvo? Siūlykite kiekvienos problemos pataisymus. [kodas]“
Dizaino į kodą šabloną: „Aprašau šį dizainą: [ekrano aprašas arba ekrano kopija]. Išverskite tai į [Compose/SwiftUI] kodą. Laikykite tarpus ir lygiavimą pagal dizainą, bet pridėkite visas keturias būsenas.
Dažnos klaidos
- Tiesiog galvoju apie visą situaciją. Didžiąją laiko dalį tikrasis vartotojas mato įkėlimo/klaidos ekraną.
- Spalvos ir vietos įterpimas į kodą. Jei tema nėra pagrindinė, prarandamas nuoseklumas ir sunku prižiūrėti.
- Prieinamumas paliekamas paskutiniam. Pridėti vėliau yra brangu; Tai nemokama, jei prašoma nuo pat pradžių.
- Perženklinimas. Dekoratyvinių elementų skaitymas taip pat sutrikdo ekrano skaitytuvo patirtį.
- Teksto įterpimas į kodą. Kai reikalingas daugiakalbis palaikymas, kiekvieną ekraną reikia keisti rankiniu būdu; Laikykite tekstus atskirai.
- Tikimasi tikslios kopijos iš ekrano kopijos. AI dizainas sukuria apytiksliai. Pikselių tikslumas nustatomas rankiniu būdu.
Apibendrinant
AI yra galingas sąsajos gamyboje, tačiau tam reikia nurodymų. Teisinga tvarka: paskirtis, komponentai, keturios būsenos (įkeliama / tuščia / klaida / pilna), projektavimo sistema, prieinamumas, tada kodas. Prieinamumas yra nediskutuojamas ir reiškia „tinkama etiketė“, o ne „per daug etikečių“. Dėl nuoseklumo perskaitykite spalvą ir tarpus iš pagrindinės temos, neįterpkite jos į kodą. Stipri valia visa tai apibrėžia nuo pat pradžių; Taigi sąsaja yra paruošta realiam pasauliui, parduotuvės patvirtinimui ir visiems vartotojams.
Taikymo užduotis
Naudodami nustatymų ekrano ekrano generavimo šabloną, paprašykite AI įvesti Compose arba SwiftUI kodą ir paprašykite visų keturių būsenų. Tada patikrinkite tą patį kodą naudodami „Prieinamumo tikrinimo šabloną“. Raskite ir pataisykite bent vieną pritaikymo neįgaliesiems patobulinimą (trūksta etiketės, mažas kontrastas arba mažas jutiklinis taikinys) ir atkreipkite dėmesį, kuri būsena (įkeliama / tuščia / klaida), jūsų manymu, bus dažniausiai rodoma realiai naudojant.
kontrolinis sąrašas
- [ ] Raginame aiškiai nurodžiau ekrano paskirtį ir komponentus
- [ ] Keturias būsenas (įkeliama / tuščia / klaida / pilna) sugeneravau atskirai
- [ ] Spalvą ir erdvę nuskaitau iš centrinės temos, neįdėjau jos į kodą.
- [ ] Nuo pat pradžių norėjau pritaikymo neįgaliesiems etikečių ir kontrasto
- [ ] Patikrinau, kad dekoratyviniai elementai paslėpti nuo ekrano skaitytuvo
- [ ] Tekstus laikiau atskirai, paruošiau kelioms kalboms