Qazanclar:
- Məqsəd, komponent, dörd vəziyyət (yükləmə/boş/səhv/tam), dizayn sistemi və əlçatanlıq sırasına görə Jetpack Compose və SwiftUI üçün möhkəm interfeys kodu istehsal etmək bacarığı
- Düzgün etiketləmə, kifayət qədər kontrast və uyğun toxunma ilə əvvəldən əlçatanlığı müəyyən edərək bütün istifadəçilər üçün açıq olan interfeys istehsal etmək bacarığı.
- Mərkəzi mövzudan rəng və məkanı oxumaqla ardıcıl, çoxdilli və açıq/tünd mövzuya hazır interfeyslər yaratmaq bacarığı
Mobil proqramın uğuru əsasən onun istifadəçi interfeysi (UI — istifadəçinin gördüyü və toxunduğu ekranlar) və istifadəçi təcrübəsi (UX — istifadə etməyin nə qədər hamar və xoş olması) ilə müəyyən edilir. İstifadəçi pis kodu görmür, ancaq ilk saniyədə pis interfeysi hiss edir. AI interfeysin inkişafında iki güclü rol oynayır: bir tərəfdən dizayn ideyası, axını və mətni (UX yazısı) yaradır; Digər tərəfdən, bu dizaynı birbaşa işləyən interfeys koduna çevirir. Bu bölmədə biz Jetpack Compose (Android) və SwiftUI (iOS) müasir deklarativ interfeys alətlərinə fokuslanaraq süni intellektlə sürətli, əlçatan və ardıcıl interfeyslər yaratmağı öyrənəcəyik. "Deklarativ" o deməkdir ki, ekranın necə çəkiləcəyini addım-addım izah etmək əvəzinə, "bu vəziyyətdə ekran belə görünməlidir" təsvirini verirsiniz; Qalanını alət edir.
Dizayndan koda: düzgün sifariş
Süni intellektə “gözəl ekran düzəlt” demək qeyri-müəyyəndir, çünki “gözəl”i ölçmək mümkün deyil. Yaxşı interfeys generasiyası bu sıraya əməl edir:
- Məqsəd və məzmun. Ekran nə edir, hansı məlumatları göstərir, istifadəçi nə edəcək?
- Komponent siyahısı. Başlıq, siyahı, düymə, forma sahəsi kimi hissələr.
- Vəziyyətlər. Yüklənir, boş (məlumat yoxdur), xəta, dolu — dörd əsas ekran vəziyyəti.
- Dizayn sistemi. Rəng, tipoqrafiya, interval qaydaları; ümumiyyətlə Material 3 (Android) və ya iOS İnsan İnterfeysi Təlimatlarına uyğundur.
- Əlçatanlıq. Ekran oxuyucu etiketləri, adekvat kontrast, toxunma hədəf ölçüsü.
- Kod. Bütün bunları söylədikdən sonra Composable və ya SwiftUI View nəsli.
Ən çox atlanan addım üçüncüdür. Tərtibatçılar yalnız "tam" vəziyyəti hesab edirlər; halbuki real tətbiqdə istifadəçi daha çox "yükləmə" və "xəta" vəziyyətləri ilə qarşılaşır. Bütün dörd vəziyyəti AI-də çap etmək möhkəm interfeysin sirridir.
İpucu: Tələbin sonunda "yükləmə, boş, xəta və tam olaraq ayrıca yaradın" əlavə edin. Bu tək cümlə interfeysinizi real dünyaya hazır edir və QA (keyfiyyət testi) mərhələsindəki səhvlərin sayını əhəmiyyətli dərəcədə azaldır.
Əlçatanlıq müzakirə olunmur
Əlçatanlıq — görmə, eşitmə və ya motor qüsuru olan istifadəçilər tərəfindən tətbiqdən istifadə etmək imkanı — həm etik məsuliyyət, həm də mağaza və hüquqi gözləntidir. İstənilən halda AI əlçatan kod istehsal edir; Arzu olunmazsa, etiketsiz, aşağı kontrastlı interfeys qaytarır. Üç əsas qayda: hər bir interaktiv elementə ekran oxuyucusu üçün mənalı etiket (contentDescription / accessibilityLabel), mətn və fon arasında adekvat rəng kontrastı (ən azı 4,5:1 nisbəti) və ən azı 48x48 dp/44x44 pt ölçülü toxunma hədəfi verin. AI-dən bunları açıq şəkildə soruşun.
Diqqət: Süni intellekt dekorativ simvola uzun əlçatanlıq etiketi də əlavə edə bilər; Bu, ekran oxuyucu istifadəçisini lazımsız söhbətlərlə boğur. Sırf dekorativ elementlər "əlçatanlıqdan gizlədilməlidir" (ekran oxuyucusu tərəfindən atlanmağa icazə verilir). İstehsal olunan etiketləri nəzərdən keçirin: mənalı danışsın, dekorativ səssiz qalsın.
Ardıcıllıq: dizayn sistemi və mövzu
Professional proqramlar təsadüfi rənglərdən və boşluqlardan istifadə etmir; dizayn sisteminə (standart rənglər, şriftlər, boşluqlar və komponentlər dəsti) əməl edir. Əgər süni intellektə mövzu dəyərlərinizi (əsas rəng, ikinci rəng, künc radiusu, mətbəə miqyası) versəniz, bütün ekranlar ardıcıl çıxacaq. Bunu etməsəniz, hər bir ekran mavinin fərqli çalarlarından istifadə edəcək və proqram dağınıq görünəcək. Ən səmərəli yol əvvəlcə süni intellektdən bir mövzu/dizayn nişanları faylı yaratmasını xahiş etmək, sonra bütün ekranları həmin mövzuya bağlamaqdır.
Mövzu
pis yanaşma
Güclü yanaşma
Rəng
Hər bir ekranı əl ilə rəng kodu
Mərkəzi mövzu, mövzudan oxunan ekranlar
vəziyyətlər
Yalnız "tam" ekran
Yüklənir/boş/səhv/tam dörd vəziyyət
əlçatanlıq
Sonradan əlavə edildi
İddiada əvvəldən müəyyən edilib
mətn
koda daxil edilmişdir
Ayrı mənbə, çoxdilli hazırdır
üç mini qutu
Case 1 — Boş qutu saxlanıldı. Bir xəbər proqramı komandasının fərdi ekran vəziyyətləri AI çapına sahib idi. “Boş vəziyyət” ekranı sayəsində (“Hələ xəbər saxlanılmayıb”) istifadəçi testində iştirak edənlərin 70%-i proqramı boş ekranda tərk etməyib; Əvvəlki versiyada boş ekran ağ olaraq qaldı və istifadəçilər onu "sındırıldığını" düşünərək tərk etdilər. Kiçik bir nüsxə saxlama dərəcəsini artırdı.
2-ci hal - Kontrastın rədd edilməsi. Bir komanda açıq boz, brend rəngdə mətni olan ekranlarla App Store-a müraciət etdi. Apple aşağı kontrast səbəbindən əlçatanlıq səbəbiylə xəbərdarlıq etdi. Süni intellektə “mətn-fon kontrastını 4.5:1-dən yuxarı artırın” deyildikdə, rənglər daha tündləşdi və problem həll olundu. Əvvəldən tələb olunsaydı, gecikmə olmazdı.
Case 3 — Dekorativ etiket səs-küyü. Görmə qabiliyyəti zəif olan bir tester bildirdi ki, hər bir ornament simvolu (“xətt”, “nöqtə”, “kölgə”) süni intellekt tərəfindən yaradılan ekranda ucadan oxunub və ekranı yararsız hala salıb. Dekorativ elementlər əlçatanlıqdan gizlədildikdə ekran oxuyucu təcrübəsi maye oldu. Dərs: əlçatanlıq “çox teq” deyil, “doğru teqlər” deməkdir.
Zəif məlumat / Güclü göstəriş
Zəif göstəriş: "Profil ekranı dizayn edin."
Güclü xəbərdarlıq: "iOS/SwiftUI üçün istifadəçi profili ekranı yaradın. Məzmun: avatar, ad, e-poçt, "Profili redaktə et" düyməsi, parametrlər siyahısı. Statuslar: yüklənir (skelet), xəta (yenidən cəhd düyməsi), tam. Dizayn: Qeyri-maddi, iOS HIG-ə uyğun; sistem rəngləri, Dinamik Növ. Əlçatanlıq: hər bir toxunuş elementi, gizli nişanlar, əlçatanlıq etiketi4 oxuyun. ayrı bir fayldan mövzu dəyərləri üçün rəng kodunu ekrana yerləşdirməyin, əvvəlcə komponent ağacını çəkin, sonra kodu ixrac edin."
Kopyalana bilən şablonlar
Ekran yaratma şablonu: "[platforma/alət] üçün [ekran adı] yaradın. Məzmun: [elementlər]. İstifadəçi hərəkətləri: [fəaliyyətlər]. Dörd vəziyyəti ayrıca yaradın: yüklənir, boş, xəta, dolu. Dizayn sistemi: [Material 3 / iOS HIG], mövzu nişanlarından oxuyun. Əlçatanlıq: etiketlər, kontrast: 1, toxunma hədəfi >=4."
Mövzu/dizayn sistemi şablonu:"Tətbiqim üçün mərkəzi mövzu tərifi yaradın ([Mövzunu Yarat /SwiftUI-də dizayn işarəsi strukturu]):- Əsas rəng [hex], ikincil [hex], xəta rəngi, səth rəngi- Tipoqrafiya miqyası (başlıq, gövdə, təsvir)- Aralıq şkalası (4,8,16,24 radius) və standart işıq dəstəyi."
Əlçatımlılığın audit şablonu:"Bu ekran kodunu əlçatanlıq üçün yoxlayın:1) Etiketsiz interaktiv elementlər varmı?2) Kontrast nisbətləri adekvatdırmı?3) Toxunma hədəfləri kifayət qədər böyükdürmü?4) Dekorativ elementlər ekran oxuyucusundan gizlədilirmi? Hər bir problem üçün düzəlişlər təklif edin. [kod]"
Dizayn üçün kod şablonu: "Aşağıdakı dizaynı təsvir edirəm: [ekran təsviri və ya ekran görüntüsü]. Bunu [Tərtib et/SwiftUI] koduna tərcümə edin. Boşluqları və düzülüşü dizayna uyğun saxlayın, lakin bütün dörd vəziyyəti əlavə edin."
Ümumi səhvlər
- Sadəcə tam vəziyyəti düşünürəm. Çox vaxt real istifadəçi yükləmə/xəta ekranını görür.
- Kodda rəng və məkanın yerləşdirilməsi. Mövzu mərkəzi deyilsə, ardıcıllıq itir və baxım çətinləşir.
- Əlçatanlığı sona buraxırıq. Sonradan əlavə etmək baha başa gəlir; Əvvəldən tələb olunarsa, pulsuzdur.
- Üst etiketləmə. Dekorativ elementlərin oxunması ekran oxuyucu təcrübəsini də pozur.
- Koda mətnin yerləşdirilməsi. Çoxdilli dəstək tələb olunduqda, hər bir ekranı əl ilə dəyişdirmək lazımdır; Mətnləri ayrı saxlayın.
- Ekran görüntüsündən dəqiq surət gözlənilir. AI dizaynı təqribən istehsal edir. Piksel dəqiqliyi əl ilə təyin edilir.
Xülasə
AI interfeys istehsalında güclüdür, lakin rəhbərlik tələb edir. Düzgün sıra: məqsəd, komponentlər, dörd vəziyyət (yükləmə/boş/səhv/tam), dizayn sistemi, əlçatanlıq, sonra kod. Əlçatanlıq müzakirə olunmur və "çox etiket" deyil, "düzgün etiket" deməkdir. Ardıcıllıq üçün mərkəzi mövzudan rəng və məsafəni oxuyun, onu koda yerləşdirməyin. Güclü iradə bütün bunları əvvəldən müəyyən edir; Beləliklə, interfeys real dünyaya, mağazanın təsdiqinə və bütün istifadəçilərə hazırdır.
Tətbiq tapşırığı
Parametrlər ekranı üçün "Ekran yaratma şablonundan" istifadə edərək, AI-dən Yaratmaq və ya SwiftUI kodunu soruşun və bütün dörd vəziyyəti tələb edin. Sonra eyni kodu "Əlçatımlılığın yoxlanılması şablonu" ilə yoxlayın. Ən azı bir əlçatanlıq təkmilləşdirməsini (çatışmayan etiket, aşağı kontrast və ya kiçik toxunma hədəfi) tapın və düzəldin və real istifadədə daha çox görünəcəyini düşündüyünüz statusu (yükləmə/boş/xəta) qeyd edin.
yoxlama siyahısı
- [ ] Mən göstərişdə ekranın məqsədini və komponentlərini aydınlaşdırdım
- [ ] Məndə ayrıca yaradılan dörd vəziyyət (yükləmə/boş/səhv/dolu) var idi
- [ ] Rəng və məkanı mərkəzi mövzudan oxudum, kodun içərisinə daxil etmədim.
- [ ] Mən əvvəldən əlçatanlıq etiketləri və kontrast istədim
- [ ] Dekorativ elementlərin ekran oxuyucusundan gizlədildiyini təsdiqlədim
- [ ] Mən mətnləri ayrı saxladım, bir neçə dil üçün hazır idim