Vizual ierarxiya va dizayn tamoyillari: ko'z avval nimani ko'radi

Qisqacha: Vizual ierarxiya — sahifadagi narsalarning "muhimlik tartibi": ko'z avval eng muhimini, keyin ikkinchisini ko'radi. Uni to'rt vosita boshqaradi: o'lcham, qalinlik, rang (kontrast) va bo'sh joy. Asosiy qoida — hamma narsani kuchaytirmaslik, balki ikkinchi darajalisini pasaytirish. Bunga CRAP tamoyillari (kontrast, takror, tekislash, yaqinlik), Gestalt qonunlari va "bitta ekranda bitta asosiy harakat" qoidasi yordam beradi. Natijani ko'zni qisib yoki DevTools'da xiralashtirib tekshirasiz.

Bu darsda

• Vizual ierarxiya nima ekanini va uni qaysi CSS xususiyatlari boshqarishini tushuntirasiz.
• Matnni uch darajaga ajratasiz: asosiy, ikkinchi va uchinchi darajali.
• CRAP va Gestalt tamoyillarini «Bahor» kartasida qo'llaysiz.
• Sahifada bitta asosiy harakat (CTA) ajratib, qolganlarini pasaytirasiz.
• Dizaynni "ko'zni qisish" testi va DevTools'dagi xiralashtirish bilan tekshirasiz.

Oldin bilishingiz kerak: Matn bezagi, Chegara va soyalar, Dizayn tokenlari, CSS yuklash samaradorligi.

1. Nega bu kerak?

06-qismning texnik yarmi tugadi. Endi siz animatsiya, qatlamlar, tokenlar va Sass'ni bilasiz. Lekin bitta savol ochiq qoldi: qaysi rang, qancha bo'sh joy, nima katta bo'lsin? Bu savollarga CSS javob bermaydi — dizayn beradi.

Jasur aka shikoyat qildi. Mehmonlar menyu sahifasida narxni topolmayapti, "Stolni band qilish" tugmasini esa umuman ko'rmayapti. Uning jiyani esa "hamma narsa ko'rinsin" deb har narsani qalin va rangli qilgan:

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .taom-karta {
    max-width: 18rem;
    padding: 1rem;
    border: 3px solid #b4461a;
    background: white;
    text-align: center;
  }
  .taom-karta * {
    margin: 0.5rem 0;
    font-weight: bold;
    color: #2f6b3a;
    font-size: 1.25rem;
  }
  .narx, .taom-karta a { color: #b4461a; }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>Toshkent oshi: guruch, sabzi, qo'y go'shti, o'tin olovida.</p>
  <p><span class="narx">35 000 so'm</span></p>
  <p><a href="bron/">Stolni band qilish</a></p>
  <p><a href="menyu/">Butun menyu</a></p>
</article>

Nimaga qarang: sarlavha, tavsif, narx va ikkala havola — bir xil o'lcham, bir xil qalinlik. Ko'z qayerdan boshlashni bilmaydi. Hamma narsa baqirganda, hech narsa eshitilmaydi.

Bozordagi rastani eslang. Yaxshi sotuvchi eng yaxshi olmani old qatorga, ko'z balandligiga qo'yadi. Qolganlari — orqada, lekin tartib bilan. Mehmon bir qarashda "bu yerda olma sotiladi, mana eng yaxshisi" deb tushunadi. Sahifada ham xuddi shunday tartib kerak.

2. Vizual ierarxiya nima?

2.1 Ta'rif

Vizual ierarxiya (visual hierarchy) — elementlarning ko'zga tashlanish tartibi. Yaxshi ierarxiyada ko'z sahifaga birinchi qaraganda eng muhim narsaga tushadi, keyin ikkinchisiga, keyin qolganlariga.

Menyu kartasi uchun tartib aniq:

1. Taom nomi — "bu nima?"
2. Narx — "qancha turadi?"
3. Tavsif — "ichida nima bor?" (qiziqqan o'qiydi)
4. Havola — keyingi qadam

Dizayner ishi — shu tartibni ekranda "ko'rinadigan" qilish. Dasturchi ishi — uni CSS'da buzmasdan qurish. Dizayner bo'lmagan loyihada (ko'p kichik loyihalar shunday) bu ikkala ish ham sizniki.

2.2 Ierarxiya vositalari

Muhimlikni ko'rsatishning har bir vositasi — sizga tanish CSS xususiyati:

Kontrast (contrast) bu yerda faqat WCAG'dagi "o'qilish kontrasti" emas. Umumiy ma'nosi — farq: katta va kichik, qalin va ingichka, to'q va och. Farq qancha katta bo'lsa, ko'z uni shuncha tez sezadi.

Joy ham vosita. Nielsen Norman Group'ning ko'z harakatini kuzatish tadqiqotida (2006) odamlar matnli veb-sahifani ko'pincha F harfi shaklida ko'zdan kechirgan: avval tepadagi qatorlar, keyin chap chet bo'ylab pastga. Shuning uchun eng muhim narsa tepada va chapda turadi.

2.3 Ko'zni qisish testi

Ierarxiyani tekshirishning eng tez usuli — ko'zni qisish testi (squint test). Ekranga qarab ko'zingizni qisasiz. Harflar o'qilmay qoladi, faqat dog'lar ko'rinadi. Eng katta, eng to'q dog' — sahifaning "eng muhim" narsasi. U siz o'ylagan narsa bo'lmasa — ierarxiya buzilgan.

Ko'zni qisish o'rniga CSS'ning filter: blur() i bilan ham qilsa bo'ladi (Filterlar):

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .juft { display: flex; flex-wrap: wrap; gap: 1rem; }
  .xira { filter: blur(3px); }
  .taom-karta {
    width: 14rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 1px 2px oklch(0% 0 0 / 12%),
      0 4px 12px oklch(0% 0 0 / 12%);
  }
  .taom-karta > * { margin: 0 0 0.5rem; }
  h3 { font-size: 1.4rem; color: #1f2a24; }
  p { color: #5b6660; }
  .narx { color: #b4461a; font-weight: 700; font-size: 1.2rem; }
  .bron-havola {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #2f6b3a;
    color: #fffaf0;
    text-decoration: none;
  }
</style>
<div class="juft">
  <article class="taom-karta">
    <h3>Osh</h3>
    <p><span class="narx">35 000 so'm</span></p>
    <p>Guruch, sabzi, qo'y go'shti.</p>
    <a class="bron-havola" href="bron/">Stolni band qilish</a>
  </article>
  <article class="taom-karta xira" aria-hidden="true">
    <h3>Osh</h3>
    <p><span class="narx">35 000 so'm</span></p>
    <p>Guruch, sabzi, qo'y go'shti.</p>
    <a class="bron-havola" href="bron/" tabindex="-1">
      Stolni band qilish</a>
  </article>
</div>

Nimaga qarang: o'ngdagi xiralashgan nusxada matn o'qilmaydi, lekin uchta dog' aniq: tepada qora sarlavha, o'rtada qizg'ish narx, pastda yashil tugma. Tavsif esa kulrang tuman bo'lib qoldi — u ataylab pasaytirilgan. Ikkinchi nusxaga aria-hidden="true" va tabindex="-1" qo'ydik: ekran o'quvchi va klaviatura uni ikki marta uchratmasin.

Chrome DevTools'da buning tayyor vositasi bor: Rendering panelida Emulate vision deficiencies → Blurred vision. U butun sahifani xiralashtiradi, CSS'ga tegmaydi (Rendering panelini Foydalanuvchi afzalliklari darsida qorong'i rejimni emulyatsiya qilish uchun ochgan edik).

Tekshirib ko'ring: Siz o'z saytingizda ko'zni qisish testini qildingiz. Eng to'q dog' — footer'dagi qora fon. Bu nimani bildiradi?

3. Urg'uni pasaytirib urg'u berish

3.1 Uch daraja matn

Boshlovchi dasturchining eng ko'p qiladigan ishi: muhim narsani kattalashtirish. Sarlavha kichikmi — 32 piksel. Hali ham ko'rinmayaptimi — 40. Oxiri sarlavha ekranning yarmini egallaydi.

Adam Wathan va Steve Schoger'ning "Refactoring UI" kitobida (2018) boshqa yo'l tavsiya qilinadi: asosiy narsani kattalashtirish o'rniga ikkinchi darajalisini pasaytiring. Buning uchun eng qulay vosita — rang.

«Bahor» palitrasida matn uchun aynan ikkita daraja allaqachon bor:

Uchinchi darajani rangni yana ochartirib emas, o'lcham bilan beramiz: --step--1. Nega? Kontrast 4.5:1 dan pastga tushsa, matn WCAG talabidan o'tmaydi (Ranglar 1). Pasaytirish — o'qib bo'lmaydigan qilish degani emas.

3.2 O'lcham — yagona vosita emas

Taom nomini ajratish uchun uch yo'l bor. Uchalasini yonma-yon ko'ramiz:

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .juft { display: flex; flex-wrap: wrap; gap: 1rem; }
  .taom-karta {
    width: 13rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 0.5rem;
  }
  .taom-karta > * { margin: 0 0 0.25rem; }
  .taom-karta p { color: #1f2a24; }
  .a h3 { font-size: 2rem; font-weight: 400; color: #1f2a24; }
  .b h3 { font-size: 1.125rem; font-weight: 700; color: #1f2a24; }
  .b p { color: #5b6660; }
  .c h3 { font-size: 1.25rem; font-weight: 600; color: #1f2a24; }
  .c p { color: #5b6660; font-size: 0.875rem; }
</style>
<div class="juft">
  <article class="taom-karta a">
    <h3>Lag'mon</h3>
    <p>Qo'lda cho'zilgan xamir, mol go'shti.</p>
  </article>
  <article class="taom-karta b">
    <h3>Lag'mon</h3>
    <p>Qo'lda cho'zilgan xamir, mol go'shti.</p>
  </article>
  <article class="taom-karta c">
    <h3>Lag'mon</h3>
    <p>Qo'lda cho'zilgan xamir, mol go'shti.</p>
  </article>
</div>

Nimaga qarang: birinchi kartada nom ulkan, lekin ingichka — tavsif bilan "bahslashadi" va joy yeydi. Ikkinchisida nom tavsifdan sal kattaroq, lekin qalin, tavsif esa kulrang — ajralish aniq. Uchinchisi — o'rtacha o'lcham, 600 qalinlik va kichikroq kulrang tavsif. Ikkinchi va uchinchi kartalar telefon enida ham yaxshi joylashadi.

Qoida: bitta darajani ko'tarish uchun ikki-uchta vositani ozgina ishlating, bittasini haddan tashqari emas.

3.3 Rangli fonda kulrang ishlatmang

Tugma, banner yoki footer rangli bo'lsa, ikkinchi darajali matnni qanday pasaytirasiz? Birinchi fikr — kulrang. Lekin kulrang yashil fonda "iflos" ko'rinadi va yomon o'qiladi. Refactoring UI shu yerda ikki yo'lni taklif qiladi: oq matnni biroz shaffof qilish yoki fon tusidagi ochroq rangni tanlash.

<style>
  body { font-family: system-ui, sans-serif; }
  .aksiya {
    max-width: 20rem;
    margin-block-end: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #2f6b3a;
    color: #fffaf0;
  }
  .aksiya p { margin: 0.25rem 0 0; }
  .kul p { color: #9e9e9e; }
  .shaffof p { color: rgb(255 255 255 / 85%); }
</style>
<div class="aksiya kul">
  <strong>❌ Juma kuni osh — 30 000 so'm</strong>
  <p>Aksiya 12:00 dan 15:00 gacha.</p>
</div>
<div class="aksiya shaffof">
  <strong>✅ Juma kuni osh — 30 000 so'm</strong>
  <p>Aksiya 12:00 dan 15:00 gacha.</p>
</div>

Nimaga qarang: birinchi blokda kichik matn xira, kir kulrang. Ikkinchisida u oq, lekin sarlavhadan sal yumshoqroq — yashil fon uning ichidan biroz ko'rinadi. Formula bilan hisobladik (colorjs.io): kulrang #9e9e9e yashil fonda — 2.4:1, WCAG talabidan ancha past. 85% oq esa amalda #e0e9e1 rangga aylanadi va 5.1:1 beradi.

Qisqa qoida: "kulrangni emas, shaffoflikni pasaytiring". Lekin shaffoflikning chegarasi bor: 70% oq shu fonda 4.1:1 ga tushadi. Shaffoflikni kamaytirgandan keyin kontrastni doim tekshiring (DevTools'da CSS darsidagi rang tanlagichi).

Maslahat: Shaffof matn ostidagi fon o'zgarsa (rasm, gradient), kontrast ham o'zgaradi. Rasm ustidagi matn uchun shaffoflik emas, aniq rang yoki qorong'i qatlam ishlating.

4. CRAP: to'rt asosiy tamoyil

Robin Williams "The Non-Designer's Design Book" (birinchi nashri 1994) kitobida dizayner bo'lmaganlar uchun to'rt tamoyilni ajratgan. Bosh harflaridan qisqartma chiqadi — CRAP:

4.1 Kontrast

Yuqorida ko'rdik: ierarxiya — farq. Williams qoidasi: farq bo'lsa — kuchli bo'lsin. 16 va 17 piksellik ikki matn "xato bilan har xil" ko'rinadi. 16 va 24 esa "ataylab har xil". Ikkinchi darajali matn uchun font-weight: 500 va 600 o'rniga 400 va 700 — ko'z farqni darhol ushlaydi.

4.2 Takror

Menyudagi 20 ta karta — bitta qolip. Hamma narx bir xil rangda, hamma nom bir xil shriftda. Takror sayt "yaxlit" ko'rinishini beradi va o'quvchini o'rgatadi: "qizg'ish qalin raqam — narx". CSS'da takror — tokenlar (Dizayn tokenlari) va bitta class. Har kartaga alohida stil yozish — takror tamoyilining dushmani.

4.3 Tekislash

Har element ko'rinmas chiziqqa tekislansin. Bir kartada sarlavha markazda, tavsif chapda, tugma o'ngda bo'lsa — ko'z uch marta "sakraydi". Ko'p qatorli matnni markazga tekislash o'qishni qiyinlashtiradi: har yangi qator boshqa joydan boshlanadi.

Qoida: matnli bloklar — chap chetga (text-align: start, Mantiqiy xususiyatlar). Markaz — faqat qisqa, bir-ikki qatorli narsa uchun (bosh sahifa shiori, bo'sh holat xabari).

4.4 Yaqinlik

Bir-biriga tegishli narsalar yaqin turadi — ko'z ularni bitta guruh deb o'qiydi. Taom nomi va uning narxi — bitta guruh. Keyingi taom — boshqa guruh, demak orasida kattaroq bo'sh joy.

Birinchi natijadagi kartaning asosiy xatolaridan biri shu edi: hamma elementlar orasida bir xil 0.5rem. Nom, tavsif va havola bir xil uzoqlikda — guruhlar yo'q. Bo'sh joy bilan guruhlashni Spacing tizimi darsida qoidaga aylantiramiz: "ichki masofa tashqisidan kichik".

Tekshirib ko'ring: Bron formasida "Telefon" yorlig'i o'z maydonidan 24 piksel, yuqoridagi "Ism" maydonidan esa 8 piksel uzoqlikda. Qaysi tamoyil buzilgan va mehmon nimani noto'g'ri tushunishi mumkin?

5. Gestalt: ko'z qanday guruhlaydi

Gestalt (nemischa "shakl, yaxlitlik") — XX asr boshidagi psixologlar maktabi. Max Wertheimer 1923-yilgi maqolasida odam ko'zi alohida nuqtalarni qanday qilib guruhlarga birlashtirishini tasvirlagan. Bu qoidalar hozir UI dizaynining asosi. Uchtasi eng ko'p kerak bo'ladi.

<style>
  body { font-family: system-ui, sans-serif; }
  .qonun { display: flex; flex-wrap: wrap; gap: 2rem; }
  .qonun figure { margin: 0; }
  .qonun figcaption { margin-top: 0.5rem; font-size: 0.875rem; }
  .nuqtalar {
    display: grid;
    grid-template-columns: repeat(6, 1rem);
    gap: 0.5rem;
  }
  .nuqtalar i {
    width: 1rem; height: 1rem;
    border-radius: 50%;
    background: #5b6660;
  }
  .yaqin i:nth-child(6n + 3) { margin-inline-end: 1rem; }
  .oxshash i:nth-child(odd) { background: #b4461a; }
  .yopiq {
    width: 4.5rem; height: 4.5rem;
    border-radius: 50%;
    background: conic-gradient(#2f6b3a 0 80deg,
      transparent 0 100deg, #2f6b3a 0 170deg,
      transparent 0 190deg, #2f6b3a 0 260deg,
      transparent 0 280deg, #2f6b3a 0 350deg,
      transparent 0);
    mask: radial-gradient(circle, transparent 55%, black 56%);
  }
</style>
<div class="qonun" aria-hidden="true">
  <figure>
    <div class="nuqtalar yaqin">
      <i></i><i></i><i></i><i></i><i></i><i></i>
      <i></i><i></i><i></i><i></i><i></i><i></i>
      <i></i><i></i><i></i><i></i><i></i><i></i>
    </div>
    <figcaption>Yaqinlik: 2 ta guruh</figcaption>
  </figure>
  <figure>
    <div class="nuqtalar oxshash">
      <i></i><i></i><i></i><i></i><i></i><i></i>
      <i></i><i></i><i></i><i></i><i></i><i></i>
      <i></i><i></i><i></i><i></i><i></i><i></i>
    </div>
    <figcaption>O'xshashlik: ustunlar</figcaption>
  </figure>
  <figure>
    <div class="yopiq"></div>
    <figcaption>Yopiqlik: aylana</figcaption>
  </figure>
</div>

Nimaga qarang: birinchi rasmda nuqtalar bir xil, lekin o'rtadagi kengroq oraliq ularni ikki blokka bo'ldi. Ikkinchisida oraliqlar teng, lekin rang nuqtalarni ustunlarga birlashtirdi — qizg'ish va kulrang ustunlar navbatma-navbat. Uchinchisida to'rtta alohida yoy bor, ko'z esa bitta uzilgan aylanani "ko'radi". Rasmlar faqat bezak, shuning uchun aria-hidden="true".

• Yaqinlik (proximity): yaqin turganlar — bitta guruh. CRAP'dagi yaqinlikning ilmiy asosi shu.
• O'xshashlik (similarity): bir xil rang, shakl yoki o'lchamdagilar — bitta guruh. Hamma havolalar bir xil rangda bo'lsa, foydalanuvchi "bu rang — bosiladi" deb o'rganadi. Oddiy matnni ham shu rangga bo'yasangiz, u ham bosiladigandek ko'rinadi.
• Yopiqlik (closure): ko'z to'liq bo'lmagan shaklni "to'ldiradi". Yuklanish belgilari, ikonkalar va chizig'i uzilgan logotiplar shunga tayanadi. Micro-interaktsiyalar darsidagi aylanuvchi yuklanish belgisi — yopiqlikning misoli.

Bularning yonida umumiy hudud (common region) ham bor: bitta ramka yoki fon ichidagilar — bitta guruh. Karta aynan shu: border yoki background uning ichidagi narsalarni birlashtiradi. Lekin kartani har narsaga qo'ymang — ba'zan bo'sh joyning o'zi yetadi.

6. Bo'sh joy

Bo'sh joy (whitespace) — elementlar orasidagi va atrofidagi hech narsa yo'q maydon. Uning rangi oq bo'lishi shart emas: «Bahor»da u qaymoq rang.

Boshlovchilar bo'sh joyni "isrof" deb biladi va ekranga iloji boricha ko'p narsa sig'dirmoqchi bo'ladi. Aslida bo'sh joy — ierarxiya vositasi:

• Atrofida bo'sh joy ko'p bo'lgan element muhimroq ko'rinadi. Qimmatbaho do'kon vitrinasini eslang: bitta soat va atrofida bo'shliq.
• Bo'sh joy guruhlarni ajratadi (yaqinlik) — chiziq va ramkasiz.
• Matn qatorlari orasidagi bo'shliq (Qator balandligi) o'qishni yengillashtiradi.

Refactoring UI'dagi amaliy maslahat: avval bo'sh joyni ko'p bering, keyin kamaytiring. Siqilgan dizaynni "havo" bilan to'ldirish qiyin, keng dizaynni kerakli joyda qisish esa oson.

7. Bitta asosiy harakat

7.1 CTA nima

CTA (call to action — harakatga chaqiriq) — sahifa foydalanuvchidan kutadigan asosiy harakat tugmasi. «Bahor» bosh sahifasida bu — "Stolni band qilish". Menyuni ko'rish, manzilni ochish, Telegram kanalga o'tish — foydali, lekin ikkinchi darajali.

Qoida: bitta ekranda bitta asosiy harakat. Ikkita tugma bir xil kuchli bo'lsa, foydalanuvchi to'xtab o'ylaydi: "qaysi birini bosay?". Uchta bo'lsa — ko'pincha hech birini bosmaydi.

Harakatlarni uch darajaga ajratamiz:

7.2 Oldin va keyin

<style>
  body {
    font-family: system-ui, sans-serif;
    background: #fffaf0;
    color: #1f2a24;
  }
  .qahramon { max-width: 26rem; margin-block-end: 2rem; }
  .qahramon h1 { margin: 0 0 0.5rem; font-size: 1.75rem; }
  .qahramon p { margin: 0 0 1rem; color: #5b6660; }
  .harakatlar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
  }
  .harakatlar a {
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    color: #fffaf0;
    background: #2f6b3a;
    text-decoration: none;
  }
  .keyin .harakatlar a:nth-child(2) {
    color: #2f6b3a;
    background: transparent;
    box-shadow: inset 0 0 0 2px #2f6b3a;
  }
  .keyin .harakatlar a:nth-child(3) {
    padding-inline: 0;
    color: #2f6b3a;
    background: none;
    text-decoration: underline;
  }
</style>
<section class="qahramon">
  <h1>Choyxona «Bahor»</h1>
  <p>Har kuni 7:00 dan 23:00 gacha. O'tin olovidagi osh.</p>
  <div class="harakatlar">
    <a href="bron/">Stolni band qilish</a>
    <a href="menyu/">Menyuni ko'rish</a>
    <a href="aloqa/">Manzil</a>
  </div>
</section>
<section class="qahramon keyin">
  <h1>Choyxona «Bahor»</h1>
  <p>Har kuni 7:00 dan 23:00 gacha. O'tin olovidagi osh.</p>
  <div class="harakatlar">
    <a class="bron-havola" href="bron/">Stolni band qilish</a>
    <a href="menyu/">Menyuni ko'rish</a>
    <a href="aloqa/">Manzil</a>
  </div>
</section>

Nimaga qarang: tepadagi blokda uchta bir xil yashil tugma — ko'z ular orasida adashadi. Pastdagida faqat "Stolni band qilish" to'liq yashil. "Menyuni ko'rish" — ramkali, "Manzil" — oddiy havola. Uchala harakat ham joyida, lekin tartib aniq. Ramka box-shadow: inset bilan chizildi — border tugma o'lchamini 2 pikselga o'zgartirardi (Chegara va soyalar).

Diqqat: Pasaytirilgan harakat ham topiladigan va bosiladigan bo'lsin. Oddiy havola ko'rinishidagi "Manzil" ham kamida 24×24 piksel bosish maydonida turadi (O'lchamlar). Bu mavzuni UI/UX asoslari darsida davom ettiramiz.

7.3 Xavfli harakat ham past turadi

"Bronni bekor qilish" kabi qaytarib bo'lmaydigan harakat hech qachon eng yorqin tugma bo'lmaydi. Aks holda mehmon uni tasodifan bosadi. Xavfli harakat odatda ikkinchi darajali ko'rinishda (masalan, qizg'ish matnli havola) va tasdiqlash so'rovi bilan beriladi. Tasdiqlash oynasini Modal oyna darsida quramiz.

Tekshirib ko'ring: Bron tasdiqlangan sahifada uchta harakat bor: "Bronni bekor qilish", "Bosh sahifaga qaytish" va "Telegram kanalga obuna bo'lish". Jiyan uchalasini ham to'liq yashil qildi. Qaysi birini asosiy qilasiz, qaysi birini eng past?

8. Hammasi birga: «Bahor» kartasi

Endi darsning boshidagi kartani tamoyillar bo'yicha qayta yozamiz. Hamma qiymatlar «Bahor» tokenlaridan (Dizayn tokenlari):

<style>
  :root {
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
    --rang-ikkinchi: #5b6660;
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  body {
    font-family: system-ui, sans-serif;
    background: var(--rang-fon);
    color: var(--rang-matn);
  }
  .taom-karta {
    max-width: 18rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 1px 2px oklch(0% 0 0 / 12%),
      0 4px 12px oklch(0% 0 0 / 12%);
  }
  .taom-karta h3 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.44rem;
    line-height: 1.2;
  }
  .taom-karta p { margin: 0.25rem 0 0; }
  .narx {
    color: var(--rang-urgu);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .tavsif {
    color: var(--rang-ikkinchi);
    font-size: 0.875rem;
  }
  .taom-karta p:last-child { margin-block-start: 1rem; }
  .taom-karta a { color: var(--rang-asosiy); }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p><span class="narx">35 000 so'm</span></p>
  <p class="tavsif">Toshkent oshi: guruch, sabzi, qo'y go'shti,
    o'tin olovida.</p>
  <p><a href="menyu/osh/">Tarkibi va porsiyalar</a></p>
</article>

Nimaga qarang: nom — eng katta va qalin (o'lcham + qalinlik), narx — qizg'ish va qalin, lekin kichikroq (rang + qalinlik). Tavsif kulrang va kichik — u pasaytirildi. Havola esa pastda, bo'sh joy bilan ajralgan. Hamma matn chapga tekislangan. Kartadagi "Stolni band qilish" olib tashlandi: u sahifada bir marta, tepada turadi. 20 ta kartada 20 ta bir xil tugma — 20 ta "asosiy" harakat, ya'ni birortasi ham asosiy emas.

.tavsif — faqat shu namoyish uchun class, «Bahor» ro'yxatida bunday nom yo'q. Faylda tavsifni selektor bilan topsa bo'ladi, masalan .taom-karta p:not(:has(.narx)) (Mantiqiy pseudo-klasslar). Sarlavha shrifti natijada Georgia: «Bahor»ning Lora fayli natija oynasida yuklanmaydi.

9. Ko'p uchraydigan xatolar

9.1 Hamma narsa qalin

Sarlavha qalin, narx qalin, tavsif qalin, havola qalin. Tuzatish: qalinlikni ikki darajaga cheklang — oddiy (400) va urg'u (600–700). Qalin matn sahifada oz bo'lsa, u ishlaydi.

9.2 Faqat o'lcham bilan ierarxiya

Sarlavhalar 48 va 64 piksel, matn 14. Farq bor, lekin sahifa "baqiradi" va telefonda sig'maydi. Tuzatish: o'lchamni biroz, qalinlik va rangni esa qo'shimcha ishlating («O'lcham — yagona vosita emas» bo'limidagi uch karta). O'lchamlar tartibini Tipografik shkala darsida o'rganamiz.

9.3 Rangli fonda kulrang matn

Yashil banner ustida #999. Tuzatish: shaffof oq yoki fon tusidagi och rang, keyin kontrastni tekshirish.

9.4 Uzun matn markazda

Uch paragraflik "Biz haqimizda" matni text-align: center. Tuzatish: matn chapda; markaz — faqat qisqa sarlavha yoki bir qatorli shior uchun.

9.5 Ikkita "asosiy" tugma

"Band qilish" va "Buyurtma berish" yonma-yon, ikkalasi ham to'liq rangli. Tuzatish: biznes uchun eng muhimini tanlang (Jasur akadan so'rang!), ikkinchisini pasaytiring.

9.6 Ierarxiya faqat rangda

Joriy sahifa havolasi menyuda faqat rangi bilan farq qiladi. Rangni ajrata olmaydigan odam uni ko'rmaydi. Tuzatish: rangga qo'shimcha — qalinlik yoki tagiga chiziq. Portfolio'dagi [aria-current="page"] aynan shunday: rang, qalinlik va chiziq. Rang ko'rligini Rang nazariyasi darsida tekshiramiz.

10. Mashqlar

1-mashq (oson): tartibni ayting

«Bahor» bron sahifasida quyidagilar bor: "Stolni band qilish" sarlavhasi, forma maydonlari, "Yuborish" tugmasi, "Bron 2 soat oldin qilinadi" izohi, footer'dagi telefon raqami. Ularni muhimlik tartibida (1 — eng muhim) joylashtiring va har biriga qaysi vosita (o'lcham, qalinlik, rang, bo'sh joy) mos kelishini yozing.

Ishora: "Ierarxiya vositalari" jadvali va "Bitta asosiy harakat" bo'limi. Sahifaning maqsadi nima?

2-mashq (o'rta): kulrangsiz footer

«Bahor» footer'i to'q yashil (#2f6b3a) fonda. Unda ikki qator: "Choyxona «Bahor»" (asosiy) va "© 2026. Hamma huquqlar himoyalangan" (ikkinchi darajali). Stajyor ikkinchi qatorga color: gray yozdi. Uni tuzating va kontrastni 4.5:1 dan yuqori saqlang.

Ishora: "Rangli fonda kulrang ishlatmang" bo'limi — shaffof oq. 85% da kontrast qancha chiqqan edi?

footer {
  background: var(--rang-asosiy);
  color: var(--rang-fon);
}

footer p:last-child {
  font-size: var(--step--1);
  color: rgb(255 255 255 / 85%);
}

3-mashq (qiyin): «Bahor» bosh sahifasini qayta ko'ring

Stajyor «Bahor» bosh sahifasining yuqori qismini shunday qildi. Logotip 64 piksel, sarlavha 24 piksel, "Bugun aksiya!" matni qizil va 32 piksel. Uchta bir xil tugma bor: "Band qilish", "Menyu", "Biz haqimizda". Hamma matn markazda.

1. Ko'zni qisish testida qaysi uchta dog' ko'rinadi?
2. Qaysi CRAP tamoyillari buzilgan?
3. Tuzatish rejasini yozing va CSS'ni yozing (natija oynasida sinab ko'ring).

Ishora: sahifaning maqsadi — bron. Logotip sahifaning mavzusimi? (Semantik skelet darsida logotip h1 emasligini aytgan edik.)

header img {
  inline-size: 2.5rem;
}

.aksiya {
  color: var(--rang-urgu);
  font-weight: 700;
}

main h1 {
  font-size: var(--step-3);
}

4-mashq: Portfolio qadami — bosh sahifada bitta asosiy harakat

Portfolio bosh sahifasining maqsadi — ish beruvchi loyihalaringizni ko'rsin. Hozir "Barcha loyihalar" havolasi "So'nggi loyihalar" ro'yxatining ichida oddiy havola bo'lib turibdi.

1. Bosh sahifani DevTools → Rendering → Blurred vision bilan oching. Eng to'q uchta dog'ni yozing.
2. "Barcha loyihalar" havolasini asosiy harakatga aylantiring: aloqa formasidagi tugma bilan bir xil ko'rinish (brend fon, kamida 44 piksel balandlik). HTML'ga class qo'shmang — atribut selektori yetadi.
3. Menyudagi "Loyihalar" havolasi o'zgarmasin.
4. Xiralashtirib qayta tekshiring: endi tugma ikkinchi eng kuchli dog' bo'ldimi (sarlavhadan keyin)?

Ishora: havolaning href i — loyihalar/; menyuda ham xuddi shunday href bor, farqi — joyi (main ichida). Tugma qoidalari komponentlar.css da (button).

/* Bosh sahifadagi asosiy harakat (Vizual ierarxiya darsi) */
main a[href="loyihalar/"] {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: 1.5em;
  border-radius: var(--burchak-m);
  background-color: var(--rang-asosiy);
  color: var(--rang-fon);
  text-decoration: none;
}

@media (hover: hover) {
  main a[href="loyihalar/"]:hover {
    background-color:
      color-mix(in oklch, var(--rang-asosiy), black 15%);
  }
}

<style>
  :root {
    --rang-matn: oklch(27.2% 0.019 161);
    --rang-fon: oklch(98.2% 0.004 157.2);
    --rang-asosiy: oklch(48.4% 0.097 158.9);
  }
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: var(--rang-matn);
    background: var(--rang-fon);
  }
  h1, h2 { color: var(--rang-asosiy); line-height: 1.2; }
  a { color: var(--rang-asosiy); }
  main a[href="loyihalar/"] {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: 1.5em;
    border-radius: 0.5rem;
    background-color: var(--rang-asosiy);
    color: var(--rang-fon);
    text-decoration: none;
  }
</style>
<main>
  <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
  <section>
    <h2>So'nggi loyihalar</h2>
    <ul>
      <li><a href="loyihalar/bahor/">Choyxona «Bahor» sayti</a> —
        menyu, stol band qilish formasi va 404 sahifasi.</li>
      <li><a href="loyihalar/">Barcha loyihalar</a></li>
    </ul>
  </section>
</main>

11. Real ishda

• Dizayner bilan ish. Figma maketida ierarxiya allaqachon qaror qilingan. Dasturchining vazifasi — uni buzmaslik: "shunchaki qalin qilib qo'ydim" degan o'zgarish maketdagi tartibni yo'q qiladi. Maketni o'qishni Figma dasturchi uchun 1 darsida o'rganamiz.
• Dizaynersiz loyiha. Kichik biznes saytlari, admin panellar, ichki vositalar ko'pincha dizaynersiz quriladi. Shu darsdagi tamoyillar bilan dasturchi "chiroyli emas, lekin tushunarli" darajadan "tartibli va professional" darajaga chiqadi.
• Konversiya. Onlayn do'konlarda CTA tugmasining ko'rinishi to'g'ridan-to'g'ri sotuvga ta'sir qiladi. Kompaniyalar bunday o'zgarishlarni A/B test bilan o'lchaydi — bu haqda keyingi qismlarda.
• Intervyuda frontend dasturchidan ham so'raladi: "Bu sahifada nima noto'g'ri?" — va sizga maket ko'rsatiladi. Ierarxiya, tekislash va bitta CTA — birinchi tekshiriladigan narsalar.

Xulosa

• Vizual ierarxiya — ko'z avval eng muhimini ko'radigan tartib; vositalari: o'lcham, qalinlik, rang, bo'sh joy, joy.
• Kuchaytirish o'rniga ikkinchi darajalisini pasaytiring; rangli fonda kulrang emas — shaffof oq yoki fon tusidagi rang, kontrast ≥ 4.5:1.
• CRAP: kontrast (farq kuchli bo'lsin), takror (tokenlar), tekislash (matn chapda), yaqinlik (bog'liqlar yaqin).
• Gestalt: yaqinlik, o'xshashlik, yopiqlik va umumiy hudud — ko'z guruhlarni shular bo'yicha ko'radi.
• Bitta ekranda bitta asosiy harakat; qolganlari ramkali yoki oddiy havola.
• Tekshiruv — ko'zni qisish yoki DevTools'dagi Blurred vision.

Keyingi dars: Spacing tizimi: 4/8 pt to'r va masofa shkalasi — bo'sh joyni tasodifiy sonlardan tartibli shkalaga o'tkazamiz va "ichki masofa tashqisidan kichik" qoidasini o'rganamiz.

Manbalar

• Adam Wathan, Steve Schoger: "Refactoring UI" (2018) — refactoringui.com
• Robin Williams: "The Non-Designer's Design Book" (1-nashr 1994, Peachpit Press)
• Max Wertheimer: "Untersuchungen zur Lehre von der Gestalt II", Psychologische Forschung, 1923
• Nielsen Norman Group: "F-Shaped Pattern For Reading Web Content" (2006) — nngroup.com
• Chrome DevTools: "Rendering tab — Emulate vision deficiencies" — developer.chrome.com/docs/devtools