Interfeys elementlari: o‘lchov va tartibning maqsadi
Interfeys elementlarining o‘lchovlari va tartibi deganda ekranda komponentlar (matn, tugmalar, maydonlar, ikonlar) qanchalik katta bo‘lishi va qanday ketma-ket joylashishi nazarda tutiladi. Bu tanlovlar foydalanuvchining tez va xatosiz ishlashiga bevosita ta’sir qiladi: noto‘g‘ri o‘lchov bosishni qiyinlashtiradi, noto‘g‘ri tartib esa kognitiv yukni oshiradi.
Mobil ilovalarda bu masala yanada sezgir: barmoq bilan bosish, turli ekranda avtomatik masshtab, dinamik matn va animatsiyalar sababli “ko‘rinadi-yu, ishlamaydi” holatlari tez-tez uchraydi. Shuning uchun o‘lchov va tartibni umumiy maslahat bilan emas, tekshiriladigan me’yorlar bilan belgilash kerak.
Minimal amaliy o‘lchovlar: bosish zonasi, matn va ikonlar
Barmoq bilan bosish uchun minimal “touch target”
Mobil UI’da tugma va havolalarning bosish zonasi odatda kamida 44×44 dp (yoki ekvivalent piksel mantiqida) bo‘lishi tavsiya etiladi. Bu me’yor Apple’ning Human Interface Guidelines (HIG) doirasida keng ishlatiladi: maqsad — barmoq “yoniga” bosilganda ham amaliy harakatni ushlab qolish.
Tekshiruv: devtools yoki dizayn tizimingizda har bir interaktiv elementning o‘lchovi “hit area” sifatida 44 dp dan kichik emasligini tekshiring. Agar sizda 36 dp baland tugma bo‘lsa, fon yoki padding hisobiga umumiy hit area ni kattalashtirib yuboring.
Matn o‘lchovi va satr balandligi (line-height)
Matn o‘lchovi “ko‘rinishi” emas, o‘qilishi bilan baholanadi: satr balandligi (line-height) juda kichik bo‘lsa, satrlar bir-biriga yopishadi va xatoliklar ko‘payadi. Amaliy yo‘l: ilovangizda dinamik matn (font scaling) yoqilgan bo‘lsa, 100%, 120%, 150% kabi holatlarda matn kesilishini tekshiring.
Tekshiruv: turli uzunlikdagi matn (masalan, 2-3 ta so‘z emas, 2 ta jumla) bilan komponentlarni sinang. Agar line-height mos bo‘lmasa, avtomatik qatorga tushish (wrap) dizaynni buzadi.
Ikonlar: vizual o‘lchov va amaliy bosish maydoni farqi
Ikonning o‘lchovi 20–24 dp atrofida bo‘lishi mumkin, lekin ikon bilan bog‘liq tugma yoki “action” uchun bosish zonasi baribir kamida 44×44 dp bo‘lishi kerak. Ya’ni, ikon kichik ko‘rinishi mumkin, ammo hit area kattaroq bo‘ladi (padding orqali).
Tekshiruv: ikon-tugma atrofida “faqat rasm bosiladi” degan xayolni yo‘q qiling. Yashirin padding yoki kontentdan tashqariga cho‘zilgan touch area foydalanuvchiga sezilarli yordam beradi.
Tartib tizimi: grid, margin va “komponent ritmi”
Grid va spacing: izchil oraliqlarni raqam bilan bering
Tartibning eng muhim ko‘rsatkichi — bir xil oraliqlar takrorlanishi. Ko‘p dizayn tizimlari spacingni “qadamlar” bo‘yicha belgilaydi (masalan, 4 dp yoki 8 dp qadamlari). Natija: komponentlar bir-biriga “mos tushadi”, foydalanuvchi ekran bo‘ylab izchillikni sezadi.
Amaliy qoidalar: bir bo‘lim ichida vertikal spacingni 8 dp qadamda, bo‘limlar orasida esa 16 dp yoki 24 dp kabi kattaroq qiymatda ushlab turing. Shunda “tasodifiy” ko‘rinish yo‘qoladi.
Margin va padding: “komponent ichki” hamda “tashqi” vazifa
Padding — komponentning ichidagi bo‘shliq, margin — komponentlar orasidagi masofa. Noto‘g‘ri amaliyot: marginni komponent ichida “simulyatsiya” qilish. Bu keyinchalik responsive holatlarda (masalan, uzun matn, qayta tartiblash) buzilishga olib keladi.
Tekshiruv: bir bo‘lim ichida matn/ikon atrofida padding ishlatyapsizmi, komponentlar orasida esa faqat margin ishlatyapsizmi — shuni UI inspektor orqali solishtiring.
Vizual ierarxiya: tartibni tipografiya va ketma-ketlik bilan bog‘lang
Tartib shunchaki joylashuv emas: ierarxiya ham tartib orqali o‘qiladi. Masalan, sarlavha → asosiy matn → yordamchi ma’lumot → asosiy tugma ketma-ketligi foydalanuvchiga “nima qilaman?” savoliga tez javob beradi.
Tekshiruv: skrinshot oling va elementlarni ketma-ket o‘qishga urinib ko‘ring. Agar sarlavha bilan tugma o‘rtasida yordamchi matn vizual jihatdan “yo‘qolib” ketsa, tartibni qayta ko‘rib chiqish kerak.
Tarix: o‘lchov va tartib yondashuvlari qanday shakllangan
Vebdan mobilgacha: “responsive”dan “tap target”gacha
Desktop veb UI’da o‘lchovlar asosan CSS orqali, ko‘proq ekran o‘lchamiga moslashishga qaratilgan edi. Mobil esa barmoq bilan bosishni hisobga olgan holda yangi muammo keltirdi: hover yo‘q, bosish aniqligi kamroq, kichik elementlar xatolik keltiradi. Shu sabab “tap target” atrofida me’yorlar paydo bo‘ldi.
Keyingi bosqichda dinamik matn va turli DPI (device pixel ratio) muammolari kuchaydi. Natijada o‘lchovlar dp/sp kabi mantiqiy birliklarda berila boshladi, layout esa “content-driven” yondashuv bilan (matn uzunligi, qatorga tushish) moslashadigan bo‘ldi.
Material va iOS yo‘nalishlari: spacing/komponent ritmi
Android ekotizimida Material Design spacing va komponent ierarxiyasini tartibli tizim sifatida ommalashtirdi. iOS tomonda esa HIG tavsiyalari orqali minimal touch targetlar va tipografik ierarxiya mustahkamlandi. Ikkalasi ham umumiy g‘oyani beradi: foydalanuvchi xatosiz ishlashi uchun o‘lchov va tartib “standart”ga tayansa yaxshi.
Amaliy xulosa: siz qaysi dizayn tizimidan foydalansangiz ham, o‘lchovlar va spacing qiymatlarini shunchaki taxmin bilan emas, hujjatlashtirilgan qoidalar yoki ichki dizayn tizimingiz jadvali bilan yuriting.
Ishlash mexanizmi: o‘lchov qachon qanday hisoblanadi
Layout bosqichlari: o‘lchash (measure) va joylash (layout)
Mobil UI ramkalarida (masalan, Android’da View tizimi yoki Jetpack Compose, iOS’da Auto Layout va SwiftUI) layout odatda o‘lchash va joylash bosqichlariga bo‘linadi. Komponent “measure” paytida berilgan cheklovlar (constraints) ichida o‘zining kerakli hajmini hisoblaydi, so‘ng “layout” bosqichida ekranda aniq koordinatalar belgilanadi.
Shuning uchun o‘lchov xatolari ko‘pincha “komponent ichki content”ga emas, constraints bilan bog‘liq bo‘ladi. Masalan, tugmaga padding qo‘shasiz, lekin parent cheklovlar tugmani siqib qo‘yadi va hit area yana kichrayadi.
Constraints va wrapping: matn uzunligi tartibni buzmasligi kerak
Matn elementlari (sarlavha, izoh, yordamchi matn) o‘z uzunligiga qarab qatorga tushadi (wrapping). Agar maksimal satrlar soni noto‘g‘ri bo‘lsa yoki truncation (ellipsis) qoidasiz bo‘lsa, tugma va boshqa komponentlar joyidan siljiydi.
Amaliy yo‘l: matn komponentlarida maksimal qatorlar sonini va overflow rejimini aniq bering. Masalan, sarlavha 2 qator, izoh 3 qator, “show more” bo‘lsa alohida action sifatida joylashtiring.
Pixel zichligi va birliklar: dp/sp nima uchun kerak
dp/sp mantiqiy birliklar bo‘lib, turli ekrandagi DPI farqlariga moslashadi. Shuning uchun siz “44 dp” deb berganingizda, ekranda real ko‘rinadigan bosish zonasi barqarorroq bo‘ladi. Agar siz to‘g‘ridan-to‘g‘ri piksel bilan o‘lchasangiz, ayrim qurilmalarda element juda kichik yoki juda katta chiqishi mumkin.
Tekshiruv: bir xil dizaynni kamida 2 ta “kontrast” qurilmada ko‘ring (masalan, kichik ekran + katta ekran, yoki ldpi/xxhdpi farqi seziladigan). Bosish zonasi ham vizual, ham amaliy jihatdan mosligini tekshiring.
Amaliy qo‘llanma: dizaynni tekshirish va tanlash mezonlari
Interaktiv elementlar uchun tekshiruv ro‘yxati
- Tugma, havola va ikon-actionlarning hit area kamida 44×44 birlikda ekanini tekshiring.
- Hit area ikonning o‘zidan kattaroq bo‘lishi mumkinligini padding orqali ta’minlang.
- Disabled holatda ham minimal hit area saqlansin (faqat vizual xiralik bo‘lsin, o‘lcham kichraymasin).
Bu tekshiruvlar “ko‘rinishi chiroyli” masalasini emas, foydalanuvchi haqiqatan bosishni urishi mumkinligini kafolatlaydi.
Spacing va ierarxiya uchun tezkor qoida
- Bir xil sathda komponentlar orasini 8 birlik qadamlarda bering.
- Bo‘limlar (section) orasida esa 16 yoki 24 birlik ishlating.
- Sarlavha va asosiy matn orasida kichikroq spacing, sarlavha va action tugma orasida esa mantiqiy “ajratish” qiling.
Tekshiruv: elementlarni “ko‘z bilan” emas, dizayn tizimingiz jadvalidagi qiymatlar bo‘yicha solishtiring. Agar 12 dp, 13 dp, 17 dp kabi aralash qiymatlar ko‘p bo‘lsa, ritm buziladi.
Tipografik tartib: dinamik matn bilan sinash
Dinamik matn yoqilganda (masalan, foydalanuvchi tizimda matn o‘lchamini kattalashtirsa), layout kesilishi, overlap bo‘lishi yoki tugmalar pastga “surilib ketishi” mumkin. Buni oldindan ko‘rish uchun kamida 3 darajani tekshiring: 100%, 120%, 150% (yoki sizning tizimingizdagi ekvivalent sozlama).
Amaliy yechimlar: qatorga tushish (wrap) qoidalarini belgilang, overflow uchun ellipsis qoidasini yozing va “action” tugmalarni pastki bar kabi qat’iy joylarda joylashtirmasdan oldin safe area bo‘ylab moslashuvini tekshiring.
Taqqoslash: noto‘g‘ri va to‘g‘ri tartib natijasi
| Holat | Muammo | O‘lchov/tartib yechimi |
|---|---|---|
| Ikon 24 birlik, tugma faqat ikon hajmida | Barmoq “yoniga” tegadi, noto‘g‘ri bosish yoki bosmaslik | Hit area’ni 44×44 birlikka padding orqali yetkazing |
| Matn 1 qator majburiy, uzun bo‘lsa kesiladi | Foydalanuvchi ma’lumotni to‘liq ko‘ra olmaydi, keyingi actionlar mantiqsiz bo‘ladi | Max qatorlar sonini va overflow rejimini aniq belgilang |
| Bo‘limlar orasida turli tasodifiy spacinglar | Vizual ritm yo‘qoladi, skanerlash qiyinlashadi | Spacing jadvali (8 birlik qadami, bo‘limlar 16/24)ga qayting |
| Padding o‘rniga margin bilan “markazlashtirish” | Responsive holatda komponentlar bir-birini itarib yuboradi | Ichki bo‘shliqni padding bilan, tashqi masofani margin bilan boshqaring |
FAQ
Mobil tugma uchun eng kichik qanchalik bo‘lishi kerak?
Klassik tavsiya: bosish zonasi kamida 44×44 birlik. Ikonning o‘zi kichikroq bo‘lishi mumkin, ammo hit area shu minimaldan kichik bo‘lmasligi kerak.
Spacing nega aniq jadvalga bog‘lanishi kerak?
Chunki layout avtomatik wrap va responsive rejimlarda faqat “qadam” qiymatlar izchilligini ushlab turadi. Tasodifiy oraliqlar ko‘paygan joyda komponentlar tez-tez bir-biriga to‘qnashadi yoki ritm buziladi.
Matn dinamik o‘lchamda kesilib qolsa, qayerdan boshlash kerak?
Avval matn komponentining max qatorlari va overflow (masalan, ellipsis) rejimini ko‘ring. Keyin parent container’ning constraints’ini tekshiring: siqib qo‘yilgan parent ko‘pincha kesilishning asosiy sababi bo‘ladi.
Ikonlar 20–24 birlik bo‘lsa, nima uchun hit area 44 bo‘lishi kerak?
Vizual o‘lcham va amaliy bosish ehtiyoji farq qiladi. 20–24 birlik ikon faqat “signal” beradi, hit area esa xatolik ehtimolini kamaytiradi; shuning uchun hit area kattaroq bo‘ladi.
Grid ishlatish har doim shartmi?
Har doim shart emas, lekin spacing jadvaliga rioya qilish deyarli doim foydali. Agar grid ishlatsangiz, komponentlar orasidagi masofani tez va izchil boshqarasiz; grid ishlatilmasa ham, 8 birlik kabi qadamli spacingni saqlang.
O‘lchovlarni dp/sp bilan berish nima uchun muhim?
Turli DPI’larda piksel bilan berilgan qiymatlar nomuvofiq “haqiqiy” o‘lchamga aylanadi. dp/sp esa mantiqiy birliklar orqali bosish va o‘qilish barqarorroq qolishini ta’minlaydi.
Xulosa
Interfeys o‘lchovlari va tartibi ikki narsani hal qiladi: barmoq bilan xatosiz bosish hamda ekran bo‘ylab oson skanerlash. Bunga yetishish uchun minimal hit area (44×44), spacing jadvali (odatda 8 qadamlari), tipografik ierarxiya va dinamik matn sinovi kabi tekshiriladigan qoidalar kerak.
Eng yaxshi yondashuv — o‘lchov va tartibni “ko‘ngilga yoqadi”dan chiqarib, aniq raqamlar va tekshiruvlar bilan ishlab chiqish: shunda dizayn nafaqat chiroyli, balki barqaror ishlaydi.
