AXV

Grid Tizimlari va Kompozitsiya

Panjaraviy maketlar, 12 ustunli responsiv tizim va 8pt spacing qoidasi

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

Bugun nimani o'rganamiz?

6 ta grid turi

Baseline, Column, Modular, Manuscript, Pixel va Hierarchical panjaralar

12 ustunli tizim

Columns, Gutter (oraliq) va Margin (chetlar) anatomiyasi va qoidalari

8pt Spacing

Piksel aniqligi, proporsiyalar va responsiv moslashuvchanlik standarti

01

Grid nima va nega kerak?

Tartibsiz bo'shliqdan mukammal vizual arxitekturaga

Grid tizimining mohiyati

«Ijodiy cheklovlar erkinlikni bo'g'maydi, balki eng to'g'ri yechimga yo'l ko'rsatadi.»

Ko'rinmas skelet

Grid barcha matnlar, rasmlar va tugmalarni yagona tartib va o'q bo'yicha tekislab beradi.

Dasturchiga qulaylik

Tailwind, Bootstrap va CSS Grid to'liq ustunlar tizimiga tayanadi. Dizayn kodga xatosiz o'tadi.

Illyustratsiya: 6 Ta Asosiy Grid Turi

Baseline Gorizontal satrlar Matn balansi Column Vertikal ustunlar 12 ustunli veb Modular Ustun + qatorlar Dashboardlar Manuscript 1 ustunli blok Kitob va blog Pixel Piksel to'ri Ikonkalar Hierarchical Erkin iyerarxik Noan'anaviy UI Raqamli interfeyslar tayanchi: Column Grid Veb va mobil ilovalarda eng ko'p ishlatiladigan panjara turi
02

12 ustunli grid anatomiyasi

Columns, Gutter va Margin qoidalari

Column Grid Anatomiyasi

Margin Column 1 Gutter Column 2 Gutter Column 3 Gutter Column 4 Margin

Qurilmalar bo'yicha ustunlar soni

Desktop (Kompyuter)

12 ta ustun

12 soni 2, 3, 4 va 6 ga qoldiqsiz bo'linadi. Har qanday maketni qurish o'ta qulay.

Planshet (Tablet)

8 ta ustun

O'rta ekranlar uchun: elementlar 2 yoki 4 qatorli bloklarga muvozanatli taqsimlanadi.

Mobil (Mobile)

4 ta ustun (yoki 3)

Tor ekranlarda elementlar vertikal ustunlar bo'yicha ixcham bir qatorga joylashadi.

03

8pt Spacing Tizimi

Piksel aniqligi va proporsional uyg'unlik qoidasi

8pt Spacing qoidasi

Barcha o'lcham va masofalar 8 ga karrali:

4px · 8px · 16px · 24px · 32px · 40px · 48px · 64px

Retina ekranlar aniqligi

Ekranlar 1x, 2x, 3x masshtablarda ishlaydi. 8 ga bo'linuvchi sonlar har doim to'liq piksellarga tushadi, hech qachon xira bo'lmaydi.

Dizayn tezligi

«Bu masofani 11px qo'ysammi yoki 19px?» degan ikkilanish yo'qoladi. Hammasi qat'iy standart bo'yicha ketadi.

8pt Tizimi Kartochka Ichida

Rasm Mahsulot Nomi Qisqa tavsif matni 250 000 so'm Savatga qo'shish (Balandligi: 48px) • Padding: 24px • Oraliq: 16px • Matn orasi: 8px • Tugma: 48px

Oldin va keyin: Oraliq masofalar

11px, 13px, 19px, 23px tartibsizlik

Ko'zga sezilmas darajada notekis va havaskor ko'rinish. Dasturchi CSS yozganda yuzlab har xil sonlardan adashadi.

8px, 16px, 24px, 48px qat'iy tartib

Proporsional uyg'unlik, mukammal vizual ritm va dasturlashga bir zumda uzatiladigan toza tizim.

Responsiv O'tish Dinamikasi

Desktop (12 ustun) 4 ta tovar 1 qatorda Tablet (8 ustun) 2x2 qatorga bo'linadi Mobile (4 ustun) 1 ustunda pastma-past

Figmada Grid sozlash qadamlari

1. Frame yaratish

Desktop uchun 1440px kenglikdagi Frame tanlash.

2. Layout Grid qo'shish

Grid sozlamasini "Columns" rejimiga o'tkazib, 12 ustun kiritish.

3. Gutter va Margin kiritish

Gutter: 24px (oralig'), Margin: 80px (chetki bo'shliq) qo'yish.

4. Elementlarni tekislash

Barcha bloklarni qat'iy ustunlar chizig'iga yopishtirib joylash.

Grid va Spacing qoidalari

Kartani bosing va ichki qoidani ko'ring

Gutter qoidasi

bosing

Gutter faqat ustunlarni bir-biridan ajratish uchundir. Uning ustiga hech qanday matn yoki tugma qo'yilmaydi.

Margin xavfsizligi

bosing

Ekranning chetki xavfsiz zonasi. Kontent ekran qirrasiga yopishib qolmasligini ta'minlaydi.

4px va 8px farqi

bosing

Kichik ikonka va yozuv oralig'i uchun 4px ruxsat etiladi. Asosiy bloklar orasi esa 8, 16, 24, 32px bo'ladi.

Amaliy topshiriq 20 daqiqa

Oson12 ustunli gridda 3 ta va 4 ta teng kartochkalar necha ustun egallashini toping.
O'rtaNoto'g'ri berilgan oraliqlarni (11px, 13px, 19px) 8pt tizimiga moslashtiring.
QiyinDesktop, planshet va mobil ekranlar uchun 4 ta tovarning responsiv o'tishini loyihalang.

Bilimingizni sinang

Veb-saytlarning Desktop versiyasi uchun standart bo'yicha necha ustunli (columns) grid ishlatiladi?

To'g'ri: 12 ustunli grid 2, 3, 4 va 6 ga oson bo'lingani uchun dunyoda desktop interfeyslar standarti hisoblanadi.

Keng tarqalgan xatolar

Gutterga element qo'yish

Element ustun chizig'ida emas, oraliq bo'shliqda (gutter) to'xtab qolsa, butun maket buziladi.

Tasodifiy oraliqlar ishlatish

8pt tizimini mensimasdan har xil piksellar (7, 13, 22px) qo'yish dizaynni xira va tartibsiz ko'rsatadi.

Xulosa

Bugun o'rgandik

  • 6 ta grid turi va Column grid afzalligi
  • Columns, Gutter va Margin anatomiyasi
  • 8pt spacing tizimi va responsiv o'tish

Keyingi dars

Ikonka, tugma va UI Kit: Tugmalar iyerarxiyasi, holatlar (States) va komponentlar tizimini quramiz!