Girdeji:
- Maksat, komponent, dört ýagdaý (ýüklemek / boş / ýalňyşlyk / doly), dizaýn ulgamy we elýeterlilik tertibi boýunça Jetpack Compose we SwiftUI üçin ygtybarly interfeýs koduny öndürmek ukyby
- Dogry bellik, ýeterlik kontrast we degişli degishme bilen başdan başlap elýeterliligi kesgitlemek bilen ähli ulanyjylar üçin açyk interfeýs öndürmek ukyby.
- Merkezi temadan reňk we giňişlik okap, yzygiderli, köp dilli we açyk / garaňky tema taýýar interfeýsleri döretmek ukyby
Jübi programmasynyň üstünligi esasan ulanyjy interfeýsi (UI - ulanyjynyň görýän we degýän ekranlary) we ulanyjy tejribesi (UX - ulanmagyň nähili rahat we hezil) bilen kesgitlenýär. Ulanyjy erbet kody görmeýär, ýöne birinji sekuntda erbet interfeýsi duýýar. AI interfeýsiň ösüşinde iki güýçli rol oýnaýar: bir tarapdan dizaýn ideýasyny, akymyny we tekstini döredýär (UX ýazuwy); Beýleki tarapdan, bu dizaýny gönüden-göni iş interfeýs koduna öwürýär. Bu bölümde, Jetpack Compose (Android) we SwiftUI (iOS) häzirki zaman deklaratiw interfeýs gurallaryna ünsi jemläp, AI bilen çalt, elýeterli we yzygiderli interfeýsleri öndürmegi öwreneris. "Deklaratiw", ekrany nädip çyzmalydygyny ädimme-ädim düşündirmegiň ýerine, "ekranyň bu ýagdaýda nähili görünmelidigini" düşündirýärsiňiz; Gural galan zatlary edýär.
Dizaýndan koda: dogry tertip
AI-e "owadan ekran ýasamak" diýmek düşnüksiz, sebäbi "owadan" ölçäp bolmaýar. Gowy interfeýs döretmek şu tertibe eýerýär:
- Maksady we mazmuny. Ekran näme edýär, haýsy maglumatlary görkezýär, ulanyjy näme eder?
- Komponentleriň sanawy. Ady, sanawy, düwmesi, forma meýdany ýaly bölekler.
- .Agdaýlar. Adingüklemek, boş (maglumat ýok), ýalňyşlyk, doly - dört esasy ekran ýagdaýy.
- Dizaýn ulgamy. Reňk, tipografiýa, aralyk düzgünleri; köplenç material 3 (Android) ýa-da iOS adam interfeýsiniň görkezmelerine laýyk gelýär.
- Elýeterlilik. Ekranyň okaýjy bellikleri, ýeterlik kontrast, duýgur nyşanyň ululygy.
- Kod Bularyň hemmesini aýdyp, “Composable” ýa-da “SwiftUI View” nesli.
Iň ýygy-ýygydan geçýän ädim üçünji ädimdir. Işläp düzüjiler diňe "doly" ýagdaýy hasaplaýarlar; hakyky programmada ulanyjy köplenç "ýüklemek" we "ýalňyşlyk" ýagdaýlaryna duş gelýär. Dört ştatyň hemmesini AI-e çap etmek ygtybarly interfeýsiň syrydyr.
Maslahat: Sorag gutarandan soň "ýükleme, boş, ýalňyşlyk we doly aýratyn" goşuň. Bu ýeke sözlem, interfeýsiňizi hakyky dünýä taýýarlaýar we QA (hil synagy) tapgyrynda ýalňyşlyklaryň sanyny ep-esli azaldar.
Elýeterlilik barada gürleşip bolmaýar
Elýeterlilik - görüş, eşidiş ýa-da motor taýdan kemçilikli ulanyjylar tarapyndan programmany ulanmak ukyby - ahlak jogapkärçiligi, dükan we kanuny garaşma. AI isleseňiz elýeterli kod öndürýär; Islenilmese belliksiz, pes kontrastly interfeýsi görkezýär. Üç barmak düzgüni: her interaktiw elemente ekran okyjysy üçin mazmunly bellik beriň (contentDescription / accessibilityLabel), tekst bilen fon arasynda ýeterlik reňk tapawudy (azyndan 4,5: 1 gatnaşygy) we azyndan 48x48 dp / 44x44 pt. AI-den bu zatlary aç-açan soraň.
Üns beriň: AI bezeg nyşanyna uzyn elýeterlilik belligini hem goşup biler; Bu, ekrany okaýan ulanyjyny gereksiz söhbetdeşlik bilen doldurýar. Diňe bezeg elementleri "elýeterlilikden gizlenmeli" (ekranyň okyjysy tarapyndan geçmäge rugsat berilýär). Öndürilen ýazgylary gözden geçiriň: manyly gürlesin, bezeg dymsyn.
Yzygiderlilik: dizaýn ulgamy we mowzuk
Professional programmalar tötänleýin reňkleri we aralygy ulanmaýarlar; dizaýn ulgamyna eýerýär (standart reňkler, şriftler, aralyk we komponentler). AI-ä mowzuk bahalaryňyzy (esasy reňk, ikinji reňk, burç radiusy, tipografiýa şkalasy) berseňiz, ähli ekranlar yzygiderli çykar. Şeýle etmeseňiz, her ekranda başga bir gök reňk ulanylar we programma bulaşyk görüner. Iň täsirli usul, ilki bilen AI-den tema / dizaýn bellikler faýly döretmegini haýyş etmek, soňra ähli ekranlary şol mowzuga baglamakdyr.
Mowzuk
çemeleşme
Güýçli çemeleşme
Reňk
Her ekrany el bilen reňklemek
Merkezi tema, mowzukdan okalýan ekranlar
ýagdaýlar
Diňe "doly" ekran
Adingüklemek / boş / ýalňyşlyk / doly dört ýagdaý
elýeterlilik
Soň goşuldy
Talapda ilkibaşdan kesgitlenýär
tekst
koda girizilen
Aýry çeşme, köp dilli taýýar
üç sany kiçi halat
1-nji waka - Boş halat saklandy. Täzelikler programma toparynda AI çap edilen aýratyn ekran ýagdaýy bardy. “Boş ýagdaý” ekrany (“Entek habar ýok”) kömegi bilen ulanyjy synagyna gatnaşanlaryň 70% -i programmany boş ekranda goýmady; Öňki wersiýasynda boş ekran ak bolup galdy we ulanyjylar "döwüldi" öýdüp, gitdiler. Ujypsyzja nusgasy saklamagyň derejesini ýokarlandyrdy.
2-nji waka - Kontrastdan ýüz öwürmek. Bir topar “App Store” -a marka çal reňkli açyk çal reňkli ekranlar bilen ýüz tutdy. “Apple” pes kontrast sebäpli elýeterlilik sebäplerinde duýduryş berdi. AI-e "tekstiň fon kontrastyny 4,5: 1-den ýokarlandyr" diýlende, reňkler garaldy we mesele çözüldi. Ozaldan soralsa, gijä galmazdy.
3-nji hadysa - Bezeg etiketkasynyň sesi. Görüşi pes bolan synagçy, her bir nagyş nyşanynyň (“setir”, “nokat”, “kölege”) AI tarapyndan döredilen ekranda sesiň okalýandygyny we ekrany ulanyp bolmajakdygyny habar berdi. Bezeg elementleri elýeterlilikden gizlenende, ekran okaýjy tejribesi suwuk boldy. Sapak: elýeterlilik “gaty köp bellik” däl-de, “dogry bellikler” diýmekdir.
Gowşak haýyş / Güýçli haýyş
Gowşak haýyş: "Profil ekrany dizaýn ediň."
Güýçli teklip: "iOS / SwiftUI üçin ulanyjy profiliniň ekranyny dörediň. Mazmuny: awatar, ady, e-poçta," Profil redaktirlemek "düwmesi, sazlamalar sanawy. Statuslar: ýüklemek (skelet), ýalňyşlyk (gaýtadan synanyşmak düwmesi), doly. Dizaýn: Material däl, iOS HIG-e laýyk gelýär; ulgam reňkleri, dinamiki görnüş. Ilki komponent agajyny çyzyň, soňra kody eksport ediň. "
Göçürip boljak galyplar
Ekranyň nesil şablony: "[platforma / gural] üçin [ekranyň adyny] dörediň. Mazmuny: [elementler]. Ulanyjy hereketleri: [hereketler]. Dört ştaty aýratyn dörediň: ýüklemek, boş, ýalňyşlyk, doly. Dizaýn ulgamy: [Material 3 / iOS HIG], mowzuk belliklerinden okaň. Elýeterlilik: bellikler, kontrast> = 4.5: 1, nyşan nyşany
Mowzuk / dizaýn ulgamy şablony: "Programmam üçin merkezi mowzuk kesgitlemesini öndüriň ([SwiftUI-de Tema ýazyň / dizaýn nyşanynyň gurluşyny düzüň)): - Esasy reňk [hex], ikinji derejeli [hex], ýalňyşlyk reňki, ýerüsti reňk- Tipografiýa şkalasy (ady, bedeni, beýany) - Aralyk şkalasy (4,8,16,24) - Burç radiusy standartYagtylyk we garaňky mowzuk goldawy."
Elýeterlilik barlagy şablony: "Elýeterliligi üçin bu ekran koduny barlaň: 1) Göçürilmedik interaktiw elementler barmy? 2) kontrast gatnaşygy ýeterlikmi? 3) Duýgur nyşanlar ýeterlikmi? 4) Bezeg elementleri ekranyň okyjysyndan gizlenýärmi? Her mesele üçin düzediş teklip ediň. [Kod]"
Kod şablonyna dizaýn: "Aşakdaky dizaýny suratlandyrýaryn: [ekranyň beýany ýa-da skrinshot]. Muny [Compose / SwiftUI] kody terjime ediň. Aralyk we dizaýny dogry saklaň, ýöne dört ştaty goşuň."
Adaty ýalňyşlyklar
- Diňe doly ýagdaý hakda pikir edýärin. Hakyky ulanyjy köplenç ýüklemek / ýalňyş ekrany görýär.
- Kodda reňk we boşluk goýmak. Mowzuk merkezi bolmasa, yzygiderlilik ýitýär we tehniki hyzmat etmek kyn bolýar.
- Iň soňky elýeterliligi goýmak. Soň goşmak gaty gymmat; Ilkibaşdan talap edilse mugt.
- Gabat gelmek. Bezeg elementleriniň okalmagy ekranyň okyjy tejribesini hem bozýar.
- Kodda tekst goýmak Köp dilli goldaw gerek bolsa, her ekrany el bilen üýtgetmeli; Tekstleri aýratyn saklaň.
- Skrinshotdan takyk göçürmä garaşmak. AI dizaýny takmynan öndürýär. Piksel takyklygy el bilen düzülýär.
Gysgaça
AI interfeýs önümçiliginde güýçlidir, ýöne ýol görkezmegi talap edýär. Dogry tertip: maksat, komponentler, dört ýagdaý (ýüklemek / boş / ýalňyşlyk / doly), dizaýn ulgamy, elýeterlilik, soňra kod. Elýeterlilik gepleşik geçirip bolmaýar we "gaty köp bellik" däl-de, "dogry bellik" diýmekdir. Yzygiderlilik üçin merkezi temadan reňk we aralyk okaň, ony koda salmaň. Güýçliler bularyň hemmesini başyndan kesgitlär; Şeýlelikde, interfeýs hakyky dünýä, dükany tassyklamaga we ähli ulanyjylara taýýar.
Programma meselesi
Sazlama ekrany üçin “Ekranyň nesil şablony” ulanyp, AI-den Kompozisiýa ýa-da SwiftUI kody soraň we dört ştatyň hemmesini soraň. Soňra "Elýeterliligi barlamak şablony" bilen şol bir kody barlaň. Iň bolmanda bir elýeterliligi gowulandyrmagy tapyň we düzediň (ýitirilen bellik, pes kontrast ýa-da kiçi duýgur nyşan) we haýsy ýagdaýyň (ýüklemek / boş / ýalňyşlyk) hakyky ulanyşda peýda boljakdygyna üns beriň.
gözegçilik sanawy
- [] Ekranyň maksadyny we böleklerini gyssagly düşündirdim
- [] Dört ýagdaýy (ýüklemek / boş / ýalňyşlyk / doly) aýratyn döredipdim
- [] Merkezi mowzukdan reňk we giňişlik okadym, kodda goýmadym.
- [] Elýeterlilik belliklerini we kontrastyny isledim
- [] Bezeg elementleriniň ekran okyjysyndan gizlenendigini tassykladym
- [] Tekstleri aýratyn sakladym, köp dile taýýar