Daryo tahlili
Haftaning asosiy tahlillari
1
So‘m kursi: uch oylik tendensiya nimadan darak beradi?
01 · Asoslar
Mobil tamoyillar
Mobil Daryo barmoq uchun quriladi: bitta yorug‘ sirt ustida kontent oqadi, shisha xrom (top bar va tab bar) esa uning ustida suzadi.
Mobil tamoyillar
4 ta asosiy qoidaBarmoq birinchi
Asosiy boshqaruv pastda — bottom tab bar, muhim amallar barmoq zonasida joylashadi. Teginish maydoni kamida 44×44px bo‘lishi SHART; hozirgi ba’zi 32px tugmalar keyingi iteratsiyada kattalashtiriladi.
Bitta yorug‘ sirt
Sahifa foni #eef1f6, kartalar oq, matn #0b1220 (ink). Qorong‘i bandlar (Tahlil #0b1220) tema emas — bu tahririy bezak, alohida dark rejim mavjud emas.
Shisha xrom
Suzuvchi top bar va tab bar blur/glass sirtda turadi, kontent ular ostidan oqib o‘tadi. Safe-area (env(safe-area-inset-*)) qiymatlari doim hisobga olinadi.
Yengil va sezgir
Har bir teginish javob beradi: active:scale-*, whileTap 0.94. Rasmlar lazy yuklanadi, GPU hints (translateZ(0), willChange) silliq skrollni kafolatlaydi.
MezonDesktopMobil
Konteyner1400px konteynerTo‘liq kenglik, px-3
NavigatsiyaSticky headerSuzuvchi pill + bottom tab
InteraksiyaHover holatlariActive / tap javobi
Seksiya sarlavhasi4px gradient chiziqRangli ikonka-chip
Radius2xl (16px)28px hero kartalar
Texnik konstantalar
qattiq qiymatlarSafe-area (tepa)
Suzuvchi top bar notch ostiga kirmaydi.
Safe-area (past)
Tab bar home-indikator bilan to‘qnashmaydi.
Tab bar bo‘shlig‘i
Sahifa oxirida bottom bar uchun joy qoldiriladi.
Breakpoint
Mobil versiya shu chegaradan pastda ko‘rsatiladi.
✓ Shunday qiling
- •Sahifa oxirida bottom bar uchun joy qoldiring.
- •Teginish maydonini kamida 44×44px qiling.
- •Joylashuvni bitta qo‘l bilan boshqariladigan qilib loyihalang.
✕ Bunday qilmang
- •Hoverga tayangan interfeys qurmang — mobilda hover yo‘q.
- •Tugmalarni ekran chetiga yopishtirib qo‘ymang.
- •Ikki ustunli zich matn terib tashlamang.
02 · Asoslar
Rang va sirtlar
Mobil versiya brend palitrasini desktop tizimidan meros oladi, biroq bitta yorug‘ sirt ustida yashaydi — har bir seksiya o‘z aksent rangi bilan ajralib turadi.
Sirt palitrasi
mobil ekranning asosiSurface
Card
Ink
Brand
Deep
Sky
Brend ranglari desktop tizimidan meros — mobil uchun yangi rang kiritilmaydi.
Seksiya aksentlari
mobil tizimning imzosiMarkaziy Osiyo
Mintaqa
Dunyo
Global
Daryo tahlili
Qorong‘i band
PR maqolalar
Hamkorlik
Lifestyle
Hayot tarzi
Sport
Sport
Avto
Avto
Videolar
Ekran
Kategoriyalar
Bo‘limlar
Foto
Suratlarda
Aksent aynan 3 joyda ishlaydi: eyebrow matn rangi, ikonka-chip foni ${accent}18 (~9% alfa) va ikonkaning o‘zi. Aksent hech qachon seksiya foniga qo‘llanmaydi.
Mobil SectionHeader
jonli namunaSeksiya sarlavhalari — 3 aksent
Hayot tarzi
Lifestyle
Ekran
Videolar
Hamkorlik
PR maqolalar
Soyalar
navy tusdagi chuqurlikHero
Karta
Yumshoq
Band
Trend
PR
Lifestyle
Bento gradientlar
bento kartalar uchunO‘zbekiston
Dunyo
Iqtisod
Texnologiya
Sport
Madaniyat
✓ Shunday qiling
- •Bitta seksiya = bitta aksent — rang seksiya imzosi bo‘lib qoladi.
- •Aksentni faqat eyebrow va ikonka-chipda qo‘llang.
- •Soyalarni navy tusda (rgba(11,31,63,…)) bering.
✕ Bunday qilmang
- •Aksent rangini seksiya foniga yoymang.
- •Bir ekranda 3+ to‘yingan aksentni yonma-yon qo‘ymang.
- •Qora neytral soyalardan foydalanmang.
03 · Asoslar
Mobil tipografika
O‘sha Fira Sans, lekin qattiqroq mobil shkala: kichik o‘lchamlar og‘irroq vazn bilan kompensatsiya qilinadi va har bir sarlavha agressiv line-clamp bilan cheklanadi.
Mobil shkala
MobileHome’dan tekshirilgan rollarHero sarlavhaoq matn qora fonda
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Seksiya sarlavhasi
Markaziy Osiyo
Katta karta
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Karusel karta
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Ro‘yxat qatori
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Kichik plitka
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Video reelqora reel ustida
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Metavaqt, manba, hisoblagichlar
11:45 · 11-iyul · 12 407 marta o‘qildi
Eyebrow
Jamiyat · Toshkent
Mikro-belgi (reklama)
Reklama
Qoidalar
- •Mobilda eng kichik o‘qiladigan matn — 10px, u faqat metada ishlatiladi.
- •Sarlavha vazni desktopdan og‘irroq (extrabold/black ustun), chunki o‘lchamlar kichik.
- •Hamma sarlavha bilan cheklanadi — 2 yoki 3 qator.
- •Lead matn faqat hero’da ko‘rsatiladi.
Desktop ↔ mobil
bir xil sarlavha, ikki kontekstDesktop karta
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Mobil qator
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
✓ Shunday qiling
- •Har bir sarlavhaga — bu majburiy.
- •Kichik o‘lchamda vaznni oshiring: 14px va undan pastda extrabold/black.
- •Raqamlarda ishlating.
✕ Bunday qilmang
- •10px dan kichik matn (yagona istisno — 8.5px reklama mikro-belgisi).
- •Mobilda 20px+ dan katta sarlavha — hero’dan tashqari.
- •Uzun lead matnlar — lead faqat hero’da, bitta qisqa jumla.
04 · Asoslar
Bo‘shliq, radius va skrollerlar
Mobil sahifa 12px hoshiya, bitta radius xaritasi va snap-mandatory karusellar ustiga quriladi — hammasi barmoq uchun, sichqoncha uchun emas.
Radius shkalasi
7 daraja — har birining o‘z roli bor28px
Hero + tahlil band
18px
Top bar
16px
Kartalar standarti
12px
Thumb’lar
6px
Ikonka-chip / teglar
4px
Reklama belgisi
full
Pill / ring / tugmalar
Bo‘shliq
hero mt-2 · ranked list -mt-5 (hero ustiga)px-3
12px
px-4
16px
gap-3
12px
gap-2
8px
mt-8
32px
mt-10
40px
pb-28
112px
Karusel kengliklari
snap-x snap-mandatory no-scrollbarSnap karusellar
Overlap patterni
-mt-5 · ranked list hero ustiga chiqadi-mt-5 · ranked list hero ustiga chiqadi
✓ Shunday qiling
- • — sahifa gorizontal standarti.
- •Karusellarda ishlating.
- •Skroller oxirida spacer qoldiring.
✕ Bunday qilmang
- •Gorizontal skroll ko‘rsatkichi — ishlating.
- •Karuselda 60% dan tor karta (reels w-[46%] bundan mustasno).
- •Aralash radiuslar bitta kartada — har karta bitta radius bilan.
05 · Navigatsiya
Suzuvchi xrom: top bar va tab bar
Xrom kontent ustida shisha pill ko‘rinishida suzadi: pastga skrollda yashirinadi, yuqoriga skrollning ilk harakatidayoq qaytib keladi.
Suzuvchi top bar
glass pill, skrollga sezgir
+24°
+24°
Yashirinish
Pastga skroll 80px dan oshgach bar tepaga suzib chiqib ketadi.
Qaytish
4px yuqoriga skroll yetarli — bar darhol qaytadi.
O‘tish
Bitta yumshoq ease-out egri chizig‘i, sakrashsiz.
Skroll masshtabi
Skroll chuqurlashgani sari pill biroz kichrayadi.
Safe-area
Notch va status bar ostiga hech qachon kirmaydi.
Qatlam
Xrom doim kontentdan yuqorida turadi.
Bottom tab bar
tablarni bosib ko‘ring — pill suzib o‘tadiPill harakati
Aktiv pill orqali tablar orasida suzadi.
Yorliq
Matn aktiv tabda kenglik animatsiyasi bilan ochiladi.
Bosish
Har teginish darhol jismoniy javob beradi.
Balandlik
Har bir tab tugmasining qat’iy balandligi.
Safe-area
Home-indikator bilan hech qachon to‘qnashmaydi.
Aktiv ikonka
Real SVG ikonkalar aktiv holatda shu texnika bilan oq bo‘ladi.
Separator
Guruhlar orasida vertikal gradient hairline.
Asosiy tokenlar
nusxa olish uchun bosing✓ Shunday qiling
- •Xrom doim glass sirtda va safe-area hisobida tursin.
- •Bitta aktiv tab aniq ko‘rinsin — pill, oq ikonka va yorliq bilan.
- •Kontent xrom ostidan o‘tsin — sahifa oxirida qoldiring.
✕ Bunday qilmang
- •Top bar va tab bar bir vaqtda yashirinmasin — foydalanuvchi yo‘nalishni yo‘qotadi.
- •Tab soni 5–6 dan oshmasin — pill sig‘maydi va nishonlar kichrayadi.
- •Pill rangini seksiya aksentiga almashtirmang — u doim brend ko‘k (#0096D2).
06 · Navigatsiya
Stories va gorizontal lentalar
Gorizontal skroll — mobil bosh sahifaning ikkinchi o‘qi: stories halqalari, chip-filtrlar va karta lentalari vertikal oqimni buzmasdan kontent zichligini oshiradi.
Stories qatori
conic-gradient halqa + snap-xTokenlar
halqaning anatomiyasiChip-lenta patterni
kategoriya filtrlari uchunQoida: gorizontal lenta — mobilda kontent zichligini oshirishning asosiy usuli. Har bir lenta va snap bilan quriladi. Ko‘rinmas qism borligini bildirish uchun oxirgi element qisman ko‘rinib turishi kerak — karta kengliklari / / aynan shu sababdan tanlangan.
✓ Shunday qiling
- •Lentaga bering — kartalar aniq to‘xtaydi.
- •Lenta oxirida spacer qoldiring — oxirgi karta chetga yopishmaydi.
- •Keyingi karta qisman ko‘rinib tursin — davomi borligini ko‘rsatadi.
✕ Bunday qilmang
- •Vertikal skroll ichida to‘liq enli gorizontal karta (snap’siz) qo‘ymang.
- •Stories halqasini bezak uchun ishlatmang — u faqat yangi kontent belgisi.
- •8 tadan ortiq chipni birdan ko‘rsatmang — tanlov shovqinga aylanadi.
07 · Kartalar
Mobil karta patternlari
Mobil lentadagi har bir karta bitta til — yumshoq radius, rasm ustidagi scrim va navy soya — bilan gapiradi; quyida sakkizta asosiy pattern jonli holatda va kalit klasslari bilan keltirilgan.
Hero billboard
lentaning eng katta birligiReytingli ro‘yxat (Asosiy)
hero ustiga chiqadigan oq kartaKarusel karta (Markaziy Osiyo uslubi)
gorizontal snap lentaBento kategoriya plitkasi
gradientli kvadrat plitkalarKategoriyalar
Video reel
vertikal 9:14 kadrlarFoto mozaika
4 ustunli aralash to‘rQorong‘i band (Tahlil uslubi)
ambient radial nurli tungi kartaQorong‘i band
Native reklama
doim aniq belgilanganNative reklama
ReklamaSponsored
728×90 banner
✓ Shunday qiling
- •Har bir karta bosilganda active:scale bilan javob bersin — teginish sezilsin.
- •Rasm ustidagi oq matn ostida doim scrim gradienti bo‘lsin.
- •Reklama kartalari doim aniq belgilansin — sariq badge yoki Reklama sarlavhasi.
✕ Bunday qilmang
- •Bitta lentada har xil karta kengliklarini aralashtirmang.
- •Scrim’siz rasm ustiga oq matn qo‘ymang — kontrast kafolatlanmaydi.
- •Sarlavhani 3 qatordan uzun qoldirmang — line-clamp majburiy.
08 · Harakat
Mobil harakat tili
Mobilda hover mavjud emas — shuning uchun har bir teginish darhol vizual javob qaytaradi: bosishda sirt yengil kichrayadi, qo‘yib yuborilganda bitta egri chiziq bo‘ylab joyiga qaytadi.
Teginish shkalasi
bosib ko‘ring0.99
Katta kartalar
0.97
Plitkalar
0.95
Tugmalar
Qatorlar (ro‘yxat elementlari) scale o‘rniga yumshoq fon oladi:
Davomiylik jadvali
bitta easing, besh davomiylik220ms
Ikonka rangi (CSS filter) va tab label ochilishi — eng tez javoblar.
260–280ms
Tab pill siljishi (tween 0.28s) va padding o‘tishlari.
320ms
Top bar soyasining interpolatsiyasi — skroll chuqurligiga qarab.
420ms
Top bar yashirinish/qaytish transformi — eng katta sirt, eng uzun vaqt.
500ms
Ikonka transformi (masshtab/siljish) — dekorativ, bloklamaydigan harakat.
LayoutId pill
bottom tab bar bilan bir xil mexanikaHide-on-scroll spetsifikatsiyasi
top bar xatti-harakatiTrigger
Top bar faqat foydalanuvchi pastga 80px dan ko‘p siljigandan keyin yashirinadi.
Qaytish
Yuqoriga atigi 4px siljish darhol barni qaytaradi — niyat signali kichik.
Translate
Bar to‘liq balandligidan ham yuqoriroqqa chiqadi, soya izi qolmaydi.
Scale
120px skroll progressida bar 1 dan 0.96 gacha kichrayadi.
Aktiv ikonka rangi CSS filter orqali almashadi:
GPU gigiyena
silliq 60fps uchunElementni alohida GPU qatlamiga ko‘chirib, skroll paytida repaint oldini oladi.
Brauzerga kelayotgan transform haqida oldindan xabar beradi — faqat harakatlanuvchi elementlarda.
WebKit’da transform paytidagi miltillash (flicker) artefaktlarini yo‘qotadi.
iOS’ning standart kulrang teginish chaqnashini o‘chiradi — javobni faqat bizning scale beradi.
✓ Shunday qiling
- •Har teginishga darhol vizual javob bering — scale yoki fon o‘zgarishi.
- •Faqat va animatsiya qilinadi — layout xususiyatlari emas.
- •Yangi qoida: har bir yangi mobil animatsiya sozlamasini hurmat qilishi SHART.
✕ Bunday qilmang
- •Hoverga bog‘liq harakat qurmang — mobilda hover mavjud emas.
- •Teginish javobini 500ms dan uzoq cho‘zmang — interfeys sekin tuyuladi.
- •Skroll paytida og‘ir animatsiyalar (blur, shadow, layout) ishlatmang.