Hagnaður:
- Geta til að framleiða öflugan viðmótskóða fyrir Jetpack Compose og SwiftUI í röð eftir tilgangi, íhlut, fjórum ríkjum (hleðsla/tóm/villa/full), hönnunarkerfi og aðgengi
- Geta til að framleiða viðmót sem er opið öllum notendum með því að skilgreina aðgengi frá upphafi, með réttum merkingum, nægjanlegri birtuskilum og viðeigandi snertingu.
- Geta til að búa til samræmd, fjöltungumál og ljós/dökk þema tilbúin viðmót með því að lesa lit og rými úr miðþema
Árangur farsímaforrits ræðst að miklu leyti af notendaviðmóti þess (UI — skjáirnir sem notandinn sér og snertir) og notendaupplifun (UX — hversu slétt og skemmtilegt það er í notkun). Notandinn sér ekki slæma kóðann, en finnur fyrir slæmu viðmótinu á fyrstu sekúndu. Gervigreind gegnir tveimur öflugum hlutverkum í viðmótsþróun: annars vegar býr það til hönnunarhugmynd, flæði og texta (UX ritun); Aftur á móti breytir það þessari hönnun beint í vinnuviðmótskóða. Í þessari einingu munum við læra hvernig á að framleiða hröð, aðgengileg og samkvæm viðmót við gervigreind, með áherslu á nútímaleg yfirlýsingarviðmótsverkfæri Jetpack Compose (Android) og SwiftUI (iOS). „Yfirlýsandi“ þýðir að í stað þess að útskýra skref fyrir skref hvernig á að teikna skjáinn, lýsir þú „svona á skjárinn að líta út í þessum aðstæðum“; Verkfærið sér um restina.
Frá hönnun til kóða: rétt röð
Að segja gervigreind að „gera fallegan skjá“ er óljóst vegna þess að „fallegt“ er ekki hægt að mæla. Góð viðmótsgerð fylgir þessari röð:
- Tilgangur og innihald. Hvað gerir skjárinn, hvaða upplýsingar sýnir hann, hvað mun notandinn gera?
- Íhlutalisti. Hlutar eins og titill, listi, hnappur, formreitur.
- Aðstæður. Hleðst, tómt (engin gögn), villa, fullt - grunnskjámyndirnar fjórar.
- Hönnunarkerfi. Litur, leturfræði, bilreglur; almennt í samræmi við leiðbeiningar um mannlegt viðmót efnis 3 (Android) eða iOS.
- Aðgengi. Merki skjálesara, fullnægjandi birtuskil, stærð snertimarks.
- Kóði. Að þessu sögðu, Composable eða SwiftUI View kynslóð.
Þriðja skrefið sem oftast er sleppt er þriðja. Hönnuðir íhuga aðeins "fullt" ástand; en í raunverulegu forriti lendir notandinn aðallega í „hleðslu“ og „villu“ aðstæðum. Að prenta öll fjögur ríkin á gervigreind er leyndarmálið að öflugu viðmóti.
Ábending: Bættu við "búa til hleðslu, tómt, villu og fullt sérstaklega" í lok leiðbeiningarinnar. Þessi eina setning gerir viðmótið þitt tilbúið fyrir raunverulegan heim og dregur verulega úr fjölda villna í QA (gæðaprófun) áfanganum.
Aðgengi er ekki samningsatriði
Aðgengi — hæfileikinn til að nota forritið fyrir notendur með sjón-, heyrnar- eða hreyfihömlun — er bæði siðferðileg ábyrgð og verslun og lagaleg vænting. AI framleiðir aðgengilegan kóða ef þess er óskað; Skilar merkislausu viðmóti með litlum birtuskilum ef þess er ekki óskað. Þrjár þumalputtareglur: gefðu hverjum gagnvirka þætti merkingarbæran merkimiða fyrir skjálesarann (contentDescription / accessibilityLabel), fullnægjandi litaskil milli texta og bakgrunns (að minnsta kosti 4,5:1 hlutfall) og snertimarkmið sem er að minnsta kosti 48x48 dp/44x44 pt. Spyrðu gervigreindina um þetta sérstaklega.
Varúð: gervigreind getur líka bætt löngu aðgengismerki við skrauttákn; Þetta yfirgnæfir skjálesara notandann með óþarfa spjalli. Hreint skrautleg atriði ættu að vera "falin fyrir aðgengi" (leyft að sleppa því af skjálesaranum). Skoðaðu merkimiðana sem framleiddir eru: láttu hið merkingarfulla tala, láttu skrautið þegja.
Samræmi: hönnunarkerfi og þema
Fagleg forrit nota ekki tilviljanakennda liti og bil; fylgir hönnunarkerfi (venjulegt sett af litum, leturgerðum, bili og íhlutum). Ef þú gefur AI þemagildin þín (aðallitur, aukalitur, hornradíus, leturfræðikvarði), munu allir skjáir koma út í samræmi. Ef þú gerir það ekki mun hver skjár nota mismunandi bláa lit og appið mun líta út fyrir að vera ringulreið. Skilvirkasta leiðin er fyrst að biðja gervigreindina um að búa til þema/hönnunartáknskrá og binda síðan alla skjái við það þema.
Efni
léleg nálgun
Sterk nálgun
Litur
Litakóða handvirkt hvern skjá
Miðþema, skjáir lesa úr þemað
aðstæður
Aðeins "fullur" skjár
Hleður/tómt/villa/full fjögur ríki
aðgengi
Bætt við síðar
Það er skilgreint í kröfunni frá upphafi
texta
innbyggður í kóða
Aðskilin heimild, tilbúin á mörgum tungumálum
þrjú smámál
Mál 1 — Tómt mál vistað. Fréttaforritsteymi var með gervigreindarprentun einstakra skjámynda. Þökk sé „aðgerðalausri stöðu“ skjánum („Engar fréttir vistaðar ennþá“) skildu 70% þátttakenda í notendaprófunum ekki frá appinu á auðum skjá; Í fyrri útgáfunni var auði skjárinn hvítur og notendur héldu að hann væri „brotinn“ og fór. Lítið eintak jók varðveisluhlutfall.
Mál 2 — Andstæða höfnun. Eitt lið sótti um í App Store með skjái með ljósgráum texta, vörumerkjalitnum. Apple gaf út viðvörun vegna aðgengisástæðna vegna lítillar birtuskila. Þegar gervigreindinni var sagt að „auka birtuskil texta og bakgrunns yfir 4,5:1“ urðu litirnir dekkri og vandamálið var leyst. Ef óskað hefði verið eftir því frá upphafi hefði engin töf orðið.
Mál 3 - Skreytingarmerki hávaði. Sjónskertur prófari greindi frá því að sérhver skrauttákn („lína,“ „punktur,“ „skuggi“) væri lesinn upphátt á gervigreindarskjánum, sem gerði skjáinn ónothæfan. Upplifun skjálesara varð fljótandi þegar skrautlegir þættir voru faldir fyrir aðgengi. Lexía: aðgengi þýðir „réttu merki“ ekki „of mörg merki“.
Veik kvaðning / Sterk kvaðning
Veik kvaðning: "Hönnun prófílskjá."
Öflug tilvitnun: "Búa til notendasniðsskjá fyrir iOS/SwiftUI. Efni: notandamynd, nafn, netfang, 'Breyta prófíl' hnappur, stillingalisti. Staða: hleðsla (beinagrind), villa (reyna aftur hnappur), fullt. Hönnun: Non-Material, í samræmi við iOS HIG; kerfislitir, Dynamic Type. Aðgengi: aðgengiMerki við hvert atriði, skreytingartákn aðskilið þau frá, minnst 4 snerting, snerting. skrá, ekki fella inn litakóða á skjáinn. Teiknaðu fyrst íhlutatréð og fluttu síðan kóðann út.
Afritanleg sniðmát
Skjámyndasniðmát: "Búa til [skjáheiti] fyrir [vettvang/tól]. Efni: [þættir]. Notendaaðgerðir: [aðgerðir]. Búðu til fjögur ástand sérstaklega: hleðsla, tóm, villa, fullt. Hönnunarkerfi: [Efni 3 / iOS HIG], lesið úr þematáknum. Aðgengi: merkimiðar, andstæða >=4,5:1, snertimarkstaðall."
Þema/hönnunarkerfissniðmát: "Búa til miðlæga þemaskilgreiningu fyrir forritið mitt ([Semdu þema / hönnunarmerki uppbyggingu í SwiftUI]):- Aðallitur [sex], aukalitur [sex], villulitur, yfirborðslitur- Leturfræðikvarði (titill, meginmál, lýsing)- Bilkvarði (4,8,16,24) - Hornradíus staðallBættu við ljósum og dökkum þeim.
Sniðmát fyrir aðgengisúttekt:"Athugaðu þennan skjákóða fyrir aðgengi:1) Eru til ómerktir gagnvirkir þættir?2) Eru birtuskil nægjanleg?3) Eru snertimörk nógu stór?4) Eru skreytingarþættir falnir fyrir skjálesaranum? Leggðu til lagfæringar fyrir hvert mál. [kóði]"
Hönnun til kóða sniðmát: "Ég lýsi eftirfarandi hönnun: [skjálýsing eða skjámynd]. Þýddu þetta yfir í [Compose/SwiftUI] kóða. Haltu bilinu og jöfnuninni í samræmi við hönnunina, en bættu við öllum fjórum stöðunum."
Algeng mistök
- Bara að hugsa um heildarstöðuna. Oftast sér raunverulegur notandi hleðslu-/villuskjáinn.
- Fella inn lit og rúm í kóða. Ef þemað er ekki miðlægt tapast samræmið og viðhaldið verður erfitt.
- Yfirgefa aðgengi fyrir síðast. Það er dýrt að bæta því við síðar; Það er gjaldfrjálst ef þess er óskað frá upphafi.
- Yfirmerking. Að láta lesa skrauthluta truflar einnig upplifun skjálesara.
- Fella texta inn í kóða. Þegar þörf er á fjöltyngdum stuðningi er nauðsynlegt að breyta hverjum skjá handvirkt; Haltu textum aðskildum.
- Býst við nákvæmu afriti af skjámyndinni. AI hönnun framleiðir u.þ.b. Pixel nákvæmni er stillt handvirkt.
Í stuttu máli
AI er öflugt í viðmótsframleiðslu, en það krefst leiðsagnar. Rétt röð: tilgangur, íhlutir, fjögur ástand (hleðsla/tóm/villa/full), hönnunarkerfi, aðgengi, síðan kóði. Aðgengi er ekki samningsatriði og þýðir „rétt merki“, ekki „of mörg merki“. Fyrir samræmi, lestu lit og bil frá miðþema, ekki fella það inn í kóða. Hinn sterki vilji skilgreinir þetta allt frá upphafi; Þannig er viðmótið tilbúið fyrir raunverulegan heim, verslunarsamþykki og alla notendur.
Umsóknarverkefni
Notaðu „Skjámyndasniðmátið“ fyrir stillingaskjá, biðjið gervigreindina um Compose eða SwiftUI kóða og biðjið um öll fjögur ríkin. Láttu síðan athuga sama kóða með "Aðgengisskoðunarsniðmátinu". Finndu og lagfærðu að minnsta kosti eina aðgengisaukningu (merki sem vantar, lág birtuskil eða lítið snertimark) og athugaðu hvaða stöðu (hleðsla/tóm/villa) þú heldur að birtist oftast í raunverulegri notkun.
gátlisti
- [ ] Ég gerði tilgang og þætti skjásins skýra í hvetjunni
- [ ] Ég lét búa til fjögur ástand (hleðsla/tóm/villa/full) sérstaklega
- [ ] Ég lét lesa litinn og rýmið út frá miðþema, ég felldi það ekki inn í kóðann.
- [ ] Ég vildi aðgengismerki og andstæður frá upphafi
- [ ] Ég sannreyndi að skreytingarþættir eru faldir fyrir skjálesaranum
- [ ] Ég hélt textunum aðskildum, tilbúinn fyrir mörg tungumál