PR maqolalar
Moliya01 · 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 — gem-uslubdagi bottom tab bar, muhim amallar barmoq zonasida joylashadi. Teginish maydoni kamida 44×44px bo‘lishi SHART; hozirgi ba’zi 32px tugmalar keyingi iteratsiyada kattalashtiriladi.
Ikki sirt: kunduz va tun
Kunduzgi sirt #eef1f6 + oq kartalar + #0b1220 ink; tungi rejimda (Tungi rejim, Menyu tabidan) sahifa #0A0F1C, kartalar #0F1727, matn #E6EDF6 bo‘ladi. Qorong‘i tahririy bandlar (PR #04122B, Shou-biznes #0b1220) esa tema emas — ular har ikki rejimda ham qorong‘i qoladi.
Suzuvchi xrom
Top bar shisha (blur) pill, tab bar esa gradient ramkali deyarli tiniq bar — 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-*, tab barda whileTap 0.88 + ripple. Rasmlar lazy yuklanadi, GPU hints (translateZ(0), willChange) silliq skrollni kafolatlaydi.
MezonDesktopMobil
Konteyner1400px konteynerTo‘liq kenglik, px-3
NavigatsiyaSticky headerSuzuvchi pill + gem tab bar
InteraksiyaHover holatlariActive / tap javobi
Seksiya sarlavhasi4px gradient chiziq3px vertikal aksent chizig‘i
Temahtml.dark klassiRoot darajadagi Tungi rejim
Radius2xl (16px)20px karta qobig‘i, 26px tab bar
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.
Tungi rejim
useMobileTheme() hook — localStorage’da saqlanadi, barcha mobil sahifalar o‘z root elementidagi dark klassi bilan sinxron.
Breakpoint
Mobil versiya shu chegaradan pastda ko‘rsatiladi.
✓ Shunday qiling
- •Sahifa oxirida bottom bar uchun … joy qoldiring.
- •Teginish maydonini kamida 44×44px qiling.
- •Har yangi komponentga variantlarini birga yozing — tungi rejim keyin ulanmaydi, boshidan quriladi.
✕ 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 va ikki rejimda yashaydi: kunduzgi yorug‘ sirt (#eef1f6) va Tungi rejim (#0A0F1C). Har bir seksiya o‘z aksent rangi bilan ajralib turadi.
Sirt palitrasi
kunduzgi rejimSurface
Card
Ink
Brand
Deep
Sky
Brend ranglari desktop tizimidan meros — mobil uchun yangi rang kiritilmaydi.
Tungi palitra
Tungi rejim — Menyu tabidan yoqiladiNight surface
Night card
Night sheet
Night ink
Night muted
Night sky
Mexanizm
Holat localStorage’da saqlanadi va window event orqali barcha sahifalar bilan sinxronlanadi.
Klass strategiyasi
dark klassi html’ga emas, har bir mobil sahifaning root elementiga qo‘yiladi — desktop temasi mobilga oqib o‘tmaydi (useIsolateDesktopDark).
Hairline’lar
Kunduzgi ring-black/5 o‘rniga tungi rejimda oq alfa chiziqlar ishlatiladi; soyalar o‘rnini ring egallaydi (dark:shadow-none dark:ring-1).
Seksiya aksentlari
mobil tizimning imzosiTrendda
Trend
Video
Ekran
Videolar reel
Qizil urg‘u
Sport
Sport
Avto
Avto
Shou-biznes
Qorong‘i band
Lifestyle
Hayot tarzi
Kitob
Rubrika
Ta’lim
Rubrika
Sayohat
Rubrika
Aksent 3 joyda ishlaydi: sarlavha oldidagi vertikal chiziq linear-gradient(180deg, accent, accent4D), karta tepasidagi 3px gorizontal rule va eyebrow matn rangi. Aksent hech qachon seksiya foniga qo‘llanmaydi.
Davlat aksentlari
Markaziy Osiyo har davlatga o‘z rangiO‘zbekiston
Qozog‘iston
Qirg‘iziston
Tojikiston
Turkmaniston
Mobil SectionHeader
jonli namunaSeksiya sarlavhalari — vertikal aksent chizig‘i
Markaziy Osiyo
BarchasiSport
BarchasiLifestyle
BarchasiHayot tarzi
Shou-biznes
Standart: aksent chiziq + . Rubrika varianti: eyebrow + 18px sarlavha.
Qorong‘i tahririy bandlar
tema emas — tahririy bezakPR maqolalar
radial #14407A / #1E5BB8
Shou-biznes
serif raqamli posterlar
Foto orbit
3D halqa sahnasi
Video tab
radial #0C2A55 / #123B7E
Navy hero
kategoriya / mintaqa sahifalari
Bu bandlar tungi rejimga bog‘liq emas — ular kunduzgi rejimda ham qorong‘i qoladi va lentaga tahririy ritm beradi.
Soyalar
navy tusdagi chuqurlikKarta qobig‘i
Karusel karta
Tab bar
Suzuvchi dock
Aktiv gem
TREND pill
Lifestyle
Menyu aksentlari
Menyu tabidagi gem-plitkalarO‘zbekiston
Markaziy Osiyo
Dunyo
Pul
Madaniyat
Sport
Layfstayl
Ta’lim
Menyu tabida tez kirish plitkalari gradient kvadratlar sifatida chiziladi.
✓ Shunday qiling
- •Bitta seksiya = bitta aksent — rang seksiya imzosi bo‘lib qoladi.
- •Aksentni faqat sarlavha chizig‘i, top-rule va eyebrow’da qo‘llang.
- •Soyalarni navy tusda (rgba(11,31,63,…)) bering; tungi rejimda soya o‘rniga ring ishlating.
✕ 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
Ikki ovoz: Fira Sans — interfeys va sarlavhalar (semibold asos), PT Serif — tahririy urg‘u: karusel sarlavhalari, sitatalar va reyting raqamlari. Har bir sarlavha line-clamp bilan cheklanadi.
Mobil shkala
MobileHome’dan tekshirilgan rollarMaqola H1maqola sahifasida
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Hero billboardoq matn scrim ustida
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Seksiya sarlavhasi
Markaziy Osiyo
Karusel karta (serif)tahririy urg‘u — PT Serif 700
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
Katta story karta
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Maqola matniAa bilan 3 o‘lcham
Metro qurilishining ilk bosqichi 2027-yilgacha yakunlanadi. Loyihaga ko‘ra, yangi halqa mavjud uch yo‘nalishni bog‘laydi.
Metavaqt, manba, hisoblagichlar
11:45 · 11-iyul · 12 407 marta o‘qildi
Eyebrow
Jamiyat · Toshkent
Glass badgerasm ustidagi tur belgisi
Video
Mikro-belgi (reklama)
Reklama
Serif rank raqamireyting va watermark uchun
102
Drop-capmaqola birinchi xatboshisi
Toshkent metrosi tarixidagi eng yirik kengaytirish loyihasi rasman boshlandi.
Qoidalar
- •Sarlavha vazni — semibold asos; bold/black faqat maqola H1, katta story va raqamlarda.
- •PT Serif — tahririy ovoz: karusel sarlavhalari, muallif sitatalari, reyting raqamlari va watermark harflar. Interfeys elementlarida ishlatilmaydi.
- •Mobilda eng kichik o‘qiladigan matn — 10px, u faqat metada ishlatiladi (istisno: 8–9px mikro-belgilar).
- •Hamma sarlavha bilan cheklanadi — 2, 3 yoki ro‘yxatda 4 qator.
- •Maqola matni Aa bilan 3 o‘lchamda: 15 / 16.5 / 18.5px — line-height mos ravishda 1.75 / 1.8 / 1.85.
Desktop ↔ mobil
bir xil sarlavha, ikki kontekstDesktop karta
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
Mobil karusel karta
Toshkentda yangi metro bekati ochildi — yo‘lovchilar oqimi 20 foizga oshdi
✓ Shunday qiling
- •Har bir sarlavhaga — bu majburiy.
- •Serifni faqat tahririy kontentda ishlating — sarlavha, sitata, raqam.
- •Raqamlarda ishlating.
✕ Bunday qilmang
- •10px dan kichik matn (istisno — 8–9px mikro-belgilar).
- •Mobilda 22px+ dan katta sarlavha — maqola H1’dan tashqari.
- •PT Serif’ni tugma, chip yoki meta matnida ishlatmang.
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
10 daraja — har birining o‘z roli bor26px
Tab bar ramkasi (ichi 25px)
24px
Bottom sheet / oq sahifa qatlami
20px
Asosiy karta qobig‘i
18px
Top bar, suzuvchi dock
16px
Kartalar standarti
13px
Hero billboard rasmi
12px
Gem chip / kichik kartalar
8px
Ro‘yxat thumb’lari
4px
Reklama belgisi
full
Pill / ring / tugmalar
Bo‘shliq
kartalar px-3 · sarlavhalar px-4px-3
12px
px-4
16px
gap-3
12px
gap-2
8px
mt-8
32px
pb-24
96px
pb-32
128px
Karusel kengliklari
snap-x snap-mandatory no-scrollbarSnap karusellar
Karta qobig‘i patterni
bitta oq qobiq — hero + ro‘yxat birgahero · rounded-[13px] · aspect-[4/3.4]
✓ Shunday qiling
- • — sahifa gorizontal standarti, sarlavhalar .
- •Karusellarda ishlating.
- •Skroller oxirida spacer qoldiring.
✕ Bunday qilmang
- •Gorizontal skroll ko‘rsatkichi — ishlating.
- •Karuselda 60% dan tor karta (Shou-biznes posteri w-[64%] eng tori).
- •Aralash radiuslar bitta kartada — qobiq 20px bo‘lsa, ichki rasm doim 13px.
05 · Navigatsiya
Suzuvchi xrom: top bar va tab bar
Top bar shisha pill ko‘rinishida kontent ustida suzadi va skrollga sezgir. Tab bar esa gem-uslubda: har bir tab doimo ko‘rinadigan gradientli kvadrat chip + mikro-yorliqdan iborat, aktiv holat brend ko‘k gradient bilan yonadi.
Suzuvchi top bar
glass pill, skrollga sezgir
+24°
+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.
Tungi rejim
Tungi rejimda shisha pill to‘q-navy sirtga o‘tadi, logo bilan oqaradi.
Qatlam
Xrom doim kontentdan yuqorida; sahifa boshida 60px joy qoldiriladi. FM va Menyu tablari top barsiz ishlaydi.
Bottom tab bar
gem chiplar — har tabda doimiy yorliqTablar
Ikki guruh orasida gradient separator turadi.
Gem chip
Har bir ikonka gradientli kvadrat chip ustida turadi — pill yo‘q, ishlatilmaydi.
Aktiv holat
Aktiv gem brend ko‘k gradient + ko‘k soya oladi, ikonka oq bo‘ladi ().
Inaktiv holat
Oqish gradient + ikki tomonlama inset soya chipni yuzadan yengil ko‘tarilgan qilib ko‘rsatadi.
Yorliq
Mikro-yorliq har doim ko‘rinadi; aktivda (tungi: #4bc4f0), inaktivda 48% ink.
Kirish animatsiyasi
Gemlar birin-ketin prujina bilan paydo bo‘ladi (delay 0.12 + i × 0.055).
Bosish
Teginishda tugma qisqaradi va gem ichida ko‘k ripple tarqaladi.
Ambient effektlar
Barmoq ortidan lerp bilan suzuvchi blob, har 5 soniyada yaltiroq chiziq va tepa qirradagi ko‘k hairline.
Konteyner
Gradient ramka ichida deyarli tiniq oq bar — , blur ishlatilmaydi.
Safe-area
Bar deyarli to‘liq enli, home-indikator bilan to‘qnashmaydi.
Tungi rejim
Global tungi rejimda yoki to‘q-navy bandlarda (Video, Persona) bar o‘zi qorong‘i variantga o‘tadi.
Ikonkalar
rectangle-list, note, screen-play, radio, persona, apps — rang CSS orqali beriladi.
Asosiy tokenlar
nusxa olish uchun bosing✓ Shunday qiling
- •Xrom doim safe-area hisobida tursin — tepa 6px, past 4px minimal.
- •Bitta aktiv tab aniq ko‘rinsin — ko‘k gradient gem, oq ikonka va ko‘k 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 6 tadan oshmasin — gemlar torayadi va yorliqlar o‘qilmay qoladi.
- •Aktiv gem rangini seksiya aksentiga almashtirmang — u doim brend ko‘k gradient.
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
uch holat: aktiv · ko‘rilmagan · ko‘rilganAktiv (roving)
Shtrixli halqa bilan har 4 soniyada keyingi story’ga suzib o‘tadi (tween 0.5s) va sekin aylanadi.
Ko‘rilmagan
Brend konus-gradient halqa: #0096D2 → #4bd0ff → #0F41C2.
Ko‘rilgan
Neytral kulrang halqa — kontent allaqachon ochilgan.
Ichki bo‘shliq
Halqa va rasm orasidagi oq (tungi rejimda navy) hoshiya.
O‘lcham
64px avatar, yorliq .
Chip-lenta patterni
kategoriya filtrlari uchunChip balandligi (katta variantda h-9), ; aktiv chip .
Qoida: gorizontal lenta — mobilda kontent zichligini oshirishning asosiy usuli. Har bir lenta va snap bilan quriladi. Ko‘rinmas qism borligini bildirish uchun keyingi karta 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 asosiy patternlar jonli holatda va kalit klasslari bilan keltirilgan.
Asosiy karta: hero + reyting ro‘yxati
bitta oq qobiqdaKarusel karta (Markaziy Osiyo uslubi)
aksent top-rule + serif sarlavhaGradient-hairline karta (Trendda / Jonli)
ko‘k gradient ramka ichida oq kartaVideo reel
qora karta, qizil urg‘uFoto mozaika
4 ustunli aralash to‘rQorong‘i band (PR uslubi)
navy band + shisha kartaQorong‘i band
MoliyaValyuta lentasi (CurrencyStrip)
CBU kurslari — jonli puls nuqtasiValyuta lentasi
₮
USD12 650EUR13 720RUB146
Bento kategoriya plitkasi
gradientli kvadrat plitkalarKategoriyalar
✓ Shunday qiling
- •Har bir karta bosilganda active:scale-[0.99] bilan javob bersin — teginish sezilsin.
- •Rasm ustidagi oq matn ostida doim scrim gradienti bo‘lsin.
- •Reklama doim aniq belgilansin — ro‘yxatda ghost pill, lentada to‘liq enli (-mx-3) banner.
✕ Bunday qilmang
- •Bitta lentada har xil karta kengliklarini aralashtirmang.
- •Scrim’siz rasm ustiga oq matn qo‘ymang — kontrast kafolatlanmaydi.
- •Sarlavhani line-clamp’siz qoldirmang — 2, 3 yoki ro‘yxatda 4 qator.
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
Menyu plitkalari , saqlash beadi . Qatorlar (ro‘yxat elementlari) scale o‘rniga yumshoq fon oladi:
Davomiylik jadvali
bitta easing [0.22,1,0.36,1], yetti davomiylik220ms
Ikonka rangi (CSS filter) va tab yorlig‘ining rang almashishi — eng tez javoblar.
280ms
Tab bosish o‘tishi va layoutId pill siljishi (CA davlat tablari).
300ms
Gem chip foni va soyasining almashishi, tema (tungi/kunduzgi) o‘tishlari.
320–340ms
Bottom sheet’lar (Tasma filtri, Aa oynasi) — y:100% → 0, tween, spring EMAS.
420ms
Top bar yashirinish/qaytish transformi — eng katta sirt, eng uzun vaqt.
500ms
Ikonka transformi (scale 1.06) va story roving ring sakrashi.
spring 420/22
Tab bar gemlarining kirish animatsiyasi — stagger delay 0.12 + i × 0.055.
LayoutId pill
CA davlat tablari va story roving ringDiqqat: bottom tab bar endi layoutId pill ishlatmaydi — u gem chiplarga o‘tgan. layoutId pill Markaziy Osiyo davlat tablarida (, 0.28s) va stories roving halqasida (, 0.5s) yashaydi.
Hide-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.