Mobil ilovalar uchun rang tanlash strategiyalari: kontrast, tokenlar va UX

Kirish: mobil ilovada rang tanlash nimani hal qiladi

Mobil ilovalar uchun rang tanlash strategiyasi deganda rangni faqat “chiroyli” qilish emas, balki ko‘rish qulayligi, aks sado (feedback), brend uyg‘unligi va kontrast talablarini aniq nazorat qilish tushuniladi. Bu yondashuv UI ko‘rinishini bir xil saqlash va xatolarni kamaytirish imkonini beradi.

Amaliy maqsad shuki: ekrandagi holatlar (bosildi, yuklanmoqda, xato, muvaffaqiyat), matn/ikonlar o‘qilishi va turli yorug‘lik sharoitlarida ishonchli ko‘rinishi uchun rang tizimini oldindan loyihalash.

Rang tizimini “skelet”ga aylantirish: tokenlar va ierarxiya

Ranglar palitrasini faqat palitra ko‘rinishida saqlash yetarli emas. Rang tokenlari (masalan, background, surface, textPrimary, textSecondary, brand, success, warning, error) holatlar bo‘yicha tarqatilganda UI dizayn ham, kod ham barqaror ishlaydi.

Tokenlar ierarxiyasi kamida 3 qatlamdan iborat bo‘lgani foydali: fon/sirt (background/surface), matn (text) va holat ranglari (brand/success/warning/error). Har bir tokenning vazifasi aniq bo‘lishi kerak: “qaysi elementga qo‘yiladi” degan savolga javob oldindan belgilangan bo‘lsin.

• Surface: kartochka, panel, modal kabi joylar uchun; fon bilan aralashmasligi kerak.
• Text: primary/secondary farqlanib, kontrast talablari saqlanishi lozim.
• State: success/warning/error faqat bildirish (toast, banner) bilan cheklanmay, form validatsiyasida ham ishlatiladi.

Kontrastni hisoblash: matn o‘qilishi bo‘yicha aniq mezonlar

Rang strategiyasida eng muhim tekshiruv — matn va fon orasidagi kontrast yetarliligi. Bu ko‘rsatkich o‘lchovli bo‘lib, dizayn qarori “taxmin” emas, tekshiruvdan o‘tadigan natijaga aylanadi.

Kontrast talablari uchun WCAG 2.1 mezonlari qo‘llanadi: oddiy matn uchun odatda 4.5:1, kattalashtirilgan matn uchun 3:1 ko‘rsatkichi ishlatiladi. Buni hisoblashda kontrast nisbati formulasi (relative luminance asosida) qo‘llanadi.

Amaliy yo‘l: tokenlarni tanlagandan so‘ng, har bir matn turi (primary, secondary, disabled) uchun kutiladigan fon sirt (surface/background) bilan kombinatsiyalarni tekshiring. Aynan kombinatsiya muhim: bir xil rang boshqa fon bilan qo‘shilganda kontrast tushib ketishi mumkin.

• Disabled holatida kontrast tez-tez pasayadi; “o‘chirilgan” ko‘rinish uchun ham kontrast chegarasini tekshiring.
• Placeholder matni ko‘pincha secondaryga o‘xshab ketadi; u uchun alohida kontrast tekshiruv qiling.
• Gradient

  ---

  Maqolaning asl nusxasi — goxost.net