AXV

UI elementlarida rang nazariyasi

Rang palitrasi, kontrast va ranglarning dizayndagi o'rni

9-sinfUX/UI dizayn4-hafta · 11-dars

Bugungi dars rejasi

01. Rang palitrasi

Asosiy, ikkinchi darajali, komplementar va analog ranglar.

02. Palitra turlari

Monoxromatik, analog, qo'shimcha va triadik.

03. Kontrast va Figma

WCAG nisbatlari va Fill, Stroke sozlamalari.

01

Rang palitrasi

Interfeys uchun tanlangan ranglar kombinatsiyasi

Rang palitrasi nima?

Rang palitrasi - dizayner tomonidan qulay va estetik interfeys yaratish uchun tanlangan ranglar kombinatsiyasi.
  • Ko'pincha yagona dizayn tizimining bir qismi
  • Rang nazariyasiga asoslanadi
  • Dizayner uni foydalanuvchiga moslab tuzadi

Asosiy va ikkinchi darajali ranglar

Asosiy ranglar: qizil, ko'k, sariq

Qizil
Ko'k
Sariq

Ikkinchi darajali ranglar: yashil, to'q sariq, binafsha

Yashil
To'q sariq
Binafsha

Rang g'ildiragi: qarama-qarshi va yonma-yon

Rang g'ildiragi Komplementar qarama-qarshi: ko'k va to'q sariq Analog yonma-yon, uyg'un

Doiralar ustiga bosing.

Terminlar: bosing va aylantiring

Palitra

bosing

Interfeys uchun tanlangan ranglar kombinatsiyasi.

Kontrast

bosing

Matnning fondan ajralib o'qilishi darajasi.

Komplementar

bosing

Rang g'ildiragida qarama-qarshi turgan, bir-birini to'ldiruvchi juftlik.

Analog

bosing

G'ildirakda yonma-yon joylashgan uyg'un ranglar.

02

Rang nega muhim?

Brend, qulaylik, konversiya va tuyg'ular

Rangning ahamiyatini belgilovchi omillar

Brendlash

Izchil, taniqli ranglar brendni ajratib turadi va eslab qolishga yordam beradi.

Qulaylik

Menyu, havola va tugmani tez farqlash. Foydalanuvchi nima qilish mumkinligini darhol tushunadi.

Kirish imkoniyati

Oldingi va fon orasidagi kuchli kontrast ko'rish qobiliyati cheklanganlarga yordam beradi.

Konversiya

CTA tugma rangi harakatga ta'sir qiladi. Dizaynerlar A/B testdan foydalanadi.

Tuyg'ular

Har bir rang ma'lum hissiy holat bilan bog'liq.

Rang ma'nosi hamma joyda bir xil emas

Evropa

Oq rang to'ylar bilan bog'liq.

VS

Xitoy

Oq rang dafn va o'lim bilan assotsiyalanadi.

Rang ma'nolari bo'yicha yagona ilmiy kelishuv yo'q: faqat umumiy tendensiyalarga tayaning.
03

To'rt xil palitra

Monoxromatik, analog, qo'shimcha, triadik

To'rt xil rang palitrasi

Monoxromatik Analog Qo'shimcha Triadik

Palitra ustiga bosing.

Monoxromatik palitra

Bir xil rang, turli ohanglar, soyalar va to'yinganlik darajalari.

Asosiy
Quyuq
Och

Chuqurroq bilish uchun pastga ↓

HSB rang tizimi

Monoxromatik palitralar HSB tizimida yaratiladi: asosiy rang (Hue) o'zgarmaydi, to'yinganlik (Saturation) va yorqinlik (Brightness) sozlanadi.

Hue - o'zgarmaydiSaturationBrightness

Triadik palitra

Bitta asosiy (dominant) rang tanlanadi, qolgan ikkitasi aksent sifatida ishlatiladi.

Palitrani loyihalash: 5 tavsiya

  1. Tadqiqotdan boshlang: qanday kayfiyat kerak?
  2. Bitta brend rangiga e'tibor qarating
  3. Monoxromatik palitrani ko'rib chiqing
  4. Kirish imkoniyatini tekshiring (kontrast)
  5. Foydalanuvchilar bilan sinab ko'ring
04

Kontrast (WCAG)

Matn fondan qanchalik ajralib turadi?

WCAG kontrast nisbati

0
oddiy matn uchun kamida
0
katta matn uchun kamida
Tekshirish uchun WebAIM kontrast tekshiruvi kabi vositalar bor. Kelajakda 3-versiyada APCA algoritmi kutilmoqda.

Kontrast: yomon va yaxshi

Yomon

Och kulrang matn och fonda: ko'rish qobiliyati cheklanganlar o'qiy olmaydi.

Yaxshi

Deyarli qora matn oq fonda: o'qish qulay, kontrast nisbati yetarli.

05

Figma amaliyoti

Header va footer rangi, matn rangi, Stroke

Figma: rang berish qadamlari

1. Header

Interfeys yuqorisidagi sarlavha (header) blokini tanlang va unga asosiy rangni bering.

2. Footer

Pastki qismni ham mos rang bilan bezang: yaxlitlik paydo bo'ladi.

3. Fill: matn rangi

Matnni tanlab, o'ng paneldagi Fill orqali rang bering. Misol: HEX 020202, deyarli qora.

4. Stroke

Rang 7B9EBE, shaffoflik 52%, joylashuv Outside, qalinlik 1 px.

Rangsiz karkas

e-kutubxona

Header

Kitoblar ro'yxati

Footer

Rangli interfeys

e-kutubxona

Header

Kitoblar ro'yxati

Footer

Mini-test

Palitrada ko'k va to'q sariq juftligi qanday ataladi?

Rang g'ildiragida qarama-qarshi turgan ranglar komplementar deyiladi, ular kuchli kontrast beradi.

Odatiy xatolar

Juda ko'p rang: interfeys murakkablashadi, kognitiv yuk oshadi.
Kontrastni tekshirmaslik: chiroyli, lekin o'qib bo'lmaydigan matn.
Bitta asosiy brend rangi + ikkilamchi + fon: sodda va izchil.

Amaliy topshiriq 30 daqiqa

OsonFigmada asosiy, ikkilamchi va fon ranglaridan iborat 3 kvadrat yasang.
O'rta«E-kutubxona» header va footer'iga asosiy rang bering, matn rangini Fill orqali belgilang.
QiyinPalitra turini tanlang (monoxromatik yoki triadik), kontrastni tekshirib, sababini yozing.

Xulosa

Bugun o'rgandik

Palitra, 4 palitra turi, kontrast (WCAG 4,5:1 va 3:1), Figma Fill va Stroke.

Uyga vazifa

Brend palitrasini tahlil qilish va Figmada rang berish.