Fitimet:
- Aftësia për të prodhuar kodin e fortë të ndërfaqes për Jetpack Compose dhe SwiftUI sipas qëllimit, komponentit, katër gjendjeve (ngarkim/bosh/gabim/plot), sistemin e projektimit dhe aksesueshmërinë
- Aftësia për të prodhuar një ndërfaqe që është e hapur për të gjithë përdoruesit duke përcaktuar aksesueshmërinë që në fillim, me etiketim të saktë, kontrast të mjaftueshëm dhe prekje të përshtatshme.
- Aftësia për të krijuar ndërfaqe të qëndrueshme, shumë-gjuhëshe dhe të gatshme për tema të lehta/të errëta duke lexuar ngjyrën dhe hapësirën nga tema qendrore
Suksesi i një aplikacioni celular përcaktohet kryesisht nga ndërfaqja e tij e përdoruesit (UI - ekranet që përdoruesi sheh dhe prek) dhe përvoja e përdoruesit (UX - sa e qetë dhe e këndshme është përdorimi). Përdoruesi nuk e sheh kodin e keq, por ndjen ndërfaqen e keqe në sekondën e parë. AI luan dy role të fuqishme në zhvillimin e ndërfaqes: nga njëra anë, ajo gjeneron ide dizajni, rrjedhë dhe tekst (shkrim UX); Nga ana tjetër, ai e konverton drejtpërdrejt këtë dizajn në kodin e ndërfaqes së punës. Në këtë njësi, ne do të mësojmë se si të prodhojmë ndërfaqe të shpejta, të arritshme dhe të qëndrueshme me AI, duke u fokusuar në mjetet moderne të ndërfaqes deklarative Jetpack Compose (Android) dhe SwiftUI (iOS). "Deklarative" do të thotë që në vend që të shpjegoni hap pas hapi se si të vizatoni ekranin, ju përshkruani "kështu duhet të duket ekrani në këtë situatë"; Mjeti bën pjesën tjetër.
Nga dizajni në kod: rendi i duhur
T'i thuash AI "të bëjë një ekran të bukur" është e paqartë sepse "e bukura" nuk mund të matet. Gjenerimi i mirë i ndërfaqes ndjek këtë renditje:
- Qëllimi dhe përmbajtja. Çfarë bën ekrani, çfarë informacioni tregon, çfarë do të bëjë përdoruesi?
- Lista e komponentëve. Pjesë të tilla si titulli, lista, butoni, fusha e formularit.
- Situatat. Duke u ngarkuar, bosh (pa të dhëna), gabim, plot - katër gjendjet bazë të ekranit.
- Sistemi i projektimit. Ngjyra, tipografia, rregullat e ndarjes; përgjithësisht në përputhje me Udhëzimet e Ndërfaqes Njerëzore të Materialit 3 (Android) ose iOS.
- Aksesueshmëria. Etiketat e lexuesit të ekranit, kontrast adekuat, madhësia e synuar me prekje.
- Kodi. Duke thënë të gjitha këto, gjenerimi i Composable ose SwiftUI View.
Hapi më i shpeshtë i anashkaluar është i treti. Zhvilluesit konsiderojnë vetëm gjendjen "e plotë"; kurse në aplikimin real përdoruesi më së shumti has në situata “ngarkimi” dhe “gabim”. Printimi i të katër gjendjeve në AI është sekreti i një ndërfaqeje të fortë.
Këshillë: Shtoni "gjeneroni ngarkimin, bosh, gabim dhe plotë veçmas" në fund të kërkesës. Kjo fjali e vetme e bën ndërfaqen tuaj të gatshme për botën reale dhe redukton ndjeshëm numrin e gabimeve në fazën QA (testimi i cilësisë).
Aksesueshmëria është e panegociueshme
Aksesueshmëria - aftësia për të përdorur aplikacionin nga përdoruesit me aftësi të kufizuara vizuale, dëgjimore ose motorike - është njëkohësisht një përgjegjësi etike dhe një pritje dhe pritshmëri ligjore. AI prodhon kod të aksesueshëm nëse dëshironi; Rikthen një ndërfaqe pa etiketa, me kontrast të ulët nëse nuk dëshironi. Tre rregulla të përgjithshme: jepni çdo elementi ndërveprues një etiketë kuptimplotë për lexuesin e ekranit (përshkrimi i përmbajtjes / etiketa e aksesueshmërisë), kontrast adekuat ngjyrash midis tekstit dhe sfondit (të paktën raporti 4,5:1) dhe një objektiv me prekje prej të paktën 48x48 dp/44x44 pt. Pyetni AI këto gjëra në mënyrë eksplicite.
Kujdes: AI mund të shtojë gjithashtu një etiketë të gjatë aksesueshmërie në një ikonë dekorative; Kjo e pushton përdoruesin e lexuesit të ekranit me muhabet të panevojshëm. Elementet thjesht dekorative duhet të "fshihen nga aksesueshmëria" (të lejohen të anashkalohen nga lexuesi i ekranit). Rishikoni etiketat e prodhuara: lëreni kuptimin të flasë, dekorativin lëreni të heshtë.
Konsistenca: sistemi i projektimit dhe tema
Aplikacionet profesionale nuk përdorin ngjyra dhe ndarje të rastësishme; ndjek një sistem të projektimit (grup standard i ngjyrave, shkronjave, ndarjeve dhe komponentëve). Nëse i jepni AI vlerat e temës suaj (ngjyra kryesore, ngjyra dytësore, rrezja e këndit, shkalla e tipografisë), të gjitha ekranet do të dalin të qëndrueshme. Nëse nuk e bëni këtë, çdo ekran do të përdorë një nuancë të ndryshme blu dhe aplikacioni do të duket i rrëmujshëm. Mënyra më efikase është që së pari t'i kërkoni AI të gjenerojë një skedar argumentesh teme/dizajnimi, më pas të lidhni të gjitha ekranet me atë temë.
Subjekti
qasje e dobët
Qasje e fortë
Ngjyra
Kodi me ngjyra për çdo ekran
Tema qendrore, ekranet e lexuara nga tema
situatave
Vetëm ekran "i plotë".
Po ngarkohet/zbraz/gabim/katër gjendje të plota
aksesueshmërisë
Shtuar më vonë
Është përcaktuar në kërkesë që në fillim
teksti
të ngulitura në kod
Burim i veçantë, gati për shumë gjuhë
tre mini kuti
Rasti 1 - Rasti bosh i ruajtur. Një ekip aplikacioni lajmesh kishte gjendjet individuale të ekranit të printimit të AI. Falë ekranit "statusi i papunë" ("Nuk ka lajme ende të ruajtura"), 70% e pjesëmarrësve në testimin e përdoruesit nuk e lanë aplikacionin në një ekran bosh; Në versionin e mëparshëm, ekrani bosh mbeti i bardhë dhe përdoruesit menduan se ishte "thyer" dhe u larguan. Një kopje e vogël rriti shkallën e mbajtjes.
Rasti 2 - Refuzimi i kontrastit. Një ekip aplikoi në App Store me ekrane me tekst në gri të hapur, ngjyrën e markës. Apple lëshoi një paralajmërim për arsye aksesueshmërie për shkak të kontrastit të ulët. Kur AI iu tha që "të rriste kontrastin e sfondit të tekstit mbi 4.5:1", ngjyrat u bënë më të errëta dhe problemi u zgjidh. Nëse do të ishte kërkuar që në fillim, nuk do të kishte vonesa.
Rasti 3 — Zhurma e etiketës dekorative. Një testues me shikim të dëmtuar raportoi se çdo ikonë zbukurimi ("vijë", "pikë", "hije") lexohej me zë të lartë në ekranin e krijuar nga AI, duke e bërë ekranin të papërdorshëm. Përvoja e lexuesit të ekranit u bë e rrjedhshme kur elementët dekorativë u fshehën nga aksesueshmëria. Mësimi: aksesueshmëria do të thotë "etiketat e duhura", jo "shumë etiketa".
Prompt i dobët / Prompt i fortë
Prompt i dobët: "Dizajnoni një ekran profili."
Njoftim i fuqishëm: "Gjeneroni ekranin e profilit të përdoruesit për iOS/SwiftUI. Përmbajtja: avatari, emri, emaili, butoni 'Ndrysho profilin', lista e cilësimeve. Statuset: ngarkim (skelet), gabim (butoni i riprovës), i plotë. Dizajni: Jo material, në përputhje me iOS HIG; ngjyrat e sistemit, Lloji dinamik. Qasshmëria: aksesueshmëria4 etiketa e fshehtë e prek çdo element. Lexoni vlerat e temës nga një skedar i veçantë, mos vendosni kodin e ngjyrave në ekran.
Modele të kopjueshme
Shablloni i gjenerimit të ekranit: "Gjeneroni [emri i ekranit] për [platformën/mjet]. Përmbajtja: [elementet]. Veprimet e përdoruesit: [veprimet]. Gjeneroni katër gjendje veç e veç: ngarkim, bosh, gabim, i plotë. Sistemi i projektimit: [Material 3 / iOS HIG], lexoni nga shenjat e temave. Aksesueshmëria: etiketat, 1 standard, prekja=4."
Shablloni i sistemit të temës/dizajnit: "Prodhoni një përcaktim qendror të temës për aplikacionin tim ([Krijoni temën / strukturën e tokenit të dizajnit në SwiftUI]):- Ngjyra kryesore [hex], dytësore [hex], ngjyra e gabimit, ngjyra e sipërfaqes- Shkalla e tipografisë (titulli, trupi, përshkrimi) - Shkalla e ndarjes (4,8,16, 24 me dritë me rreze standarde) -
Shablloni i auditimit të aksesueshmërisë:"Kontrollo këtë kod ekrani për aksesueshmërinë:1) A ka ndonjë element ndërveprues të pa etiketuar?2) A janë adekuat raportet e kontrastit?3) A janë objektivat me prekje mjaftueshëm të mëdha?4) A janë elementë dekorativë të fshehur nga lexuesi i ekranit? Sugjeroni rregullime për çdo problem. [kodi]"
Dizajni me shabllonin e kodit: "Unë përshkruaj dizajnin e mëposhtëm: [përshkrimi i ekranit ose fotografia e ekranit]. Përkthejeni këtë në kodin [Compose/SwiftUI]. Mbajeni ndarjen dhe shtrirjen të vërtetë me dizajnin, por shtoni të katër gjendjet."
Gabimet e zakonshme
- Vetëm duke menduar për situatën e plotë. Shumicën e kohës përdoruesi i vërtetë sheh ekranin e ngarkimit/gabimit.
- Përfshirja e ngjyrës dhe hapësirës në kod. Nëse tema nuk është qendrore, konsistenca humbet dhe mirëmbajtja bëhet e vështirë.
- Duke e lënë aksesueshmërinë për të fundit. Shtimi i tij më vonë është i shtrenjtë; Është pa kosto nëse kërkohet që në fillim.
- Mbi-etiketimi. Leximi i elementeve dekorative gjithashtu prish përvojën e lexuesit të ekranit.
- Përfshirja e tekstit në kod. Kur kërkohet mbështetje shumëgjuhëshe, është e nevojshme të ndryshoni manualisht çdo ekran; Mbajini tekstet të ndara.
- Pritet një kopje e saktë nga pamja e ekranit. Dizajni i AI prodhon përafërsisht. Saktësia e pikselit vendoset manualisht.
Në përmbledhje
AI është i fuqishëm në prodhimin e ndërfaqes, por kërkon udhëzime. Rendi i saktë: qëllimi, komponentët, katër gjendje (ngarkim/bosh/gabim/plotë), sistemi i projektimit, aksesueshmëria, më pas kodi. Aksesueshmëria është e panegociueshme dhe do të thotë "etiketa e duhur", jo "shumë etiketa". Për konsistencë, lexoni ngjyrën dhe ndarjen nga tema qendrore, mos e futni në kod. Vullneti i fortë i përcakton të gjitha këto që në fillim; Kështu, ndërfaqja është gati për botën reale, miratimin e dyqaneve dhe të gjithë përdoruesit.
Detyra e aplikimit
Duke përdorur "shabllonin e gjenerimit të ekranit" për një ekran cilësimesh, kërkoni nga AI për Kompozim ose kodin SwiftUI dhe kërkoni të katër gjendjet. Pastaj kontrolloni të njëjtin kod me "modelin e kontrollit të aksesueshmërisë". Gjeni dhe rregulloni të paktën një përmirësim të aksesueshmërisë (etiketë që mungon, kontrast i ulët ose objektiv i vogël me prekje) dhe vini re se cili status (ngarkim/bosh/gabim) mendoni se do të shfaqet më shpesh në përdorim real.
listë kontrolli
- [ ] Kam bërë të qartë qëllimin dhe komponentët e ekranit në kërkesë
- [ ] Unë kisha katër gjendjet (ngarkim/bosh/gabim/plotë) të krijuara veçmas
- [ ] Bëra ngjyrën dhe hapësirën të lexohen nga tema qendrore, nuk e futa në kod.
- [ ] Doja etiketat e aksesueshmërisë dhe kontrastin që në fillim
- [ ] Kam verifikuar që elementet dekorative janë të fshehura nga lexuesi i ekranit
- [ ] I kam mbajtur tekstet të ndara, gati për shumë gjuhë