PDP UI/UX qo‘llanma · v0.7
Rasmiy brendPDP Mobile
Har mobil dizayn — LMS ilova, Desk, Talk — shu ota qismdan quriladi: mobil tokenlar, komponentlar, ilova ekranlari va Telegram.
Hech narsa topilmadi. Boshqa so‘z bilan urinib ko‘ring.
Ko‘lam — raqamlarda
Yig‘ishda manbadan sanaladi · 08.10.2026
- 10bo‘lim
- 50telefon ekrani
- 13Telegram bloki
- 73ilova ikonkasi
- 35hujjat bloki
Mobil tokenlar
Mobil ilova: tokenlar iOS va Android tilida
DS tokenlari iOS va Android tilida: shrift, oraliq, fon zinasi, rang rollari va haptika.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Talaba ilovasi iPhone va Android’da bir xil brend, lekin har platformada o‘ziniki bo‘lib ko‘rinadi. Bu yerda DS tokenlari ikki platforma tiliga o‘giriladi: shrift shkalasi (pt va sp), oraliq va burchaklar, soya o‘rniga fon zinasi, rang rollari, xavfsiz hudud, barmoq o‘lchami, Dynamic Type, haptika va harakat. O‘zbekistonda smartfonlarning taxminan 79 % i Android — ikkala platforma teng loyihalanadi. G‘oya — Apple HIG (iOS 26–27) va Material 3 Expressive.
Mobil komponentlar
Mobil komponentlar: bitta brend, ikki platforma
Tab bar, sarlavha, qidiruv, varaq, ro‘yxat va FAB — chapda iOS, o‘ngda Android.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Talaba ilovasining asosiy qismlari telefon ramkasida: tab bar va navigatsiya paneli, katta sarlavha, qidiruv, varaq, ro‘yxat qatorlari, kartalar, segment, FAB, xabar (snackbar / toast) va bo‘sh holat. Chap — iOS 26–27 (suzuvchi shisha tab bar, shisha tugmalar), o‘ng — Android, Material 3 Expressive (64 dp panel, FAB). Ranglar, shrift va burchaklar — bitta: Mobil tokenlar. Veb-ilova uchun — Ilova navigatsiyasi.
Ilova ekranlari
Talaba ilovasi: 12 ta asosiy ekran
Tanishuvdan profilgacha 12 ekran — iOS va Android, Light va Dark’da.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Birinchi ochilishdan kundalik ishgacha: tanishuv, telefon va SMS kod bilan kirish, PIN va Face ID, bosh sahifa, kurslar, dars pleyeri, jadval, topshiriq, natijalar, profil va bildirishnomalar. Har ekran iOS va Android’da, Light va Dark’da — tepadagi tanlov bilan. Mahalliy naqshlar — Click, Payme va Uzum ilovalaridan (til tanlovi, +998, SMS kod, PIN); o‘quv naqshlari — Duolingo, Coursera va Khan Academy’dan. Komponentlar — Mobil komponentlar.
Ilova ikonkasi va splash
Ilova ikonkasi va ochilish ekrani
Ikonka — yozuvsiz belgi: iOS’da to‘rt ko‘rinish, Android’da adaptive, va splash.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Ikonkada faqat belgi — yozuvsiz (brendbuk: «S · Minimal» — favicon va ilova ikonkasi). Asosiy ikonka — yashil maydon, oq belgi va limon nurlar: uy ekranida PDP’ning rangi. iOS 26 dan ikonka qatlamli (Default, Dark, Tinted, Clear), Android’da — adaptive (fon, old qatlam, monoxrom). Belgi fayldan olinadi, qayta chizilmaydi; ranglar — tasdiqlangan juftliklar. Logotip qoidalari — Brend → Logotip.
Push va vidjetlar
Push bildirishnomalar, Live Activity va vidjetlar
Qulf ekrani, parda, Live Activity va vidjetlar — Light va Dark’da.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Ilova yopiq paytida talaba bilan aloqa: dars eslatmasi, mentor xabari, baho, muddat va yuklanish jarayoni. Qulf ekrani va pardada — tizimning o‘z shakli, bizdan esa qisqa matn, to‘g‘ri kanal va to‘g‘ri vaqt. Vaqtga bog‘liq jarayon (dars boshlanishi, fayl yuklanishi) — iOS Live Activity va Android 16 Live Update; tez ko‘rish — uy va qulf ekrani vidjetlari. Ilova ichidagi ro‘yxat — Ilova ekranlari, veb uchun — Bildirishnomalar markazi.
iOS va Android farqlari
iOS va Android: nima bir xil, nima farq qiladi
Bitta ekran ikki platformada — brend bir xil, navigatsiya va qatlamlar platformaniki.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Brend bir xil — rang, shrift, ikonka, burchak va ohang. Platformaga qarab o‘zgaradi — navigatsiya, «orqaga», asosiy amal, varaq, xabar, tizim yuzalari va qo‘l harakatlari: foydalanuvchi o‘z telefonidagi odatni kutadi. Har qatorda — iOS (HIG, iOS 26–27), Android (Material 3 Expressive, Android 15–16) va PDP qarori.
Telegram Mini App
Telegram Mini App: qobiq va asosiy ekranlar
Bot ichidagi veb-ilova: Telegram qobig‘i, PDP ekranlari va jonli namuna.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
O‘zbekistonda Telegram — asosiy kanal: kurs tanlash, ariza, jadval va to‘lov ko‘pincha shu yerda boshlanadi. Mini App — bot ichida ochiladigan veb-ilova. Sarlavha, pastki tugma va «Orqaga» tugmasini Telegram chizadi — PDP ularga faqat rang va matn beradi; qolgan hamma narsa — PDP tokenlari va komponentlari. Rang ko‘prigi — Telegram mavzusi va tokenlar, bot xabarlari — Bot xabarlari.
Bot xabarlari
Bot xabarlari: shablonlar va yozish qoidalari
Yettita tayyor xabar shabloni — Telegram Light va Dark’da, HTML matni bilan.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Bot — eng qisqa yo‘l: odam hech narsa o‘rnatmaydi, xabar chatda keladi. Bitta xabar — bitta mavzu va bitta asosiy tugma; uzun ish (katalog, forma, to‘lov) — Mini App’da. Quyida yettita tayyor shablon: ko‘rinishi Telegram’ning Light va Dark mavzusida, yonida — parse_mode: HTML matni va tugmalar.
Telegram mavzusi
Telegram mavzusi va PDP tokenlari
Telegram mavzusi almashadi — ilova PDP tokenlarida qoladi, faqat Light/Dark ergashadi.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
Telegram Mini App’ga 15 ta rang (themeParams), rejim (colorScheme) va joy o‘lchamlarini beradi. PDP ilovasi rejimni Telegram’dan oladi, ranglarni esa o‘z tokenlaridan — va Telegram’ning sarlavha, fon va pastki tugmasini shu ranglarga bo‘yaydi. Ko‘prik — bitta CSS va bitta JS fayl, HEX’siz: tokenlar yangilansa, ilova ham yangilanadi.
Kanal tanlash
Bot, Mini App yoki sayt: qachon qaysi biri
Xabar — botda, ekran — Mini App’da, sahifa — saytda.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Qoidalar va kod
O‘zbekistonda odamlarning taxminan 70 % i uchun asosiy messenjer — Telegram. Shuning uchun birinchi aloqa ko‘pincha botda, ish esa Mini App’da bo‘ladi; sayt — qidiruvdan keladiganlar, uzun hujjatlar va raqamli kurslar to‘lovi uchun. Qoida oddiy: xabar — botda, ekran — Mini App’da, sahifa — saytda.