Interfeysda jadval dizayni: saralash, filtrlar va zichlik
Amaliyot4 daqInnovialabs tahririyati
Qisqacha
Qulay jadval tez taqqoslash va harakat qilishga yordam beradi: raqamlar o‘ngga, matn chapga tekislanadi, muhim ustunlar birinchi, sarlavha mahkamlangan, zichlik sozlanadi, mobilda esa qatorlar kartochkaga aylanadi.
Jadvalning asosiy vazifasi
CRM yoki admin paneldagi jadval ikki narsa uchun kerak: ma’lumotlarni ko‘zdan kechirish va taqqoslash hamda yozuvlar ustida tez harakat qilish. Har bir dizayn qarorini bitta savol bilan tekshiring: kerakli qatorni topish va u bilan biror narsa qilish osonlashdimi?
Asosiy qoidalar:
- matn chapga, raqamlar o‘ngga tekislanadi;
- muhim ustunlar birinchi keladi;
- aylantirishda sarlavha ko‘rinib turadi;
- amallar ortiqcha o‘tishlarsiz mavjud.
Tekislash va formatlash
| Ma’lumot turi | Tekislash | Izoh |
|---|---|---|
| Matn, ismlar | Chapga | Odatiy o‘qiladi |
| Raqamlar, summalar | O‘ngga | Xonalar bir-birining ostida turadi |
| Sanalar | Chapga yoki o‘ngga, lekin bir xil | Butun jadvalda bitta format |
| Statuslar | Chapga | Rangli indikator + matn |
| Amal ikonkalari | O‘ngga yoki markazga | Oxirgi ustun |
Raqamlar uchun bir xil kenglikdagi raqamlardan (font-variant-numeric: tabular-nums), verguldan keyin bir xil miqdordagi belgilardan va xona ajratgichidan foydalaning. Ustun sarlavhasini uning mazmuni kabi tekislang.
Status faqat rang orqali berilmasligi kerak: rangni ajrata olmaydigan odamlar ham farqlashi uchun matn yoki ikonka qo‘shing.
Ustunlar ustuvorligi
- Birinchi bo‘lib inson yozuvni taniydigan ustunni qo‘ying: mijoz ismi, buyurtma raqami.
- Keyin — qaror qabul qilinadigan narsalar: status, summa, sana.
- Xizmat maydonlari (ID, yaratilgan sana) — oxirida yoki standart bo‘yicha yashirin.
- Ustunlar to‘plamini sozlash imkonini bering va tanlovni eslab qoling.
- Uzun matnni ko‘p nuqta bilan qirqing va to‘liq holda kursor olib borilganda yoki yozuv kartochkasida ko‘rsating.
Mahkamlangan sarlavha va birinchi ustun
Vertikal aylantirishda sarlavha joyida qolishi kerak, aks holda inson ustun nimani anglatishini unutadi. Keng jadvallarda gorizontal aylantirishda qaysi yozuv haqida gap ketayotganini yo‘qotmaslik uchun birinchi ustunni ham mahkamlang.
th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
td:first-child, th:first-child { position: sticky; left: 0; background: var(--surface); }
Mahkamlangan kataklar uchun fon majburiy — usiz ularning ostidan aylantirilayotgan kontent ko‘rinib turadi.
Zichlik rejimlari
Turli odamlarga turli zichlik kerak: kun bo‘yi jadval bilan ishlaydigan operatorga — ixcham, vaqti-vaqti bilan qaraydigan rahbarga — erkinroq.
- Ixcham rejim — ekranda ko‘proq qator, kamroq bo‘shliq.
- Standart — sukut bo‘yicha muvozanat.
- Erkin — o‘qish osonroq, sensorli ekranlarda qulayroq.
Qator balandligi o‘zgaradi, lekin shrift o‘lchami va bosish maydoni juda kichik bo‘lib qolmasligi kerak. Zebra yoki ajratgichlar keng jadvallarda qatorni ko‘z bilan kuzatishga yordam beradi.
Saralash va filtrlar
- Saralash — sarlavhani bosish orqali, faol ustunda aniq yo‘nalish strelkasi bilan.
- Saralanadigan ustunlar saralanmaydiganlardan vizual farq qiladi.
- Filtrlar — jadval ustida yoki ustun sarlavhalarida; tanlangan shartlarni olib tashlash mumkin bo‘lgan chiplar bilan ko‘rsating.
- Saralash va filtrlar holatini havola orqali ulashish uchun URL’da saqlang.
Qatordagi amallar va ommaviy tanlash
Inline-amallarni (tahrirlash, ochish, o‘chirish) oxirgi ustunga joylang. Tez-tez ishlatiladigan amal — ko‘rinadigan ikonka, kam ishlatiladiganlari — «⋯» menyusida. Faqat kursor olib borilganda ko‘rsatish sensorli ekranlarda va klaviatura bilan ishlamaydi.
Ommaviy tanlash:
- birinchi ustunda chekboks va sarlavhada «hammasini tanlash»;
- tanlanganda tanlangan qatorlar soni ko‘rsatilgan amallar paneli paydo bo‘ladi;
- yozuvlar sahifadagidan ko‘p bo‘lsa, aniqlashtiring: sahifadagi hammasi tanlanganmi yoki barcha natijalarmi;
- xavfli ommaviy amallarni tasdiqlang, qaytariladiganlarini bekor qilish imkoniyati bilan bering.
Sahifalash, yuklanish va bo‘sh holatlar
| Yondashuv | Qachon mos |
|---|---|
| Sahifalash | Aniq joyga qaytish, sahifaga havola berish kerak |
| «Yana ko‘rsatish» | Qat’iy navigatsiyasiz ko‘rib chiqish |
| Cheksiz aylantirish | Ish jadvali emas, lenta |
| Virtualizatsiya | Bitta ko‘rinishda juda ko‘p qator |
Ish jadvallari uchun odatda qatorlar sonini tanlash imkoniyati bilan sahifalash yaxshiroq. Holatlarni ham unutmang: yuklanish (qatorlar skeleti), bo‘sh (keyin nima qilish kerak) va xato (qanday takrorlash).
Mobildagi jadvallar
Keng jadvalni shunchaki siqib bo‘lmaydi. Variantlar:
- Kartochkalar: har bir qator 2–4 ta asosiy maydon va tafsilotlarga o‘tish bilan kartochkaga aylanadi.
- Birinchi ustuni mahkamlangan gorizontal aylantirish — ustunlar bo‘yicha taqqoslash muhim bo‘lganda.
- Ustunlarni tanlash: tor ekranda faqat ustuvor ustunlar ko‘rsatiladi.
Telefondagi CRM uchun ko‘pincha kartochkalar mos keladi: u yerda odatda o‘nlab ustunlarni tahlil qilish emas, yozuvni topib bitta amalni bajarish kerak bo‘ladi.