zisky:
- Schopnost vytvářet robustní kód rozhraní pro Jetpack Compose a SwiftUI v pořadí účelu, komponenty, čtyř stavů (načítání/prázdný/chyba/plný), návrhového systému a dostupnosti
- Schopnost vytvořit rozhraní, které je otevřené všem uživatelům tím, že definuje přístupnost od začátku, se správným označením, dostatečným kontrastem a vhodným dotykem.
- Schopnost vytvářet konzistentní, vícejazyčná rozhraní připravená na světlý/tmavý motiv čtením barev a prostoru z ústředního motivu
Úspěch mobilní aplikace je do značné míry určován jejím uživatelským rozhraním (UI – obrazovky, které uživatel vidí a kterých se dotýká) a uživatelským zážitkem (UX – jak plynulé a příjemné je používání). Uživatel nevidí špatný kód, ale cítí špatné rozhraní v první sekundě. Umělá inteligence hraje při vývoji rozhraní dvě mocné role: na jedné straně generuje návrhový nápad, tok a text (psaní UX); Na druhou stranu tento návrh přímo převádí do kódu funkčního rozhraní. V této lekci se naučíme, jak vytvářet rychlá, přístupná a konzistentní rozhraní s AI, se zaměřením na moderní deklarativní nástroje rozhraní Jetpack Compose (Android) a SwiftUI (iOS). „Deklarativní“ znamená, že namísto vysvětlování krok za krokem, jak nakreslit obrazovku, popíšete „takto má obrazovka v této situaci vypadat“; Nástroj se postará o zbytek.
Od návrhu ke kódu: správné pořadí
Říci AI, aby "udělala krásnou obrazovku" je vágní, protože "krásné" nelze změřit. Dobré generování rozhraní se řídí tímto pořadím:
- Účel a obsah. Co dělá obrazovka, jaké informace zobrazuje, co udělá uživatel?
- Seznam komponent. Části, jako je název, seznam, tlačítko, pole formuláře.
- Situace. Načítání, prázdné (žádná data), chyba, plná — čtyři základní stavy obrazovky.
- Designový systém. Barva, typografie, pravidla mezer; obecně v souladu s pokyny pro Human Interface Guidelines of Material 3 (Android) nebo iOS.
- Přístupnost. Štítky čtečky obrazovky, dostatečný kontrast, velikost dotykového cíle.
- Kód. Když už jsme řekli toto všechno, generace Composable nebo SwiftUI View.
Nejčastěji přeskakovaný krok je třetí. Vývojáři berou v úvahu pouze „plný“ stav; zatímco v reálné aplikaci se uživatel většinou setkává se situacemi „načítání“ a „chyby“. Tisk všech čtyř stavů do AI je tajemstvím robustního rozhraní.
Tip: Na konec výzvy přidejte „generovat načítání, prázdné, chybové a plné samostatně“. Tato jediná věta připraví vaše rozhraní na skutečný svět a výrazně sníží počet chyb ve fázi QA (testování kvality).
Přístupnost je nesmlouvavá
Přístupnost – možnost používat aplikaci uživateli se zrakovým, sluchovým nebo motorickým postižením – je jak etickou odpovědností, tak obchodním a právním očekáváním. AI v případě potřeby vytvoří přístupný kód; Pokud není požadováno, vrátí rozhraní bez značek a s nízkým kontrastem. Tři základní pravidla: dejte každému interaktivnímu prvku smysluplný štítek pro čtečku obrazovky (contentDescription / accessibilityLabel), odpovídající barevný kontrast mezi textem a pozadím (alespoň poměr 4,5:1) a cíl dotyku alespoň 48x48 dp/44x44 bodů. Zeptejte se AI na tyto věci výslovně.
Upozornění: Umělá inteligence může k ozdobné ikoně také přidat dlouhou značku přístupnosti; To zahltí uživatele čtečky obrazovky zbytečným klábosením. Čistě dekorativní prvky by měly být „skryté před přístupností“ (umožňuje je přeskočit čtečka obrazovky). Prohlédněte si vyrobené etikety: nechejte mluvit smysluplné, ať dekorativní mlčí.
Konzistence: designový systém a téma
Profesionální aplikace nepoužívají náhodné barvy a mezery; dodržuje návrhový systém (standardní sada barev, fontů, mezer a komponent). Pokud AI zadáte hodnoty motivu (hlavní barva, sekundární barva, poloměr rohu, typografické měřítko), všechny obrazovky budou konzistentní. Pokud tak neučiníte, každá obrazovka bude používat jiný odstín modré a aplikace bude vypadat nepřehledně. Nejúčinnějším způsobem je nejprve požádat AI, aby vygenerovala soubor tokenů tématu/návrhu, a poté svázat všechny obrazovky s tímto tématem.
Předmět
špatný přístup
Silný přístup
Barva
Ručně obarvte každou obrazovku
Ústřední téma, obrazovky čtou z tématu
situace
Pouze "celá" obrazovka
Načítání/prázdné/chyba/plné čtyři stavy
dostupnost
Přidáno později
Je definováno v nároku od počátku
text
vložené do kódu
Samostatný zdroj, připravený pro více jazyků
tři mini pouzdra
Případ 1 — Uložení prázdného pouzdra. Tým zpravodajské aplikace nechal vytisknout jednotlivé stavy obrazovky AI. Díky obrazovce „stav nečinnosti“ („Zatím nejsou uloženy žádné zprávy“) 70 % účastníků uživatelského testování neopustilo aplikaci na prázdné obrazovce; V předchozí verzi zůstala prázdná obrazovka bílá a uživatelé si mysleli, že je „rozbitá“ a odešli. Malá kopie zvýšila míru uchování.
Případ 2 – Odmítnutí kontrastu. Jeden tým se přihlásil do App Store s obrazovkami s textem ve světle šedé barvě značky. Apple vydal varování ohledně přístupnosti kvůli nízkému kontrastu. Když bylo AI požádáno, aby „zvýšila kontrast textu a pozadí nad 4,5:1“, barvy ztmavly a problém byl vyřešen. Pokud by to bylo požadováno od začátku, nebylo by žádné zpoždění.
Případ 3 — Hluk dekorativních štítků. Tester se zrakovým postižením oznámil, že každá ikona ornamentu („čára“, „tečka“, „stín“) byla nahlas přečtena na obrazovce generované umělou inteligencí, takže obrazovka byla nepoužitelná. Když byly dekorativní prvky skryty před přístupností, zážitek ze čtení obrazovky se stal proměnlivým. Poučení: přístupnost znamená „správné štítky“, nikoli „příliš mnoho štítků“.
Slabá výzva / Silná výzva
Slabá výzva: "Navrhněte obrazovku profilu."
Výkonná výzva: "Vygenerujte obrazovku uživatelského profilu pro iOS/SwiftUI. Obsah: avatar, jméno, e-mail, tlačítko 'Upravit profil', seznam nastavení. Stavy: načítání (kostra), chyba (tlačítko opakování), plné. Design: Nehmotný, odpovídá iOS HIG; systémové barvy, Dynamický typ. Přístupnost: přístupnost Štítek od každého prvku, ozdobné ikony, kód skrytý 4, nedotkněte se cíle min. na obrazovce Nejprve nakreslete strom komponent a poté exportujte kód."
Kopírovatelné šablony
Šablona generování obrazovky: "Vygenerovat [název obrazovky] pro [platformu/nástroj]. Obsah: [prvky]. Akce uživatele: [akce]. Samostatně generovat čtyři stavy: načítání, prázdný, chyba, plný. Systém návrhu: [Material 3 / iOS HIG], čtení z tokenů motivu. Přístupnost: štítky, kontrast >=4,5:1, standard dotykového cíle."
Šablona systému motivu/návrhu:"Vytvořit definici centrálního motivu pro moji aplikaci ([Compose Theme/a design token structure in SwiftUI]):- Primární barva [hex], sekundární [hex], chybová barva, barva povrchu- Měřítko typografie (nadpis, text, popis)- Měřítko mezer (4,8,16,24)- Standardní poloměr rohůPřidat podporu světlého a tmavého motivu."
Šablona auditu přístupnosti: „Zkontrolujte přístupnost tohoto kódu obrazovky: 1) Existují nějaké neoznačené interaktivní prvky?2) Jsou kontrastní poměry dostatečné?3) Jsou dotykové cíle dostatečně velké?4) Jsou dekorativní prvky před čtečkou obrazovky skryté? Navrhněte opravy pro každý problém. [kód]“
Šablona návrhu na kód: "Popisuji následující návrh: [popis obrazovky nebo snímek obrazovky]. Přeložte to do kódu [Compose/SwiftUI]. Udržujte mezery a zarovnání věrné návrhu, ale přidejte všechny čtyři stavy."
Časté chyby
- Přemýšlím o celé situaci. Skutečný uživatel většinou vidí obrazovku načítání/chyby.
- Vkládání barvy a prostoru do kódu. Pokud téma není ústřední, ztrácí se konzistence a údržba je obtížná.
- Přístupnost ponecháváme jako poslední. Přidání později je drahé; Je-li to požadováno od začátku, je to zdarma.
- Přelakování. Čtení dekorativních prvků také narušuje zážitek ze čtečky obrazovky.
- Vkládání textu do kódu. Pokud je vyžadována vícejazyčná podpora, je nutné ručně změnit každou obrazovku; Udržujte texty oddělené.
- Očekává se přesnou kopii ze snímku obrazovky. AI design produkuje cca. Přesnost pixelů se nastavuje ručně.
V souhrnu
Umělá inteligence je výkonná při výrobě rozhraní, ale vyžaduje vedení. Správné pořadí: účel, komponenty, čtyři stavy (načítání/prázdný/chyba/plný), návrhový systém, dostupnost, poté kód. Přístupnost je nesmlouvavá a znamená „správný štítek“, nikoli „příliš mnoho štítků“. Pro konzistenci čtěte barvu a mezery z ústředního motivu, nevkládejte je do kódu. To vše od počátku definuje silná vůle; Rozhraní je tak připraveno pro reálný svět, schválení obchodu a všechny uživatele.
Aplikační úkol
Pomocí „Šablony generování obrazovky“ pro obrazovku nastavení požádejte AI o kód Compose nebo SwiftUI a požádejte o všechny čtyři stavy. Poté nechte stejný kód zkontrolovat pomocí „šablony kontroly přístupnosti“. Najděte a opravte alespoň jedno vylepšení přístupnosti (chybějící štítek, nízký kontrast nebo malý dotykový cíl) a poznamenejte si, který stav (načítání/prázdný/chyba) se podle vás bude při reálném používání objevovat nejčastěji.
kontrolní seznam
- [ ] Ve výzvě jsem objasnil účel a součásti displeje
- [ ] Čtyři stavy (načítání/prázdný/chyba/plné) jsem nechal vygenerovat samostatně
- [ ] Barvu a prostor jsem nechal číst z ústředního motivu, nevložil jsem to do kódu.
- [ ] Chtěl jsem od začátku popisky přístupnosti a kontrast
- [ ] Ověřil jsem, že dekorativní prvky jsou před čtečkou obrazovky skryté
- [ ] Nechal jsem texty oddělené, připravené pro více jazyků