zisky:
- Schopnosť vytvárať robustný kód rozhrania pre Jetpack Compose a SwiftUI v poradí účelu, komponentu, štyroch stavov (načítavanie/prázdne/chyba/plné), dizajnového systému a dostupnosti
- Schopnosť vytvoriť rozhranie, ktoré je otvorené pre všetkých používateľov, definovaním prístupnosti od začiatku, so správnym označením, dostatočným kontrastom a vhodným dotykom.
- Schopnosť vytvárať konzistentné, viacjazyčné rozhrania pripravené na svetlé/tmavé témy čítaním farieb a priestoru z ústrednej témy
Úspech mobilnej aplikácie je do značnej miery určený jej používateľským rozhraním (UI – obrazovky, ktoré používateľ vidí a ktorých sa dotýka) a používateľskou skúsenosťou (UX – aké plynulé a príjemné je používanie). Používateľ nevidí zlý kód, ale cíti zlé rozhranie v prvej sekunde. AI hrá pri vývoji rozhrania dve silné úlohy: na jednej strane generuje nápad na dizajn, tok a text (písanie UX); Na druhej strane tento dizajn priamo prevádza na kód pracovného rozhrania. V tejto lekcii sa naučíme vytvárať rýchle, dostupné a konzistentné rozhrania s AI so zameraním na moderné deklaratívne nástroje rozhrania Jetpack Compose (Android) a SwiftUI (iOS). „Deklaratívne“ znamená, že namiesto vysvetľovania krok za krokom, ako nakresliť obrazovku, opíšete „takto by mala obrazovka vyzerať v tejto situácii“; O zvyšok sa postará nástroj.
Od návrhu po kód: správne poradie
Povedať AI, aby „urobila krásnu obrazovku“ je vágne, pretože „krásny“ sa nedá zmerať. Dobré generovanie rozhrania prebieha v tomto poradí:
- Účel a obsah. Čo robí obrazovka, aké informácie zobrazuje, čo urobí používateľ?
- Zoznam komponentov. Časti ako názov, zoznam, tlačidlo, pole formulára.
- Situácie. Načítava sa, prázdne (bez údajov), chyba, plná — štyri základné stavy obrazovky.
- Dizajnový systém. Farba, typografia, pravidlá medzier; vo všeobecnosti v súlade s pokynmi pre ľudské rozhranie Material 3 (Android) alebo iOS.
- Prístupnosť. Štítky čítačky obrazovky, primeraný kontrast, veľkosť dotykového cieľa.
- kód. Keď už sme povedali toto všetko, generácia Composable alebo SwiftUI View.
Najčastejšie vynechávaný krok je tretí. Vývojári berú do úvahy iba „plný“ stav; zatiaľ čo v reálnej aplikácii sa používateľ väčšinou stretáva so situáciami „načítavania“ a „chyby“. Tlač všetkých štyroch stavov na AI je tajomstvom robustného rozhrania.
Tip: Na koniec výzvy pridajte „generovať načítanie, prázdne, chybu a plnú samostatne“. Táto jediná veta pripraví vaše rozhranie na reálny svet a výrazne zníži počet chýb vo fáze QA (testovanie kvality).
Bezbariérovosť sa nedá dohodnúť
Prístupnosť – možnosť používať aplikáciu používateľmi so zrakovým, sluchovým alebo motorickým postihnutím – je etickou zodpovednosťou a zároveň obchodným a právnym očakávaním. AI v prípade potreby vytvorí prístupný kód; Ak to nie je potrebné, vráti rozhranie bez značiek a s nízkym kontrastom. Tri základné pravidlá: priraďte každému interaktívnemu prvku zmysluplný štítok pre čítačku obrazovky (contentDescription / accessibilityLabel), primeraný farebný kontrast medzi textom a pozadím (aspoň pomer 4,5:1) a cieľ dotyku aspoň 48x48 dp/44x44 bodov. Opýtajte sa AI na tieto veci výslovne.
Upozornenie: AI môže tiež pridať dlhú značku prístupnosti k dekoratívnej ikone; Používateľa čítačky obrazovky to zahltí zbytočným štebotaním. Čisto dekoratívne prvky by mali byť „skryté pred prístupnosťou“ (preskočiť čítačka obrazovky). Prezrite si vyrobené štítky: nechajte zmysluplné hovoriť, dekoračné nechajte mlčať.
Konzistencia: dizajnový systém a téma
Profesionálne aplikácie nepoužívajú náhodné farby a medzery; sleduje systém dizajnu (štandardná sada farieb, fontov, medzier a komponentov). Ak AI zadáte hodnoty témy (hlavná farba, sekundárna farba, polomer rohu, mierka typografie), všetky obrazovky budú konzistentné. Ak to neurobíte, každá obrazovka bude používať iný odtieň modrej a aplikácia bude vyzerať neprehľadne. Najefektívnejším spôsobom je najprv požiadať AI, aby vygenerovala súbor tokenov témy/návrhu, a potom naviazať všetky obrazovky na túto tému.
Predmet
zlý prístup
Silný prístup
Farba
Manuálne farebné kódovanie každej obrazovky
Ústredná téma, obrazovky čítané z témy
situácie
Iba "celá" obrazovka
Načítavanie/prázdne/chyba/plné štyri stavy
prístupnosť
Pridané neskôr
Je to definované v žalobe od začiatku
text
vložené do kódu
Samostatný zdroj, pripravený na viac jazykov
tri mini prípady
Prípad 1 – prázdny obal uložený. Tím spravodajskej aplikácie mal jednotlivé stavy obrazovky vytlačiť AI. Vďaka obrazovke „stav nečinnosti“ („Zatiaľ nie sú uložené žiadne správy“) 70 % účastníkov používateľského testovania nenechalo aplikáciu na prázdnej obrazovke; V predchádzajúcej verzii zostala prázdna obrazovka biela a používatelia si mysleli, že je „rozbitá“ a odišli. Malá kópia zvýšila mieru uchovávania.
Prípad 2 – Odmietnutie kontrastu. Jeden tím sa prihlásil do obchodu App Store s obrazovkami s textom v svetlosivej farbe značky. Apple vydal varovanie z dôvodov dostupnosti kvôli nízkemu kontrastu. Keď bolo AI povedené, aby „zvýšila kontrast textu a pozadia nad 4,5:1“, farby stmavli a problém bol vyriešený. Ak by sa o to žiadalo od začiatku, k zdržaniu by nedošlo.
Prípad 3 – Hluk dekoratívnej etikety. Tester so zrakovým postihnutím oznámil, že každá ikona ornamentu („čiara“, „bodka“, „tieň“) bola nahlas prečítaná na obrazovke vytvorenej AI, takže obrazovka bola nepoužiteľná. Zážitok z čítačky obrazovky sa stal plynulým, keď boli dekoratívne prvky skryté pred prístupnosťou. Poučenie: dostupnosť znamená „správne štítky“, nie „príliš veľa štítkov“.
Slabá výzva / Silná výzva
Slabá výzva: „Navrhnite obrazovku profilu.“
Výkonná výzva: "Vygenerujte obrazovku používateľského profilu pre iOS/SwiftUI. Obsah: avatar, meno, e-mail, tlačidlo 'Upraviť profil', zoznam nastavení. Stavy: načítavanie (kostra), chyba (tlačidlo zopakovať), plné. Dizajn: Nehmotný, v súlade s iOS HIG; systémové farby, Dynamický typ. Dostupnosť: prístupnosť Označenie každého prvku, dekoratívne ikony, kód skrytý 4, nedotknite sa cieľových hodnôt min. Najprv nakreslite strom komponentov a potom exportujte kód."
Kopírovateľné šablóny
Šablóna generovania obrazovky: "Generovať [názov obrazovky] pre [platformu/nástroj]. Obsah: [prvky]. Akcie používateľa: [akcie]. Samostatne generovať štyri stavy: načítavanie, prázdny, chyba, plný. Systém dizajnu: [Material 3 / iOS HIG], čítanie z tokenov tém. Prístupnosť: štítky, kontrast >=4,5:1, štandard dotykového cieľa."
Šablóna systému motívu/návrhu:"Vytvoriť definíciu centrálnej témy pre moju aplikáciu ([Compose Theme/a design token structure in SwiftUI]):- Primárna farba [hex], sekundárna [hex], farba chyby, farba povrchu- Mierka typografie (názov, text, popis)- Mierka medzier (4,8,16,24)- Štandardná polomer rohov Pridať podporu svetlej a tmavej témy.“
Šablóna auditu zjednodušenia ovládania: „Skontrolujte dostupnosť tohto kódu obrazovky: 1) Existujú nejaké neoznačené interaktívne prvky? 2) Sú kontrastné pomery primerané? 3) Sú dotykové oblasti dostatočne veľké? 4) Sú dekoratívne prvky skryté pred čítačkou obrazovky? Navrhnite opravy pre každý problém. [kód]“
Šablóna návrhu na kód: „Popisujem nasledujúci návrh: [popis obrazovky alebo snímka obrazovky]. Preložte to do kódu [Compose/SwiftUI]. Udržujte medzery a zarovnanie v súlade s návrhom, ale pridajte všetky štyri stavy.“
Časté chyby
- Len premýšľam o úplnej situácii. Väčšinu času skutočný používateľ vidí obrazovku načítania/chyby.
- Vloženie farby a priestoru do kódu. Ak téma nie je ústredná, stráca sa konzistentnosť a údržba sa stáva ťažšou.
- Bezbariérovosť ponechávame na koniec. Pridanie neskôr je drahé; Na požiadanie od začiatku je to bezplatné.
- Prelakovanie. Čítanie dekoratívnych prvkov tiež narúša zážitok z čítačky obrazovky.
- Vkladanie textu do kódu. Keď je potrebná viacjazyčná podpora, je potrebné manuálne zmeniť každú obrazovku; Udržujte texty oddelené.
- Očakáva sa presná kópia zo snímky obrazovky. AI dizajn produkuje cca. Presnosť pixelov sa nastavuje manuálne.
V súhrne
Umelá inteligencia je výkonná pri vytváraní rozhraní, ale vyžaduje si vedenie. Správne poradie: účel, komponenty, štyri stavy (načítavanie/prázdne/chyba/plné), dizajnový systém, dostupnosť, potom kód. O dostupnosti sa nedá vyjednávať a znamená „správny štítok“, nie „príliš veľa štítkov“. Kvôli konzistentnosti čítajte farbu a medzery z ústrednej témy, nevkladajte ju do kódu. Pevná vôľa toto všetko definuje od začiatku; Rozhranie je teda pripravené na reálny svet, schválenie obchodu a všetkých používateľov.
Aplikačná úloha
Pomocou „šablóny generovania obrazovky“ pre obrazovku nastavení požiadajte AI o kód Compose alebo SwiftUI a požiadajte o všetky štyri stavy. Potom nechajte ten istý kód skontrolovať pomocou „šablóny kontroly prístupnosti“. Nájdite a opravte aspoň jedno vylepšenie prístupnosti (chýbajúci štítok, nízky kontrast alebo malý dotykový terčík) a poznačte si, ktorý stav (načítavanie/prázdny/chyba) sa podľa vás pri skutočnom používaní zobrazuje najčastejšie.
kontrolný zoznam
- [ ] Vo výzve som objasnil účel a komponenty displeja
- [ ] Štyri stavy (načítanie/prázdne/chyba/plné) som si nechal vygenerovať samostatne
- [ ] Farbu a priestor som načítal z ústrednej témy, nevložil som to do kódu.
- [ ] Od začiatku som chcel označenia prístupnosti a kontrast
- [ ] Overil som si, že dekoratívne prvky sú pred čítačkou obrazovky skryté
- [ ] Texty som držal oddelene, pripravené pre viacero jazykov