AXV

UI kompozitsiyasi va vizual ierarxiya

Balans · Kompozitsion markaz · Ritm · Kontrast · Bo‘sh joy

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

Bugun nimalarni o‘rganamiz?

Kompozitsiya

Ta’rif va 4 ta tamoyil (1.19-rasm)

Vizual ierarxiya

F va Z o‘qish naqshlari

Bo‘sh joy va grid

White space, 8-point grid, Figma amaliyoti

Takrorlash: shrift va rang

60-30-10 qoidasida 10% qaysi rangga beriladi?

10% - CTA tugma, faol havola. Bugun shu tugmani ekranda qayerga qo‘yishni o‘rganamiz.

Bir xil mazmun - ikki xil ekran

Hamma narsa bir xil

Sarlavhalar bir o‘lchamda, oraliqlar har xil, 3 ta bir xil yorqin tugma. Ko‘z qayerga qarashni bilmaydi.

Aniq ierarxiya

Bitta katta sarlavha, bitta yorqin tugma, teng oraliqlar va yetarli bo‘sh joy. Ko‘z yo‘li oldindan rejalangan.

01

Kompozitsiya nima?

Elementlarni tartibga solish va diqqatni boshqarish san’ati

Ta’rif

Kompozitsiya - vizual elementlarni tartibga solish, birlashtirish va foydalanuvchi diqqatini eng muhim nuqtaga yo‘naltirish san’ati.

Maqsad

Diqqatni boshqarish, axborotni tartibli va estetik ko‘rsatish

O‘xshatish

Do‘kon vitrinasi: eng yaxshi mahsulot o‘rtada, chiroqlar ostida turadi

4 ta asosiy tamoyil (1.19-rasm)

Balans muvozanat Markaz focal point Ritm takror, oraliq Kontrast farq orqali urg‘u
02

Balans va markaz

Simmetrik, asimmetrik va focal point

Simmetrik yoki asimmetrik?

Simmetrik

Markazga nisbatan chap va o‘ng teng
Klassik, rasmiy, xotirjam
VS

Asimmetrik

Elementlar har xil, lekin vizual og‘irlik muvozanatda
Zamonaviy, qiziqarli

Ikki karta: bir xil ma’lumot

simmetrik asimmetrik

Kompozitsion markazni qanday yaratamiz?

O‘lcham

Eng muhim element - eng katta: «Hafta kitobi» banneri

Rang

Aksent rang faqat shu elementda: yorqin CTA tugma

Bo‘sh joy

Atrofida bo‘sh joy qoldiring: element «nafas oladi» va ajralib turadi

Mini-test

Rasm chapda katta, matn va tugma o‘ngda kichik, lekin karta muvozanatli ko‘rinadi. Bu qanday balans?

Elementlar har xil, lekin vizual og‘irlik teng - asimmetrik balans.
03

Ritm, kontrast, bo‘sh joy

Tartib va «nafas olish»

Ritm: 8-point grid

padding 16 oraliq 24 = 3 × 8 8 · 16 · 24 · 32hamma masofa 8 ga karrali

Kontrast juftliklari. Bosing

Katta / kichik

bosing

Sarlavha 32, matn 16: ko‘z avval kattaga tushadi

Och / to‘q

bosing

Och fonda to‘q tugma darhol ajraladi

Qalin / ingichka

bosing

Bold nom va Regular tavsif: aniq daraja

Bo‘sh joy (white space)

Yopishgan karta

Rasm, nom, narx, tugma bir-biriga tegib turibdi.

padding: 4px

Bo‘sh joy (white space)

Nafas oladigan karta

Padding 24px, elementlar orasi 16px. Mahsulot premium va xotirjam ko‘rinadi (Apple sayti).

padding: 24px

Bo‘sh joy - xato emas, eng kuchli dizayn vositasi.

04

Ko‘z yo‘li: F va Z

Foydalanuvchi ekranni qanday «o‘qiydi»?

F-pattern va Z-pattern

F: yangiliklar, maqola Z: reklama, bosh sahifa

Bashorat qiling

Kam matnli reklama sahifasi Z-pattern bo‘yicha qurilgan. Asosiy «Boshlash» tugmasini qayerga qo‘yasiz?

Z yo‘li pastki o‘ngda tugaydi: CTA shu yerda ko‘zga tushadi.

Figma: «E-kutubxona» bosh ekrani

Header

Profil rasmi va qidiruv satri

Markaz

«Hafta kitobi» katta banneri

Ritm

«Yangi kitoblar» kartalari qatori, oraliq 16px

Pastki menyu

4 ta asosiy bo‘lim ikonkasi

Odatiy xatolar

Hamma narsa muhim

3 ta bir xil yorqin tugma: markaz yo‘qoladi

Tasodifiy oraliqlar

7px, 13px, 22px: ritm buziladi

Bo‘sh joydan qo‘rqish

Hamma joyni to‘ldirish: ekran og‘ir ko‘rinadi

0
tamoyil
0px
grid qadami

Amaliy topshiriq 30 daqiqa

OsonBir xil ma’lumotli simmetrik va asimmetrik karta chizing.
O'rta8-point grid: padding 16px, kartalar orasi 24px, sarlavha va matn orasi 8px.
Qiyin«E-kutubxona» bosh ekrani: header, banner, kitoblar qatori, pastki menyu.

Xulosa

Bugun o‘rgandik

Kompozitsiya, balans, kompozitsion markaz, ritm, kontrast, bo‘sh joy, F va Z naqshlari, 8-point grid.

Uyga vazifa

«E-kutubxona» to‘liq bosh ekrani: shrift, rang va kompozitsiya birga.

Keyingi hafta: UI kit va dizayn tizimlari.