Qligħ:
- Kapaċità li tipproduċi kodiċi ta 'interface robust għal Jetpack Compose u SwiftUI f'ordni ta' skop, komponent, erba 'stati (tagħbija/vojta/żball/mimli), sistema ta' disinn u aċċessibbiltà
- Kapaċità li tipproduċi interface li tkun miftuħa għall-utenti kollha billi tiddefinixxi l-aċċessibbiltà mill-bidu, b'tikkettar korrett, kuntrast suffiċjenti u touch xieraq.
- Kapaċità li toħloq interfaces lesti għal temi konsistenti, b'ħafna lingwi u ċari/dlam billi taqra l-kulur u l-ispazju mit-tema ċentrali
Is-suċċess ta 'app mobbli huwa ddeterminat fil-biċċa l-kbira mill-interface tal-utent tagħha (UI — l-iskrins li l-utent jara u jmiss) u l-esperjenza tal-utent (UX — kemm huwa bla xkiel u pjaċevoli li tuża). L-utent ma jarax il-kodiċi ħażin, iżda jħoss l-interface ħażina fl-ewwel sekonda. L-AI għandha żewġ rwoli qawwija fl-iżvilupp tal-interface: minn naħa waħda, tiġġenera idea, fluss u test tad-disinn (kitba UX); Min-naħa l-oħra, tikkonverti direttament dan id-disinn f'kodiċi ta 'interface ta' ħidma. F'din l-unità, se nitgħallmu kif nipproduċu interfaces veloċi, aċċessibbli u konsistenti bl-AI, li niffokaw fuq għodod moderni ta' interface dikjarattivi Jetpack Compose (Android) u SwiftUI (iOS). "Dikjarattiv" tfisser li minflok tispjega pass pass kif tiġbed l-iskrin, tiddeskrivi "dan huwa kif l-iskrin għandu jidher f'din is-sitwazzjoni"; The tool does the rest.
Mid-disinn għall-kodiċi: l-ordni t-tajba
Li tgħid lill-AI biex "tagħmel skrin sabiħ" hija vaga għaliex "sabiħa" ma tistax titkejjel. Ġenerazzjoni ta 'interface tajba ssegwi din l-ordni:
- Purpose and content. X'jagħmel l-iskrin, liema informazzjoni juri, x'se jagħmel l-utent?
- Component list. Partijiet bħal titolu, lista, buttuna, qasam tal-formola.
- Situations. Tagħbija, vojta (l-ebda data), żball, sħiħa — l-erba’ stati bażiċi tal-iskrin.
- Design system. Kulur, tipografija, regoli ta' spazjar; generally complying with the Human Interface Guidelines of Material 3 (Android) or iOS.
- Accessibility. Tikketti tal-qarrej tal-iskrin, kuntrast adegwat, daqs tal-mira touch.
- Code. Having said all this, Composable or SwiftUI View generation.
The most frequently skipped step is the third one. L-iżviluppaturi jqisu biss l-istat "sħiħ"; whereas in real application the user mostly encounters "loading" and "error" situations. Printing all four states to the AI is the secret to a robust interface.
Tip: Żid "iġġenera tagħbija, vojta, żball, u sħiħa separatament" fl-aħħar tal-pront. Din is-sentenza waħda tagħmel l-interface tiegħek lesta għad-dinja reali u tnaqqas b'mod sinifikanti n-numru ta 'żbalji fil-fażi tal-QA (ittestjar tal-kwalità).
L-aċċessibbiltà mhix negozjabbli
L-aċċessibbiltà — il-kapaċità li tuża l-applikazzjoni minn utenti b'diżabilitajiet viżwali, tas-smigħ jew tal-mutur — hija kemm responsabbiltà etika kif ukoll maħżen u aspettattiva legali. AI tipproduċi kodiċi aċċessibbli jekk mixtieq; Jirritorna interface bla tag u b'kuntrast baxx jekk mhux mixtieq. Tliet regoli ġenerali: agħti lil kull element interattiv tikketta sinifikanti għall-qarrej tal-iskrin (contentDescription / accessibilityLabel), kuntrast tal-kulur adegwat bejn it-test u l-isfond (mill-inqas proporzjon 4.5:1), u touch target ta 'mill-inqas 48x48 dp/44x44 pt. Staqsi lill-AI dawn l-affarijiet b'mod espliċitu.
Attenzjoni: AI tista 'wkoll żżid tikketta ta' aċċessibbiltà twila ma 'ikona dekorattiva; Dan jegħleb lill-utent tal-qarrej tal-iskrin b'chatter bla bżonn. Purely decorative elements should be "hidden from accessibility" (allowed to be skipped by the screen reader). Review the labels produced: let the meaningful speak, let the decorative remain silent.
Konsistenza: sistema tad-disinn u tema
L-applikazzjonijiet professjonali ma jużawx kuluri u spazjar każwali; isegwi sistema ta’ disinn (sett standard ta’ kuluri, fonts, spazjar, u komponenti). Jekk tagħti lill-AI il-valuri tat-tema tiegħek (kulur prinċipali, kulur sekondarju, raġġ tal-kantunieri, skala tipografika), l-iskrins kollha joħorġu konsistenti. Jekk ma tagħmilx hekk, kull skrin juża sfumatura blu differenti u l-app tidher imbarazzata. L-aktar mod effiċjenti huwa li l-ewwel titlob lill-AI biex tiġġenera fajl tat-tokens tat-tema/disinn, imbagħad torbot l-iskrins kollha ma’ dik it-tema.
Suġġett
approċċ fqir
Approċċ qawwi
Kulur
Kulur manwalment kodiċi kull skrin
Tema ċentrali, skrins jinqraw mit-tema
sitwazzjonijiet
Biss "full" screen
Tagħbija/vojta/żball/erba’ stati sħaħ
aċċessibbiltà
Miżjud aktar tard
Huwa definit fit-talba mill-bidu
test
inkorporati fil-kodiċi
Sors separat, lest b'ħafna lingwi
tliet każijiet żgħar
Każ 1 — Każ vojt salvat. Tim tal-app tal-aħbarijiet kellu l-istati tal-iskrin individwali stampati bl-AI. Grazzi għall-iskrin ta '"idle status" ("L-ebda aħbarijiet ssalvata għadha"), 70% tal-parteċipanti fl-ittestjar tal-utenti ma ħallewx l-app fuq skrin vojt; Fil-verżjoni preċedenti, l-iskrin vojt baqa' abjad u l-utenti ħasbu li kien "imkisser" u telqu. Kopja żgħira żiedet ir-rata ta 'żamma.
Każ 2 — Ċaħda tal-kuntrast. Tim wieħed applika għall-App Store bi skrins b'test bil-griż ċar, il-kulur tad-ditta. Apple ħarġet twissija għal raġunijiet ta’ aċċessibbiltà minħabba kuntrast baxx. Meta l-AI intqal biex "iżżid il-kuntrast tal-isfond tat-test 'il fuq minn 4.5:1", il-kuluri saru jiskuraw u l-problema ġiet solvuta. If it had been requested from the beginning, there would have been no delay.
Każ 3 — Ħoss tat-tikketta dekorattiva. Tester neqsin mid-dawl irrapporta li kull ikona tal-ornament ("linja," "tikka," "dell") inqrat b'leħen għoli fuq l-iskrin iġġenerat mill-AI, u b'hekk l-iskrin ma jistax jintuża. L-esperjenza tal-qarrej tal-iskrin saret fluwida meta elementi dekorattivi kienu moħbija mill-aċċessibbiltà. Lesson: accessibility means “the right tags,” not “too many tags.”
Pront dgħajjef / Pront qawwi
Pront dgħajjef: "Disinja skrin tal-profil."
Prompt qawwi: "Iġġenera skrin tal-profil tal-utent għal iOS/SwiftUI. Kontenut: avatar, isem, email, buttuna 'Editja l-profil', lista tas-settings. Istatuti: tagħbija (skeletru), żball (buttuna mill-ġdid), sħiħ. Disinn: Mhux Materjal, konformi mal-iOS HIG; kuluri tas-sistema, Tip Dinamika. file, do not embed color code on the screen. First draw the component tree, then export the code."
Mudelli kopjabbli
Mudell tal-ġenerazzjoni tal-iskrin: "Iġġenera [isem tal-iskrin] għal [pjattaforma/għodda]. Kontenut: [elementi]. Azzjonijiet tal-utent: [azzjonijiet]. Iġġenera erba' stati separatament: tagħbija, vojta, żball, sħiħa. Sistema tad-disinn: [Materjal 3 / iOS HIG], aqra minn tokens tat-tema. Aċċessibilità: tikketti, kuntrast >=4.5:1, touch standard."
Mudell tas-sistema tad-disinn/tema: "Ipproduċi definizzjoni ta' tema ċentrali għall-app tiegħi ([Ikkomponi Tema / struttura ta' token tad-disinn f'SwiftUI]):- Kulur primarju [hex], sekondarju [hex], kulur ta' żball, kulur tal-wiċċ- Skala tipografika (titolu, korp, deskrizzjoni)- Skala ta' spazjar (4,8,16,24)- Standard tar-raġġ tal-kantuniera Żid dawl u dlam l-appoġġ."
Mudell tal-awditjar tal-aċċessibbiltà:"Iċċekkja dan il-kodiċi tal-iskrin għall-aċċessibbiltà:1) Hemm xi elementi interattivi mhux tikkettati?2) Il-proporzjonijiet tal-kuntrast huma adegwati?3) Il-miri tal-mess huma kbar biżżejjed?4) L-elementi dekorattivi huma moħbija mill-qarrej tal-iskrin? Issuġġerixxi soluzzjonijiet għal kull kwistjoni. [kodiċi]"
Mudell tad-disinn għall-kodiċi: "Niddeskrivi d-disinn li ġej: [deskrizzjoni tal-iskrin jew screenshot]. Ittraduċi dan f'kodiċi [Compose/SwiftUI]. Żomm l-ispazjar u l-allinjament fid-disinn, iżda żid l-erba' stati."
Żbalji komuni
- Naħseb biss dwar is-sitwazzjoni sħiħa. Ħafna mill-ħin l-utent reali jara l-iskrin tat-tagħbija/żball.
- Inkorporazzjoni tal-kulur u l-ispazju fil-kodiċi. Jekk it-tema ma tkunx ċentrali, il-konsistenza tintilef u l-manutenzjoni ssir diffiċli.
- Inħallu l-aċċessibilità għall-aħħar. Iż-żieda tagħha aktar tard hija għalja; Huwa bla ħlas jekk mitlub mill-bidu.
- Tikkettjar żejjed. Li jkollok elementi dekorattivi jinqraw ifixkel ukoll l-esperjenza tal-qarrej tal-iskrin.
- Inkorporazzjoni tat-test fil-kodiċi. Meta jkun meħtieġ appoġġ multilingwi, huwa meħtieġ li kull skrin jinbidel manwalment; Żomm it-testi separati.
- Tistenna kopja eżatta mill-screenshot. Id-disinn AI jipproduċi madwar. Il-preċiżjoni tal-pixel hija ssettjata manwalment.
Fil-qosor
AI is powerful in interface production, but it requires guidance. The correct order: purpose, components, four states (loading/empty/error/full), design system, accessibility, then code. Accessibility is non-negotiable and means “the right label,” not “too many labels.” Għal konsistenza, aqra l-kulur u l-ispazjar mit-tema ċentrali, daħħalhiex fil-kodiċi. Ir-rieda qawwija tiddefinixxi dan kollu mill-bidu; Thus, the interface is ready for the real world, store approval and all users.
Kompitu ta' applikazzjoni
Using the “Screen generation template” for a settings screen, ask the AI for Compose or SwiftUI code and request all four states. Imbagħad ikkontrolla l-istess kodiċi bil-"mudell ta' kontroll tal-aċċessibilità". Sib u waħħal tal-inqas titjib wieħed fl-aċċessibbiltà (tikketta nieqsa, kuntrast baxx, jew mira touch żgħira) u nnota liema status (tagħbija/vojta/żball) taħseb li se jidher l-aktar spiss fl-użu reali.
lista ta' kontroll
- [ ] I made the purpose and components of the display clear in the prompt
- [ ] I had the four states (loading/empty/error/full) generated separately
- [ ] I made the color and space read from the central theme, I did not embed it in the code.
- [ ] I wanted accessibility labels and contrast from the beginning
- [ ] I verified that decorative elements are hidden from the screen reader
- [ ] I kept the texts separate, ready for multiple languages