UI — User Interface iborasining qisqartmasi bo‘lib, foydalanuvchi dastur yoki qurilma bilan bevosita o‘zaro ishlaydigan interfeys qatlamidir. Ekrandagi matn, tugma, forma, navigatsiya, rang, holat va animatsiya grafik UI tarkibiga kiradi. Buyruq qatori, ovozli boshqaruv va fizik panel ham foydalanuvchi interfeysi hisoblanadi.
Vizual ierarxiya
UI elementlarning qaysi biri muhimligini o‘lcham, kontrast, joylashuv va bo‘shliq orqali ko‘rsatadi. Bir sahifada hamma element bir xil urg‘uga ega bo‘lsa, foydalanuvchi keyingi amalni topishda qiynaladi. Sarlavha, asosiy action va yordamchi ma’lumot aniq darajalarga ajratiladi.
Bo‘shliq bezaksiz joy emas; u bog‘liq elementlarni guruhlaydi va guruhlar orasini ajratadi. Alignment tartibni ko‘rsatadi. Tipografik scale sarlavha, body va caption o‘rtasidagi farqni izchil saqlaydi.
Komponent va holatlar
Button, input, dialog, tab va table qayta ishlatiladigan komponentdir. Har komponent faqat normal ko‘rinishga emas, hover, focus, active, disabled, loading, error va empty holatlariga ega. Loadingda tugma qayta bosilsa duplicate amal ketishi mumkin; disabled yoki progress holati xatti-harakatni ham belgilaydi.
Forma labeli placeholderning o‘rnini bosmaydi, chunki placeholder yozish boshlanganda yo‘qoladi. Xato xabari qaysi maydon va qanday tuzatish kerakligini aniq bildiradi. Faqat qizil rangga tayanish rangni farqlamaydigan foydalanuvchiga ma’no bermaydi.
Design system
Design system rang, spacing, typography tokenlari va komponent qoidalarini birlashtiradi. Token color-primary-600 kabi semantik nom bilan design va kodda bir xil qarorni ifodalaydi. Component API variant, size va state’larni cheklab, turli sahifalarda izchillikni saqlaydi.
Design system barcha ekranlarni bir xil ko‘rsatish uchun qattiq template emas. U umumiy asos va accessibility xatti-harakatini beradi, mahsulot oqimi esa o‘z vazifasiga mos tuziladi.
Responsive interfeys
UI turli ekran va input usulida ishlaydi. Kichik ekran faqat desktopni proporsional kichraytirish emas; kontent ustuvorligi va navigatsiya qayta tashkil qilinadi. Touch target barmoq uchun yetarli, keyboard focus esa ko‘rinadigan bo‘ladi.
Breakpoints qurilma brendi bo‘yicha emas, layout qayerda buzilishiga qarab tanlanadi. Matn zoom va uzun tarjimada komponentdan chiqib ketmasligi tekshiriladi.
Accessibility
Semantik HTML, label, heading tartibi va native control yordamchi texnologiyaga ma’no beradi. Custom dropdown klaviatura navigatsiyasi, focus boshqaruvi va ARIA holatlarini o‘zi amalga oshirishi kerak. Kontrast, reduced motion va screen reader tekshiruvi UI sifatining bir qismidir.
UI va UX
UI interfeysning ko‘rinadigan va boshqariladigan qatlamiga, UX esa foydalanuvchining butun vazifani bajarish tajribasiga tegishli. Chiroyli tugma noto‘g‘ri jarayonni tuzatmaydi; yaxshi oqim esa o‘qib bo‘lmaydigan interfeys bilan to‘liq ishlamaydi. Ikkala tushuncha bog‘liq, ammo aynan bir xil emas.
Feedback va affordance
Interfeys elementining ko‘rinishi undan qanday foydalanishni anglatishi affordance bilan bog‘liq. Tugma bosiladigan, link navigatsiya qiladigan element sifatida izchil ko‘rinadi. Amal bajarilganda darhol feedback beriladi: bosilgan holat, progress, success yoki aniq error. Tarmoq amali uzoq bo‘lsa foydalanuvchi bosish qabul qilinganini biladi. Optimistic UI natijani server javobidan oldin ko‘rsatishi mumkin, ammo xato bo‘lsa holatni qaytarish va sababni bildirish kerak. Destructive amal boshqa actiondan ajraladi va ta’siriga mos tasdiqlash yoki undo mexanizmi oladi.
UI matni ham componentdir: action nomi noaniq bo‘lsa, vizual mukammallik vazifani tushunarli qilmaydi.
Bog‘liq tushunchalar
UX, design system, component, accessibility, responsive design, typography, interaction design