Mavzu
Sinf: 10-sinf
Yo'nalish: Advanced UX/UI dizayn va Advanced Front-end
Hafta: 3-hafta, 1-dars
Darsning qisqacha mazmuni
Ushbu darsda biz foydalanuvchi interfeysining (UI) eng muhim vizual unsurlari — Ranglar psixologiyasi va Tipografiya bilan tanishamiz. Siz turli ranglarning inson hissiyotlariga va xarid qarorlariga ta'sirini, rang uyg'unligi (analog, komplementar, triadik) qoidalarini, 60-30-10 balans formulasini hamda ekranda matnni o'qishni yengillashtiruvchi tipografik iyerarxiya tamoyillarini o'rganasiz.
Asosiy tushunchalar va atamalar
| Atama | Inglizcha | Tavsif |
|---|---|---|
| Rang psixologiyasi | Color Psychology | Ranglarning inson xulq-atvori, hissiyotlari va qarorlariga ta'sirini o'rganuvchi soha |
| Komplementar ranglar | Complementary colors | Rang doirasida qarama-qarshi joylashgan, yuqori kontrastli juftlik |
| Analog ranglar | Analogous colors | Rang doirasida yonma-yon joylashgan, ko'zga yumshoq va uyg'un ranglar |
| 60-30-10 qoidasi | 60-30-10 Rule | UI da ranglarni muvozanatlash formulasi (60% fon, 30% strukturaviy, 10% CTA) |
| Sans-serif | Sans-serif | Harf uchlarida qo'shimcha kertiklari (serif) bo'lmagan, zamonaviy tekis shriftlar |
| Vizual iyerarxiya | Visual Hierarchy | Elementlarning o'lcham, qalinlik va joylashuvi orqali muhimlik darajasini ko'rsatish |
| Line-height | Line-height | Matn qatorlari orasidagi vertikal masofa (optimal 140–160%) |
Nazariy xulosa
1. Ranglar psixologik ma'nolari
- Ko'k: Ishonch, barqarorlik va xavfsizlik (Bank, IT, tibbiyot).
- Qizil: Shoshilinchlik, ehtiros, diqqat va ogohlantirish (Aksiyalar, xarid).
- Yashil: Muvaffaqiyat, salomatlik, o'sish va tinchlik.
- Sariq/To'q sariq: Do'stona munosabat, quvonch va optimizm.
2. 60-30-10 formulasining amaliy qo'llanishi
- 60% Dominant neytral fon: Oq, och kulrang yoki to'q qora.
- 30% Ikkilamchi rang: Kartochkalar, menyular va matnlar.
- 10% Urg'u (Accent / CTA): Eng muhim harakatga chaqiruvchi tugmalar.
3. Tipografiya oltin qoidalari
- Shrift tanlash: Ekranda sans-serif (Inter, Roboto, SF Pro) afzal.
- O'lchamlar farqi: Sarlavha (H1) va asosiy matn (Body) o'rtasida kamida 2 barobar o'lcham farqi bo'lishi.
- Tekislash: Vebda uzoq matnlar doimo chapga tekislanadi (Left-align).
- Optimal qator balandligi: 16px matn uchun 24-26px line-height.
Mustaqil bajarish uchun topshiriqlar
1-topshiriq oson
Bank yoki FinTech mobil ilovalari nima uchun asosiy rang sifatida ko'k rangni tanlaydi? Ushbu rang inson ruhiyatida qanday hissiyot uyg'otishini tushuntiring.
2-topshiriq oson
UI dizaynda 60-30-10 qoidasining har bir foiz qismi (60%, 30%, 10%) qanday vazifani bajarishini yozing.
3-topshiriq oson
Sans-serif va Serif shriftlar o'rtasidagi asosiy farq nima? Raqamli ekranlarda nega ko'pincha Sans-serif shriftlar qo'llaniladi?
4-topshiriq o'rta
Komplementar va Analog rang uyg'unliklari nima bilan farqlanadi? Ularning har birini veb-sahifaning qaysi elementlarida ishlatish maqsadga muvofiq?
5-topshiriq o'rta
Nima uchun veb-sahifalardagi uzoq matnli maqolalarni markazga tekislash (center-align) taqiqlanadi? Bu foydalanuvchining o'qish tezligiga qanday ta'sir qiladi?
6-topshiriq o'rta
Quyidagi 3 ta brend/soha uchun mos rang palitrasini (Asosiy, Ikkilamchi, Urg'u) tanlang:
- Bolalar uchun ta'lim platformasi;
- Qimmatbaho zargarlik buyumlari onlayn do'koni;
- Tez yetkazib berish (fast delivery) xizmati.
7-topshiriq o'rta
Tipografiyada "Line-height" (qator balandligi) nima uchun muhim? Agar 16px o'lchamli matn uchun line-height 16px (100%) qilib qo'yilsa, matn qanday ko'rinishga keladi?
8-topshiriq qiyin
Mobil ta'lim ilovasining darslar ro'yxati ekrani uchun to'liq tipografik shkala (Typography Scale) tuzing:
- Katta ekran sarlavhasi;
- Dars mavzusi sarlavhasi;
- Dars tavsifi matni;
- Dars davomiyligi va reyting belgisi.
Har biri uchun font-size, font-weight va line-height qiymatlarini belgilang.
9-topshiriq qiyin
WCAG rang kontrasti qoidalariga muvofiq quyidagi kombinatsiyalarni baholang:
- Oq fon ustida to'q ko'k matn;
- Och sariq fon ustida oq matn;
- Yashil tugma ustida to'q yashil matn.
Xato kombinatsiyalarni to'g'rilash uchun qanday o'zgartirish kiritish kerakligini taklif qiling.
10-topshiriq bonus
Figma yoki Adobe Color vositasida shaxsiy portfoliangiz yoki sevimli loyihangiz uchun 60-30-10 qoidasiga to'liq mos keladigan 3 ta rangli garmonik palitra va Roboto (yoki Inter) shrifti asosidagi tipografik kartochka maketini yarating.