PDP UI/UX qo‘llanma · v0.7
Rasmiy brendPDP Mobil ilova
Telefon uchun: Telegram Mini App va bot xabarlari, iOS va Android talaba ilovasi — tokenlar, komponentlar, ekranlar, ikonka va push. Kompyuterdagi ish ekranlari (CRM, Nextcloud) — «Dashboard» to‘plamida.
Ilova to‘plami
Telefon uchun: mobil ilova va Telegram Mini App
Bu to‘plamda — telefonda ochiladigan PDP ekranlari: Telegram ichidagi Mini App va bot, iOS va Android uchun native ilova. Ranglar, shrift va tokenlar — «Yadro»dan, umumiy veb komponentlar — «Sayt»dan. Kompyuterdagi ish ekranlari — Nextcloud ilovalari, CRM va dashboard — «Dashboard» to‘plamida.
Ichida nima bor
Bot ichida ochiladigan Mini App: qobiq va 10 ta ekran, bot xabarlari shablonlari, Telegram mavzusini PDP tokenlariga bog‘laydigan ko‘prik va kanal tanlash qoidalari.
iOS va Android talaba ilovasi: tokenlar platforma tilida (pt, sp), komponentlar, 12 ta asosiy ekran, ilova ikonkasi va splash, push va vidjetlar, platforma farqlari.
Ilova yoki Dashboard: qayerdan olish
| Vazifa | To‘plam va bo‘lim |
|---|---|
| Telegram’da kurs katalogi, ariza yoki to‘lov ekrani | Ilova → Mini App qobig‘i |
| Botdan keladigan xabar, eslatma yoki chek | Ilova → Bot xabarlari |
| iPhone yoki Android ilovasi ekrani | Ilova → Ilova ekranlari |
| Nextcloud ilovasi, CRM yoki dashboard ekrani | Dashboard → Nextcloud |
| Veb ilova karkasi: yon panel, sarlavha qatori, bildirishnomalar | Dashboard → Ilova karkaslari |
| Veb-sayt, landing yoki ariza sahifasi | Sayt → Komponentlar |
Umumiy qoidalar
- Hozircha faqat EcoSystem. Bu to‘plamdagi bo‘limlar EcoSystem uchun yozilgan; boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
- Brend bitta, odat platformaniki. Rang, shrift, ikonka va ohang hamma joyda bir xil; navigatsiya, «orqaga», varaq va xabar — iOS yoki Android odatiga qarab.
- Ranglar — tokenlardan. HEX qo‘lda yozilmaydi: native ilova — mobil token fayllaridan, Mini App — Telegram mavzusi ko‘prigi orqali.
- Ikonkalar — Telegram UI kit. Ilova ekranlarida —
a-*to‘plami (Telegram ikonkalari), veb va boshqa to‘plamlarda — Phosphor (i-*). Ro‘yxat va o‘lchamlar — Ilova ikonkalari. - Barmoq uchun joy. Bosiladigan element — kamida 44 pt (iOS) va 48 dp (Android); pastki tugmalar xavfsiz hududdan tashqarida.
- Light va Dark teng. Ilova rejimni tizimdan yoki Telegram’dan oladi; har ekran ikkala rejimda loyihalanadi.
- Keyingi ilovalar. PDP Desk va PDP Talk mobil ilovalari shu to‘plamga, alohida guruh bo‘lib qo‘shiladi.
Telegram Mini App
Telegram Mini App: qobiq va asosiy ekranlar
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Bot xabarlari
Bot xabarlari: shablonlar va yozish qoidalari
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Telegram mavzusi
Telegram mavzusi va PDP tokenlari
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Kanal tanlash
Bot, Mini App yoki sayt: qachon qaysi biri
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Mobil tokenlar
Mobil ilova: tokenlar iOS va Android tilida
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Mobil komponentlar
Mobil komponentlar: bitta brend, ikki platforma
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Ilova ekranlari
Talaba ilovasi: 12 ta asosiy ekran
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Ilova ikonkasi va splash
Ilova ikonkasi va ochilish ekrani
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
Push va vidjetlar
Push bildirishnomalar, Live Activity va vidjetlar
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
iOS va Android farqlari
iOS va Android: nima bir xil, nima farq qiladi
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.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Desk
PDP Desk — fayllar ilovasi
PDP Desk — PDP jamoasining fayl ilovasi: hujjat, rasm va papkalar telefonda, kompyuterda va brauzerda bir xil. Asosi — Nextcloud Files; ko‘rinishi — PDP EcoSystem. Guruhdagi har ekran ikki ko‘rinishda: «Hozirgi holat» — 03.10 prototipi va 05.10 Android kodi bo‘yicha, «Redesign» — DS qoidalari bo‘yicha, nima o‘zgargani bilan.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Desk
Bosh ekran
Desk ochilganda birinchi ko‘rinadigan ekran: salom, «Fayllar» sarlavhasi, qidiruv, xotira kartasi, «So‘nggi» fayllar va ro‘yxat boshi. Tepada Light/Dark almashtirgichi — ikkala telefon birga almashadi.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Desk
Fayllar ro‘yxati
Papka ichi: filtr chiplari, saralash, fayl qatorlari, tanlash rejimi va «Yaratish» varag‘i. Fayl nomlari tarjima qilinmaydi.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Desk
Fayl tafsiloti va ulashish
Fayl ochilganda: katta ko‘rinish, nom va hajm, to‘rtta tezkor amal, kirish huquqi, havola va faollik; ulashish ekrani — kim ko‘radi va kim tahrirlaydi.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Desk
Yuklashlar
Telefon fayllarini serverga yuborish: jarayon, kutish, xato, yakunlanganlar va fayl ikki joyda o‘zgarganda tanlov.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Desk
Media va ko‘ruvchi
Telefondagi rasm va videolar oylar bo‘yicha va ularni to‘liq ekranda ko‘rish. Ko‘ruvchi Light’da ham qora — rasm uchun.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Desk
Profil va sozlamalar
Hisob, xotira, ko‘rinish, sinxronlash, xavfsizlik va bildirishnomalar. Hozir ikki joyda: prototip profili va Nextcloud’ning stock sozlamalari.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Talk
PDP Talk — chat va qo‘ng‘iroqlar
PDP Talk — jamoa chatlari va qo‘ng‘iroqlari: shaxsiy va guruh chatlari, fayl, ovozli xabar, reaksiya, audio va video qo‘ng‘iroq. Asosi — Nextcloud Talk. Har ekran ikki ko‘rinishda: «Hozirgi holat» (prototip va Compose kodi) va «Redesign» (DS qoidalari).
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Talk
Chatlar ro‘yxati
Talk’ning bosh ekrani: salom va holat, qidiruv, onlayn hamkasblar, filtr chiplari va chatlar. Qator: avatar, nom, oxirgi xabar, vaqt, hisoblagich.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Talk
Chat: xabarlar va yozish
Guruh chati: sarlavha paneli, sana va tizim xabarlari, matn, eslatma, iqtibos, havola, rasm, fayl, ovozli xabar, so‘rovnoma, reaksiyalar, yozish maydoni va bosib turish menyusi.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Talk
Qo‘ng‘iroq
Guruh qo‘ng‘irog‘i va kiruvchi qo‘ng‘iroq. Qo‘ng‘iroq ekrani doim qorong‘i — sahna qotirilgan.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Talk
Chat ma’lumoti va sozlamalar
Guruh haqida: avatar, nom, tezkor amallar, tavsif, bildirishnomalar va ishtirokchilar. Ilova sozlamalari va holat tanlash.
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.
PDP Talk
Tanishuv va kirish
Birinchi ochilish: uch qisqa ekran (qora sahnada), server manzili va brauzer orqali kirish (Nextcloud Login Flow v2).
Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.