Nyereség:
- Robusztus interfészkód előállítása a Jetpack Compose és a SwiftUI számára a cél, az összetevő, a négy állapot (betöltés/üres/hiba/teli), a tervezési rendszer és a hozzáférhetőség sorrendjében
- Lehetőség minden felhasználó számára nyitott felület létrehozására az akadálymentesítés kezdettől fogva történő meghatározásával, megfelelő címkézéssel, megfelelő kontraszttal és megfelelő érintéssel.
- Konzisztens, többnyelvű és világos/sötét témákra kész felületek létrehozása a színek és a tér kiolvasásával a központi témából
A mobilalkalmazások sikerét nagymértékben meghatározza a felhasználói felület (UI – a képernyők, amelyeket a felhasználó lát és érint) és a felhasználói élmény (UX – mennyire gördülékeny és élvezetes a használata). A felhasználó nem látja a rossz kódot, hanem az első másodpercben érzi a rossz felületet. Az AI két erőteljes szerepet tölt be az interfészfejlesztésben: egyrészt tervezési ötletet, áramlást és szöveget generál (UX írás); Másrészt ezt a tervet közvetlenül működő interfész kóddá alakítja. Ebben az egységben megtanuljuk, hogyan készítsünk gyors, hozzáférhető és konzisztens interfészt AI-val, a Jetpack Compose (Android) és a SwiftUI (iOS) modern deklaratív interfész eszközeire összpontosítva. A „deklaratív” azt jelenti, hogy ahelyett, hogy lépésről lépésre elmagyarázná, hogyan kell megrajzolni a képernyőt, inkább leírja, hogy „ilyennek kell kinéznie a képernyőnek ebben a helyzetben”; A többit az eszköz elvégzi.
A tervezéstől a kódig: a megfelelő sorrend
A mesterséges intelligencia „készíts gyönyörű képernyőt” kifejezése homályos, mert a „szép” nem mérhető. A jó interfész létrehozása a következő sorrendben történik:
- Cél és tartalom. Mit csinál a képernyő, milyen információkat jelenít meg, mit fog tenni a felhasználó?
- Alkatrészlista. Olyan részek, mint a cím, lista, gomb, űrlapmező.
- Helyzetek. Betöltés, üres (nincs adat), hiba, tele – a képernyő négy alapállapota.
- Tervezési rendszer. Szín, tipográfia, térköz szabályok; általában megfelel a Material 3 (Android) vagy iOS Human Interface Guidelines előírásainak.
- Megközelíthetőség. Képernyőolvasó címkék, megfelelő kontraszt, érintési célméret.
- Kód. Mindezek után Composable vagy SwiftUI View generáció.
A leggyakrabban kihagyott lépés a harmadik. A fejlesztők csak a "teljes" állapotot veszik figyelembe; míg a valós alkalmazásban a felhasználó többnyire "betöltési" és "hiba" helyzetekkel találkozik. A robusztus interfész titka, hogy mind a négy állapotot kinyomtatja az AI-ba.
Tipp: Adja hozzá a „betöltés, üres, hiba és tele külön generálása” kifejezést a prompt végén. Ez az egyetlen mondat felkészíti a felületet a valós világra, és jelentősen csökkenti a hibák számát a minőségellenőrzési fázisban.
A megközelíthetőség nem alku tárgya
Az akadálymentesítés – az alkalmazás látás-, hallás- vagy mozgássérült felhasználók általi használatának lehetősége – egyszerre etikai felelősség, valamint bolti és jogi elvárás. Az AI elérhető kódot állít elő, ha szükséges; Ha nem kívánatos, címke nélküli, alacsony kontrasztú felületet ad vissza. Három hüvelykujjszabály: minden interaktív elemnek adjon értelmes címkét a képernyőolvasó számára (contentDescription / AccessibilityLabel), megfelelő színkontrasztot a szöveg és a háttér között (legalább 4,5:1 arány), valamint egy legalább 48x48 dp/44x44 pt érintőpontot. Kérdezd meg ezeket a dolgokat kifejezetten az MI-től.
Figyelem: A mesterséges intelligencia hosszú akadálymentesítési címkét is hozzáadhat egy dekoratív ikonhoz; Ez túlterheli a képernyőolvasó felhasználót felesleges fecsegésekkel. A tisztán dekoratív elemeket "el kell rejteni a hozzáférhetőség elől" (ezt a képernyőolvasó kihagyhatja). Tekintse át a gyártott címkéket: beszéljen az értelmes, a dekoratív maradjon csendben.
Összhang: tervezési rendszer és téma
A professzionális alkalmazások nem használnak véletlenszerű színeket és térközöket; tervezési rendszert követ (szabványos színkészlet, betűtípus, térköz és összetevők). Ha megadja a mesterséges intelligencia témaértékeit (főszín, másodlagos szín, saroksugár, tipográfiai skála), akkor minden képernyő konzisztens lesz. Ha nem így tesz, minden képernyő más-más kék árnyalatot használ, és az alkalmazás zsúfoltnak tűnik. A leghatékonyabb módszer az, ha először megkéri az AI-t, hogy hozzon létre egy téma/terv token fájlt, majd az összes képernyőt ehhez a témához köti.
Tárgy
rossz megközelítés
Erős megközelítés
Szín
Manuális színkódolás minden képernyőn
Központi téma, a témából kiolvasott képernyők
helyzetekben
Csak "teljes" képernyő
Betöltés/üres/hiba/teljes négy állapot
hozzáférhetőség
Később hozzáadva
A keresetben kezdettől fogva meghatározva van
szöveget
kódba ágyazva
Külön forrás, többnyelvű kész
három mini tok
1. eset – Üres eset mentve. Egy híralkalmazás-csapat rendelkezett az AI-nyomtatás egyedi képernyőállapotaival. A „készenléti állapot” képernyőnek köszönhetően („Még nincsenek hírek”) a felhasználói tesztelésben résztvevők 70%-a nem hagyta üres képernyőn az alkalmazást; Az előző verzióban az üres képernyő fehér maradt, és a felhasználók úgy gondolták, hogy "eltört", és elhagyták. Egy kis példány megnövelte a megőrzési arányt.
2. eset – Kontraszt elutasítása. Az egyik csapat a márkaszín világosszürke szövegű képernyőkkel jelentkezett az App Store-ba. Az Apple figyelmeztetést adott ki akadálymentesítési okokból az alacsony kontraszt miatt. Amikor az AI-nak azt mondták, hogy "növelje a szöveg-háttér kontrasztot 4,5:1 fölé", a színek sötétebbek lettek, és a probléma megoldódott. Ha az elejétől kérték volna, nem késett volna.
3. eset – Dekoratív címkezaj. Egy látássérült tesztelő arról számolt be, hogy minden dísz ikont („vonal”, „pont”, „árnyék”) felolvastak az AI által generált képernyőn, ami használhatatlanná tette a képernyőt. A képernyőolvasó élménye akkor vált gördülékenysé, amikor a díszítőelemeket elrejtették a hozzáférhetőség elől. Tanulság: az akadálymentesítés a „megfelelő címkéket” jelenti, nem a „túl sok címkét”.
Gyenge felszólítás / Erős felszólítás
Gyenge prompt: "Profilképernyő tervezése."
Hatékony prompt: "Felhasználói profil képernyő létrehozása iOS/SwiftUI-hoz. Tartalom: avatar, név, e-mail, 'Profil szerkesztése' gomb, beállítások listája. Állapotok: betöltés (csontváz), hiba (újrapróbálkozás gomb), teljes. Kivitel: nem anyag, megfelel az iOS HIG-nek; rendszerszínek, dinamikus típus. Kisegítő lehetőségek: Elérhetőség: Kisegítő lehetőségek4 Elrejtve a Célelem4 Értékek olvasása, a célelem4 pt külön fájlt, ne ágyazzon be színkódot a képernyőre, először rajzolja meg a komponensfát, majd exportálja a kódot.
Másolható sablonok
Képernyőgeneráló sablon: "Generál [képernyőnév] a [platform/eszköz] számára. Tartalom: [elemek]. Felhasználói műveletek: [műveletek]. Négy állapot generálása külön: betöltés, üres, hiba, tele. Tervezési rendszer: [Anyag 3 / iOS HIG], témajogkivonatokból olvasható. Hozzáférhetőség: címkék, kontraszt >=4,5:1, érintési szabvány."
Téma/tervrendszersablon: "Központi témadefiníció létrehozása az alkalmazásomhoz ([Téma létrehozása /tervezési token szerkezet a SwiftUI-ban]): - Elsődleges szín [hex], másodlagos [hex], hibaszín, felület színe - Tipográfiai skála (cím, törzs, leírás) - Térköz skála (4,8,16,24 szabványos hirdetés) - Támogatott sarok."
Kisegítő lehetőségek auditsablonja:"Ellenőrizze ezt a képernyőkódot a kisegítő lehetőségekhez:1) Vannak címkézetlen interaktív elemek?2) Megfelelőek a kontrasztarányok?3) Elég nagyok-e az érintési célpontok?4) El vannak rejtve a díszítőelemek a képernyőolvasó elől? Javasoljon javításokat minden problémához. [kód]"
Tervezés a kódhoz sablon: "A következő tervet írom le: [képernyő leírása vagy képernyőkép]. Fordítsa le ezt [Compose/SwiftUI] kódra. A térközt és az igazítást tartsa a tervnek megfelelően, de adja hozzá mind a négy állapotot."
Gyakori hibák
- Csak a teljes helyzetre gondolok. Az idő nagy részében a valódi felhasználó látja a betöltési/hibaképernyőt.
- Szín és hely beágyazása a kódba. Ha a téma nem központi, elveszik a következetesség, és nehézkessé válik a karbantartás.
- A hozzáférhetőséget a végére hagyva. Későbbi hozzáadása drága; A kezdetektől kérve ingyenes.
- Felcímkézés. A díszítőelemek elolvasása szintén megzavarja a képernyőolvasó élményét.
- Szöveg beágyazása a kódba. Ha többnyelvű támogatásra van szükség, minden képernyőt kézzel kell módosítani; Tartsa külön a szövegeket.
- Pontos másolatot várunk a képernyőképről. Az AI tervezés kb. A pixel pontossága manuálisan állítható be.
Összefoglalva
Az AI hatékony az interfészgyártásban, de útmutatást igényel. A helyes sorrend: cél, komponensek, négy állapot (betöltés/üres/hiba/tele), tervezési rendszer, hozzáférhetőség, majd kód. A hozzáférhetőség nem alku tárgya, és azt jelenti, hogy „a megfelelő címke”, nem pedig „túl sok címke”. A következetesség érdekében olvassa el a színt és a térközt a központi témából, ne ágyazza be a kódba. Az erős akarat mindezt kezdettől fogva meghatározza; Így a felület készen áll a valós világra, az üzlet jóváhagyására és minden felhasználóra.
Pályázati feladat
A „Képernyőgenerálási sablon” használatával egy beállítási képernyőhöz kérje az AI-tól a Compose vagy a SwiftUI kódot, és kérje le mind a négy állapotot. Ezután ellenőrizze ugyanazt a kódot a „Hozzáférhetőségi ellenőrzési sablon” segítségével. Keressen meg és javítson ki legalább egy kisegítő lehetőségeket (hiányzó címke, alacsony kontraszt vagy kicsi érintési cél), és jegyezze fel, hogy Ön szerint melyik állapot (betöltés/üres/hiba) jelenik meg a leggyakrabban a valós használat során.
ellenőrző lista
- [ ] A promptban egyértelművé tettem a kijelző célját és összetevőit
- [ ] A négy állapotot (betöltés/üres/hiba/tele) külön generáltam
- [ ] A színt és a teret a központi témából olvastam ki, a kódba nem ágyaztam be.
- [ ] Kezdettől fogva kisegítő lehetőségeket és kontrasztot szerettem volna
- [ ] Ellenőriztem, hogy a díszítő elemek el vannak rejtve a képernyőolvasó elől
- [ ] Külön tartottam a szövegeket, több nyelvre készen