Daromadlar:
- Maqsad, komponent, to'rtta holat (yuklash/bo'sh/xato/to'liq), dizayn tizimi va foydalanish imkoniyati bo'yicha Jetpack Compose va SwiftUI uchun mustahkam interfeys kodini ishlab chiqarish qobiliyati
- To'g'ri yorliqlash, etarli kontrast va mos teginish bilan boshidanoq foydalanish imkoniyatini belgilash orqali barcha foydalanuvchilar uchun ochiq bo'lgan interfeysni yaratish qobiliyati.
- Markaziy mavzudan rang va bo'sh joyni o'qish orqali izchil, ko'p tilli va ochiq/qora mavzuga tayyor interfeyslarni yaratish qobiliyati
Mobil ilovaning muvaffaqiyati asosan uning foydalanuvchi interfeysi (UI — foydalanuvchi ko‘radigan va teginadigan ekranlar) va foydalanuvchi tajribasi (UX — undan foydalanish qanchalik silliq va yoqimli) bilan belgilanadi. Foydalanuvchi yomon kodni ko'rmaydi, lekin birinchi soniyada yomon interfeysni his qiladi. AI interfeysni ishlab chiqishda ikkita kuchli rol o'ynaydi: bir tomondan, u dizayn g'oyasini, oqimni va matnni (UX yozish) yaratadi; Boshqa tomondan, u to'g'ridan-to'g'ri ushbu dizaynni ishlaydigan interfeys kodiga aylantiradi. Ushbu bo'limda biz Jetpack Compose (Android) va SwiftUI (iOS) zamonaviy deklarativ interfeys vositalariga e'tibor qaratgan holda sun'iy intellekt yordamida tez, qulay va izchil interfeyslarni qanday yaratishni o'rganamiz. "Deklarativ" degani, ekranni qanday chizishni bosqichma-bosqich tushuntirish o'rniga, siz "bu vaziyatda ekran shunday ko'rinishi kerak" deb ta'riflaysiz; Qolganini vosita bajaradi.
Dizayndan kodgacha: to'g'ri tartib
AIga “chiroyli ekran yasang” deyish noaniq, chunki “chiroyli”ni o‘lchab bo‘lmaydi. Yaxshi interfeys yaratish quyidagi tartibda amalga oshiriladi:
- Maqsad va mazmun. Ekran nima qiladi, u qanday ma'lumotlarni ko'rsatadi, foydalanuvchi nima qiladi?
- Komponentlar ro'yxati. Sarlavha, ro'yxat, tugma, shakl maydoni kabi qismlar.
- Vaziyatlar. Yuklanmoqda, bo'sh (ma'lumotlar yo'q), xato, to'liq - to'rtta asosiy ekran holati.
- Dizayn tizimi. Rang, tipografiya, intervallarni belgilash qoidalari; odatda Material 3 (Android) yoki iOSning Inson interfeysi yo‘riqnomalariga mos keladi.
- Foydalanish imkoniyati. Ekranni o'quvchi teglari, etarli kontrast, teginish maqsadi o'lchami.
- Kod. Bularning barchasini aytib bo'lgach, Composable yoki SwiftUI View avlodi.
Eng tez-tez o'tkazib yuborilgan qadam uchinchisidir. Ishlab chiquvchilar faqat "to'liq" holatni ko'rib chiqadilar; holbuki, haqiqiy ilovada foydalanuvchi asosan "yuklash" va "xato" holatlariga duch keladi. To'rtta holatni AIda chop etish mustahkam interfeysning siri hisoblanadi.
Maslahat: "Yuklash, bo'sh, xato va to'liq alohida yaratish" so'rovining oxirida qo'shing. Bu bitta jumla interfeysingizni real dunyoga tayyor qiladi va QA (sifat testi) bosqichidagi xatolar sonini sezilarli darajada kamaytiradi.
Foydalanish imkoniyatini muhokama qilib bo'lmaydi
Mavjudlik - ko'rish, eshitish yoki vosita nogironligi bo'lgan foydalanuvchilar tomonidan ilovadan foydalanish qobiliyati - bu ham axloqiy mas'uliyat, ham do'kon va qonuniy talabdir. Agar so'ralsa, sun'iy intellekt mavjud kodni ishlab chiqaradi; Agar xohlamasa, tegsiz, past kontrastli interfeysni qaytaradi. Uchta asosiy qoida: har bir interaktiv elementga ekranni oʻqish vositasi uchun mazmunli yorliq bering (contentDescription / accessibilityLabel), matn va fon oʻrtasida mos rang kontrasti (kamida 4,5:1 nisbat) va teginish nishoni kamida 48x48 dp/44x44 pt. AIdan bu narsalarni aniq so'rang.
Diqqat: AI shuningdek, dekorativ piktogrammaga uzoq foydalanish imkoniyati tegini qo'shishi mumkin; Bu ekranni o'qish foydalanuvchisini keraksiz suhbatlar bilan to'ldiradi. Sof dekorativ elementlar "ko'rish imkoniyatidan yashirilishi" kerak (ekranni o'quvchi tomonidan o'tkazib yuborilishiga ruxsat beriladi). Ishlab chiqarilgan yorliqlarni ko'rib chiqing: mazmunli gapirsin, dekorativ jim qolsin.
Muvofiqlik: dizayn tizimi va mavzusi
Professional ilovalar tasodifiy ranglar va intervallarni ishlatmaydi; dizayn tizimiga (ranglar, shriftlar, intervallar va komponentlarning standart to'plami) amal qiladi. Agar siz AIga mavzu qiymatlarini (asosiy rang, ikkinchi darajali rang, burchak radiusi, tipografiya shkalasi) bersangiz, barcha ekranlar bir xil bo'ladi. Aks holda, har bir ekranda ko‘k rangning boshqa soyasi qo‘llaniladi va ilova tartibsiz ko‘rinadi. Eng samarali usul - avval AIdan mavzu/dizayn tokenlari faylini yaratishni so'rash, so'ngra barcha ekranlarni ushbu mavzuga bog'lash.
Mavzu
yomon yondashuv
Kuchli yondashuv
Rang
Har bir ekranga rang kodini qo'lda kiriting
Markaziy mavzu, mavzudan o'qiladigan ekranlar
vaziyatlar
Faqat "to'liq" ekran
Yuklash/bo'sh/xato/to'liq to'rtta holat
foydalanish imkoniyati
Keyinchalik qo'shilgan
U boshidan boshlab da'voda belgilangan
matn
kodga kiritilgan
Alohida manba, ko'p tilli tayyor
uchta mini holat
1-holat — boʻsh quti saqlangan. Yangiliklar ilovasi jamoasi AI bosib chiqarishning individual ekran holatiga ega edi. "Bo'sh holat" ekrani ("Hali hech qanday yangilik saqlanmadi") tufayli foydalanuvchi testidagi ishtirokchilarning 70 foizi ilovani bo'sh ekranda qoldirmadi; Oldingi versiyada bo'sh ekran oq bo'lib qoldi va foydalanuvchilar uni "buzilgan" deb o'ylashdi va ketishdi. Kichik nusxa saqlash tezligini oshirdi.
2-holat - kontrastni rad etish. Bitta jamoa App Store do‘koniga ochiq kulrang, brend rangidagi matnli ekranlar bilan murojaat qildi. Apple past kontrast tufayli foydalanish imkoniyati bo'yicha ogohlantirish berdi. AIga "matn-fon kontrastini 4,5:1 dan yuqoriroq oshirish" aytilganda, ranglar qorong'ilashdi va muammo hal qilindi. Agar boshidan so'ralganida, hech qanday kechikish bo'lmasdi.
3-holat - dekorativ yorliq shovqini. Ko‘zi ojiz testerning xabar berishicha, har bir bezak belgisi (“chiziq”, “nuqta”, “soya”) AI tomonidan yaratilgan ekranda ovoz chiqarib o‘qilib, ekranni yaroqsiz holga keltirgan. Dekorativ elementlar kirish imkoniyatidan yashirilganda ekranni o'qish tajribasi suyuq bo'ldi. Dars: mavjudlik "juda ko'p teglar" emas, balki "to'g'ri teglar" degan ma'noni anglatadi.
Zaif taklif / Kuchli taklif
Zaif taklif: "Profil ekranini loyihalash."
Kuchli taklif: "iOS/SwiftUI uchun foydalanuvchi profili ekranini yarating. Kontent: avatar, ism, e-pochta, "Profilni tahrirlash" tugmasi, sozlamalar roʻyxati. Holatlar: yuklanmoqda (skelet), xato (qayta urinish tugmasi), toʻliq. Dizayn: moddiy boʻlmagan, iOS HIG ga mos; tizim ranglari, Dinamik turi. Foydalanish imkoniyati: har bir teginish elementi, yashirin nishon piktogrammalarini oʻqing. Mavzu qiymatlarini alohida fayldan olish uchun ekranga rang kodini joylashtirmang, avval komponentlar daraxtini chizing, keyin kodni eksport qiling."
Nusxalanadigan shablonlar
Ekran yaratish shabloni: "[platforma/vosita] uchun [ekran nomi] ni yarating. Kontent: [elementlar]. Foydalanuvchi harakatlari: [harakatlari]. To‘rtta holatni alohida yarating: yuklash, bo‘sh, xato, to‘liq. Dizayn tizimi: [Material 3 / iOS HIG], mavzu belgilaridan o‘qing. Foydalanish imkoniyati: teglar, kontrast: 1, teginish standarti5.”
Mavzu/dizayn tizimi shabloni:"Mening ilovam uchun markaziy mavzu ta'rifini yarating ([Mavzuni yaratish /SwiftUI'da dizayn tokeni tuzilishi]): - Asosiy rang [oltilik], ikkilamchi [oltilik], xato rangi, sirt rangi - Tipografiya shkalasi (sarlavha, korpus, tavsif) - Bo'shliqlar shkalasi (4,8,16,24 radius) va standart yorug'lik burchagi."
Maxsus imkoniyatlar auditi shabloni:"Mavjudlik uchun ushbu ekran kodini tekshiring: 1) Belgilanmagan interaktiv elementlar bormi?2) Kontrast nisbatlari yetarlimi?3) Sensorli nishonlar yetarli darajada kattami?4) Ekranni o‘qish moslamasidan dekorativ elementlar yashirilganmi? Har bir muammo uchun tuzatishlarni taklif qiling. [kod]"
Dizaynni kodlash shablonini: "Men quyidagi dizaynni tasvirlayman: [ekran tavsifi yoki skrinshot]. Buni [Compose/SwiftUI] kodiga tarjima qiling. Boʻshliqlar va hizalanishni dizaynga toʻgʻri saqlang, lekin barcha toʻrt holatni qoʻshing."
Umumiy xatolar
- Faqat to'liq vaziyat haqida o'ylash. Ko'pincha haqiqiy foydalanuvchi yuklash/xato ekranini ko'radi.
- Kodga rang va bo'sh joy kiritish. Agar mavzu markaziy bo'lmasa, izchillik yo'qoladi va parvarish qilish qiyinlashadi.
- Eng so'nggiga kirish imkoniyati qoldiriladi. Uni keyinroq qo'shish qimmatga tushadi; Agar boshidan so'ralsa, bu bepul.
- Overbeling. Dekorativ elementlarni o'qish ham ekranni o'qish tajribasini buzadi.
- Kodga matn kiritish. Ko'p tilli yordam kerak bo'lganda, har bir ekranni qo'lda o'zgartirish kerak; Matnlarni alohida saqlang.
- Skrinshotdan aniq nusxa kutilmoqda. AI dizayni taxminan ishlab chiqaradi. Piksel aniqligi qo'lda o'rnatiladi.
qisqa bayoni; yakunida
AI interfeysni ishlab chiqarishda kuchli, ammo u rahbarlikni talab qiladi. To'g'ri tartib: maqsad, komponentlar, to'rtta holat (yuklash/bo'sh/xato/to'liq), dizayn tizimi, foydalanish imkoniyati, keyin kod. Foydalanish imkoniyatini muhokama qilib bo‘lmaydi va “juda ko‘p teg” emas, “to‘g‘ri yorliq” degan ma’noni anglatadi. Barqarorlik uchun markaziy mavzudan rang va intervallarni o'qing, uni kodga kiritmang. Kuchli iroda bularning barchasini boshidan belgilaydi; Shunday qilib, interfeys haqiqiy dunyoga, do'konni tasdiqlashga va barcha foydalanuvchilarga tayyor.
Ilova vazifasi
Sozlamalar ekrani uchun “Ekran yaratish shablonidan” foydalanib, AIdan Yozish yoki SwiftUI kodini so'rang va barcha to'rtta holatni so'rang. Keyin xuddi shu kodni "Mavjudlikni tekshirish shabloni" bilan tekshiring. Kamida bitta qulaylikni yaxshilashni toping va tuzating (yorliq etishmayotgan, past kontrast yoki kichik teginish nishoni) va haqiqiy foydalanishda qaysi holat (yuklash/boʻsh/xato) koʻproq paydo boʻlishini koʻring.
nazorat ro'yxati
- [ ] Men so'rovda displeyning maqsadi va tarkibiy qismlarini aniq ko'rsatdim
- [ ] Menda to'rtta holat (yuklash/bo'sh/xato/to'liq) alohida yaratilgan
- [ ] Men rang va bo'shliqni markaziy mavzudan o'qib chiqdim, uni kodga kiritmadim.
- [ ] Men boshidan qulaylik yorliqlari va kontrastni xohlardim
- [ ] Men dekorativ elementlarning ekranni o'quvchidan yashirilganligini tasdiqladim
- [ ] Men matnlarni alohida saqladim, bir nechta tillarga tayyor edim