Mobil ilova dizayni — bu ranglar va shriftlarni tanlash emas, balki stsenariylar, o‘lchamlar va ekran holatlari. Mobil o‘ziga xoslik veb tugagan joydan boshlanadi: kursor o‘rniga barmoq, tizim band qilgan ishoralar, xavfsiz zonalar va kesmalar, ruxsatlar va tarmoqsiz ishlash. Apple va Google bu qoidalarni yozma tarzda tasvirlab bergan, loyihalash esa aynan shulardan boshlanadi.
Qisqacha
Farq uchta: kursor o‘rniga barmoq bilan kiritish, erkin verstka o‘rniga platformaning yozma qoidalari va mahsulotning tarmoqsiz ham ishlashi. Shu sababli vebda odatiy bo‘lgan usullar telefonda ishlamay qoladi: mayda ikonka bosilmaydi, kursorni ustiga olib borish mavjud emas, svayp esa tizim ishorasi bilan to‘qnashadi.
| Nimani solishtiramiz | Mobil ilova | Sayt |
|---|---|---|
| Kiritish | Barmoq va ishoralar: bosish taxminiy, hover holati yo‘q | Kursor va klaviatura: bosish aniq, hover va fokus mavjud |
| Bezash qoidalari | Apple va Google tavsiyalari, ustiga do‘konga chiqarishda tekshiruv | W3C standartlari va jamoaning o‘z qarori |
| Navigatsiya | Ishoralarning bir qismini tizim egallagan: orqaga qaytish, ilovalarni almashtirish, bildirishnomalar paneli | Brauzerdagi «orqaga» tugmasi va manzil satri |
| Aloqa | Ekran tarmoqsiz ham ochiladi, ma’lumot qurilmadagi keshda saqlanadi | Tarmoqsiz sahifa ochilmaydi |
| Yangilanish | Do‘kon orqali: auditoriyaning bir qismi oylab eski versiyada qoladi | Keyingi kirishda hamma yangi versiyani ko‘radi |
UX va UI nima, interfeys konversiya va ushlab turishga qanday ta’sir qiladi va mahsulot ustidagi ish qanday bosqichlardan iboratligi — saytlar va raqamli xizmatlar uchun UX/UI-dizayn haqidagi maqolada. Bundan buyon esa faqat mobil qism haqida.
Quyi chegaralar uchta hujjat bilan belgilangan: Apple’ning iOS uchun tavsiyalari, Android tavsiyalari va WCAG 2.2 qulaylik standarti. Bu mobil dizaynning aniq raqamlari bor yagona qismi, va ular bilan bahslashishning ma’nosi yo‘q — ilova aynan shu raqamlar bo‘yicha tekshiriladi.
Apple qoidani qisqa aytadi: boshqaruv elementlari 44 × 44 nuqtadan kichik bo‘lmasin, shunda barmoq bilan aniq bosish mumkin bo‘ladi, matn esa 11 nuqtadan mayda bo‘lmasin, aks holda uni kattalashtirishga to‘g‘ri keladi. Android har bir interaktiv element uchun kamida 48 × 48 dp maydon so‘raydi va kattaroq bo‘lsa yanada yaxshi, deb qo‘shimcha qiladi.
WCAG 2.2 — W3C konsorsiumining 2024-yil 12-dekabrda qabul qilingan standarti. U oddiy matn uchun 4,5:1, yirik matn uchun 3:1 kontrastni talab qiladi, 2.5.8 mezoni esa AA darajasida bosish uchun eng kam 24 × 24 CSS-piksel nishonini belgilaydi. Platforma talab qiladigan 44 pt va 48 dp qattiqroq, shuning uchun telefonda aynan ularga tayaniladi.
Xato Ikonka 24 × 24 o‘lchamda chiziladi va xuddi shu maydon bosish zonasi sifatida qoldiriladi. Ko‘rinadigan element kichik bo‘lishi mumkin — kattalashtirish kerak bo‘lgani barmoqqa javob beradigan maydon, ikonka atrofidagi shaffof bo‘shliqlar orqali.
Farq qiladigan narsa tashqi ko‘rinish emas, xatti-harakat: odam qanday orqaga qaytadi, asosiy bo‘limlar qayerda joylashgan va ekranning qaysi chetlarini tizim egallagan. Vizual uslub esa bir xil saqlanadi — platformalar orasida ko‘chiriladigan narsa brend qoidalari, tizim elementlari emas.
| Element | iOS | Android |
|---|---|---|
| Orqaga qaytish | Yuqori chapdagi tugma va ekranning chap chetidan svayp | Yon chetdan tizim ishorasi yoki navigatsiya panelidagi tugma |
| Asosiy bo‘limlar | Ekran pastidagi bo‘limlar paneli | Pastki navigatsiya paneli yoki chiqma menyu |
| Ekranning bosh amali | Yuqori panel yoki mazmundagi tugma | Mazmun ustidagi suzuvchi amal tugmasi |
| Uskuna xususiyatlari | Pastda uy ekrani ko‘rsatkichi, yuqorida kesma yoki orolcha | Yuzlab modellarda turlicha kesmalar va chetlar, buklanadigan ekranlar |
| Ilovadan chiqish | Stsenariy ekranni yopish bilan tugaydi | Birinchi ekrandagi «orqaga» ishorasi ilovani yopadi |
Shundan amaliy qoida kelib chiqadi: maketda «bitta ekran» emas, uning ikkala platformadagi xatti-harakati chiziladi. Umumiy komponentlar qancha ko‘p bo‘lsa, qo‘llab-quvvatlash shuncha arzon bo‘ladi — bu nativ va krossplatforma ishlab chiqishni tanlashda alohida dalil.
Xavfsiz zona — tizim elementlari qoplamaydigan ekran qismi: status-bar, kamera kesmasi, uy ekrani ko‘rsatkichi, tizim ishoralari zonalari. Odam bosadigan har narsa shu zona ichida joylashadi, fon esa undan tashqarida bo‘lishi mumkin.
Android 15 bilan bu endi shunchaki tavsiya emas: API 35 uchun yig‘ilgan ilovalar odatiy holda butun ekranga chiziladi, va agar dasturchi bo‘shliqlarni hisobga olmasa, mazmun tizim panellari ostiga kirib ketadi. Dizayner esa fon qayerda tugab, xavfsiz zona qayerdan boshlanishi ko‘rinib turadigan maket topshiradi.
Birinchi ishga tushirish boshqa istalgan ekrandan ko‘ra ko‘proq foydalanuvchini yo‘qotadi, deyarli har doim ikkita sababdan: birinchi foydadan oldingi uzun tanishuv va tushuntirishsiz ruxsat so‘rash. Ikkalasi ham slaydlardagi matn bilan emas, qadamlar tartibi bilan tuzatiladi.
Bu yerda do‘kon qoidalari sog‘lom fikr bilan mos keladi. Apple 5.1.1-bo‘limda ruxsat so‘rovidagi izoh ma’lumot qanday ishlatilishini aniq va to‘liq tasvirlashini talab qiladi, asosiy funksiyaga kerak bo‘lmagan huquqni so‘rashni taqiqlaydi va alohida odamni rozilikka majburlashni taqiqlaydi. Xuddi shu yerda 5.1.1(v) qoidasi bor: agar ilova akkaunt ochishga ruxsat bersa, uni o‘chirish ham ilova ichida mumkin bo‘lishi kerak.
Bildirishnomalarga ruxsat — alohida mavzu: uni qachon so‘rash, kanallar qanday tuzilgani va qaysi stsenariylar ishlashi ilovadagi push-bildirishnomalar haqidagi maqolada yoritilgan.
Ekran — bitta rasm emas, holatlar to‘plami, va dizayner ishining yarmi taqdimotga tushmaydigan holatlarga to‘g‘ri keladi. Agar holat chizilmagan bo‘lsa, uni dasturchi o‘ylab topadi — odatda bo‘sh joy yoki tizim xatolik xabari ko‘rinishida.
O‘zbekiston uchun alohida band — interfeysning uch tili. Syntra Health’da butun interfeys rus, o‘zbek va ingliz tillarida mavjud, va ularda qator uzunligi farq qiladi: ruscha sig‘adigan tugma o‘zbekchada ikki qatorga ko‘chadi.
Ishlar tartibi har qanday hajmdagi ilova uchun bir xil, o‘zgaradigan narsa — har bir qadamning chuqurligi. Quyida bosqichlar va har biridan keyin buyurtmachida qoladigan natija.
Dizayn-tizim birinchi ekranda emas, o‘ninchisida o‘zini oqlaydi: QADAM keysida o‘n to‘rt bo‘limli brendbuk ishlab chiqish boshlanishidan oldin belgi, palitra, ikonka va holatlarni tasvirlab bergan, va yangi ekranlarni yig‘ish mexanik ishga aylangan.
Xatolar loyihadan loyihaga takrorlanadi, va ularning barchasi kodga hamda do‘kon sharhlariga tushishidan oldin maketda ko‘rinadi.
Alohida xato — sabablarni tahlil qilmasdan qayta dizayn qilish. Agar odamlar to‘lovga yetib bormasa, palitrani o‘zgartirish foydasiz: avval qaysi qadamda ketib qolishlari ko‘riladi va o‘sha qadam tuzatiladi.
Interfeys sifati xatti-harakat bilan o‘lchanadi, maket haqidagi fikr bilan emas. Mobil ilova uchun ko‘rsatkichlar to‘plami saytnikidan farq qiladi: voronkaga o‘rnatishlar, ruxsatlar va do‘kondagi baholar qo‘shiladi.
Raqamlar muammo qayerdaligini ko‘rsatadi, lekin uni tushuntirmaydi. Sabab jonli odamlarda topiladi: verstkadan oldin bir necha foydalanuvchida o‘tkaziladigan qisqa stsenariy testi tayyor ekranlarni qayta qilishdan arzonroqqa tushadi — bu qanday tashkil etilgani raqamli mahsulotlar uchun UX/UI-dizayn haqidagi maqolada tasvirlangan. Do‘konlarning yig‘ish va metama’lumotlarga talablari esa App Store va Google Play’da nashr qilish haqidagi materialda.
Biz maketdan emas, stsenariy va ma’lumotlardan boshlaymiz: odam maqsadgacha qaysi ekranlardan o‘tadi, u nimani allaqachon biladi va ilova undan nimani so‘rashga majbur. Keyin prototip yig‘iladi, unda mantiq tekshiriladi, va faqat shundan keyin vizual qatlam paydo bo‘ladi — keyingi ekranlar tez yig‘ilishi uchun dizayn-tizim bilan birga.
KruchuVerchu ilovasi shunday qilingan: har bir qo‘shimchaning haqiqiy narxi ko‘rsatilgan taom konfiguratori, og‘irligi va tarkibi bilan kartochka, ko‘zga tashlanib turgan savat va kuryer trekingi — bitta buyurtma stsenariysi atrofida yig‘ilgan ekranlar to‘plami. Bizda alohida «interfeys dizayni» xizmati yo‘q: u mahsulotni ishlab chiqishga kiradi, xuddi saytlar va platformalarni ishlab chiqishdagidek, u yerda loyihalash, verstka va analitika bitta paket bo‘lib boradi.
Vazifangizni muhokama qilamiz
Nima qilish kerakligini yozing — muddat va narxni baholab, yechim taklif qilamiz.
Vizual uslub to‘liq ko‘chadi, xatti-harakat esa yo‘q. Orqaga qaytish, asosiy bo‘limlar joylashuvi, ekranning bosh amali va tizim ishoralari har xil bo‘lib qoladi. Amalda ikkita alohida ilova emas, umumiy dizayn-tizim va ikkita navigatsiya ekranlari to‘plami chiziladi.
Ekranlar emas, holatlar sanaladi. Bitta katalog ekrani — bu yuklanish, bo‘sh natija, tarmoq xatosi, oddiy ro‘yxat va filtrli ro‘yxat. Shuning uchun ekranlar soni bo‘yicha baho deyarli har doim ikki baravar kam chiqadi, va smetaga holatlar ham kiritiladi.
Kichik mahsulotga asosiy to‘plam yetadi: tugmalar, maydonlar, kartochkalar, bildirishnomalar, bo‘shliq qoidalari va holat ranglari. To‘liq qamrovli tizim ilova ustida bir kishidan ortiq ishlaganda yoki yangi bo‘limlar muntazam chiqarilishi rejalashtirilganda kerak bo‘ladi.
Texnik jihatdan mumkin, lekin tuzilma xatosi o‘shanda tayyor ilovada topiladi, uni tuzatish esa verstka, backend va do‘konda qayta tekshiruvga tushadi. Prototip xuddi shu xatoni sxematik ekranlarda ko‘rsatadi, ular esa bir yo‘lda qayta ishlanadi.
Avval ma’lumotlarga qaraladi: odamlar qaysi qadamda ketib qoladi, qo‘llab-quvvatlashdan nima so‘raladi, sharhlarda nima yoziladi. Agar muammo ikki-uch stsenariyda bo‘lsa, ularni tuzatish arzonroq. To‘liq qayta qurish yangi funksiya joriy tuzilmaga sig‘masa oqlanadi.
Eng kami — uchta tekshiruv: WCAG 2.2 bo‘yicha matn va elementlar kontrasti, 44 pt hamda 48 dp’ga nisbatan bosish zonalari o‘lchami, kattalashtirilgan tizim shrifti bilan ekranning ishlashi. Ular yig‘ishdan oldin maketda o‘tkaziladi va keyin qurilmada takrorlanadi.
Manbalar
