Ieguvumi:
- Spēja izveidot spēcīgu interfeisa kodu Jetpack Compose un SwiftUI secībā pēc mērķa, komponenta, četriem stāvokļiem (ielādēta/tukša/kļūda/pilna), projektēšanas sistēma un pieejamība
- Spēja izveidot visiem lietotājiem atvērtu saskarni, jau no paša sākuma definējot pieejamību, ar pareizu marķējumu, pietiekamu kontrastu un atbilstošu pieskārienu.
- Spēja izveidot konsekventus, daudzvalodu un gaišām/tumšām tēmām gatavas saskarnes, nolasot krāsu un telpu no centrālā motīva
Mobilās lietotnes panākumus lielā mērā nosaka tās lietotāja saskarne (UI — ekrāni, ko lietotājs redz un pieskaras) un lietotāja pieredze (UX — cik gluda un patīkama ir to lietot). Lietotājs neredz slikto kodu, bet sajūt slikto saskarni pirmajā sekundē. AI spēlē divas spēcīgas lomas saskarnes izstrādē: no vienas puses, tas ģenerē dizaina ideju, plūsmu un tekstu (UX rakstīšana); No otras puses, tas tieši pārvērš šo dizainu darba interfeisa kodā. Šajā nodaļā mēs iemācīsimies izveidot ātras, pieejamas un konsekventas saskarnes ar AI, pievēršoties mūsdienīgiem deklaratīvās saskarnes rīkiem Jetpack Compose (Android) un SwiftUI (iOS). "Deklaratīvs" nozīmē, ka tā vietā, lai soli pa solim izskaidrotu, kā zīmēt ekrānu, jūs aprakstāt "šajā situācijā ekrānam vajadzētu izskatīties šādi"; Instruments dara pārējo.
No dizaina līdz kodam: pareizā secība
Paziņojums AI "izveidot skaistu ekrānu" ir neskaidrs, jo "skaistu" nevar izmērīt. Labas saskarnes izveide notiek šādā secībā:
- Mērķis un saturs. Ko dara ekrāns, kādu informāciju tas parāda, ko darīs lietotājs?
- Komponentu saraksts. Daļas, piemēram, virsraksts, saraksts, poga, veidlapas lauks.
- Situācijas. Notiek ielāde, tukša (nav datu), kļūda, pilna — četri pamata ekrāna stāvokļi.
- Dizaina sistēma. Krāsu, tipogrāfijas, atstarpes noteikumi; parasti atbilst Materiāla 3 (Android) vai iOS Cilvēka saskarnes vadlīnijām.
- Pieejamība. Ekrāna lasītāja etiķetes, atbilstošs kontrasts, pieskāriena mērķa izmērs.
- Kods. To visu sakot, Composable vai SwiftUI View paaudze.
Visbiežāk izlaistais solis ir trešais. Izstrādātāji ņem vērā tikai "pilnu" stāvokli; turpretim reālajā lietojumprogrammā lietotājs pārsvarā sastopas ar "iekraušanas" un "kļūdu" situācijām. Visu četru stāvokļu drukāšana AI ir spēcīgas saskarnes noslēpums.
Padoms. Uzvednes beigās pievienojiet “atsevišķi ģenerēt ielādi, tukšu, kļūdu un pilnu”. Šis viens teikums padara jūsu saskarni gatavu reālajai pasaulei un ievērojami samazina kļūdu skaitu kvalitātes nodrošināšanas (kvalitātes pārbaudes) fāzē.
Pieejamība nav apspriežama
Pieejamība — iespēja lietot lietojumprogrammu lietotājiem ar redzes, dzirdes vai kustību traucējumiem — ir gan ētiska atbildība, gan veikala un tiesiskā paļāvība. AI ražo pieejamu kodu, ja nepieciešams; Ja nevēlaties, atgriež interfeisu bez tagiem, ar zemu kontrastu. Trīs īkšķa noteikumi: piešķiriet katram interaktīvajam elementam jēgpilnu etiķeti ekrāna lasītājam (contentDescription / AccessibilityLabel), atbilstošu krāsu kontrastu starp tekstu un fonu (attiecība vismaz 4,5:1) un pieskārienu mērķi vismaz 48x48 dp/44x44 pt. Pajautājiet AI šīs lietas skaidri.
Uzmanību! AI var arī pievienot garu pieejamības atzīmi dekoratīvai ikonai; Tas pārņem ekrāna lasītāja lietotāju ar nevajadzīgu pļāpāšanu. Tīri dekoratīviem elementiem jābūt "paslēptiem no pieejamības" (ekrāna lasītājam ir atļauts tos izlaist). Pārskatiet saražotās etiķetes: ļaujiet runāt jēgpilnajam, ļaujiet dekoratīvajam klusēt.
Konsekvence: dizaina sistēma un tēma
Profesionālās lietojumprogrammas neizmanto nejaušas krāsas un atstarpes; seko dizaina sistēmai (standarta krāsu, fontu, atstarpju un komponentu komplekts). Ja piešķirat AI motīva vērtības (galvenā krāsa, sekundārā krāsa, stūra rādiuss, tipogrāfijas skala), visi ekrāni būs konsekventi. Ja to nedarīsit, katrā ekrānā tiks izmantots cits zils tonis, un lietotne izskatīsies pārblīvēta. Visefektīvākais veids ir vispirms lūgt AI ģenerēt motīva/dizaina marķiera failu un pēc tam saistīt visus ekrānus ar šo motīvu.
Priekšmets
slikta pieeja
Spēcīga pieeja
Krāsa
Manuāli katra ekrāna krāsu kods
Centrālā tēma, ekrāni nolasīti no tēmas
situācijas
Tikai "pilns" ekrāns
Notiek ielāde/tukšs/kļūda/pilni četri stāvokļi
pieejamība
Pievienots vēlāk
Tas ir definēts prasībā no sākuma
tekstu
iegults kodā
Atsevišķs avots, gatavs vairākām valodām
trīs mini futrāļi
1. gadījums — saglabāta tukša lieta. Ziņu lietotņu komandai bija AI drukāšanas atsevišķi ekrāna stāvokļi. Pateicoties “dīkstāves statusa” ekrānam (“Vēl nav saglabātas ziņas”), 70% lietotāju testēšanas dalībnieku neatstāja lietotni tukšā ekrānā; Iepriekšējā versijā tukšais ekrāns palika balts, un lietotāji domāja, ka tas ir "salauzts" un atstāja. Neliela kopija palielināja saglabāšanas līmeni.
2. gadījums — kontrasta noraidīšana. Viena komanda pieteicās App Store ar ekrāniem ar gaiši pelēku tekstu zīmola krāsā. Apple izdeva brīdinājumu par pieejamības apsvērumiem zemā kontrasta dēļ. Kad AI tika teikts "palielināt teksta un fona kontrastu virs 4,5:1", krāsas kļuva tumšākas un problēma tika atrisināta. Ja tas būtu prasīts no paša sākuma, tad nekāda kavēšanās nebūtu bijusi.
3. gadījums — dekoratīvās etiķetes troksnis. Vājredzīgs testeris ziņoja, ka AI ģenerētajā ekrānā tika skaļi nolasīta katra ornamenta ikona (“līnija”, “punkts”, “ēna”), padarot ekrānu nelietojamu. Ekrāna lasītāja pieredze kļuva mainīga, kad dekoratīvie elementi tika paslēpti no pieejamības. Nodarbība: pieejamība nozīmē “pareizos atzīmes”, nevis “pārāk daudz atzīmju”.
Vāja uzvedne / spēcīga uzvedne
Vāja uzvedne: "Izstrādājiet profila ekrānu."
Spēcīga uzvedne: "Ģenerējiet lietotāja profila ekrānu operētājsistēmai iOS/SwiftUI. Saturs: iemiesojums, vārds, e-pasts, poga "Rediģēt profilu", iestatījumu saraksts. Statusi: ielāde (skelets), kļūda (atkārtoti mēģināt), pilns. Dizains: nemateriāls, atbilst iOS HIG; sistēmas krāsas, dinamisks veids. Pieejamība: Lasīt elementu, dekoratīvās iezīmes4 no katras slēptās vērtības atsevišķu failu, neiegult ekrānā krāsu kodu. Vispirms uzzīmējiet komponentu koku un pēc tam eksportējiet kodu.
Kopējamas veidnes
Ekrāna ģenerēšanas veidne: "Ģenerēt [ekrāna nosaukumu] [platformai/rīkam]. Saturs: [elementi]. Lietotāja darbības: [darbības]. Atsevišķi ģenerējiet četrus stāvokļus: ielāde, tukšs, kļūda, pilns. Dizaina sistēma: [Material 3 / iOS HIG], lasīt no motīvu marķieriem. Pieejamība: etiķetes, kontrasts >=4,5:1, mērķa standarts."
Motīva/dizaina sistēmas veidne: "Izveidojiet manas lietotnes centrālo motīva definīciju ([Radīt motīvu / dizaina pilnvaras struktūra SwiftUI]):- primārā krāsa [heksadecim.], sekundārā [hex], kļūdas krāsa, virsmas krāsa- Tipogrāfijas skala (nosaukums, pamatteksts, apraksts)- Atstarpes skala (4,8,16,24 standarta Reklāmas atbalsts)- Stūris.
Pieejamības audita veidne: “Pārbaudiet šo ekrāna kodu, lai uzzinātu par pieejamību: 1) Vai ir kādi interaktīvi elementi, kuriem nav pievienoti tagi? 2) Vai kontrasta attiecības ir piemērotas? 3) Vai skārienjutīgie mērķi ir pietiekami lieli?4) Vai dekoratīvie elementi ir paslēpti ekrāna lasītājā? Iesakiet katras problēmas risinājumus. [kods]”
Noformējums uz kodu veidni: "Es aprakstu šādu dizainu: [ekrāna apraksts vai ekrānuzņēmums]. Tulkojiet to [Compose/SwiftUI] kodā. Saglabājiet atstarpes un līdzinājumu atbilstoši noformējumam, bet pievienojiet visus četrus stāvokļus."
Biežas kļūdas
- Vienkārši domāju par visu situāciju. Lielāko daļu laika reālais lietotājs redz ielādes/kļūdas ekrānu.
- Krāsu un vietas iegulšana kodā. Ja tēma nav galvenā, tiek zaudēta konsekvence un uzturēšana kļūst sarežģīta.
- Pieejamība tiek atstāta uz pēdējo. Pievienot to vēlāk ir dārgi; Tas ir bez maksas, ja tiek pieprasīts no sākuma.
- Pārmarķēšana. Dekoratīvo elementu lasīšana arī traucē ekrāna lasītāja darbību.
- Teksta iegulšana kodā. Ja nepieciešams daudzvalodu atbalsts, katrs ekrāns ir jāmaina manuāli; Saglabājiet tekstus atsevišķi.
- Gaidāma precīza ekrānuzņēmuma kopija. AI dizains ražo apm. Pikseļu precizitāte tiek iestatīta manuāli.
Rezumējot
AI ir spēcīgs interfeisa ražošanā, taču tam ir nepieciešamas norādes. Pareizā secība: mērķis, komponenti, četri stāvokļi (ielādēta/tukša/kļūda/pilna), projektēšanas sistēma, pieejamība, pēc tam kods. Pieejamība nav apspriežama un nozīmē “pareizo etiķeti”, nevis “pārāk daudz etiķešu”. Konsekvences labad izlasiet krāsu un atstarpes no centrālā motīva, neiekļaujiet to kodā. Spēcīgā griba to visu nosaka jau no paša sākuma; Tādējādi saskarne ir gatava reālajai pasaulei, veikala apstiprināšanai un visiem lietotājiem.
Lietojumprogrammas uzdevums
Izmantojot iestatījumu ekrāna ekrāna ģenerēšanas veidni, pieprasiet AI ievadīt Compose vai SwiftUI kodu un pieprasiet visus četrus stāvokļus. Pēc tam pārbaudiet to pašu kodu, izmantojot "Pieejamības pārbaudes veidni". Atrodiet un labojiet vismaz vienu pieejamības uzlabojumu (trūkst etiķetes, zems kontrasts vai mazs pieskāriena mērķis) un atzīmējiet, kurš statuss (notiek ielāde/tukšs/kļūda), jūsuprāt, reālajā lietošanā tiks parādīts visbiežāk.
kontrolsaraksts
- [ ] Uzvednē es skaidri norādīju displeja mērķi un sastāvdaļas
- [ ] Man bija atsevišķi ģenerēti četri stāvokļi (ielādē / tukšs / kļūda / pilns)
- [ ] Krāsu un telpu liku nolasīt no centrālās tēmas, kodā neiegultu.
- [ ] No sākuma vēlējos pieejamības etiķetes un kontrastu
- [ ] Es pārbaudīju, vai dekoratīvie elementi ir paslēpti no ekrāna lasītāja
- [ ] Es turēju tekstus atsevišķi, sagatavoju vairākām valodām