AXV

Ranglar Psixologiyasi va Tipografiya

UI vizual elementlari, 60-30-10 qoidasi va o'qiluvchanlik iyerarxiyasi

10-sinfAdvanced UX/UI3-hafta · 7-dars

Bugun nimani o'rganamiz?

Rang psixologiyasi

Ranglarning inson hissiyotlariga ta'siri va brend identifikatsiyasi

60-30-10 qoidasi

Balansli rang palitrasini yaratish: fon, struktura va urg'u (CTA)

Tipografik iyerarxiya

Sans-serif shriftlar, o'lchamlar masshtabi va qatorlar oralig'i (line-height)

01

Ranglar psixologiyasi

Foydalanuvchi ongiga birinchi soniyalardanoq ta'sir o'tkazish san'ati

Raqamlarda rangning kuchi

0
Foydalanuvchi mahsulot haqida ilk xulosaga kelish vaqti
0
Xarid qarorida rang omilining asosiy sabab sifatidagi ulushi
0
To'g'ri rang orqali brendni tanish ko'rsatkichining oshishi

Illyustratsiya: Ranglarning Psixologik Ma'nolari

Ko'k Ishonch, xavfsizlik Bank, FinTech, IT Qizil Shoshilinchlik, quvvat YouTube, Aksiya Yashil Muvaffaqiyat, soflik Salomatlik, Eko Sariq / To'q sariq Optimizm, do'stona Bolalar, Taom
02

Rang uyg'unligi va 60-30-10 qoidasi

Tartibsizlikdan qochish va professional balans yaratish

Rang doirasi (Color Wheel) uyg'unliklari

Analog (Analogous)

Doirada yonma-yon turgan ranglar. Ko'zni charchatmaydi, tinch va tabiatga yaqin tuyg'u uyg'otadi.

Komplementar

Bir-biriga to'g'ridan-to'g'ri qarama-qarshi ranglar. Kuchli kontrast hosil qiladi, CTA tugmalar uchun a'lo.

Triadik (Triadic)

Doirada teng uchburchak hosil qiluvchi 3 rang. Jonli, rang-barang, ammo muvozanatli kompozitsiya beradi.

60-30-10 Oltin Qoidasi

60% Dominant Neytral fon rangi Oq, och kulrang yoki qora (Kenglik beradi) 30% Struktura Ikkilamchi rang Kartochkalar va sarlavhalar 10% CTA / Urg'u Tugma

Oldin va keyin: Rang balansi

«Yangi yil archasi» uslubi

Yashil fon, binafsha sarlavha, qizil matn, sariq tugmalar... Foydalanuvchi ko'zi 10 soniyada toliqadi va sahifani yopadi.

Sof va aniq vizual iyerarxiya

60% toza oq fon, 30% grafit matn va kartochkalar, 10% yorqin ko'k CTA tugma. Foydalanuvchi diqqati bir zumda asosiy harakatga tushadi.

03

UI Dizaynda tipografiya

Matn — raqamli mahsulot axborotining 90%ini tashkil qiladi

Sans-serif va Serif shriftlar

Sans-serif (Kertiksiz)

Roboto, Inter, SF Pro, Helvetica

Piksellarga aniq tushuvchi tekis chiziqlar. Raqamli ekranlar va mobil ilovalar uchun dunyo standarti.

ZamonaviyO'qilishi oson
VS

Serif (Kertikli)

Times New Roman, Merriweather, Georgia

Harf uchlaridagi qo'shimcha chiziqchalar (kertiklar). Qog'oz kitoblar, klassik adabiyotlar uchun qulay.

KlassikBosma

Tipografik Iyerarxiya Pog'onasi

H1 Bosh sarlavha (32–40px, Bold) H2 Bo'lim sarlavhasi (24–28px, Semi-bold) Body: Asosiy matn (16px, Regular, line-height: 1.5–1.6) O'quvchi ko'zini charchatmasdan uzoq mutolaa qilishga moslangan. Caption / Meta (12–13px, Sana, muallif)

Line-height va Matnni tekislash

Line-height: 140–160%

Agar 16px shrift uchun qator balandligi 16px bo'lsa, qatorlar bir-biriga yopishib qoladi. Optimal ko'rsatkich — 24px–26px.

Chapga tekislash (Left-align)

Inson ko'zi chapdan o'ngga o'qiydi. Agar matn markazga tekislansa, har bir qatorda ko'z boshlanish nuqtasini izlab toliqadi.

UI Palitrasini tuzish qadamlari

1. Brend xarakterini aniqlash

Mahsulot qanday hissiyot berishi kerak: jiddiymi (ko'k) yoki quvnoqmi (to'q sariq)?

2. 60% Neytral fonni tanlash

Oq, toza kulrang yoki quyuq qora fonni asos qilib belgilash.

3. 10% CTA rangini ajratish

Faqat asosiy harakat tugmalari uchun bitta yorqin kontrast rangni belgilash.

4. WCAG kontrast tekshiruvi

Matn va fon o'rtasidagi kontrast kamida 4.5:1 ekanini vositalar orqali tekshirish.

UI Dizayn sirlari

Kartani bosing va amaliy qoidani ko'ring

CTA Tugma Rangi

bosing

Urg'u rangini butun sahifaga sochib yubormang. U faqat eng muhim 1-2 ta tugmada ishlatilsa quvvatli bo'ladi.

Maksimal 2 ta shrift

bosing

Bitta loyihada 2 tadan ko'p shrift oilasini ishlatmang. Bitta Sans-serif shriftning turli vaznlari (Bold, Regular) yetarli.

Qator uzunligi

bosing

Bir qatordagi belgilar soni 50–75 ta belgidan oshmasligi kerak. Undan uzun qatorlar o'qishni qiyinlashtiradi.

Amaliy keys: FinTech Ilova Palitrasi

Ranglar tizimi

60% Fon: Toza oq va och kulrang neytral fon.

30% Struktura: To'q ko'k-grafit sarlavha va kartalar.

10% CTA: Yorqin moviy ko'k "Pul o'tkazish" tugmasi.

Tipografiya

Shrift: Inter (Sans-serif).

Katta hisob balansi: 36px Bold.

Operatsiyalar ro'yxati: 15px Regular, qator oralig'i 22px.

Natija: Ishonchli, professional va ko'zga qulay interfeys!

Amaliy topshiriq 20 daqiqa

Oson3 ta turli sohadagi loyiha uchun rang psixologiyasiga mos ranglarni tanlang.
O'rtaElektronika do'koni uchun 60-30-10 qoidasi bo'yicha ranglar taqsimotini belgilang.
QiyinYangiliklar sayti uchun to'liq tipografik shkala (H1, H2, Body, Caption) jadvalini tuzing.

Bilimingizni sinang

UI dizayndagi 60-30-10 qoidasiga ko'ra 10% qism qaysi elementlarga ajratiladi?

To'g'ri: 10% ulush faqat eng muhim harakatni (CTA) ajratib ko'rsatish uchun urg'u rangiga beriladi.

Keng tarqalgan xatolar

Uzun matnni markazga tekislash

Paragraflar markazga tekislansa, o'quvchi ko'zi har qatorda yangi boshlanish nuqtasini qidirib toliqadi.

Yetarli bo'lmagan kontrast

Oq fonda och kulrang yoki sariq matn yozish WCAG talabini buzadi va o'qishni imkonsiz qiladi.

Xulosa

Bugun o'rgandik

  • Rang psixologiyasi va sohalar uyg'unligi
  • 60-30-10 qoidasi va rang doirasi
  • Sans-serif shriftlar va tipografik iyerarxiya

Keyingi dars

Grid tizimlari va kompozitsiya: 12 ustunli grid, 8pt spacing tizimi va vizual balansni o'rganamiz!